/* ---------------------------------------------------------------------------
   The floating assistant.

   Loaded on every page, so it is kept to what the widget itself needs: the answer inside
   it — `.answer`, `.waiting`, `.verdict`, `ul.evidence`, `.notice` — is styled by
   panes.css, which chat.js fetches on first open. Nothing is duplicated between the two.

   Two things this file spends most of its rules undoing, and both are app.css bare-element
   selectors that reach into any markup added to the page: `form` is a flex row with 12px
   of bottom padding, and `button` is the page's one filled red action. A composer whose
   every control was a red button read as four equally urgent things to press. The account
   menu undoes the same two rules for the same reason — see `.acctmenu form` in app.css.

   `z-index` above 60, which `.acctmenu` holds: the assistant floats over everything,
   including an open account menu, because it is the only thing on screen the reader can
   still be mid-sentence in. One exception, at 80: `.citepop` in panes.css, the provision
   opened from a citation inside this panel.
   --------------------------------------------------------------------------- */

/* The launcher. Bottom-right rather than bottom-left: the footer's links and the fold
   button on the results column both live at the left edge on narrow screens. */
.chat-launch{position:fixed;right:16px;bottom:16px;z-index:70;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:99px;font-size:14px;font-weight:600;
  background:var(--accent-solid);color:var(--on-accent);border:0;cursor:pointer;
  box-shadow:0 6px 20px rgb(0 0 0/.18)}
.chat-launch:hover{filter:brightness(1.08)}
.chat-launch svg{flex:0 0 auto}
/* Hidden while the panel is up: the panel covers the corner it sits in, and a button
   peeking out from under it invites a click that does nothing. */
.chat.on .chat-launch{display:none}

/* The offer on the search screen's status line. `.ghost` is app.css's quiet button, and
   it has to stay quiet: the reader asked for a list and got one, so this is an aside, not
   a correction. */
.ask-across{margin-left:4px}

.chat-panel{position:fixed;right:16px;bottom:16px;z-index:70;
  width:min(420px,calc(100vw - 32px));max-height:min(78vh,720px);
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px rgb(0 0 0/.22);overflow:hidden}

/* Expanded, the Gmail compose gesture. Centred with `left:0;right:0` and auto side margins
   rather than `left:50%` and a transform: `chat-rise` below animates `transform`, and a
   panel that opened already expanded would have been dragged back off centre by it.
   Both `top` and `bottom` are set, so the height is the gap between them and the flex
   column inside stretches to it — `max-height` has to be released or it would still cap
   the panel at 720px. */
.chat.big .chat-panel{left:0;right:0;margin-inline:auto;top:24px;bottom:24px;
  width:min(920px,calc(100vw - 48px));max-height:none;border-radius:16px}
.chat.big .chat-list{max-height:40vh}
.chat.big .chat-log{padding:20px 24px}
/* A wider box is not a wider column. Left to fill 920px, statutory prose ran about 110
   characters a line, which is further than the eye tracks back accurately — the panel got
   roomier and the law got harder to read. `margin-inline` only: the rule between turns is
   a `margin-top`, and shorthand here would flatten it. */
.chat.big .chat-log > *{max-width:76ch;margin-inline:auto}
/* Back to the reading size panes.css sets for statutory prose: the 15px below is a
   concession to a 420px panel, and there is no longer one. */
.chat.big .chat-a .panel.assist .legal{font-size:17px}
.chat.big .chat-q{font-size:15px}

