/* ==========================================================================
   Help (stage L, js/components/help-panel.js): the support assistant's own
   window - docked at the bottom right on a computer, a bottom sheet on a
   phone - with no backdrop, so the app behind it stays usable; and the pill
   it folds into - which is also the launcher a person sees before any
   conversation (one pill, "Ask Tapebook", the operator 26.10), with a one-time
   hint beside it. Surfaces, type and motion come from the tokens. One quiet
   shape for the person's own turn, the assistant's words on the window
   itself: no bubbles in boxes, no decorative icon, no capital-letter label.
   ========================================================================== */

.help-panel,
.help-pill,
.help-hint {
  --help-dur: 260ms; /* help-panel.js DURATION */
}

.help-panel {
  /* Above a Modal (so a form can be fixed while talking), below its dropdowns and the toasts. */
  z-index: calc(var(--z-modal) + 2);
}

/* Light theme: the window is a soft grey, not white (the operator 30.10), so it stands apart from the white desk;
   what sits on it (the person's bubbles, the AI mark, the field) turns white to keep its edge. */
:root[data-theme="light"] .help-panel {
  --help-surface: #f0f0f3;
  --color-surface-hover: #ffffff;
  --field-bg: #ffffff;
}

/* The launcher and its hint are the page's furniture, not a window: under a Modal's backdrop and the drawers, so they
   never cover a form's buttons. (A pill that carries a conversation rises above a Modal on a computer, below.) */
.help-pill,
.help-hint {
  z-index: calc(var(--z-drawer-backdrop) - 1);
}

.help-panel {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 2 * var(--space-4)));
  height: min(640px, calc(100vh - var(--topbar-height) - 2 * var(--space-4)));
  height: min(640px, calc(100dvh - var(--topbar-height) - 2 * var(--space-4)));
  display: flex;
  flex-direction: column;
  background: var(--help-surface, var(--color-surface));
  color: var(--color-text-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity var(--help-dur) var(--ease-spring), transform var(--help-dur) var(--ease-spring),
    background-color var(--help-compact-dur, 320ms) var(--ease-standard), box-shadow var(--help-compact-dur, 320ms) var(--ease-standard);
  pointer-events: none;
}

.help-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.help-panel[hidden] {
  display: none;
}

.help-panel:focus {
  outline: none;
}

/* ---- Head: title, New conversation, minimise, close ---- */

.help-panel__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 52px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
}

.help-panel__grab {
  display: none;
}

.help-panel__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  /* Never under the head's buttons in a very narrow window: it shortens instead. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.help-panel__text-btn {
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
}

.help-panel__text-btn[hidden] {
  display: none;
}

/* New conversation is a round "+" like its neighbours (with the compact button in the head the words no longer fit
   beside the title in a 400px window); the words stay as its name for a screen reader. */
.help-panel__text-btn[data-help-new] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  border-radius: 50%;
}

.help-panel__text-btn[data-help-new][hidden] {
  display: none;
}

.help-panel__again-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.help-panel__icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.help-panel__text-btn:hover,
.help-panel__icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.help-panel__icon,
.help-panel__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.help-panel__text-btn:focus-visible,
.help-panel__icon-btn:focus-visible,
.help-panel__send:focus-visible,
.help-pill:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- "End this conversation?" ---- */

.help-panel__confirm {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.help-panel__confirm[hidden] {
  display: none;
}

.help-panel__confirm-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

/* ---- The conversation ---- */

.help-panel__scroll {
  position: relative; /* the answers' offsetTop is measured from here */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-5) var(--space-4);
}

.help__log {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.help__msg {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.help__msg p {
  margin: 0;
}

.help__msg p + p {
  margin-top: var(--space-3);
}

/* The person's own words: right, one soft shape. */
.help__msg--me {
  align-self: flex-end;
  max-width: 85%;
  padding: var(--space-2) var(--space-4);
  border-radius: 18px;
  background: var(--color-surface-hover);
}

/* The assistant's: plain text on the window, the full width. */
.help__msg--ai {
  align-self: stretch;
}

/* Our own opening words (who answers, any language, no personal data). */
.help__msg--opening {
  color: var(--color-text-secondary);
}

/* What the window itself says (a limit, a failure). */
.help__msg--note {
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

/* Thinking... - a line of quiet text with a slow dot, only while an answer is on its way. */
.help-panel__typing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-footnote);
  color: var(--color-text-tertiary);
}

.help-panel__typing:empty {
  margin: 0;
}

.help-panel__typing.is-on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: help-wait 1.4s ease-in-out infinite;
}

