/* Ask Mariel: the help assistant's window (js/help-chat.js).

   PORTED FROM TMS assets/help-chat.css at 468d5b2a. WSOL: the colours come from
   WSOL's theme (the tokens below, so dark mode follows); the phone rules are a
   max-width 768px media query where TMS used its phone shell's html.tms-mobile
   class; the round button sits bottom right on a desk and a tablet, where WSOL's
   bug button is top right, and is replaced by the phone app bar's Ask button on
   a phone (#mobileAskBtn), because bottom right on a phone covers Submit and
   Next (bug-reporter.css, v0.25.0.0); the window is stacked over WSOL's dialogs
   (which go up to 100000) and under the bug reporter's (100001); and both doors
   hide during the Lesson Test (html.hc-in-test, js/help-chat-adapter.js).

   ---- TMS's notes ----
   Ask Doulos: the help assistant's window (assets/help-chat.js).

   THE DESK AND A TABLET: a small window, bottom right above the round button,
   half the height the side panel used to be (the owner, 2026-10-10). Drag it by
   its title bar, resize it from its corner, minimize it to a one-line pill.
   z-index 945: over a modeless window (940, tms.css) and over the backdrop a
   window raises (900), so the chat stays usable about the window that is open
   (tms-shell.js keeps it out of `inert` for the same reason), and under the
   menubar (950) so the menus still drop down over it.

   A PHONE (html.tms-mobile, the shell view-mobile.js mounts): a bottom sheet over
   the shell's own screens, sheets and drawer (their highest is 121), leaving the
   top of the screen — the part the answer is about — in view. */

