/* Help Assistant v2 (2026-10-28): the short answer card, the "Walk me through it" tour, and the panel-edge fix.
   Tokens only, so it follows Day / Night. Loaded after wf-help.css. Rhythm: 16px rows, 12px label -> field, 8px tight. */

/* ── Panel edges (Hal 10-28: ✕ and "New chat" clipped on the right, Help pill over the panel) ──
   1. Every box inside the panel is border-box, and the header / footer rows can shrink, so nothing can push wider
      than the panel. 2. On a phone the sheet is pinned by left+right (never width:100% + borders), and the inputs are
      16px so iOS Safari does not zoom in on focus (that zoom is what pushed the right edge off screen).
   3. The pill hides whenever the panel is open, at every width; the panel takes its place (wf-help.js place()). */
.wf-help-panel { box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-width: none; }
.wf-help-panel *, .wf-help-panel *::before, .wf-help-panel *::after { box-sizing: border-box; }
html.wf-help-open .wf-help-btn { display: none !important; }
.wf-help-head { min-width: 0; }
.wf-help-title { flex: 0 0 auto; }
.wf-help-tabs.inv-kind-switch { flex: 0 1 auto; min-width: 0; }
.wf-help-tabs .inv-kind-tab { white-space: nowrap; }
.wf-help-x { flex: 0 0 36px; }
/* D8: large text — the tabs get their own row (wf-help.js fitHead) and a long label wraps instead of being cut. */
.wf-help-head.is-stacked { flex-wrap: wrap; row-gap: 8px; }
.wf-help-head.is-stacked .wf-help-x { margin-left: auto; order: 2; }
.wf-help-head.is-stacked .wf-help-title { order: 1; }
.wf-help-head.is-stacked .wf-help-tabs { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; border-radius: 18px; }
/* Whole words only: a tab that can't sit beside the others moves to the next line (never "Assista / nt"). */
.wf-help-head.is-stacked .wf-help-tabs .inv-kind-tab { flex: 1 1 auto; min-width: 0; white-space: nowrap; height: auto; }
.wf-help-log { overflow-x: hidden; }
.wf-help-bubble { min-width: 0; }
.wf-help-foot { min-width: 0; }
.wf-help-fine { flex: 1 1 auto; min-width: 0; }
.wf-help-link-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 768px) {
  .wf-help-panel { left: 0 !important; right: 0 !important; width: auto; max-width: none; }
}
@media (max-width: 768px), (pointer: coarse) { .wf-help-input, .wf-help-fbtext { font-size: 16px; } }
@media (max-width: 360px) {
  .wf-help-title { display: none; }
  .wf-help-tabs .inv-kind-tab { padding: 8px 12px; }
  .wf-help-fine { font-size: 11px; }
}