@keyframes help-wait {
  50% {
    transform: scale(0.6);
    opacity: 0.4;
  }
}

/* A message for support, shown for review: the one framed thing in the log. */
.help__draft {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.help__draft-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.help__draft-hint {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.help__draft-text {
  resize: vertical;
  font-size: var(--fs-footnote);
  line-height: var(--lh-normal);
}

.help__draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ---- The input, pinned at the foot ---- */

.help__composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) 0 var(--space-4);
}

.help__input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 160px;
  padding: 11px var(--space-4);
  border-radius: 22px;
  line-height: 1.4;
  resize: none;
  /* No scrollbar while the field grows with its text: one line rounds a fraction of a pixel past 44px. grow()
     turns scrolling on once the field reaches its 160px. */
  overflow-y: hidden;
}

.help-panel__send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
  cursor: pointer;
}

.help-panel__send:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The permanent "this is an AI" line (AI Act art. 50): under the input, always in view. */
.help__label {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--fs-caption);
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-tertiary);
}

/* The AI line itself (not the mentor's sentence below it): small and tight, so it stays on one line at the window's
   width - it is the disclosure, so it stays in view, only quieter. */
.help__label:not(.help__label--mentor) {
  padding-top: var(--space-2);
  font-size: 0.6875rem; /* 11px */
  line-height: 1.25;
}

/* "Report content" (DSA art. 16) and "About the mentor": one quiet row under the AI line, centred, the AI line's size
   (the operator 31.10: aligned and smaller) - both the same colour and weight, on one centre line with the icon. */
.help__report-row {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  margin: calc(-1 * var(--space-2)) 0 0;
  padding: 0 var(--space-4) var(--space-3);
  font-size: 0.625rem; /* 10px, a step under the AI line (the operator 31.10: smaller still) */
  line-height: 1.2;
}

.help__report {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.help__report:hover,
.help__report:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.help__report:hover {
  color: var(--color-text-primary);
}

/* "About the mentor": the mentor's sentence folds behind it (the operator 30.10), a quiet link beside "Report content". */
.help__about {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.help__about .help-panel__icon {
  display: inline-flex;
}

.help__about[hidden] {
  display: none;
}

.help__about svg {
  width: 10px;
  height: 10px;
}

.help__about:hover,
.help__about[aria-expanded="true"] {
  color: var(--color-text-primary);
}

/* ---- The pill the window folds into ---- */

/* Glass (26.10, Cezar: "bardziej przezroczystą i szklaną"): the accent at low strength over a blur of the page, as
   the top bar and the phone's bottom bar are made; no frame (the operator, 26.10) - no glow and no pulse.
   The words are the page's own colour, the icon the accent's. It enters with a short fade and rise. */
.help-pill {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(var(--lead-rgb), 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  color: var(--text-1);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--help-dur) var(--ease-spring), transform var(--help-dur) var(--ease-spring);
}

.help-pill.is-shown {
  opacity: 1;
  transform: none;
}

.help-pill[hidden] {
  display: none;
}

/* While the launcher is on it stays over the corner of every screen: the end of each view keeps room for it, so the
   last button of a long page can be scrolled clear of the pill (review 26.10: Journal's "Export CSV" sat under it). */
html.has-help-launcher .view-container {
  padding-bottom: calc(var(--space-4) * 2 + 44px + env(safe-area-inset-bottom));
}

/* The avatar's mark is the accent's colour; the words beside it are the page's own. */
.help-pill .assistant-mark {
  color: var(--lead);
}

/* An answer arrived while the window was folded away, or the week's review waits. */
.help-pill__dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lead);
}

.help-pill.has-new .help-pill__dot {
  display: block;
}

/* A computer: a pill that holds a conversation stays within reach above a Modal, as the window it folds from is. */
@media (min-width: 881px) {
  .help-pill.has-chat {
    z-index: calc(var(--z-modal) + 2);
  }
}