.chat-head{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line);cursor:grab;user-select:none}
.chat-head.dragging,.chat-launch.dragging{cursor:grabbing}
.chat-head h2{flex:1 1 auto;margin:0;text-align:center;font-size:14px;font-weight:600;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Quiet controls, not actions. Only the composer's send button keeps the filled red —
   it is the one thing on this panel that spends a model call. */
.chat-head button{background:transparent;color:var(--muted);border:1px solid transparent;
  border-radius:8px;padding:5px 7px;font-size:11.5px;cursor:pointer;white-space:nowrap}
.chat-head button:hover{color:var(--accent);border-color:var(--line)}
.chat-close{font-size:14px;line-height:1}
.chat-zoom{display:inline-flex;align-items:center;padding:5px 6px}
.chat-zoom .zoom-in{display:none}
.chat.big .chat-zoom .zoom-out{display:none}
.chat.big .chat-zoom .zoom-in{display:inline}

/* The saved conversations, folded away above the transcript. */
.chat-list{border-bottom:1px solid var(--line);padding:8px;max-height:200px;
  overflow-y:auto}
.chat-list .quiet{margin:4px 8px;font-size:13px;color:var(--muted)}
.chat-row{display:flex;align-items:center;gap:4px}
.chat-row.on{background:var(--accent-soft);border-radius:8px}
.chat-open{flex:1 1 auto;background:transparent;border:0;color:var(--ink);
  font:inherit;font-size:13px;text-align:left;padding:8px 10px;border-radius:8px;
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-open:hover{color:var(--accent)}
.chat-del{background:transparent;border:0;color:var(--muted);cursor:pointer;
  padding:6px 8px;font-size:12px;border-radius:8px}
.chat-del:hover{color:var(--low)}

.chat-log{flex:1 1 auto;overflow-y:auto;padding:12px;min-height:120px}
.chat-log:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.chat-empty p{margin:0 0 8px;font-size:14px;color:var(--ink)}
.chat-empty .chat-eg{margin:0;padding:0;border:0;background:none;text-align:left;
  font-family:var(--serif);font-size:15px;color:var(--accent);font-style:italic;
  cursor:pointer;text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px}
.chat-empty .chat-eg:hover,.chat-empty .chat-eg:focus-visible{
  text-decoration-color:currentColor}
.chat-empty .quiet{color:var(--muted);font-size:13px}

.chat-turn{display:flex;flex-direction:column}
.chat-turn + .chat-turn{margin-top:24px}
/* The reader's own words, as a bubble on the right — the ChatGPT shape, and legible for
   the same reason it is there: a transcript reads top to bottom, and a question that looks
   different from the answer under it (shape and side, not colour) is found again at a
   glance without having to read either. Capped at 80% so a short question does not stretch
   into a full-width bar, and `white-space:pre-wrap` keeps the reader's own line breaks.
   Filled in `--line`, not `--accent-soft`: app.css lists what red is allowed to mean, and
   this file already tried accent-soft here once — see the git history of this rule — and
   reverted it for the same reason. `--line` is neutral and already used as a fill
   elsewhere (feedback.css, doc.css), not just a border colour. */
.chat-q{align-self:flex-end;max-width:80%;margin:0 0 14px;padding:10px 14px;
  border-radius:18px 18px 4px 18px;background:var(--line);color:var(--ink);
  font-weight:400;font-size:14px;line-height:1.5;white-space:pre-wrap}
/* The answer, plain and full width under it — nothing marks it as "the AI's turn" except
   that it is not a bubble, which is the point: this is the thing the reader came for, not
   a chat message to be told apart from other chat messages. */
.chat-a{font-size:14px;align-self:stretch}
/* Redrawn from storage: the answer's own text, without the evidence list or the citation
   verdict that went with it. Those belong to a retrieval against a release that may since
   have been replaced — see drawLog() in chat.js.
   Set in ink, not in `--muted`. Muting it was meant to say "this is from earlier" and said
   something else: a whole reopened conversation came back grey, which on legal prose reads
   as withdrawn or unreliable. The missing evidence list already marks it as restored. */
.chat-past .answer{color:var(--ink)}
.chat-found{margin:8px 0 0;font-size:13px}

/* The icon row under a finished answer. Quiet by default — `--muted`, no border, no fill —
   because six controls in a row read as six equally urgent actions otherwise, and only one
   of them (copy) is anything a reader is likely to reach for. The first three do something;
   the rest print so a finished answer looks finished (see `actionsHtml()` in chat.js). */
.chat-actions{display:flex;gap:2px;margin:10px 0 0}
.chat-act{background:transparent;border:0;border-radius:8px;padding:6px;
  color:var(--muted);cursor:pointer;line-height:0}
.chat-act:hover{background:var(--accent-soft);color:var(--accent)}
.chat-act:disabled{opacity:.45;cursor:default}
.chat-act:disabled:hover{background:transparent;color:var(--muted)}

/* Two icons in one button, the arrangement `.chat-zoom` uses and for the same reason: a
   control that changes width when it is pressed drags the buttons beside it under the
   pointer that just pressed it. */
.chat-act .copy-done,.chat-act.done .copy-idle{display:none}
.chat-act.done .copy-done{display:block}
.chat-act.done,.chat-act.done:hover{color:var(--high);background:transparent}

/* A judgement that has landed. Green for "hữu ích" and the accent red for "chưa ổn" —
   which is the one meaning app.css lets red carry here, a problem the reader is pointing
   at. Both keep their colour on hover so a pressed thumb does not look unpressed. */
.chat-act.up.on,.chat-act.up.on:hover{color:var(--high);background:transparent}
.chat-act.down.on,.chat-act.down.on:hover{color:var(--accent);background:var(--accent-soft)}

/* What the press did, in words. `role="status"` on the element, so a reader who cannot see
   the thumb change colour is still told the vote travelled. */
.chat-said{margin:6px 0 0;font-size:12px;line-height:1.5}
.chat-said.bad{color:var(--accent)}

/* The panel is narrower than the rail the answer used to live in, so the 17px reading size
   panes.css sets for statutory prose would run about 30 characters a line here. */
.chat-a .panel.assist{padding:0}
.chat-a .panel.assist .legal{font-size:15px;line-height:1.65}
.chat-a .pane-head{padding:0 0 8px;border-bottom:0}
.chat-a .disclaimer{display:none}

/* The document being read, offered as a scope rather than applied silently. A widget that
   narrowed every question to the open page without saying so would answer a question about
   the whole corpus with one document's law and look confident doing it. */
.chat-ctx{display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-top:1px solid var(--line);font-size:12px;color:var(--muted);cursor:pointer}
.chat-ctx b{color:var(--ink);font-weight:600}
.chat-ctx input{flex:0 0 auto;width:13px;height:13px;accent-color:var(--muted)}

.chat-quota{margin:0;padding:8px 12px 0;font-size:12px;color:var(--muted)}

.chat-compose{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;
  border-top:1px solid var(--line)}
.chat-input{flex:1 1 auto;min-width:0;font:inherit;font-size:16px;resize:none;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);max-height:140px}
.chat-input:focus-visible,.chat-input:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.chat-compose button{flex:0 0 auto;padding:10px 16px;font-size:14px}

/* Wraps, and must: the line was one clause held to a single line by `nowrap` plus an
   ellipsis, and the disclaimer that replaced it is a full sentence. Truncating a
   disclaimer is worse than not printing one — the reader sees a legal caveat cut off at
   "không thay thế tư…" and is left to guess the half that matters. */
.chat-foot{margin:0;padding:0 12px 10px;font-size:11px;line-height:1.5;color:var(--muted)}
/* Its own line rather than a clause on the disclaimer above: they are two different kinds
   of statement — one about how much to trust the answer, one about where a press sends the
   reader's words — and a sentence that ran them together would be read as neither. */
.chat-consent{display:block;margin-top:4px}

/* Full width on a phone, and anchored to the bottom edge: a floating card inset by 16px on
   a 360px screen leaves the transcript about 45 characters a line. */
@media (max-width:520px){
  .chat-panel{right:0;bottom:0;width:100vw;max-height:88vh;border-radius:14px 14px 0 0;
    border-left:0;border-right:0;border-bottom:0}
  .chat-launch{right:12px;bottom:12px;padding:12px 16px}
  /* The panel is already the width of the screen here, so there is nothing to expand to,
     and a stored preference from the reader's desktop must not follow them onto a phone
     and float the sheet away from the bottom edge. Written with the same specificity as
     the `.chat.big` rules above, which would otherwise outrank anything in here. */
  .chat .chat-zoom{display:none}
  .chat.big .chat-panel{left:auto;right:0;top:auto;bottom:0;margin-inline:0;
    width:100vw;max-height:88vh;border-radius:14px 14px 0 0}
  .chat.big .chat-log{padding:12px}
}

@media (prefers-reduced-motion:no-preference){
  .chat-panel{animation:chat-rise .16s ease-out}
  @keyframes chat-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
.chat-handoff{margin:12px 0 0;display:grid;gap:8px}
.chat-handoff .button{justify-self:start}
.chat-handoff .quiet{margin:0;font-size:12px}
.chat-handoff-msg{margin:0;font-size:13px;color:var(--accent)}
.chat-handoff-done{margin:12px 0 0;font-size:14px}