/* ── Answer card ── */
.wf-help-card { display: flex; flex-direction: column; gap: 12px; }
.wf-help-card .wf-help-reply { margin: 0; font-weight: 600; }
.wf-help-card-title { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wf-help-card .wf-help-steps { margin: 0; padding-left: 20px; gap: 8px; }
.wf-help-card .wf-help-steps li { padding-left: 4px; line-height: 1.45; }
.wf-help-note { font-size: 12.5px; color: var(--off-white, var(--muted)); padding: 8px 12px; border-radius: var(--radius-sm, 8px); background: var(--bg-base); border: 1px solid var(--border); }
.wf-help-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-help-actions .wf-help-go { min-height: 40px; }
.wf-help-tour-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border-radius: var(--radius-pill, 999px); border: 0; background: var(--accent, var(--gold)); color: var(--on-accent, #0a0a0b);
  font: 700 13px/1.2 var(--font-body); cursor: pointer;
}
.wf-help-tour-btn:hover { filter: brightness(1.06); }
.wf-help-tour-btn:focus-visible, .wf-help-thumb:focus-visible, .wf-help-video:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; }
.wf-help-video {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px; text-align: left;
  border-radius: var(--radius, 10px); border: 1px solid var(--border); background: var(--bg-base); color: var(--white); cursor: pointer;
}
.wf-help-video:hover { border-color: var(--accent, var(--gold)); }
.wf-help-vthumb { position: relative; flex: 0 0 72px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--bg-hover, var(--bg-raised)); display: inline-flex; align-items: center; justify-content: center; }
.wf-help-vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-help-vplay { position: relative; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wf-help-vtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.wf-help-vtxt strong { font-size: 13px; color: var(--white); }
.wf-help-card .wf-help-msg-foot { margin-top: 0; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); }
.wf-help-rate { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.wf-help-rate-q { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.wf-help-thumb {
  width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 1px solid transparent;
  background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.wf-help-thumb:hover { color: var(--white); background: var(--bg-hover, var(--bg-base)); }
.wf-help-thumb.is-on { color: var(--accent, var(--gold)); border-color: var(--accent, var(--gold)); }
.wf-help-thanks { font-size: 12px; color: var(--muted); margin-left: 4px; }
@media (max-width: 768px) {
  .wf-help-thumb { width: 44px; height: 44px; }
  .wf-help-actions .wf-help-go, .wf-help-tour-btn { min-height: 44px; }
  .wf-help-report { min-height: 44px; }
}

/* ── Tour ("Walk me through it") ── clicks pass through; only the tooltip takes them. */
.wf-tour-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; } /* above every app sheet, drawer and dialog (the invoice drawer is 9999) */
.wf-tour-shade { position: fixed; inset: 0; background: rgba(8,10,14,.38); opacity: 0; transition: opacity .15s ease; }
.wf-tour-layer.is-missing .wf-tour-shade { opacity: 1; }
.wf-tour-ring {
  position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 10px;
  border: 2px solid var(--accent, var(--gold)); box-shadow: 0 0 0 9999px rgba(8,10,14,.5), 0 0 0 6px rgba(201,169,110,.18);
  transition: transform .2s ease, width .2s ease, height .2s ease;
}
.wf-tour-layer.is-missing .wf-tour-ring { display: none; }
.wf-tour-tip {
  position: fixed; left: 0; top: 0; pointer-events: auto;
  width: min(340px, calc(100vw - 24px)); box-sizing: border-box; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-raised); color: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px);
  box-shadow: 0 18px 48px rgba(0,0,0,.32); font-family: var(--font-body);
}
.wf-tour-tip.is-moving { visibility: hidden; }
.wf-tour-tip:focus { outline: none; }
.wf-tour-head { display: flex; align-items: center; gap: 8px; }
.wf-tour-count { flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-tour-exit { flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.wf-tour-exit:hover { color: var(--white); background: var(--bg-hover, var(--bg-base)); }
.wf-tour-text { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; }
.wf-tour-miss { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--off-white, var(--muted)); padding: 8px 12px; border-radius: var(--radius-sm, 8px); background: var(--bg-base); border: 1px dashed var(--border); }
.wf-tour-miss[hidden] { display: none; }
.wf-tour-nav { display: flex; justify-content: flex-end; gap: 8px; }
.wf-tour-back, .wf-tour-next { min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill, 999px); font: 700 13.5px var(--font-body); cursor: pointer; }
.wf-tour-back { border: 1px solid var(--border); background: transparent; color: var(--white); }
.wf-tour-back:disabled { opacity: .4; cursor: default; }
.wf-tour-next { border: 0; background: var(--accent, var(--gold)); color: var(--on-accent, #0a0a0b); }
@media (max-width: 768px) {
  .wf-tour-tip { width: calc(100vw - 24px); }
  .wf-tour-exit { flex-basis: 44px; width: 44px; height: 44px; }
  .wf-tour-back, .wf-tour-next { min-height: 44px; flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .wf-tour-ring, .wf-tour-shade { transition: none; } }
@media print { .wf-tour-layer { display: none !important; } }