/* A computer with a mouse (26.10, Cezar): the pill rests as its round bubble and opens into "Ask Tapebook" (or
   Continue, Thinking..., New answer) under the pointer or the keyboard's focus. It is anchored at the right, so it
   opens to the left; the dot of a new answer sits on the bubble's corner. The words stay the button's name. */
@media (min-width: 881px) and (hover: hover) and (pointer: fine) {
  .help-pill {
    min-width: 44px;
    padding: 0 12px;
    gap: 0;
    transition: opacity var(--help-dur) var(--ease-spring), transform var(--help-dur) var(--ease-spring),
      padding var(--dur-base) var(--ease-spring), gap var(--dur-base) var(--ease-spring);
  }

  .help-pill__text {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-standard);
  }

  .help-pill:hover,
  .help-pill:focus-visible {
    padding: 0 var(--space-4) 0 var(--space-3);
    gap: var(--space-2);
  }

  .help-pill:hover .help-pill__text,
  .help-pill:focus-visible .help-pill__text {
    max-width: 14em;
    opacity: 1;
  }

  .help-pill__dot {
    position: absolute;
    top: 4px;
    right: 4px;
  }

  .help-hint::after {
    right: 15px;
  }
}

/* ---- The one-time hint beside the pill: a flat bubble above it, in the inverse of the page like a toast, a tail
   toward the pill, a close button ---- */

.help-hint {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom) + 44px + 12px);
  display: flex;
  align-items: stretch;
  max-width: min(300px, calc(100vw - 2 * var(--space-4)));
  border-radius: 18px;
  background: var(--undo-bg);
  color: var(--undo-fg);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  /* It arrives after the pill has settled. */
  transition: opacity var(--help-dur) var(--ease-spring) 900ms, transform var(--help-dur) var(--ease-spring) 900ms;
}

.help-hint.is-shown {
  opacity: 1;
  transform: none;
}

.help-hint::after {
  content: "";
  position: absolute;
  right: 42px;
  bottom: -6px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: var(--undo-bg);
}

.help-hint__text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 0 10px var(--space-4);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.help-hint__x {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0 18px 18px 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}

.help-hint__x:hover {
  opacity: 1;
}

.help-hint__text:focus-visible,
.help-hint__x:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* ---- The avatar's mark (the operator 30.10: one small avatar, interactive; AI Act art. 50: abstract, no face, no
   name) - a ring, a turning arc, a core. Motion is transforms and opacity only; every state has a still version
   under prefers-reduced-motion. Flat colour only, nothing that shines. ---- */

.assistant-mark {
  --ax: 0px; /* help-panel.js: the core leans toward a mouse pointer by a few pixels */
  --ay: 0px;
  position: relative;
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  color: var(--lead);
}

.assistant-mark__ring,
.assistant-mark__arc,
.assistant-mark__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
}

.assistant-mark__ring {
  border: 2px solid currentColor;
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-spring);
}

/* Thinking: a quarter of a ring that turns while an answer is on its way. */
.assistant-mark__arc {
  border: 2px solid transparent;
  border-top-color: currentColor;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}

/* The core is placed by --ax/--ay (the lean); its dot, inside, does the breathing. */
.assistant-mark__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  transform: translate(var(--ax), var(--ay));
  transition: transform var(--dur-base) var(--ease-spring);
}

.assistant-mark__core::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-spring);
  animation: assistant-breathe 5.2s ease-in-out infinite;
}

/* Answered: one ripple leaves the ring. */
.assistant-mark__ripple {
  border: 2px solid currentColor;
  opacity: 0;
}

.assistant-mark.is-ack .assistant-mark__ripple {
  animation: assistant-ripple 700ms var(--ease-standard) 1;
}

/* Responds to a hand or the keyboard's focus on the avatar. */
.help-pill:focus-visible .assistant-mark__ring {
  opacity: 1;
  transform: scale(1.12);
}

.help-pill:focus-visible .assistant-mark__core::before {
  animation: none;
  transform: scale(1.25);
}

@media (hover: hover) and (pointer: fine) {
  .help-pill:hover .assistant-mark__ring {
    opacity: 1;
    transform: scale(1.12);
  }

  .help-pill:hover .assistant-mark__core::before {
    animation: none;
    transform: scale(1.25);
  }
}

