/* ============================================================================
   Answers — Chat screen (chat.html / answers-chat.js)
   The chat frame, the escalation line, the transcript and the composer.
   Header and nav come from answers-shell.css, the history panel from
   answers-history.css.
   ========================================================================== */

/* Depends on design-tokens.css and answers-shell.css being <link>ed first (no @import:
   imported URLs can't carry the ?v= cache-busting version the HTML uses). */
/* ---- Page shell ---------------------------------------------------------- */
html, body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--ans-canvas);
  font-family: var(--ans-font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ans-ink);
}

/* The widget: a phone-width column, centered, with the app's elevation.
   On small screens it fills the viewport (true embed). */
.answers-chat {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  /* svh after the vh fallback, not dvh — see .answers-app in
     answers-shell.css for why: dvh can report its LARGE value on first
     paint even while the browser's address bar is still fully shown,
     sizing this box taller than what's actually visible and pushing the
     footer nav (and the escalation hint above it) below the fold. The
     Chat screen uses its own top-level wrapper instead of .answers-app,
     so it needed this fix applied separately. */
  height: 100vh;
  height: 100svh;
  max-height: 760px;
  margin: 24px auto;
  background: var(--ans-canvas);
  border-radius: 22px;
  /* clip, not hidden — see .answers-app in answers-shell.css: hidden leaves
     this a programmatically-scrollable container that mobile browsers shift
     to reveal the keyboard-focused input (chat's own send box, or the
     staged-attachment input), sticking the whole shell scrolled. */
  overflow: hidden;
  overflow: clip;
  box-shadow: 0 24px 60px rgba(0, 20, 45, 0.18), 0 0 0 1px var(--ans-line-soft);
}
@media (max-width: 480px) {
  /* Phones: the frame IS the app — the document must never scroll. Without
     this, the browser can scroll the page while the on-screen keyboard is
     up (e.g. attaching a file to translate) and some browsers leave that
     scroll offset behind after the keyboard closes, exposing a dead strip
     below the footer nav (the same strip the closed feedback sheet used to
     leak into). answers-pwa.js pairs this by sizing the frame to the live
     viewport height. */
  html, body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .answers-chat {
    margin: 0;
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100svh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- Escalation hint (below the widget) ---------------------------------- */
.answers-escalate {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  font-size: 11.5px;
  color: var(--ans-slate);
  background: #f5f7fb;
  text-decoration: none;
  border-top: 1px solid var(--ans-line);
}
.answers-escalate strong {
  color: var(--ans-blue-500);
  font-weight: 600;
}
.answers-escalate a { color: var(--ans-blue-500); text-decoration: none; }
.answers-escalate a:hover { text-decoration: underline; }
.answers-escalate:focus-visible {
  outline: 2px solid var(--ans-blue-500);
  outline-offset: -2px;
}

/* ---- Transcript ---------------------------------------------------------- */
.cc {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ans-canvas);
}

/* The chat header names it an AI assistant: neutral, not a green "online". */
.answers-header__status { color: var(--ans-slate); white-space: nowrap; }
/* Room for the New chat button: the header's gap already spaces the Beta chip. */
.answers-header__controls .answers-beta-chip { margin-right: 0; }

/* "New chat": an icon button in the header once a chat has started. */
.cc-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ans-line);
  border-radius: 50%;
  background: var(--ans-surface);
  color: var(--ans-blue-500);
  cursor: pointer;
}
.cc-new[hidden] { display: none; }
.cc-new svg { width: 18px; height: 18px; }

.cc-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.cc-msg { display: flex; }
.cc-msg--user { justify-content: flex-end; }

/* Answers are read on a phone, often standing in a queue: 15px with room
   to breathe, and wide bubbles so long answers don't become tall columns. */
.cc-bubble {
  max-width: 86%;
  padding: 11px 14px;
  font: 15px / 1.55 var(--ans-font-body);
  overflow-wrap: anywhere;
}
.cc-msg--bot .cc-bubble { max-width: 92%; }
.cc-msg--bot .cc-bubble {
  background: var(--ans-surface);
  border: 1px solid var(--ans-line-soft);
  border-radius: var(--ans-r-bubble) var(--ans-r-bubble) var(--ans-r-bubble) var(--ans-r-tail);
  box-shadow: var(--ans-shadow-bot);
  color: var(--ans-ink);
}
.cc-msg--user .cc-bubble {
  background: var(--ans-grad-user);
  border-radius: var(--ans-r-bubble) var(--ans-r-bubble) var(--ans-r-tail) var(--ans-r-bubble);
  box-shadow: var(--ans-shadow-user);
  color: #fff;
  white-space: pre-wrap;
}

