/* ============================================================
   chat.css · HW.Chat, the one side panel for every conversation
   (the portal's support assistant, the audit page's inbound
   assistant). Loaded by the portal after shell.css and by the
   public audit page on its own, so it carries the few base rules
   a page without shell.css needs, scoped to .hc-standalone.
   Tokens come from brand.css. Rules: docs/UI-UX-POLICY.md.
   ============================================================ */

.hwchat {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(420px, 100vw);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--card); color: var(--text);
  border-left: 1px solid var(--line-role);
  box-shadow: var(--shadow-lg);
  font-size: 14px; line-height: 1.5; text-align: left;
  transform: translateX(calc(100% + 24px)); opacity: 0;
  /* The settle the step filter uses: it arrives and stops, no overshoot past the edge. */
  transition: transform .55s cubic-bezier(.22, .9, .3, 1), opacity .3s ease;
}
.hwchat.open { transform: none; opacity: 1; }
.hwchat[hidden] { display: none !important; }

.hwchat .hc-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--line-role); }
.hwchat .hc-bot { width: 44px; height: 44px; }
.hwchat .hc-t { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--text); }
.hwchat .hc-s { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }

.hwchat .hc-log { overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 16px; }
.hwchat .hc-msg { max-width: 100%; }
.hwchat .hc-msg .b { font-size: 14.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.hwchat .hc-msg .b p { margin: 0; }
.hwchat .hc-msg .b p + p, .hwchat .hc-msg .b ul + p, .hwchat .hc-msg .b p + ul { margin-top: 8px; }
.hwchat .hc-msg .b ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.hwchat .hc-msg.me { align-self: flex-end; max-width: 86%; }
.hwchat .hc-msg.me .b { background: var(--surface-2); padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.hwchat .hc-msg.wait .b { color: var(--text-dim); font-size: 13.5px; }
.hwchat .hc-msg.sys .notice { margin: 0; }
.hwchat .hc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.hwchat .hc-note { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }

.hwchat .hc-form { display: grid; gap: 8px; padding: 12px 14px 16px 20px; border-top: 1px solid var(--line-role); background: var(--card); }
.hwchat .hc-lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.hwchat textarea { width: 100%; min-height: 76px; max-height: 40vh; resize: vertical; padding: 10px 12px; border: 1px solid var(--line-role); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.5; }
.hwchat textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.hwchat .hc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hwchat .hc-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }

/* A quiet link that acts: an underlined sentence, never a button beside the primary. */
.hwchat .lnk { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hwchat .lnk:hover { color: var(--text); }
.hwchat .lnk svg.ic { width: 14px; height: 14px; }

@media (max-width: 820px) {
  .hwchat { width: 100vw; border-left: 0; }
  .hwchat .hc-log { padding: 16px 16px 8px; }
  .hwchat .hc-head { padding: 12px 10px 10px 16px; }
  .hwchat .hc-form { padding: 10px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .hwchat { transition: none; } }

/* ── On a page without shell.css (the public audit page) ──────── */
.hc-standalone, .hc-standalone * { box-sizing: border-box; }
.hc-standalone svg.ic, .hc-trigger svg.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.hc-standalone .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; white-space: nowrap; transition: background .18s, color .18s, border-color .18s, filter .18s, transform .25s cubic-bezier(.34, 1.4, .5, 1), box-shadow .25s ease; }
.hc-standalone .btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent); color: #fff; }
.hc-standalone .btn.quiet, .hc-standalone .btn.quiet:hover { background: transparent; border-color: transparent; color: var(--text-2); filter: none; box-shadow: none; transform: none; }
.hc-standalone .btn.quiet:hover { background: var(--surface-2); color: var(--text); }
.hc-standalone .btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.hc-standalone .btn[disabled] { opacity: .5; pointer-events: none; }
.hc-standalone .notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; font-size: 13.5px; background: var(--surface-2); color: var(--text-2); }
.hc-standalone .notice.warn { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #b45309; }
.hc-standalone .notice.bad { background: color-mix(in srgb, #b42318 10%, transparent); color: #b42318; }
.hc-standalone .notice.info { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.hc-standalone .notice svg.ic { margin-top: 2px; }
:root[data-theme="dark"] .hc-standalone .notice.warn { color: #f5b84a; }
:root[data-theme="dark"] .hc-standalone .notice.bad { color: #ff7a70; }