/* Attentive: the person is typing - steady ring, a larger core that gives a small nudge on each key. */
.assistant-mark[data-state="typing"] .assistant-mark__ring {
  opacity: 1;
  transform: scale(1.08);
}

.assistant-mark[data-state="typing"] .assistant-mark__core::before {
  animation: none;
  transform: scale(1.3);
}

.assistant-mark[data-state="typing"].is-key .assistant-mark__core::before {
  animation: assistant-key 180ms var(--ease-standard) 1;
}

/* Thinking: the ring steps back, the arc turns, the core is small and still. */
.assistant-mark[data-state="thinking"] .assistant-mark__ring {
  opacity: 0.3;
}

.assistant-mark[data-state="thinking"] .assistant-mark__arc {
  opacity: 1;
  animation: assistant-turn 1.1s linear infinite;
}

.assistant-mark[data-state="thinking"] .assistant-mark__core::before {
  animation: none;
  transform: scale(0.8);
}

@keyframes assistant-breathe {
  50% {
    transform: scale(1.18);
  }
}

@keyframes assistant-key {
  50% {
    transform: scale(1.55);
  }
}

@keyframes assistant-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes assistant-ripple {
  from {
    opacity: 0.45;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* In the window's head, beside the title. */
.help-panel__head .assistant-mark {
  margin-right: var(--space-2);
}

/* Who wrote an answer: a small AI mark (AI Act art. 50) and the source, in front of it. */
.help__msg .help__who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

.help__msg .help__who + p {
  margin-top: 0;
}

.help__ai {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

.help__source {
  font-weight: var(--fw-medium);
}

/* The hint for turning the mentor on: its button under the words. */
.help__hint-btn {
  margin-top: var(--space-3);
}

/* The mentor's counts: a line under the head, quiet, only while the mentor answers. */
.help-panel__usage {
  flex: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-2);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

.help-panel__usage[hidden] {
  display: none;
}

/* Mentor on and nothing asked yet: the weekly review, one click. */
.help-panel__start {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.help-panel__start[hidden] {
  display: none;
}

/* Tapebook Pro: the small "Pro" after the month's review and the briefing on a Lite plan - plain quiet text, no fill. */
.help-panel__pro[hidden] {
  display: none;
}

.help-panel__pro {
  margin-left: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
}

/* Legat's sentence that stays with the mentor, under the AI line. */
.help__label--mentor {
  margin-top: calc(-1 * var(--space-2));
}

/* ---- Tapebook Pro: the Monday reminder, one quiet line at the top of the start row ---- */
.help-panel__remind {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.help-panel__remind[hidden] {
  display: none;
}

.help-panel__remind-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

/* ---- Tapebook Pro F5: one chart for the mentor (help-panel.js openChart) ----
   The button sits left of the input at the input's height; the box over the composer carries Legat's sentence, a
   small preview and Send / Cancel. Existing tokens only: no new colour. */
.help-panel__chart-btn {
  width: 44px;
  height: 44px;
}

.help-panel__chart-btn[hidden],
.help-panel__chart[hidden],
.help-panel__chart-thumb[hidden],
.help-panel__chart-error[hidden] {
  display: none;
}

.help-panel__chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 var(--space-3) var(--space-2) var(--space-4);
  padding: var(--space-4);
  border-radius: 22px;
  background: var(--help-surface, var(--color-surface)); /* readable over the page in the compact view too */
  box-shadow: 0 0 0 1px var(--color-border);
}

.help-panel__chart-text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.help-panel__chart-thumb {
  display: block;
  max-width: 100%;
  max-height: 140px;
  border-radius: 8px;
  object-fit: contain;
  align-self: flex-start;
}

.help-panel__chart-error {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.help-panel__chart-file {
  display: none;
}

.help-panel__chart-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help__chart-mark {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.help__label--mentor[hidden] {
  display: none;
}

/* ---- Tapebook Pro F8: the idea box (help-panel.js openIdea) ----
   The chart box's surface and rows (.help-panel__chart), a scroll of its own for a long checklist. Inside, Apple's inset
   lists (the operator 31.10: "round and minimal, no AI look"): each part one rounded group on the field fill, a hairline
   between its rows, the name left and a borderless value right; the answers and the direction are the app's small
   segmented control (.dv-seg). No box in a box, no border, no new colour. */
.help-panel__idea {
  gap: var(--space-3);
  max-height: min(60vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.help-panel__idea > * {
  flex-shrink: 0; /* the box scrolls; a group (overflow: hidden) would otherwise be squeezed to nothing */
}

.help-panel__idea-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.help-panel__group {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--field-bg);
  overflow: hidden;
}

.help-panel__group > :not([hidden]) ~ :not([hidden]) {
  box-shadow: inset 0 1px 0 var(--line); /* the hairline between rows; a hidden first row (Account) leaves none on top */
}

.help-panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-1) var(--space-4);
}

.help-panel__row[hidden] {
  display: none;
}

.help-panel__row-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}

.help-panel__row-input,
.help-panel__idea-what,
.help-panel__idea-list {
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}

.help-panel__row-input {
  flex: 0 1 9rem;
  width: 9rem;
  padding: var(--space-2) 0;
  text-align: right;
}

.help-panel__row-input::placeholder,
.help-panel__idea-what::placeholder,
.help-panel__idea-list::placeholder {
  color: var(--color-text-tertiary);
}

.help-panel__row-input:focus,
.help-panel__idea-what:focus,
.help-panel__idea-list:focus {
  outline: none;
}

/* Focus: the fields are borderless, so the row (or the list) takes the segmented track's tint - a step off the group in
   both themes, the caret in the field; the select's button, reached by keyboard, also the accent ring the segments use
   (.dv-seg__b:focus-visible). */
.help-panel__row:focus-within,
.help-panel__idea-point:focus-within,
.help-panel__idea-list:focus {
  background: var(--seg-track);
}

.help-panel__row:has(.cselect__trigger:focus-visible) {
  outline: 2px solid var(--lead);
  outline-offset: -2px;
}

.help-panel__row-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.help-panel__row-input[type="number"]::-webkit-inner-spin-button,
.help-panel__row-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The app's select in a row: its value and chevron only, right-aligned, the list as everywhere. */
.help-panel__row .cselect {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

.help-panel__row .cselect__trigger {
  justify-content: flex-end;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text-secondary);
}

.help-panel__row .cselect.is-open .cselect__trigger,
.help-panel__row .cselect__trigger:focus-visible {
  box-shadow: none;
  color: var(--color-text-primary);
}

.help-panel__idea-point {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.help-panel__idea-point-text {
  flex: 1 1 7rem;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-body);
  overflow-wrap: anywhere;
}

.help-panel__seg {
  flex: none;
}

.help-panel__seg .dv-seg__b {
  min-height: 28px;
  padding: 0 10px;
}

.help-panel__idea-what {
  flex: 1 1 100%;
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.help-panel__idea-list {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: 16px;
  background: var(--field-bg);
  resize: vertical;
}

.help-panel__idea-edit {
  align-self: flex-start;
}

@media (max-width: 880px) {
  .help-panel__row-input,
  .help-panel__idea-what,
  .help-panel__idea-list {
    font-size: 16px; /* iOS zooms a field under 16px (form.css) */
  }
}

@media (pointer: coarse) {
  .help-panel__seg .dv-seg__b {
    min-height: 36px;
  }
}

/* ---- Compact view (help-panel.js setCompact; the operator 30.10) ----
   The open window folds down to its composer: the box keeps its size and place, so nothing in it is laid out again -
   the head, the log and the window's own surface fade out (opacity), the composer stays exactly where it is on a glass
   dock of its own, and a faded strip with the newest line of the conversation rises over it. The box and everything
   in it but the dock and the strip let pointer events through, so the page behind stays usable. Flat colour, a blur
   behind the glass, and transform and opacity for the motion. */

.help-panel {
  --help-compact-dur: 320ms; /* a spring-ish settle, a little longer than the window's own open/minimise */
}

.help-panel__head,
.help-panel__usage,
.help-panel__confirm,
.help-panel__scroll {
  transition: opacity var(--help-compact-dur) var(--ease-standard), transform var(--help-compact-dur) var(--ease-spring);
}

.help-panel__foot {
  position: relative; /* the dock's glass and the strip are laid against it */
  flex: none;
}

/* The dock's glass: its own layer, so the strip (which hangs on the foot) is not inside a blurred element. */
.help-panel__foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--help-compact-dur) var(--ease-standard);
  pointer-events: none;
}

/* The strip: the newest line, faded - more transparent than the dock, its upper edge dissolving (a mask, so the
   text and the glass fade together). It shows the END of a long line: that is what was said last. */
.help-panel__strip {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(100% + var(--space-2));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(2 * 1.45em + var(--space-4));
  max-height: calc(3 * 1.45em + var(--space-4));
  padding: var(--space-2) var(--space-4);
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--glass-bg) 40%, transparent); /* more glass than surface (the operator 30.10); the blur keeps it readable */
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 2.2em);
  mask-image: linear-gradient(to bottom, transparent 0, black 2.2em);
  color: var(--color-text-secondary);
  font-size: var(--fs-footnote);
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), visibility 0s linear 180ms;
}

