/* ANNA'S CHAT, reached from a bell in the corner of every page. The launcher and
   the panel are built by chat.js, so a page only needs this file and that one.
   Written in the door tokens the call panel uses (--door, --door-ink,
   --door-muted, --door-line, --accent), re-pointed here exactly as the call
   panel re-points them: a faint grey card with the site's ink, the Keris card
   shape and a soft shadow (Anthony, 9 Sep 2026: "A tinted"). The product
   pages' cards keep the black door tokens; only these two surfaces changed. */

/* The corner. Panel above, then the pill and the bell in a row under it. */
.anna-launch{--door:#f7f8f7;--door-ink:var(--ink);--door-muted:var(--muted);--door-line:#e3e6e4;position:fixed;right:24px;bottom:24px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:16px;font-family:var(--body);font-size:16px;line-height:1.55}
.anna-bell-row{display:flex;align-items:center;gap:10px}

/* Shown until the first open, then remembered as seen. */
.anna-pill{background:#fff;color:var(--door-ink);border:1px solid var(--door-line);border-radius:999px;font-size:12px;font-weight:600;padding:8px 14px;white-space:nowrap;box-shadow:0 12px 30px -16px rgba(17,20,23,.5)}

/* The bell is the one blue thing in the corner, the same blue as "Ring our receptionist", so it is seen on a white page. */
.anna-bell{height:56px;width:56px;padding:0;border-radius:50%;background:var(--accent);color:#fff;border:1px solid var(--accent);display:grid;place-items:center;flex:none;box-shadow:0 14px 30px -12px rgba(36,85,214,.6)}
.anna-bell:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.anna-bell svg{width:26px;height:26px;flex:none}
/* One button, two faces. The bell rings you in, the cross puts her away. */
.anna-bell .anna-x{display:none}
.anna-launch[data-open] .anna-bell .anna-ring{display:none}
.anna-launch[data-open] .anna-bell .anna-x{display:block}

.anna-panel{width:360px;height:540px;max-height:min(80vh,calc(100vh - 140px));max-height:min(80vh,calc(100dvh - 140px));background:var(--door);color:var(--door-ink);border:1px solid var(--door-line);border-radius:22px;padding:17px 20px 19px;display:flex;flex-direction:column;box-shadow:0 30px 70px -40px rgba(17,20,23,.45),0 2px 6px rgba(17,20,23,.05)}
/* The rise as it opens is an animation rather than a transition, because the
   panel comes back from the hidden attribute and there is nothing to
   transition from. An animation runs on the way in either way. */
.anna-launch[data-open] .anna-panel{animation:anna-rise .18s ease}
@keyframes anna-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The panel sits on the door colour, so focus rings have to be the door's ink
   rather than the page's. styles.css does the same for .call-panel. */
.anna-panel :focus-visible{outline-color:var(--door-ink)}
.anna-bell:focus-visible{outline-color:var(--accent)}

.anna-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--door-line)}
.anna-title{font-size:12px;font-weight:600}
.anna-close{background:none;border:0;color:var(--door-muted);font-size:21px;line-height:1;height:30px;width:30px;padding:0;display:grid;place-items:center;border-radius:3px;flex:none}
.anna-close:hover{color:var(--door-ink)}
.anna-body{flex:1;min-height:0;display:flex;flex-direction:column}

/* .chat-lines carries .transcript too, so the scrolling, the scrollbar colours
   and the line styles are the ones the call transcript already uses. Here it
   grows with the panel instead of holding the transcript's fixed height. */
.chat-lines{flex:1;height:auto;min-height:0;margin-top:0;border-top:0}
.chat-lines .transcript-line:first-child{padding-top:14px}
.chat-empty{padding-top:16px;font-size:13px;line-height:1.6;color:var(--door-muted)}
.chat-lines .transcript-line{align-items:flex-start}
.chat-lines .transcript-line.visitor{align-items:flex-end;padding-left:34px}
.chat-lines .words p{margin:0 0 7px}
.chat-lines .words p:last-child{margin-bottom:0}
/* The waiting line. The site's reduced motion rule stops every animation, so
   this settles to a plain dimmed line for anyone who asked for that. */
.chat-lines .transcript-line.pending .words{color:var(--door-muted);animation:chat-wait 1.4s ease-in-out infinite}
@keyframes chat-wait{0%,100%{opacity:.45}50%{opacity:1}}

#chat-form{display:flex;gap:8px;margin-top:15px}
#chat-input{flex:1;min-width:0;background:#fff;color:var(--door-ink);border:1px solid var(--line);border-radius:12px;min-height:46px;padding:11px 13px;font-size:14px}
#chat-input::placeholder{color:var(--door-muted)}
#chat-input:focus-visible{outline:2px solid var(--door-ink);outline-offset:2px}
#chat-input:disabled{opacity:.6}
.chat-send{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:12px;font-weight:600;min-height:46px;padding:11px 19px;font-size:14px;flex:none}
.chat-send:hover{background:var(--accent-hover)}

.chat-status{font-size:12px;line-height:1.6;margin-top:12px}
.chat-status:empty{display:none}
.chat-status a{font-weight:600}
.chat-privacy{font-size:11px;line-height:1.6;color:var(--door-muted);margin-top:10px}

/* Small screens: a bottom sheet the full width of the phone. The bell steps out
   of the way while the sheet is up, because the sheet covers the corner it
   stands in, and the sheet's own cross is the way back out. */
@media(max-width:599px){
  body{padding-bottom:84px}
  .anna-launch{right:16px;bottom:16px}
  .anna-panel{position:fixed;left:0;right:0;bottom:0;width:auto;height:85vh;height:85dvh;max-height:none;border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;padding:15px 18px 18px;box-shadow:0 -10px 30px -20px rgba(17,20,23,.5)}
  .anna-launch[data-open] .anna-bell-row{display:none}
  .chat-status{font-size:11px}
  .chat-privacy{font-size:10px}
}
/* Short desktop windows: the panel would otherwise want more height than the
   corner has to give it. */
@media(min-width:600px) and (max-height:700px){
  #chat-form{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .anna-launch[data-open] .anna-panel{animation:none}
}