/* ============================================================
   Totsy — TotsName AI Assistant styles
   Bottom-LEFT floating button + glassmorphism chat panel.
   Mobile-first · dark-mode aware · 60fps transforms only.
   ============================================================ */
:root{
  --ty-pur1:#23A8E0; --ty-pur2:#1B87C8; --ty-rose:#E6198D; --ty-orange:#FF7A1A;
  --ty-ink:#1F2733; --ty-mut:#6B7A88; --ty-line:rgba(35,168,224,.16);
  --ty-card:#ffffff; --ty-glass:rgba(255,255,255,.86);
  --ty-user:#1B87C8; --ty-bot:#EEF7FC;
}
[data-theme="dark"]{
  --ty-ink:#EAF2F8; --ty-mut:#9DB0BF; --ty-line:rgba(35,168,224,.28);
  --ty-card:#152230; --ty-glass:rgba(18,28,40,.86); --ty-bot:#1B2B3A;
}

/* ---------------- floating button (bottom-left) ---------------- */
.ty-fab{
  position:fixed; left:20px; bottom:20px; z-index:1400;
  width:70px; height:70px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:transparent;                 /* tap area stays 70px; colour is on inner disc */
  display:flex; align-items:center; justify-content:center;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  animation:ty-breathe 3.6s ease-in-out infinite;
}
/* the actual coloured circle. Ring = (disc − face)/2. Original 70/44 → 13px
   ring. New 58/44 → 7px ring ≈ 45% thinner. Baby face (.ty-face) unchanged. */
.ty-fab .ty-disc{
  position:absolute; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--ty-pur1),var(--ty-rose));
  box-shadow:0 14px 34px -10px rgba(35,168,224,.65), 0 4px 12px -4px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; z-index:0;
}
.ty-fab .ty-face, .ty-fab .ty-badge{ position:relative; z-index:1; }
.ty-fab:hover{ transform:scale(1.08) translateY(-3px);
  box-shadow:0 22px 44px -10px rgba(35,168,224,.85), 0 0 0 10px rgba(35,168,224,.14); }
.ty-fab:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.ty-fab .ty-disc::after{ /* soft glow pulse around the coloured disc */
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:radial-gradient(circle, rgba(35,168,224,.35), transparent 70%);
  z-index:-1; animation:ty-glow 3.6s ease-in-out infinite;
}
@keyframes ty-breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.035);} }
@keyframes ty-glow{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:1; transform:scale(1.12);} }

/* baby mascot face (pure CSS/SVG) */
.ty-face{ width:44px; height:44px; display:block; }
.ty-face .ty-eye{ animation:ty-blink 4.6s infinite; transform-origin:center; }
@keyframes ty-blink{ 0%,92%,100%{ transform:scaleY(1);} 95%,97%{ transform:scaleY(.08);} }