.help-panel__strip-text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The AI mark of an answer in the strip, in its lower corner (where the mask leaves it fully visible). */
.help-panel__strip-ai {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-size: 0.6875rem;
}

.help-panel__strip-ai[hidden] {
  display: none;
}

.help-panel__strip:has(.help-panel__strip-ai:not([hidden])) {
  padding-right: calc(var(--space-4) + 30px);
}

/* An answer is on its way: the same slow dot as the log's "Thinking...". */
.help-panel__strip.is-busy .help-panel__strip-text::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: help-wait 1.4s ease-in-out infinite;
}

/* The whole strip is the way back to the full window. */
.help-panel__strip-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}

.help-panel__strip-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* The state: everything but the dock and the strip is out of sight and out of reach (visibility keeps it out of the
   Tab order and from a screen reader), the window's surface is gone, the page shows through the rest of the box. */
.help-panel.is-compact {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}

.help-panel.is-compact .help-panel__head,
.help-panel.is-compact .help-panel__usage,
.help-panel.is-compact .help-panel__confirm,
.help-panel.is-compact .help-panel__scroll {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--ease-standard), transform var(--help-compact-dur) var(--ease-spring), visibility 0s linear 160ms;
}

.help-panel.is-compact .help-panel__scroll {
  transform: translateY(12px);
}

