/* ============================================================
   Szabitrans AI chat assistant — widget styles (chat.css)
   Loaded site-wide. Reuses the site.css design tokens (accent, glass,
   fonts). Floating launcher bottom-right; panel is a card on desktop and
   a bottom sheet on mobile (kept clear of the sticky mobile CTA).
   ============================================================ */

/* ---- Launcher button ---- */
.sbchat-toggle{
  position:fixed; right:clamp(1rem,2.5vw,1.6rem); bottom:clamp(1rem,2.5vw,1.6rem);
  z-index:1300; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent,#cc1f1f); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(204,31,31,.42), 0 4px 12px rgba(0,0,0,.4);
  transition:transform .25s var(--ease-out,ease), background .25s ease, box-shadow .25s ease;
}
.sbchat-toggle:hover{ background:var(--accent-hover,#e23030); transform:translateY(-3px) scale(1.04); }
.sbchat-toggle:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.sbchat-toggle svg{ width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sbchat-toggle .sbchat-badge{
  position:absolute; top:-3px; right:-3px; width:14px; height:14px; border-radius:50%;
  background:#37c46b; border:2px solid var(--footer,#2a2a2a);
}
body.sbchat-open .sbchat-toggle{ opacity:0; visibility:hidden; transform:scale(.6); }

/* keep the launcher above the sticky mobile CTA (which is ~74px tall) */
@media (max-width:760px){
  .sbchat-toggle{ bottom:calc(74px + env(safe-area-inset-bottom,0px) + .55rem); right:.9rem; width:54px; height:54px; }
}

/* ---- Panel ---- */
.sbchat-panel{
  position:fixed; right:clamp(1rem,2.5vw,1.6rem); bottom:clamp(1rem,2.5vw,1.6rem);
  z-index:1310; width:min(380px,calc(100vw - 2rem)); height:min(560px,calc(100dvh - 2rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(28,28,30,.96); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12); border-radius:18px;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  transform-origin:bottom right;
  animation:sbchatIn .28s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.sbchat-panel[hidden]{ display:none; }
@keyframes sbchatIn{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
@keyframes sbchatOut{ from{opacity:1; transform:none} to{opacity:0; transform:translateY(16px) scale(.97)} }
.sbchat-panel.sbchat-closing{ animation:sbchatOut .22s var(--ease-out,cubic-bezier(.16,1,.3,1)) forwards; }
@media (prefers-reduced-motion:reduce){ .sbchat-panel,.sbchat-panel.sbchat-closing{animation:none} .sbchat-toggle{transition:none} }

@media (max-width:600px){
  .sbchat-panel{
    right:0; left:0; bottom:0; width:100%;
    height:min(86dvh,640px); border-radius:18px 18px 0 0;
  }
  /* the panel covers the screen bottom → hide the sticky CTA while chatting */
  body.sbchat-open .mobile-cta{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* ---- Header ---- */
.sbchat-head{
  display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem;
  background:linear-gradient(180deg,rgba(204,31,31,.18),rgba(204,31,31,0));
  border-bottom:1px solid rgba(255,255,255,.10); flex:none;
}
.sbchat-head .sbchat-av{
  width:34px; height:34px; border-radius:50%; background:var(--accent,#cc1f1f);
  display:grid; place-items:center; flex:none;
}
.sbchat-head .sbchat-av svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; }
.sbchat-titlewrap{ display:flex; flex-direction:column; line-height:1.2; }
.sbchat-title{ font-family:var(--font-display,sans-serif); font-weight:600; color:#fff; font-size:1rem; }
.sbchat-status{ font-size:.74rem; color:#9fe6b6; display:flex; align-items:center; gap:.35rem; }
.sbchat-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#37c46b; }
.sbchat-close{
  margin-left:auto; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff; font-size:1.4rem; line-height:1; display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.sbchat-close:hover{ background:var(--accent,#cc1f1f); transform:rotate(90deg); }
.sbchat-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---- Message log ---- */
.sbchat-log{
  flex:1 1 auto; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem;
  scrollbar-width:thin; scrollbar-color:var(--accent,#cc1f1f) transparent;
  overscroll-behavior:contain;   /* scrolling the conversation never chains to the page */
}
.sbchat-log::-webkit-scrollbar{ width:7px; }
.sbchat-log::-webkit-scrollbar-thumb{ background:var(--accent,#cc1f1f); border-radius:4px; }
.sbchat-msg{ max-width:85%; padding:.62rem .85rem; border-radius:14px; font-size:.92rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.sbchat-msg.bot{ align-self:flex-start; background:rgba(255,255,255,.07); color:var(--text-soft,#e6e6e6); border:1px solid rgba(255,255,255,.08); border-bottom-left-radius:5px; }
.sbchat-msg.user{ align-self:flex-end; background:var(--accent,#cc1f1f); color:#fff; border-bottom-right-radius:5px; }
.sbchat-msg a{ color:#ffd2d2; text-decoration:underline; }
.sbchat-msg.user a{ color:#fff; }

/* typing indicator */
.sbchat-typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:.7rem .85rem; background:rgba(255,255,255,.07); border-radius:14px; border-bottom-left-radius:5px; }
.sbchat-typing span{ width:7px; height:7px; border-radius:50%; background:var(--accent-hover,#e23030); opacity:.5; animation:sbchatBounce 1.1s infinite ease-in-out; }
.sbchat-typing span:nth-child(2){ animation-delay:.15s; } .sbchat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes sbchatBounce{ 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-5px);opacity:1} }
@media (prefers-reduced-motion:reduce){ .sbchat-typing span{animation:none} }

/* ---- Suggested-question chips ---- */
.sbchat-chips{ display:flex; flex-wrap:wrap; gap:.45rem; padding:0 1rem .4rem; }
.sbchat-chip{
  font:inherit; font-size:.82rem; cursor:pointer; color:var(--text-soft,#e6e6e6);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:50px; padding:.45rem .8rem;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.sbchat-chip:hover{ border-color:rgba(204,31,31,.6); background:rgba(204,31,31,.12); transform:translateY(-1px); }

/* ---- Input ---- */
.sbchat-form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid rgba(255,255,255,.10); flex:none; }
.sbchat-input{
  flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:50px; padding:.6rem .95rem; color:#fff; font:inherit;
  /* 16px (not <16px) prevents iOS/Android auto-zooming into the field on focus,
     which was making the panel overflow the screen */
  font-size:16px;
}
.sbchat-input::placeholder{ color:rgba(255,255,255,.45); }
.sbchat-input:focus{ outline:none; border-color:var(--accent,#cc1f1f); }
.sbchat-send{
  flex:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent,#cc1f1f); color:#fff; display:grid; place-items:center;
  transition:background .2s ease, transform .15s ease;
}
.sbchat-send:hover{ background:var(--accent-hover,#e23030); transform:scale(1.06); }
.sbchat-send:disabled{ opacity:.5; cursor:default; transform:none; }
.sbchat-send svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.sbchat-note{ margin:0; padding:0 1rem .7rem; font-size:.68rem; color:var(--text-muted,#9a9a9a); text-align:center; }

/* hide entirely if JS disabled (the markup is inert without it) */
html:not(.js) .sbchat-toggle, html:not(.js) .sbchat-panel{ display:none; }

/* Keep the back-to-top button stacked ABOVE the chat launcher so they never overlap
   (both sit bottom-right). Loaded after site.css, so this wins. */
.to-top{ right:clamp(1rem,2.5vw,1.6rem); bottom:calc(clamp(1rem,2.5vw,1.6rem) + 58px + 1.8rem); }
@media (max-width:760px){
  .to-top{ right:.9rem; bottom:calc(74px + env(safe-area-inset-bottom,0px) + .55rem + 54px + 1.5rem); }
}