/* WSOL: TMS's token names, from WSOL's theme. */
.hc-panel, .hc-pill, .hc-fab {
  --bg: var(--bg-primary, #fff);
  --ink: var(--text-primary, #111827);
  --line: var(--border-color, #e5e7eb);
  --panel: var(--bg-secondary, #f9fafb);
  --mut: var(--text-secondary, #4b5563);
  --amber-bg: var(--btn-caution-bg, #fef3c7);
  --red: var(--error, #ef4444);
  --tms-menubar-h: 64px;
}
/* WSOL: TMS's small buttons. WSOL's .btn is a page-sized button. */
.hc-panel .btn {
  padding: 4px 10px; font-size: 12px; line-height: 1.4; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); min-height: 0;
}
.hc-panel .btn:hover { background: var(--bg-tertiary, #f3f4f6); }
.hc-panel .btn.primary { background: var(--btn-primary-bg, #4f46e5); border-color: transparent; color: #fff; }
.hc-panel .btn.primary:hover { background: var(--primary-dark, #4338ca); }
.hc-panel .btn:disabled { opacity: .55; cursor: default; }
.hc-you { background: var(--primary-light, #e0e7ff) !important; color: var(--ink); }
.hc-notice { background: var(--primary-light, #e0e7ff) !important; border-bottom-color: var(--line) !important; color: var(--ink); }

.hc-panel {
  position: fixed;
  right: 12px;
  bottom: 80px;   /* WSOL: opens in the lower corner; the round button is up by the bug button */
  height: max(260px, calc((100vh - var(--tms-menubar-h, 44px) - 84px) / 2));
  width: min(400px, calc(100vw - 24px));
  min-width: 300px;
  min-height: 200px;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - var(--tms-menubar-h, 44px) - 8px);
  resize: both;
  display: flex;
  flex-direction: column;
  background: var(--bg, #fff);
  color: var(--ink, #222);
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  z-index: 99990;   /* WSOL: over WSOL's dialogs (≤100000 is the app's ceiling; 100001 is the bug reporter) */
  font-size: 13px;
  overflow: hidden;
}
.hc-panel[hidden] { display: none; }
/* Placed by help-chat.js (placeBox): left and top are inline, so the corner grip
   grows it right and down, the way a window's does. */
.hc-panel.hc-placed { right: auto; bottom: auto; }
.hc-head { cursor: move; user-select: none; }
.hc-head .btn, .hc-head .hc-x { cursor: pointer; }

.hc-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line, #d8d8d8); background: var(--panel, #f7f7f5); }
.hc-title { font-size: 14px; white-space: nowrap; }
.hc-gap { flex: 1; }
.hc-x { border: none; background: none; font-size: 16px; line-height: 1; padding: 2px 6px; cursor: pointer; color: var(--mut, #666); }
.hc-meter { padding: 4px 10px; font-size: 12px; color: var(--mut, #666); border-bottom: 1px solid var(--line, #d8d8d8); }
.hc-meter[hidden], .hc-note[hidden], .hc-notice[hidden], .hc-past[hidden], .hc-form[hidden] { display: none; }
.hc-note { padding: 8px 10px; }
.hc-note.warn { background: var(--amber-bg, #fdf3e0); color: #7a4d0b; }
.hc-notice { padding: 10px; background: #eef3fb; border-bottom: 1px solid #cddcf0; display: grid; gap: 8px; }
.hc-notice p { margin: 0; }
.hc-notice .btn { justify-self: start; }
/* WSOL: a guest's person check (Cloudflare Turnstile draws inside #hc-human-box). */
.hc-human { padding: 10px; border-bottom: 1px solid #cddcf0; display: grid; gap: 8px; }
.hc-human p { margin: 0; }
.hc-human[hidden] { display: none; }

.hc-past { max-height: 45%; overflow-y: auto; border-bottom: 1px solid var(--line, #d8d8d8); padding: 6px 10px; display: grid; gap: 6px; }
.hc-pastrow { display: flex; align-items: center; gap: 6px; }
.hc-pastlab { flex: 1; min-width: 0; display: grid; }
.hc-pastlab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-mut { color: var(--mut, #666); font-size: 12px; }

.hc-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.hc-empty { color: var(--mut, #666); margin: auto 0; }
.hc-msg { border-radius: 8px; padding: 6px 9px; max-width: 92%; }
.hc-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-text code { background: rgba(0, 0, 0, .06); padding: 0 3px; border-radius: 3px; }
.hc-you { align-self: flex-end; background: #e8f0fb; }
.hc-claude { align-self: flex-start; background: var(--panel, #f7f7f5); }
.hc-line { font-size: 12px; }
.hc-tool { color: var(--mut, #666); }
.hc-tool.err, .hc-error { color: var(--red, #c0392b); }
.hc-refused { color: #7a4d0b; background: var(--amber-bg, #fdf3e0); padding: 6px 9px; border-radius: 8px; }

.hc-form { border-top: 1px solid var(--line, #d8d8d8); padding: 8px 10px; }
.hc-form textarea { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; min-height: 44px; }
.hc-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.hc-busy { color: var(--mut, #666); font-size: 12px; }

/* The phone: a bottom sheet. The bug button sits bottom-right on a phone too,
   over the sheet's last 60px, so the box and Send keep a column clear of it. */
@media (max-width: 768px) { .hc-panel {
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; min-width: 0; max-width: none;
  height: min(48vh, 440px);
  resize: none;
  border-radius: 14px 14px 0 0;
  border-left: none; border-right: none; border-bottom: none;
  z-index: 130;
  font-size: 15px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
} }
@media (max-width: 768px) { .hc-head { min-height: 44px; cursor: default; } }
@media (max-width: 768px) { .hc-head .btn, .hc-x { min-height: 40px; } }
@media (max-width: 768px) { .hc-form textarea { font-size: 16px; } }
@media (max-width: 768px) { .hc-form { padding-right: 70px; } }
@media (max-width: 768px) { .hc-row .btn { min-height: 40px; } }

/* ---- The corner door: #hc-fab ------------------------------------------------
   Above a phone it sits DIRECTLY BELOW the bug button (the owner, 2026-10-14:
   "right below the bug icon, not on the other side of the screen"). WSOL's bug
   button (bug-reporter.css .bug-report-float-btn) is 44px at right 20px, top
   20px; this one is the same size and right edge, at the bug button's top +
   44 + a 10px gap (measured in Chromium at 1366 and 1000 wide). On a phone both live in the app bar
   (#mobileBugBtn, #mobileAskBtn) and this round one keeps its lower corner.
   One z-index below the bug button's, so the two never fight. Hidden while the
   panel is open: the panel has its own ✕. */
.hc-fab {
  position: fixed;
  right: 20px;
  top: 74px;     /* 20 (bug button's top) + 44 (its height) + 10 */
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #4F46E5;   /* WSOL: the site's indigo */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  z-index: 99991;   /* WSOL: one above the window, under the bug reporter */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.hc-fab[hidden], html.hc-open .hc-fab, html.role-guest .hc-fab { display: none; }
.hc-fab svg { width: 32px; height: 32px; flex: none; display: block; }
/* The ? inside the white bubble takes the colour of whatever it sits on. */
.hc-q { stroke: #4F46E5; }
.hc-q circle { fill: #4F46E5; }
.hc-fab:hover .hc-q { stroke: #4338CA; }
.hc-fab:hover .hc-q circle { fill: #4338CA; }
.hc-fab:hover { background: #4338CA; transform: scale(1.1); box-shadow: 0 4px 12px rgba(79, 70, 229, .45); }
.hc-fab:active { transform: scale(.95); }
.hc-fab:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
@media (max-width: 768px) { .hc-fab {
  width: 48px; height: 48px; right: 12px; top: auto;
  bottom: calc(var(--tmsbug-dock, 0px) + 72px + env(safe-area-inset-bottom, 0px));
} }
@media (max-width: 768px) { .hc-fab svg { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .hc-fab { transition: none; }
  .hc-fab:hover, .hc-fab:active { transform: none; }
}
@media print { .hc-fab { display: none !important; } }

/* A walk's steps in the chat: ✓ done, ▶ the one outlined now. */
.hc-walk ol { margin: 4px 0 6px 18px; padding: 0; }
.hc-walk li { margin: 2px 0; }
.hc-walk .btn[hidden] { display: none; }

/* ---- Minimized: one line at the bottom of the screen ------------------------
   Centred, so it is clear of the round button and the bug button on the right. */
.hc-pill {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 99990;   /* WSOL */
  display: flex;
  align-items: center;
  gap: 2px;
  background: #4F46E5;   /* WSOL */
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  padding: 2px 6px 2px 2px;
  max-width: calc(100vw - 150px);
}
.hc-pill[hidden] { display: none; }
.hc-pill-open {
  display: flex; align-items: center; gap: 8px;
  border: none; background: none; color: inherit; font: 600 14px system-ui, sans-serif;
  padding: 6px 10px 6px 8px; cursor: pointer; border-radius: 20px; min-height: 36px; white-space: nowrap;
}
.hc-pill-open:hover { background: rgba(255, 255, 255, .14); }
.hc-pill-open svg { width: 22px; height: 22px; flex: none; }
.hc-pill-state { font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.hc-pill-state:empty { display: none; }
.hc-pill .hc-x { color: #fff; min-width: 32px; min-height: 32px; }
@media (max-width: 768px) { .hc-pill { bottom: calc(var(--tmsbug-dock, 0px) + 18px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 140px); } }
@media (max-width: 768px) { .hc-pill-open { min-height: 44px; } }
@media (max-width: 768px) { .hc-pill .hc-x { min-width: 44px; min-height: 44px; } }
@media print { .hc-pill { display: none !important; } }

/* ---- WSOL: the phone's door, and the Lesson Test ----------------------------
   On a phone the round button would cover Submit and Next, so the app bar's
   Ask button (#mobileAskBtn, index.php) is the door instead. Above 768px the
   app bar's button is not shown and the round button is. */
#mobileAskBtn[hidden] { display: none; }
@media (min-width: 769px) { #mobileAskBtn { display: none; } }
@media (max-width: 768px) {
  .hc-fab { display: none !important; }
  /* Over the bottom tab bar (shell.css, 890) and every sheet. */
  .hc-panel { z-index: 99990; height: min(60vh, 520px); }
  .hc-form { padding-right: 10px; }
  .hc-head .btn { padding: 4px 8px; }
}
html.hc-in-test .hc-fab, html.hc-in-test #mobileAskBtn { display: none !important; }

/* ---- WSOL: System Admin ▸ Features ▸ Ask Mariel (js/help-assistant-admin.js) ---- */
.ha-panel { display: grid; gap: 14px; }
.ha-panel p { margin: 0; }
.ha-intro, .ha-mut { color: var(--text-secondary); }
.ha-msg { min-height: 1.2em; color: var(--text-secondary); }
.ha-msg.ha-bad { color: var(--error, #c0392b); }
.ha-key, .ha-guests { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; }
.ha-key p, .ha-guests p { flex: 1 1 260px; }
.ha-key.ha-warn, .ha-guests.ha-warn { background: var(--btn-caution-bg, #fef3c7); color: var(--btn-caution-fg, #92400e); border-color: var(--btn-caution-border, #fcd34d); }
.ha-form { display: grid; gap: 12px; }
.ha-check { display: flex; align-items: center; gap: 8px; }
.ha-roles { display: flex; flex-wrap: wrap; gap: 14px; border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; margin: 0; }
.ha-roles legend { padding: 0 4px; font-weight: 600; }
.ha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ha-row h4 { margin: 0; flex: 1; }
.ha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.ha-cell { display: grid; gap: 4px; }
.ha-cell small { color: var(--text-secondary); }
.ha-cell input, .ha-row select, .ha-row input { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--bg-primary)); color: var(--text-primary); font: inherit; }
.ha-usage { display: grid; gap: 8px; overflow-x: auto; }
.ha-off { display: grid; gap: 8px; }
.ha-off h4 { margin: 0; }
.ha-off select { max-width: 100%; min-width: 0; }
.ha-off-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ha-off-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ha-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ha-table th, .ha-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }

/* WSOL: the answer-language picker beside Send. */
.hc-lang { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); margin-right: 6px; }
.hc-lang[hidden] { display: none; }

/* The round button sits under the bug button, over the right end of an
   activity's header row, where the ⋯ (#asMenuBtn) is. Keep that row clear of it
   while the button shows (desk and tablet only; a phone has no round button
   there). */
@media (min-width: 769px) {
  html:not(.hc-open):not(.role-guest) body:has(#hc-fab:not([hidden])) .as-head { padding-right: 60px; }
}