.help-panel.is-compact .help-panel__foot,
.help-panel.is-compact .help-panel__strip {
  pointer-events: auto;
}

/* Compact = the field and the send button alone (the operator 30.10, his sketch): no dock surface, no lines under it.
   The AI mark moves onto the strip's answer (.help-panel__strip-ai), so an AI answer in view is still marked. */
.help-panel.is-compact .help-panel__foot::before {
  opacity: 0;
}

.help-panel.is-compact .help__label,
.help-panel.is-compact .help__report-row {
  display: none;
}

.help-panel.is-compact .help-panel__strip {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--help-compact-dur) var(--ease-standard) 60ms, transform var(--help-compact-dur) var(--ease-spring) 60ms, visibility 0s;
}

@media (hover: hover) and (pointer: fine) {
  .help-panel.is-compact .help-panel__strip:hover {
    background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
  }
}

/* ---- Phone: a bottom sheet over most of the screen ---- */

@media (max-width: 880px) { /* the app's phone layout (js/app.js), as in help-panel.js */
  .help-panel {
    /* The top bar stays in sight above the sheet; with the keyboard up the sheet takes all it can. */
    --help-gap: calc(env(safe-area-inset-top) + 56px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
    /* help-panel.js pins the sheet to the visible part of the screen (visualViewport). */
    top: calc(var(--help-vv-top, 0px) + var(--help-gap));
    bottom: auto;
    height: calc(100vh - var(--help-gap));
    height: calc(var(--help-vv-h, 100dvh) - var(--help-gap));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    opacity: 1;
    transform: translateY(100%);
    transform-origin: bottom center;
  }

  .help-panel.is-open {
    transform: none;
  }

  .help-panel.is-kb {
    --help-gap: calc(env(safe-area-inset-top) + 8px);
  }

  .help-panel.is-dragging {
    transition: none;
  }

  /* Compact: the dock rides above the floating bottom bar (it must not cover it) - moved with a transform, so the
     box and the composer in it are laid out as in the full sheet. With the keyboard up the bar is behind it. */
  .help-panel.is-compact .help-panel__foot {
    transform: translateY(calc(-1 * (var(--bottom-nav-gap, 8px) + var(--bottom-nav-h, 56px) + 6px)));
  }

  .help-panel.is-compact.is-kb .help-panel__foot {
    transform: translateY(calc(-1 * var(--space-2)));
  }

  .help-panel__foot {
    transition: transform var(--help-compact-dur) var(--ease-spring);
  }

  .help-panel__strip {
    left: var(--space-2);
    right: var(--space-2);
  }

  .help-panel__head {
    padding-top: var(--space-4);
    touch-action: none; /* the head is the swipe-down handle */
  }

  .help-panel__grab {
    display: block;
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: var(--color-border-strong);
  }

  .help-panel__icon-btn {
    width: 44px;
    height: 44px;
  }

  /* New conversation: the round "+" is 44px here. */
  .help-panel__text-btn[data-help-new] {
    width: 44px;
  }

  .help-panel__text-btn,
  .help-panel__confirm .btn,
  .help__draft-actions .btn {
    min-height: 44px;
  }

  /* Body text at 16px: readable, and iOS never zooms into the input. */
  .help__msg,
  .help__input {
    font-size: 1rem;
  }

  /* The hint in the empty field at 14px so it keeps one line (the operator 31.10); what is typed stays 16px, so iOS
     never zooms - the zoom follows the field's own size, not its placeholder's. */
  .help__input::placeholder {
    font-size: 0.875rem;
  }

  /* The lines under the field packed tight (the operator 31.10): the home indicator's inset goes under the last of
     them, the links' row, not between the AI line and the links. */
  .help__label {
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .help__report-row {
    margin-top: 0;
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }

  .help-panel.is-kb .help__report-row {
    padding-bottom: var(--space-2);
  }

  /* Above the floating bottom bar (css/layout.css), at its right end - clear of its "+" - and above the home
     indicator (the bar's own gap carries the inset). A round icon: the words stay for a screen reader. */
  /* The phone's scroll area already clears the bottom bar (css/layout.css); the round pill sits 12px above it. */
  html.has-help-launcher .view-container {
    padding-bottom: calc(var(--space-4) + 12px + 48px);
  }

  .help-pill {
    right: max(14px, calc(50% - 260px));
    bottom: calc(var(--bottom-nav-gap, 8px) + var(--bottom-nav-h, 56px) + 12px);
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
  }

  .help-pill__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .help-pill__dot {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .help-hint {
    right: max(14px, calc(50% - 260px));
    bottom: calc(var(--bottom-nav-gap, 8px) + var(--bottom-nav-h, 56px) + 12px + 48px + 12px);
  }

  .help-hint::after {
    right: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-panel,
  .help-pill,
  .help-pill__text,
  .help-hint {
    transition-duration: 1ms;
    transition-delay: 0s;
  }

  .help-panel__typing.is-on::before,
  .help-panel__strip.is-busy .help-panel__strip-text::before {
    animation: none;
  }

  /* The compact view changes at once. */
  .help-panel__head,
  .help-panel__usage,
  .help-panel__confirm,
  .help-panel__scroll,
  .help-panel__foot,
  .help-panel__foot::before,
  .help-panel__strip,
  .help-panel.is-compact .help-panel__head,
  .help-panel.is-compact .help-panel__usage,
  .help-panel.is-compact .help-panel__confirm,
  .help-panel.is-compact .help-panel__scroll,
  .help-panel.is-compact .help-panel__strip {
    transition-duration: 1ms;
    transition-delay: 0s;
  }

  /* The avatar stands still: the states differ by shape and opacity alone (a fixed arc while it thinks). */
  .assistant-mark__core::before,
  .assistant-mark[data-state="typing"].is-key .assistant-mark__core::before,
  .assistant-mark[data-state="thinking"] .assistant-mark__arc,
  .assistant-mark.is-ack .assistant-mark__ripple {
    animation: none;
  }

  .assistant-mark__ring,
  .assistant-mark__arc,
  .assistant-mark__core,
  .assistant-mark__core::before {
    transition-duration: 1ms;
  }

  .assistant-mark {
    --ax: 0px !important;
    --ay: 0px !important;
  }
}