/* =====================================================================
   chat.css: the "Stitch" chat widget (docs/DESIGN.md 5.33). Replaces the stylesheet chatbot.js used to inject.
   Loaded by the public pages and the customer portal, after the surface CSS. Tokens only. The message bubbles
   are the shared .msg / .msg-row component in ls.css; this file lays out the launcher, the panel and the composer.
   ===================================================================== */

/* ---------- Launcher: navy with a mustard ring, visible on cream and on navy sections alike ---------- */
#lsChatBtn { position: fixed; z-index: var(--z-fab);
             right: calc(var(--space-4) + env(safe-area-inset-right));
             bottom: calc(var(--space-4) + var(--bottom-ui-h, 0px) + env(safe-area-inset-bottom));
             display: grid; place-items: center; width: 56px; height: 56px; margin: 0; padding: 0;
             border: 0; border-radius: 50%; background: var(--navy); color: var(--white); cursor: pointer;
             box-shadow: 0 0 0 2px var(--mustard), var(--shadow-lg);
             transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
#lsChatBtn .icon { --icon-size: 26px; }
@media (hover: hover) { #lsChatBtn:hover { background: var(--navy-2); transform: translateY(-1px); } }
#lsChatBtn:active { transform: none; background: var(--navy-deep); }
/* A two-tone ring: navy outside for light pages, white inside for navy sections */
#lsChatBtn:focus-visible { outline: 2px solid transparent;
                           box-shadow: 0 0 0 2px var(--mustard), 0 0 0 4px var(--white), 0 0 0 7px var(--navy), var(--shadow-lg); }
#lsChatBtn[aria-expanded="true"] .chat-i-open, #lsChatBtn:not([aria-expanded="true"]) .chat-i-close { display: none; }
#lsChatBtn.is-away { visibility: hidden; }            /* a phone keyboard is open for a field on the page */
html.has-drawer #lsChatBtn, html.has-drawer #lsChat { visibility: hidden; }

/* The once-per-visit greeting on the home page */
.chat-hi { position: absolute; right: calc(100% + var(--space-3)); bottom: var(--space-2); padding: var(--space-2) var(--space-3);
           border: 1px solid var(--border); border-radius: var(--radius) var(--radius) var(--radius-xs) var(--radius);
           background: var(--surface); color: var(--navy); box-shadow: var(--shadow);
           font: var(--fw-bold) var(--fs-small)/1.3 var(--font-body); white-space: nowrap; pointer-events: none;
           animation: ls-chat-hi-in var(--dur-slow) var(--ease-out); }
.chat-hi.is-leaving { animation: ls-chat-hi-out var(--dur-base) var(--ease-in) forwards; }
@keyframes ls-chat-hi-in { from { opacity: 0; transform: translateX(8px); } }
@keyframes ls-chat-hi-out { to { opacity: 0; transform: translateX(8px); } }
/* Phones: beside the launcher the greeting can only sit over the page's own content (the hero facts, a form's
   button), so it stays hidden there; the launcher's mustard ring is the invitation. */
@media (max-width: 479.98px) { .chat-hi { display: none; } }

/* ---------- Panel: a non-modal dialog, a full-screen sheet on phones ---------- */
#lsChat { position: fixed; z-index: var(--z-fab);
          right: calc(var(--space-4) + env(safe-area-inset-right));
          bottom: calc(var(--space-4) + 56px + var(--space-3) + var(--bottom-ui-h, 0px) + env(safe-area-inset-bottom));
          display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 2 * var(--space-4));
          height: min(600px, calc(100dvh - 96px - var(--bottom-ui-h, 0px)));
          overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg);
          background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
          font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
          transform-origin: bottom right; animation: ls-chat-in var(--dur-base) var(--ease-out); }
#lsChat[hidden] { display: none; }
@keyframes ls-chat-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 479.98px) {
  #lsChat { inset: 0; width: auto; max-width: none; height: 100dvh; border: 0; border-radius: 0;
            padding-bottom: env(safe-area-inset-bottom); animation-name: ls-chat-sheet-in; }
  #lsChatBtn[aria-expanded="true"] { visibility: hidden; }     /* the sheet has its own close button */
}
@keyframes ls-chat-sheet-in { from { transform: translateY(24px); opacity: 0; } }

/* Header: navy, the on-dark scope (tokens.css), so the close button is white with a mustard focus ring */
.chat-head { display: flex; align-items: center; gap: var(--space-3); flex: none; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
             background: var(--navy); padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); }
.chat-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--mustard); }
.chat-av svg { width: 32px; height: 32px; }
.chat-id { flex: 1; min-width: 0; }
.chat-title { margin: 0; color: var(--text); font: var(--fw-heavy) var(--fs-body)/1.25 var(--font-body); }
.chat-sub { margin: 0; color: var(--muted); font-size: var(--fs-caption); }
.chat-close { flex: none; }

/* Conversation */
.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-3);
            padding: var(--space-4); background: var(--bg); }
.chat-log:focus-visible { outline-offset: -3px; }
.chat-log .msg-row { width: 100%; }
.chat-log .msg { width: fit-content; max-width: min(85%, 60ch); font-size: var(--fs-small); line-height: 1.5; }
.chat-log .msg-row.me .msg { margin-left: auto; }
.chat-row-av { background: var(--mustard); box-shadow: none; }
.chat-log .msg a { font-weight: var(--fw-bold); }
.chat-typing { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); }

/* Suggestions and composer */
.chat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: none; padding: 0 var(--space-4) var(--space-3); background: var(--bg); }
.chat-chips:empty { display: none; }
.chat-chips .chip-suggest { min-height: 36px; padding: 0 var(--space-3); font-size: var(--fs-caption); }
.chat-form { display: flex; align-items: center; gap: var(--space-2); flex: none; margin: 0; padding: var(--space-3); border-top: 1px solid var(--border); background: var(--surface); }
.chat-form input { flex: 1 1 auto; min-width: 0; width: auto; min-height: 44px; border-radius: var(--radius-pill); padding-inline: var(--space-4); font-size: 1rem; }   /* 16px: no zoom on iOS */
.chat-send { flex: none; width: 44px; min-height: 44px; }

/* Pages with the launcher keep their last actions clear of it on phones (5.33) */
@media (max-width: 767.98px) {
  body.has-chat.site .site-footer { padding-bottom: calc(var(--space-6) + 80px); }
  body.has-chat:not(.site) main { padding-bottom: 96px; }
}
@media print { #lsChatBtn, #lsChat { display: none !important; } }