/* Floating assistant: desktop pill, mobile bottom bar, chat panel */
.chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 22px 0 18px; border-radius: var(--r-pill); font-weight: 500; font-size: 15.5px;
  background: rgba(17, 16, 19, .88); border: 1px solid rgba(252, 85, 76, .45);
  box-shadow: 0 0 40px -12px var(--glow), 0 20px 40px -20px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .3s var(--ease), opacity .3s, border-color .3s;
}
.chat-fab:hover { transform: translateY(-2px); border-color: rgba(252, 85, 76, .8); }
.fab-ico { display: none; width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linejoin: round; }
/* Past the hero (quick.js) the pill shrinks to a 52px icon so it never covers content near the container edge. */
.chat-fab.is-compact { right: 20px; bottom: 20px; width: 52px; height: 52px; padding: 0; justify-content: center; }
.chat-fab.is-compact .pill-dot { display: none; }
.chat-fab.is-compact .fab-ico { display: block; }
.chat-fab.is-compact .fab-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.mbar { display: none; }

.chat {
  position: fixed; right: 24px; bottom: 24px; z-index: 70; width: 384px; height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: #0e0d10; border: 1px solid var(--line-2);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 80px -40px var(--glow);
  animation: chat-in .35s var(--ease);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px; border-bottom: 1px solid var(--line); }
.chat-head > div { flex: 1; min-width: 0; }
.chat-name { font-weight: 600; font-size: 16px; }
.chat-sub { color: var(--muted); font-size: 12.5px; line-height: 1.3; margin-top: 2px; }
.ch-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background-color .2s, color .2s; }
.ch-btn:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.ch-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; animation: ben-in .3s var(--ease); }
.msg-bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-user { align-self: flex-end; background: var(--grad); color: var(--ink); font-weight: 500; border-bottom-right-radius: 6px; }
.msg a { text-decoration: underline; text-underline-offset: 2px; }
.msg-bot .msg-cta { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(252, 85, 76, .5); text-decoration: none; font-size: 14px; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

.chat-chips { display: flex; gap: 8px; padding: 6px 18px 12px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chips button {
  flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--text);
  transition: border-color .2s, background-color .2s;
}
.chat-chips button:hover { border-color: rgba(252, 85, 76, .6); background: rgba(252, 85, 76, .08); }
.chat-form { display: flex; gap: 8px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; background: #0a090b; border: 1px solid var(--line-2); font-size: 16px;
}
.chat-form input::placeholder { color: var(--muted); opacity: 1; }
.chat-form input:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px rgba(252, 85, 76, .25); }
.chat-form button { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); color: var(--ink); display: grid; place-items: center; flex: none; }
.chat-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 899px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Keep focused fields clear of the fixed bottom bar (WCAG 2.4.11). */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .chat-fab { display: none; }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .82); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: transform .35s var(--ease), visibility 0s;
  }
  /* quick.js shows the bar only once the hero CTAs are off screen and the demo form is not in view. */
  .js .mbar:not(.is-shown) { transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
  .mbar .btn { flex: 1; height: 52px; }
  .mbar-chat { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(252, 85, 76, .5); display: grid; place-items: center; flex: none; }
  .mbar-chat svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linejoin: round; }
  .chat { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
  body.menu-open .mbar { display: none; }
}