/* unread badge */
/*badge*/
.ty-badge{
  position:absolute; top:2px; right:2px; min-width:20px; height:20px; padding:0 5px;
  border-radius:100px; background:var(--ty-orange); color:#fff; font:800 11px/20px system-ui;
  text-align:center; box-shadow:0 3px 8px -2px rgba(240,0,107,.7);
  transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.ty-badge.on{ transform:scale(1); }

/* hidden state */
.ty-hidden{ display:none !important; }

/* ---------------- chat panel ---------------- */
.ty-panel{
  position:fixed; left:20px; bottom:100px; z-index:1401;
  width:420px; max-width:calc(100vw - 40px); height:650px; max-height:calc(100vh - 140px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ty-glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--ty-line); border-radius:24px;
  box-shadow:0 34px 80px -30px rgba(60,20,140,.55), 0 10px 30px -18px rgba(0,0,0,.3);
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transition:opacity .26s ease, transform .26s cubic-bezier(.34,1.4,.64,1);
}
.ty-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.ty-panel.expanded{ width:600px; height:min(80vh, 760px); }
.ty-panel.min{ height:64px; }
.ty-panel.min .ty-body, .ty-panel.min .ty-inputbar, .ty-panel.min .ty-tools{ display:none; }

/* header */
.ty-head{
  flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:12px 14px;
  background:linear-gradient(135deg,var(--ty-pur1),var(--ty-rose)); color:#fff;
}
.ty-head .ty-face{ width:36px; height:36px; flex:0 0 auto; }
.ty-head-txt{ flex:1 1 auto; min-width:0; }
.ty-head-txt b{ display:block; font-size:16px; letter-spacing:.01em; }
.ty-head-txt span{ display:block; font-size:11.5px; opacity:.88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ty-hbtn{
  flex:0 0 auto; width:32px; height:32px; border:0; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .18s, transform .18s;
}
.ty-hbtn:hover{ background:rgba(255,255,255,.3); transform:translateY(-1px); }
.ty-hbtn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* tools row (new chat / clear / language note) */
.ty-tools{ flex:0 0 auto; display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--ty-line); }
.ty-tool{
  border:1px solid var(--ty-line); background:var(--ty-card); color:var(--ty-mut);
  font:700 11.5px system-ui; padding:6px 11px; border-radius:100px; cursor:pointer;
  transition:color .18s, border-color .18s, transform .18s;
}
.ty-tool:hover{ color:var(--ty-pur2); border-color:var(--ty-pur1); transform:translateY(-1px); }

/* body / messages */
.ty-body{ flex:1 1 auto; overflow-y:auto; padding:16px 14px; scroll-behavior:smooth; overscroll-behavior:contain; }
.ty-msg{ display:flex; flex-direction:column; margin:0 0 12px; animation:ty-in .3s ease; }
@keyframes ty-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.ty-msg.user{ align-items:flex-end; }
.ty-msg.bot{ align-items:flex-start; }
.ty-bub{
  max-width:86%; padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.55;
  color:var(--ty-ink); background:var(--ty-bot); border:1px solid var(--ty-line);
  word-wrap:break-word; overflow-wrap:break-word;
}
.ty-msg.user .ty-bub{ background:linear-gradient(135deg,var(--ty-pur1),var(--ty-user)); color:#fff; border:0; border-bottom-right-radius:6px; }
.ty-msg.bot .ty-bub{ border-bottom-left-radius:6px; }
.ty-bub p{ margin:0 0 8px; } .ty-bub p:last-child{ margin:0; }
.ty-bub ul,.ty-bub ol{ margin:6px 0 8px; padding-left:20px; }
.ty-bub li{ margin:3px 0; }
.ty-bub a{ color:var(--ty-pur2); font-weight:700; text-decoration:underline; }
.ty-msg.user .ty-bub a{ color:#fff; }
.ty-bub code{ background:rgba(35,168,224,.1); padding:2px 6px; border-radius:6px; font-size:13px; }
.ty-bub pre{ background:#1E1633; color:#EFEAFB; padding:12px; border-radius:12px; overflow:auto; font-size:12.5px; margin:8px 0; }
.ty-bub pre code{ background:none; padding:0; color:inherit; }
.ty-bub table{ border-collapse:collapse; margin:8px 0; font-size:13px; width:100%; }
.ty-bub th,.ty-bub td{ border:1px solid var(--ty-line); padding:6px 8px; text-align:left; }
.ty-bub th{ background:rgba(35,168,224,.08); }
.ty-bub img{ max-width:100%; border-radius:10px; }

/* per-message action bar (copy / like / dislike / regen / speak) */
.ty-acts{ display:flex; gap:6px; margin-top:6px; }
.ty-act{
  border:0; background:transparent; color:var(--ty-mut); cursor:pointer; padding:4px;
  border-radius:8px; display:flex; align-items:center; transition:color .15s, background .15s;
}
.ty-act:hover{ color:var(--ty-pur2); background:rgba(35,168,224,.08); }
.ty-act.on{ color:var(--ty-pur2); }
.ty-act svg{ width:15px; height:15px; }

/* smart action chip */
.ty-chip{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:9px 15px;
  border-radius:100px; font:800 13px system-ui; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,var(--ty-rose),#FF4D2E);
  box-shadow:0 8px 18px -8px rgba(240,0,107,.6); transition:transform .18s;
}
.ty-chip:hover{ transform:translateY(-2px); }

/* typing indicator */
.ty-typing{ display:inline-flex; gap:5px; padding:12px 16px; }
.ty-typing i{ width:7px; height:7px; border-radius:50%; background:var(--ty-pur1); animation:ty-dot 1.1s infinite; }
.ty-typing i:nth-child(2){ animation-delay:.18s; } .ty-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes ty-dot{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-5px); opacity:1;} }

/* input bar */
.ty-inputbar{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:8px; padding:10px 12px;
  border-top:1px solid var(--ty-line); background:var(--ty-card);
}
.ty-input{
  flex:1 1 auto; max-height:110px; min-height:44px; resize:none; border:1.5px solid var(--ty-line);
  border-radius:14px; padding:11px 13px; font:inherit; font-size:14.5px; color:var(--ty-ink);
  background:var(--ty-card); line-height:1.4;
}
.ty-input:focus{ outline:none; border-color:var(--ty-pur1); box-shadow:0 0 0 4px rgba(35,168,224,.16); }
.ty-send,.ty-mic{
  flex:0 0 auto; width:44px; height:44px; border:0; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .16s, box-shadow .2s, opacity .2s;
}
.ty-send{ color:#fff; background:linear-gradient(135deg,var(--ty-pur1),var(--ty-pur2)); box-shadow:0 8px 18px -8px rgba(35,168,224,.7); }
.ty-send:hover{ transform:translateY(-2px); }
.ty-send:disabled{ opacity:.5; transform:none; cursor:default; }
.ty-mic{ color:var(--ty-pur2); background:rgba(35,168,224,.1); }
.ty-mic.rec{ background:var(--ty-rose); color:#fff; animation:ty-breathe 1s infinite; }
.ty-send:focus-visible,.ty-mic:focus-visible,.ty-tool:focus-visible,.ty-act:focus-visible{ outline:2px solid var(--ty-pur2); outline-offset:2px; }

/* footnote */
.ty-note{ flex:0 0 auto; text-align:center; font:600 10.5px system-ui; color:var(--ty-mut); padding:0 10px 8px; background:var(--ty-card); }

/* scrollbar */
.ty-body::-webkit-scrollbar{ width:8px; }
.ty-body::-webkit-scrollbar-thumb{ background:rgba(35,168,224,.25); border-radius:8px; }

/* ---------------- responsive ---------------- */
@media (max-width:640px){
  .ty-fab{ left:12px; bottom:12px; width:58px; height:58px; }
  .ty-fab .ty-disc{ width:48px; height:48px; }
  .ty-fab .ty-face{ width:36px; height:36px; }
  .ty-panel{
    left:0; right:0; bottom:0; width:100%; max-width:100%;
    height:100dvh; max-height:100dvh; border-radius:22px 22px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .ty-panel.expanded{ width:100%; height:100dvh; }
}
@media (prefers-reduced-motion:reduce){
  .ty-fab,.ty-fab::after,.ty-face .ty-eye,.ty-typing i,.ty-mic.rec{ animation:none !important; }
  .ty-panel{ transition:opacity .15s; }
}
@media (prefers-contrast:more){
  .ty-bub{ border-width:2px; } .ty-tool{ border-width:2px; }
}

/* Tooly-style quick action chips under the greeting */
.ty-quick{ display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 12px; }
.ty-qbtn{
  border:1px solid var(--ty-line); background:var(--ty-card); color:var(--ty-ink);
  font:700 12px system-ui; padding:7px 12px; border-radius:100px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  transition:border-color .18s, transform .18s, box-shadow .2s;
}
.ty-qbtn:hover{ border-color:var(--ty-pur1); transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(35,168,224,.5); }
.ty-qbtn:focus-visible{ outline:2px solid var(--ty-pur2); outline-offset:2px; }

/* ============================================================
   v10.26 — UI/UX audit fixes: spacing, alignment, mobile safe-area,
   quick-menu, retry, accessibility, branding polish
   ============================================================ */

/* message spacing + readability */
.ty-body{ padding:18px 15px 20px; }
.ty-msg{ margin:0 0 16px; }
.ty-msg:last-child{ margin-bottom:4px; }
.ty-bub{ max-width:84%; padding:12px 15px; line-height:1.6; font-size:15px; letter-spacing:.005em; }
.ty-msg.bot .ty-bub{ box-shadow:0 2px 8px -6px rgba(31,39,51,.25); }

/* clearer bot vs user alignment */
.ty-msg.bot{ padding-right:24px; }
.ty-msg.user{ padding-left:24px; }

/* timestamps (never overlap bubbles) */
.ty-time{ display:block; font-size:10.5px; color:var(--ty-mut); margin:5px 2px 0; opacity:.8; }
.ty-msg.user .ty-time{ text-align:right; }

/* quick chips — wider, wrap cleanly, never cover messages */
.ty-quick{ gap:8px; margin:4px 0 14px; }
.ty-qbtn{ font-size:12.5px; padding:8px 14px; min-height:36px; }
.ty-qbtn:nth-child(1){ border-color:rgba(35,168,224,.4); }
.ty-qbtn:nth-child(2){ border-color:rgba(230,25,141,.4); }
.ty-qbtn:nth-child(3){ border-color:rgba(255,122,26,.4); }

/* action chip uses orange accent */
.ty-chip{ background:linear-gradient(135deg,var(--ty-orange),var(--ty-rose)); }

/* smart-action / retry buttons */
.ty-retry{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:9px 16px;
  border-radius:100px; font:800 13px system-ui; color:#fff; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--ty-pur1),var(--ty-pur2)); box-shadow:0 8px 18px -8px rgba(35,168,224,.6); }
.ty-retry:hover{ transform:translateY(-2px); }

/* accessibility: min 44px touch targets */
.ty-hbtn{ width:36px; height:36px; }
.ty-act{ min-width:30px; min-height:30px; }
.ty-send,.ty-mic{ width:46px; height:46px; }

/* MOBILE: send button must NEVER sit behind the floating WhatsApp button.
   The WhatsApp FAB is bottom-right; the input bar reserves right padding and
   respects the iOS/Android safe area. Totsy panel is full-screen on mobile
   so the input sits at the very bottom with safe spacing. */
@media (max-width:640px){
  .ty-inputbar{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    gap:9px;
  }
  .ty-panel{ padding-bottom:0; }
  /* when Totsy is OPEN full-screen, hide the WhatsApp button so it can't
     overlap Totsy's input/send on small screens */
  body.ty-open-mobile #wa-float-btn{ display:none !important; }
}

/* keep WhatsApp button clear of the Totsy FAB on the opposite corner always */
#wa-float-btn{ z-index:1390; }

/* focus-visible everywhere for keyboard users */
.ty-qbtn:focus-visible,.ty-retry:focus-visible,.ty-chip:focus-visible{ outline:3px solid var(--ty-pur1); outline-offset:2px; }

/* higher-contrast bot text */
.ty-bub{ color:var(--ty-ink); }
.ty-note{ color:var(--ty-mut); }

/* ============================================================
   v10.27 — audit round 2: logo ring, mic states, spacing, bubbles
   ============================================================ */

/* mic states */
.ty-mic{ position:relative; }
.ty-mic.rec{ background:var(--ty-rose); color:#fff; animation:ty-breathe 1s infinite; }
.ty-mic.rec::after{ content:""; position:absolute; inset:-4px; border-radius:14px; border:2px solid var(--ty-rose); opacity:.5; animation:ty-glow 1.2s infinite; }
.ty-mic.ty-mic-proc{ background:var(--ty-orange); color:#fff; }
.ty-mic.ty-mic-off{ opacity:.5; }

/* 3) chat action icons — equal spacing, larger touch area, clear states */
.ty-acts{ gap:2px; margin-top:8px; align-items:center; }
.ty-act{ width:34px; height:34px; min-width:34px; min-height:34px; border-radius:9px; justify-content:center; }
.ty-act svg{ width:16px; height:16px; }
.ty-act:hover{ background:rgba(35,168,224,.1); color:var(--ty-pur2); }
.ty-act:active{ transform:scale(.9); }
.ty-act.on{ color:var(--ty-rose); }
@media (max-width:640px){ .ty-act{ width:38px; height:38px; } }

/* 4) AI bubble wider + more padding + readability */
.ty-msg.bot .ty-bub{ max-width:90%; padding:13px 16px; font-size:15px; line-height:1.62; }
.ty-panel.expanded .ty-msg.bot .ty-bub{ max-width:82%; }
.ty-msg.bot{ padding-right:14px; }
.ty-bub{ hyphens:none; }

/* 5) mobile input — consistent height, vertically centered mic/send */
.ty-inputbar{ align-items:center; }
.ty-input{ min-height:46px; }
.ty-send,.ty-mic{ align-self:center; flex:0 0 auto; }

/* 6) desktop window — roomier header, bubbles, scrollbar, padding */
.ty-head{ padding:14px 16px; gap:12px; }
.ty-head-txt b{ font-size:16.5px; }
.ty-body{ padding:20px 16px 22px; }
.ty-msg{ margin-bottom:18px; }
.ty-body::-webkit-scrollbar{ width:9px; }
.ty-body::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--ty-pur1),var(--ty-rose)); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
.ty-body::-webkit-scrollbar-track{ background:transparent; }

/* 7) header buttons — equal size/spacing, consistent hover */
.ty-head .ty-hbtn{ width:34px; height:34px; border-radius:10px; margin-left:2px; }
.ty-head .ty-hbtn:first-of-type{ margin-left:6px; }
.ty-hbtn:hover{ background:rgba(255,255,255,.3); transform:translateY(-1px); }
.ty-hbtn:active{ transform:scale(.92); }

/* 8) tools row buttons use brand accents */
.ty-tool:hover{ color:var(--ty-pur2); border-color:var(--ty-pur1); }

/* ============================================================
   v10.28 — actions BELOW bubble · FAB/WhatsApp −25% · green+blue brand
   ============================================================ */

/* NEW BRAND: vibrant green + vibrant blue (overrides earlier palette) */
:root{
  --ty-pur1:#00A8E8;   /* vibrant blue  */
  --ty-pur2:#0091EA;
  --ty-rose:#00C853;   /* vibrant green (used as the 2nd gradient stop) */
  --ty-green:#00C853;
  --ty-blue:#00A8E8;
}
[data-theme="dark"]{ --ty-pur1:#00A8E8; --ty-pur2:#0091EA; --ty-rose:#00C853; }

/* FAB circle + header = green→blue gradient */
.ty-fab .ty-disc{ background:linear-gradient(135deg,var(--ty-green),var(--ty-blue)) !important; }
.ty-head{ background:linear-gradient(135deg,var(--ty-green),var(--ty-blue)) !important; }
/* Heading text stays white on the gradient; the panel title colour accent = blue */
.ty-head-txt b{ color:#fff !important; }

/* 1) ACTION ICONS BELOW the conversation bubble (own full-width row) */
.ty-msg{ display:flex; flex-direction:column; }
.ty-msg.bot{ align-items:flex-start; }
.ty-msg.user{ align-items:flex-end; }
.ty-bub{ display:block; }
.ty-acts{
  display:flex; flex-direction:row; flex-wrap:nowrap;
  gap:4px; margin:6px 0 0 2px; width:auto; align-self:flex-start;
  justify-content:flex-start;
}
/* ensure the bubble never shares a row with the icons */
.ty-msg.bot > .ty-bub{ margin-bottom:0; }

/* 2) FAB −25% : 70→52 tap, 58→44 disc ; mobile 58→44 tap, 48→36 disc */
.ty-fab{ width:52px !important; height:52px !important; }
.ty-fab .ty-disc{ width:44px !important; height:44px !important; }
.ty-fab .ty-face{ width:34px !important; height:34px !important; }
@media (max-width:640px){
  .ty-fab{ width:44px !important; height:44px !important; }
  .ty-fab .ty-disc{ width:36px !important; height:36px !important; }
  .ty-fab .ty-face{ width:28px !important; height:28px !important; }
}
/* panel sits above the smaller FAB */
.ty-panel{ bottom:84px; }
@media (max-width:640px){ .ty-panel{ bottom:0; } }

/* ============================================================
   v10.36 — premium redesign: compact header, roomier conversation
   area, bigger bubbles, More menu, scroll-aware auto-scroll,
   outside-click/ESC close, thin auto-hide scrollbar, calmer motion.
   Only visual/UX rules — no business logic touched.
   ============================================================ */

/* ---- 1) HEADER: ~40% shorter, tightly centered, no dead space ---- */
.ty-head{
  padding:7px 10px 7px 14px; gap:8px; min-height:0;
}
.ty-head .ty-face{ width:26px; height:26px; }
.ty-head-txt{ line-height:1.15; }
.ty-head-txt b{ font-size:14px; letter-spacing:.005em; }
.ty-head-txt span{ font-size:10px; }
.ty-head-btns{ display:flex; align-items:center; flex:0 0 auto; }
.ty-head .ty-hbtn{ width:26px; height:26px; border-radius:8px; margin-left:2px; }
.ty-head .ty-hbtn:first-of-type{ margin-left:4px; }
.ty-head .ty-hbtn svg{ width:14px; height:14px; }
#ty-more svg{ width:15px; height:15px; }

/* ---- 2) "More" menu — New chat / Clear history now live here instead
   of a permanently-visible row, giving the conversation area back that
   space. Positioned as a small dropdown under the ⋮ button. ---- */
.ty-more-menu{
  position:absolute; top:46px; right:12px; min-width:176px; z-index:30;
  background:var(--ty-card); border:1px solid var(--ty-line); border-radius:14px;
  box-shadow:0 20px 44px -16px rgba(20,30,45,.4); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.97); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.ty-more-menu.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.ty-more-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; background:transparent; color:var(--ty-ink); font:700 13px system-ui;
  padding:10px 12px; border-radius:9px; cursor:pointer; transition:background .15s;
}
.ty-more-item:hover{ background:var(--ty-bot); }
.ty-more-item:focus-visible{ outline:2px solid var(--ty-pur2); outline-offset:-2px; }

/* ---- 3) CONVERSATION AREA: the freed-up header/footer/tools-row space
   now belongs to the message list. .ty-body-wrap is the flex child that
   fills the remaining height; .ty-body scrolls inside it. ---- */
.ty-body-wrap{ position:relative; flex:1 1 auto; min-height:0; display:flex; overflow:hidden; }
.ty-body-wrap > .ty-body{ flex:1 1 auto; min-height:0; width:100%; }

/* "⬇ New messages" pill — only shown when the user has scrolled up to
   read older messages and a new one arrives; never forces a scroll. */
.ty-newmsg{
  position:absolute; left:50%; bottom:12px; z-index:5;
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  border:0; border-radius:100px; cursor:pointer;
  font:800 12.5px system-ui; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,var(--ty-pur1),var(--ty-pur2));
  box-shadow:0 12px 26px -10px rgba(0,0,0,.4);
  opacity:0; transform:translateX(-50%) translateY(8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.ty-newmsg.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.ty-newmsg[hidden]{ display:none; }
.ty-newmsg:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---- 4) MESSAGE BUBBLES: bigger, more readable, premium spacing ---- */
.ty-msg.bot .ty-bub, .ty-msg.user .ty-bub{
  max-width:90%; font-size:16px; line-height:1.7; padding:18px 20px; border-radius:18px;
}
.ty-msg.user .ty-bub{ border-bottom-right-radius:6px; }
.ty-msg.bot .ty-bub{ border-bottom-left-radius:6px; }
.ty-panel.expanded .ty-msg.bot .ty-bub, .ty-panel.expanded .ty-msg.user .ty-bub{ max-width:78%; }
.ty-bub p{ margin:0 0 10px; } .ty-bub p:last-child{ margin:0; }

/* ---- 5) FOOTER: tighter, disclaimer pulled right up to the input ---- */
.ty-inputbar{ padding:6px 12px 4px; gap:8px; }
.ty-input{ min-height:40px; max-height:128px; padding:9px 13px; font-size:15px; line-height:1.5; }
.ty-send,.ty-mic{ width:40px; height:40px; border-radius:12px; }
.ty-note{ padding:0 10px 4px; margin-top:-3px; font-size:9.5px; }

/* ---- 6) PANEL SIZING: desktop 540–560px max width, 80–85vh max height ---- */
.ty-panel{
  width:480px; max-width:calc(100vw - 40px);
  height:min(80vh,660px); max-height:85vh;
}
.ty-panel.expanded{ width:560px; max-width:calc(100vw - 40px); height:min(85vh,760px); max-height:85vh; }
.ty-panel.min{ height:48px; }
.ty-panel.min .ty-body-wrap, .ty-panel.min .ty-inputbar, .ty-panel.min .ty-note{ display:none; }

/* tablet: scale automatically between mobile and the desktop max */
@media (min-width:641px) and (max-width:1024px){
  .ty-panel{ width:440px; height:min(78vh,620px); }
  .ty-panel.expanded{ width:520px; height:min(82vh,700px); }
}

/* mobile: "almost full screen" but with real safe margins, not edge-to-edge */
@media (max-width:640px){
  .ty-panel{
    left:8px; right:8px;
    top:max(10px, env(safe-area-inset-top));
    bottom:max(8px, env(safe-area-inset-bottom));
    width:auto; max-width:none; height:auto; max-height:none;
    border-radius:20px; border:1px solid var(--ty-line);
  }
  .ty-panel.expanded{ width:auto; height:auto; }
  .ty-newmsg{ bottom:10px; }
}

/* ---- 7) ANIMATIONS: fade+scale ~180ms, no bounce/overshoot ---- */
.ty-panel{
  transition:opacity .18s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}
@keyframes ty-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.ty-msg{ animation-duration:.22s; animation-timing-function:ease-out; }

/* ---- 8) SCROLLBAR: thin, modern, invisible until actively scrolling ---- */
.ty-body{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.ty-body.scrolling{ scrollbar-color:rgba(35,168,224,.4) transparent; }
.ty-body::-webkit-scrollbar{ width:6px; }
.ty-body::-webkit-scrollbar-track{ background:transparent; }
.ty-body::-webkit-scrollbar-thumb{ background:transparent; border-radius:8px; transition:background .2s; }
.ty-body.scrolling::-webkit-scrollbar-thumb{ background:rgba(35,168,224,.4); }

/* ---- 9) reduced motion: keep it calm ---- */
@media (prefers-reduced-motion:reduce){
  .ty-more-menu, .ty-newmsg{ transition:opacity .1s linear !important; transform:none !important; }
}