/* ---- Rendered Markdown inside bot bubbles -------------------------------- */
.cc-bubble p,
.cc-bubble ul,
.cc-bubble ol,
.cc-bubble blockquote,
.cc-bubble pre,
.cc-bubble .cc-table { margin: 0 0 8px; }
.cc-bubble > :last-child { margin-bottom: 0; }
.cc-bubble ul,
.cc-bubble ol { padding-left: 20px; }
.cc-bubble li { margin: 2px 0; }
.cc-bubble a { color: var(--ans-blue-500); }
.cc-bubble .cc-h { font-weight: 700; color: var(--ans-navy-900); }
.cc-bubble blockquote {
  padding: 8px 11px;
  border-left: 3px solid var(--ans-gold);
  background: var(--ans-canvas);
  border-radius: 8px;
}
.cc-bubble hr { border: 0; border-top: 1px solid var(--ans-line); margin: 10px 0; }
.cc-bubble code {
  font: 0.95em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--ans-canvas);
  padding: 1px 4px;
  border-radius: 4px;
}
.cc-bubble pre { overflow-x: auto; background: var(--ans-canvas); padding: 8px; border-radius: 8px; }
.cc-bubble pre code { background: none; padding: 0; }
.cc-table { overflow-x: auto; }
.cc-bubble table { border-collapse: collapse; width: 100%; }
.cc-bubble th,
.cc-bubble td {
  text-align: left;
  vertical-align: top;
  padding: 5px 8px;
  border-bottom: 1px solid var(--ans-line);
}
.cc-bubble th { font-weight: 700; color: var(--ans-navy-900); }

.cc-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ans-line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ans-slate);
}
.cc-sources a { color: var(--ans-slate); }

.cc-error {
  margin-top: 6px;
  color: #a2362b;
}
.cc-error a { color: inherit; }

/* ---- Typing indicator ---------------------------------------------------- */
.cc-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.cc-typing-note { margin-left: 8px; font-size: 13.5px; color: var(--ans-slate); }
.cc-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ans-slate-400);
  animation: cc-blink 1.2s infinite ease-in-out;
}
.cc-typing i:nth-child(2) { animation-delay: 0.15s; }
.cc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cc-blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* ---- Composer ------------------------------------------------------------ */
.cc-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ans-surface);
  border-top: 1px solid var(--ans-line);
}
.cc-compose textarea {
  flex: 1;
  resize: none;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--ans-line);
  border-radius: var(--ans-r-input);
  font: 16px / 1.35 var(--ans-font-body); /* 16px: no iOS zoom-on-focus */
  color: var(--ans-navy-900);
  background: var(--ans-surface);
}
.cc-compose textarea::placeholder { color: var(--ans-slate-400); }
.cc-compose textarea:focus { outline: 2px solid var(--ans-blue-300); outline-offset: -1px; }
.cc-compose button[type="submit"] {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ans-grad-user);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cc-compose button[type="submit"]:disabled { opacity: 0.5; cursor: default; }
.cc-compose button[type="submit"] svg { width: 20px; height: 20px; }

/* ---- Attachments --------------------------------------------------------- */
.cc-attach {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ans-slate);
  cursor: pointer;
}
.cc-attach:hover { background: var(--ans-canvas); color: var(--ans-blue-500); }
.cc-attach svg { width: 21px; height: 21px; }
.cc-attach:focus-within { outline: 2px solid var(--ans-blue-300); }

.cc-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
  background: var(--ans-surface);
  border-top: 1px solid var(--ans-line);
}
.cc-tray[hidden] { display: none; }
.cc-tray + .cc-compose { border-top: 0; }

.cc-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--ans-line);
  border-radius: 10px;
  background: var(--ans-canvas);
  color: var(--ans-ink);
  font-size: 12px;
}
.cc-file img { width: 36px; height: 36px; object-fit: cover; border-radius: 7px; }
.cc-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.cc-file__remove {
  border: 0;
  background: none;
  color: var(--ans-slate);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
}
.cc-msg--user .cc-file {
  display: flex;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ---- Under each answer: Share, Report a problem -------------------------- */
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 -3px;
}
.cc-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  border: none;
  background: transparent;
  color: var(--ans-slate);
  font: 500 12.5px var(--ans-font-body);
  cursor: pointer;
}
.cc-action:hover,
.cc-action:focus-visible { color: var(--ans-blue-500); }
.cc-action:disabled { cursor: default; color: var(--ans-green); }
.cc-action svg { width: 15px; height: 15px; flex: none; }

/* ---- Starter questions in an empty chat ---------------------------------- */
.cc-starters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-left: 4px;
}
.cc-starter {
  padding: 8px 13px;
  border: 1px solid #cdd9e8;
  border-radius: var(--ans-r-chip);
  background: var(--ans-surface);
  color: var(--ans-blue-500);
  font: 500 14px / 1.3 var(--ans-font-body);
  text-align: left;
  cursor: pointer;
}
.cc-starter:hover,
.cc-starter:focus-visible { border-color: var(--ans-blue-500); }

/* ---- Scrollbar polish ---------------------------------------------------- */
.cc-log::-webkit-scrollbar { width: 8px; }
.cc-log::-webkit-scrollbar-thumb {
  background: rgba(10, 40, 80, 0.18);
  border-radius: 8px;
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}