/* SPEEDY AI PANEL — Apple-level restyle (2026-11-08, Hal's 6 picks; feat/speedy-notifs-apple-1108)
   Builds on /css/wf-apple.css tokens. Scoped to html.ap-ui (set by /js/wf-speedy.js and /js/notif-center.js). Loaded AFTER every wf-help / wf-ai-helper sheet so same-specificity
   rules win. Night = html[data-remodel-mode="night"] (via the tokens). */

/* ── shell: a frosted floating card (desktop), a spring sheet (phone) ── */
html.ap-ui .wf-help-panel {
  background: var(--ap-mat-thick); -webkit-backdrop-filter: var(--ap-blur-strong); backdrop-filter: var(--ap-blur-strong);
  color: var(--ap-ink); border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-sh-3);
  font: var(--ap-t-body); transform-origin: 100% 100%;
}
html.ap-ui .wf-help-panel:not([hidden]) { animation: spd-pop var(--ap-d-slow) var(--ap-spring) both; }
html.ap-ui .wf-help-panel.spd-closing { animation: spd-out 200ms var(--ap-ease-in) both !important; pointer-events: none; }
@keyframes spd-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes spd-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.96); } }
html.ap-ui.wf-help-docked .wf-help-panel { border-radius: 0; box-shadow: -1px 0 0 var(--ap-hair), -24px 0 60px -30px rgba(0, 0, 0, .25); }

/* header: the still Speedy face on the Speedy AI tab + segmented tabs + quiet round tools */
html.ap-ui .wf-help-head { position: relative; z-index: 3; min-height: 60px; padding: 10px 10px 10px 16px; gap: 10px; border-bottom: 0;
  background: transparent; box-shadow: 0 .5px 0 var(--ap-hair); }
html.ap-ui .wf-help-title { display: none; }
html.ap-ui .wf-help-tabs.inv-kind-switch { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: 11px; background: var(--ap-fill); box-shadow: none; flex: 0 1 auto; }
html.ap-ui .wf-help-tabs .inv-kind-tab { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ap-ink-2);
  font: var(--ap-t-callout); font-size: 13.5px; letter-spacing: 0; text-transform: none; box-shadow: none; display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--ap-d) var(--ap-spring), color var(--ap-d-fast) ease, transform var(--ap-d) var(--ap-spring); }
html.ap-ui .wf-help-tabs .inv-kind-tab.active, html.ap-ui .wf-help-tabs .inv-kind-tab[aria-selected="true"] { background: var(--ap-card); color: var(--ap-ink); font-weight: 600; box-shadow: var(--ap-sh-1); }
html[data-remodel-mode="night"].ap-ui .wf-help-tabs .inv-kind-tab.active, html[data-remodel-mode="night"].ap-ui .wf-help-tabs .inv-kind-tab[aria-selected="true"] { background: #2a3440; }
html.ap-ui .wf-help-tabs .inv-kind-tab:active { transform: scale(.95); }
html.ap-ui .wf-help-tabs .wf-aih-beta { display: none; }
html.ap-ui .spd-tab-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--ap-tint); flex: 0 0 20px; }
html.ap-ui .wf-help-tools { gap: 4px; }
html.ap-ui .wf-help-tool, html.ap-ui .wf-help-x { width: 32px; height: 32px; min-height: 32px; border: 0; border-radius: 50%; background: var(--ap-fill); color: var(--ap-ink-2); box-shadow: none; }
html.ap-ui .wf-help-tool:hover, html.ap-ui .wf-help-x:hover { background: var(--ap-fill-2); color: var(--ap-ink); }
html.ap-ui .wf-help-tool svg, html.ap-ui .wf-help-x svg { width: 15px; height: 15px; }
html.ap-ui .wf-help-grip { opacity: .0; }
html.ap-ui .wf-help-head:hover .wf-help-grip { opacity: .7; }

/* the context line ("Looking at …"): one quiet caption capsule */
html.ap-ui .wf-aih-ctx { margin: 10px auto 0; padding: 4px 12px 4px 10px; border: 0; border-radius: 999px; background: var(--ap-fill); color: var(--ap-ink-2);
  font: var(--ap-t-foot); font-size: 12px; max-width: calc(100% - 32px); align-self: center; box-shadow: none; }
html.ap-ui .wf-aih-ctx-dot { background: var(--ap-green); }

/* ── Speedy stage: ONE live iframe, in the empty state only (the tab and the bubbles use the still) ── */
html.ap-ui .spd-stage { position: absolute; z-index: 4; pointer-events: none; overflow: visible;
  transition: top var(--ap-d-slow) var(--ap-spring), left var(--ap-d-slow) var(--ap-spring), width var(--ap-d-slow) var(--ap-spring), height var(--ap-d-slow) var(--ap-spring), opacity var(--ap-d) ease; }
html.ap-ui .spd-stage iframe, html.ap-ui .spd-stage img { display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; }
html.ap-ui .spd-stage img { object-fit: contain; }
html.ap-ui .spd-stage.is-hero { left: calc(50% - 95px); top: 100px; width: 190px; height: 206px; }
html.ap-ui .spd-stage.is-off { opacity: 0; visibility: hidden; }

/* ── empty state: hero space for Speedy, a large greeting, starters as an inset grouped list ── */
html.ap-ui .wf-aih-pane .wf-help-empty { margin: 0; padding: 206px 4px 8px; gap: 6px; align-items: center; text-align: center; }
html.ap-ui .wf-aih-pane .wf-aih-badge { order: 3; align-self: center; margin-top: 2px; padding: 0; border: 0; background: transparent; color: var(--ap-ink-3); font: var(--ap-t-cap); letter-spacing: .02em; }
html.ap-ui .wf-aih-pane .wf-aih-badge svg { display: none; }
html.ap-ui .wf-aih-pane .wf-aih-badge .wf-aih-beta { border: 0; padding: 1px 7px; background: var(--ap-fill); color: var(--ap-ink-2); font: var(--ap-t-cap); }
html.ap-ui .wf-aih-pane .wf-help-empty-title { order: 1; font: var(--ap-t-title); font-size: 23px; line-height: 28px; letter-spacing: -.01em; color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .wf-help-empty-sub { order: 2; font: var(--ap-t-foot); font-size: 14px; line-height: 20px; color: var(--ap-ink-2); max-width: 300px; }
html.ap-ui .wf-aih-pane .wf-help-sugg { order: 4; width: 100%; margin-top: 18px; gap: 0; border-radius: var(--ap-r); background: var(--ap-card); box-shadow: var(--ap-sh-1); overflow: hidden; text-align: left; }
html.ap-ui .wf-aih-pane .wf-help-chip { position: relative; display: flex; align-items: center; min-height: 48px; margin: 0; padding: 12px 40px 12px 16px; border: 0; border-radius: 0;
  background: transparent; color: var(--ap-ink); font: var(--ap-t-callout); font-size: 14.5px; text-align: left; box-shadow: none; transition: background var(--ap-d-fast) ease; }
html.ap-ui .wf-aih-pane .wf-help-chip + .wf-help-chip::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--ap-hair); }
html.ap-ui .wf-aih-pane .wf-help-chip::after { content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 1.8px solid var(--ap-ink-4); border-top: 1.8px solid var(--ap-ink-4); transform: rotate(45deg); }
html.ap-ui .wf-aih-pane .wf-help-chip:hover { background: var(--ap-fill); }
html.ap-ui .wf-aih-pane .wf-help-chip:active { background: var(--ap-fill-2); }

/* ── the thread: Messages-grade bubbles ── */
html.ap-ui .wf-aih-pane .wf-help-log { padding: 14px 14px 18px; gap: 14px; scroll-behavior: smooth; overflow-anchor: auto; }
html.ap-ui .wf-aih-pane .wf-help-msg { animation: spd-in var(--ap-d-slow) var(--ap-spring) both; }
@keyframes spd-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user { transform-origin: 100% 100%; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-help-bubble { max-width: 80%; padding: 9px 14px; border-radius: var(--ap-r-bubble); border-bottom-right-radius: 6px;
  background: var(--ap-blue); color: #fff; font: var(--ap-t-body); box-shadow: none; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot { gap: 8px; align-items: flex-start; transform-origin: 0 100%; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot::before { content: ''; flex: 0 0 28px; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: var(--ap-tint) url(/speedy/speedy-avatar.webp) 50% 40% / 116% auto no-repeat; box-shadow: 0 0 0 .5px var(--ap-hair); }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot .wf-help-bubble { flex: 1 1 auto; min-width: 0; width: auto; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html.ap-ui .wf-aih-pane .wf-aih-turn { gap: 10px; align-items: flex-start; }
html.ap-ui .wf-aih-pane .wf-aih-reply { display: inline-block; max-width: 92%; padding: 9px 14px; border-radius: var(--ap-r-bubble); border-bottom-left-radius: 6px;
  background: var(--ap-fill); color: var(--ap-ink); font: var(--ap-t-body); font-weight: 400; }
html.ap-ui .wf-aih-pane .wf-help-typing { display: inline-flex !important; align-items: center; gap: 5px; height: 38px; padding: 0 15px !important; border-radius: var(--ap-r-bubble) !important;
  border-bottom-left-radius: 6px !important; background: var(--ap-fill) !important; width: auto !important; flex: 0 0 auto !important; }
html.ap-ui .wf-aih-pane .wf-help-typing i { width: 7px; height: 7px; background: var(--ap-ink-4); animation: spd-dot 1.2s infinite var(--ap-ease-out); }
html.ap-ui .wf-aih-pane .wf-help-typing i:nth-child(2) { animation-delay: .16s; } html.ap-ui .wf-aih-pane .wf-help-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes spd-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* cards: preview / confirm / done — soft depth, no outlines, only what changes */
html.ap-ui .wf-aih-pane .wf-aih-card { width: 100%; gap: 12px; padding: 16px; border: 0; border-radius: 18px; background: var(--ap-card); box-shadow: var(--ap-sh-2);
  animation: spd-in var(--ap-d-slow) var(--ap-spring) 90ms both; }
html.ap-ui .wf-aih-pane .wf-aih-card.is-proposal { box-shadow: var(--ap-sh-2), inset 0 0 0 1px color-mix(in srgb, var(--ap-blue) 22%, transparent); }
html.ap-ui .wf-aih-pane .wf-aih-card.is-done { box-shadow: var(--ap-sh-2), inset 0 0 0 1px color-mix(in srgb, var(--ap-green) 32%, transparent); }
html.ap-ui .wf-aih-pane .wf-aih-card-type { font: var(--ap-t-cap); letter-spacing: .05em; color: var(--ap-ink-3); }
html.ap-ui .wf-aih-pane .wf-aih-card.is-proposal .wf-aih-card-type { color: var(--ap-blue-text); }
html.ap-ui .wf-aih-pane .wf-aih-card-title { font: var(--ap-t-head); font-size: 16.5px; color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .wf-aih-card-sub, html.ap-ui .wf-aih-pane .wf-aih-fine, html.ap-ui .wf-aih-pane .wf-aih-status { color: var(--ap-ink-2); font: var(--ap-t-foot); }
html.ap-ui .wf-aih-pane .wf-aih-field dt, html.ap-ui .wf-aih-pane .wf-aih-ba-l { color: var(--ap-ink-3); font: var(--ap-t-cap); letter-spacing: .02em; }
html.ap-ui .wf-aih-pane .wf-aih-field dd, html.ap-ui .wf-aih-pane .wf-aih-ba-v { color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .wf-aih-ba-box, html.ap-ui .wf-aih-pane .wf-aih-line { border: 0; border-radius: var(--ap-r-sm); background: var(--ap-fill); }
html.ap-ui .wf-aih-pane .wf-aih-ba-box.is-after { background: var(--ap-tint); }
html.ap-ui .wf-aih-pane .wf-aih-photo { border: 0; border-radius: 12px; background: var(--ap-fill); }
html.ap-ui .wf-aih-pane .wf-aih-acts { gap: 8px; }
html.ap-ui .wf-aih-pane .wf-aih-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 13px; background: var(--ap-fill); color: var(--ap-ink); font: var(--ap-t-callout); font-weight: 600;
  transition: transform var(--ap-d) var(--ap-spring), background var(--ap-d-fast) ease; }
html.ap-ui .wf-aih-pane .wf-aih-btn:hover { background: var(--ap-fill-2); }
html.ap-ui .wf-aih-pane .wf-aih-btn.is-primary { flex: 1 1 auto; background: var(--ap-blue); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--ap-blue) 26%, transparent); }
html.ap-ui .wf-aih-pane .wf-aih-btn.is-primary:hover { background: var(--ap-blue-hi); }
html.ap-ui .wf-aih-pane .wf-aih-btn:active, html.ap-ui .wf-aih-pane .wf-aih-chip:active, html.ap-ui .wf-help-send:active, html.ap-ui .wf-aih-pane .wf-help-chip:active { transform: scale(.955); transition-duration: 90ms; }
html.ap-ui .wf-aih-pane .wf-aih-chip { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ap-tint); color: var(--ap-blue-text); font: var(--ap-t-callout); font-size: 13.5px; font-weight: 600; }
html.ap-ui .wf-aih-pane .wf-aih-chip:hover { background: color-mix(in srgb, var(--ap-blue) 18%, transparent); color: var(--ap-blue-text); }
html.ap-ui .wf-aih-pane .wf-aih-step { border: 0; background: var(--ap-fill); border-radius: var(--ap-r-sm); }

/* confirm sheet: frosted, springs up, a grabber, one big Yes */
html.ap-ui .wf-aih-pane .wf-aih-sheet { background: var(--ap-scrim); animation: ap-fade var(--ap-d) ease both; }
html.ap-ui .wf-aih-pane .wf-aih-sheet-box { position: relative; padding: 24px 18px calc(18px + var(--ap-safe-b)); gap: 14px; border: 0; border-radius: var(--ap-r-sheet) var(--ap-r-sheet) 0 0;
  background: var(--ap-mat-thick); -webkit-backdrop-filter: var(--ap-blur-strong); backdrop-filter: var(--ap-blur-strong); box-shadow: var(--ap-sh-3);
  animation: spd-sheet var(--ap-d-slow) var(--ap-spring) both; }
html.ap-ui .wf-aih-pane .wf-aih-sheet-box::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--ap-fill-2); }
@keyframes spd-sheet { from { transform: translateY(100%); } to { transform: none; } }
html.ap-ui .wf-aih-pane .wf-aih-sheet-title { font: var(--ap-t-title); color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .wf-aih-sheet-sub { color: var(--ap-ink-2); font: var(--ap-t-foot); font-size: 14px; }
html.ap-ui .wf-aih-pane .wf-aih-sheet-lines { border: 0; border-radius: var(--ap-r); background: var(--ap-card); box-shadow: var(--ap-sh-1); padding: 12px 14px; color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .wf-aih-sheet-acts { flex-direction: column-reverse; gap: 6px; }
html.ap-ui .wf-aih-pane .wf-aih-sheet-acts .wf-aih-btn { min-height: 50px; border-radius: 14px; font: var(--ap-t-head); }
html.ap-ui .wf-aih-pane .wf-aih-sheet-acts .wf-aih-btn:not(.is-primary) { background: transparent; color: var(--ap-blue-text); box-shadow: none; }

/* ── composer: pinned, frosted bar, a capsule field with the send button inside ── */
html.ap-ui .wf-aih-pane .wf-help-compose { position: relative; margin: 0; padding: 8px 12px 6px; gap: 6px; border: 0; align-items: flex-end;
  background: var(--ap-mat); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: 0 -.5px 0 var(--ap-hair); }
html.ap-ui .wf-aih-pane .wf-help-input { min-height: 40px; padding: 9px 50px 9px 15px; border: 0; border-radius: 20px; background: var(--ap-card); color: var(--ap-ink);
  font: var(--ap-t-body); box-shadow: inset 0 0 0 .5px var(--ap-hair), var(--ap-sh-1); resize: none; }
html.ap-ui .wf-aih-pane .wf-help-input::placeholder { color: var(--ap-ink-3); }
html.ap-ui .wf-aih-pane .wf-help-input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ap-blue) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--ap-blue) 12%, transparent); }
html.ap-ui .wf-aih-pane .wf-help-send { position: absolute; right: 14px; bottom: 6px; flex: 0 0 44px; width: 44px; height: 44px; background: transparent; color: #fff; z-index: 1;
  transition: transform var(--ap-d) var(--ap-spring), opacity var(--ap-d-fast) ease; }
html.ap-ui .wf-aih-pane .wf-help-send::before { content: ''; position: absolute; left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--ap-blue); z-index: -1; transition: transform var(--ap-d) var(--ap-spring), background var(--ap-d-fast) ease; }
html.ap-ui .wf-aih-pane .wf-help-send svg { width: 15px; height: 15px; position: relative; }
html.ap-ui .wf-aih-pane .wf-help-compose:not(.spd-has-text) .wf-help-send::before { background: var(--ap-ink-4); transform: scale(.88); }
html.ap-ui .wf-aih-pane .wf-help-send:disabled { opacity: .5; }
html.ap-ui .wf-aih-pane .wf-aih-attach-btn { flex: 0 0 44px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ap-ink-2); position: relative; }
html.ap-ui .wf-aih-pane .wf-aih-attach-btn::before { content: ''; position: absolute; left: 6px; top: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--ap-fill); z-index: -1; }
html.ap-ui .wf-aih-pane .wf-aih-attach-btn { z-index: 0; }
html.ap-ui .wf-aih-pane .wf-aih-attach-btn svg { width: 18px; height: 18px; }
html.ap-ui .wf-aih-pane .wf-help-foot { padding: 0 16px 10px; background: var(--ap-mat); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); }
html.ap-ui .wf-aih-pane .wf-help-foot .wf-help-fine { color: var(--ap-ink-3); font: var(--ap-t-foot); font-size: 12px; }
html.ap-ui .wf-aih-pane .wf-help-pill-btn { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ap-blue-text); font: var(--ap-t-foot); font-weight: 600; }
html.ap-ui .wf-aih-pane .wf-help-pill-btn:hover { background: var(--ap-tint); }

/* ── the Help button: a frosted capsule with the bezel mark ── */
html.ap-ui .wf-help-btn { border: 0; background: var(--ap-mat-thick); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); color: var(--ap-ink);
  box-shadow: var(--ap-sh-2), inset 0 0 0 .5px var(--ap-hair); transition: transform var(--ap-d) var(--ap-spring), box-shadow var(--ap-d) ease; }
html.ap-ui .wf-help-btn:active { transform: scale(.94); }
html.ap-ui .wf-help-btn.is-open { background: var(--ap-blue); color: #fff; }

/* ── phone: a full-height sheet that springs up, with a real grabber and safe areas ── */
@media (max-width: 768px) {
  html.ap-ui .wf-help-panel { top: calc(env(safe-area-inset-top, 0px) + 10px) !important; border-radius: var(--ap-r-sheet) var(--ap-r-sheet) 0 0; transform-origin: 50% 100%; }
  html.ap-ui .wf-help-panel:not([hidden]) { animation: spd-up var(--ap-d-slow) var(--ap-spring) both; }
  html.ap-ui .wf-help-panel.spd-closing { animation: spd-down 240ms var(--ap-ease-in) both !important; }
  @keyframes spd-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes spd-down { from { transform: none; } to { transform: translateY(100%); } }
  html.ap-ui .wf-help-head { padding-top: 18px; min-height: 64px; }
  html.ap-ui .wf-help-head::before { top: 7px; width: 38px; margin-left: -19px; background: var(--ap-fill-2); opacity: 1; }
  html.ap-ui .wf-help-tools .wf-help-x { width: 44px; height: 44px; flex-basis: 44px; background: transparent; }
  html.ap-ui .wf-help-tools .wf-help-x::before { content: ''; position: absolute; left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--ap-fill); z-index: -1; }
  html.ap-ui .wf-help-tools .wf-help-x { position: relative; z-index: 0; }
  html.ap-ui .wf-help-tabs .inv-kind-tab { min-height: 36px; }
  html.ap-ui .spd-stage.is-hero { top: 82px; left: calc(50% - 100px); width: 200px; height: 216px; }
  html.ap-ui .wf-aih-pane .wf-help-empty { padding-top: 228px; }
  html.ap-ui .wf-aih-pane .wf-help-compose { padding-bottom: 6px; }
  html.ap-ui .wf-aih-pane .wf-help-foot { padding-bottom: calc(8px + var(--ap-safe-b)); }
  html.ap-ui .wf-aih-pane .wf-help-pill-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ap-ui .wf-help-panel, html.ap-ui .wf-help-panel *, html.ap-ui .spd-stage { animation: none !important; transition: none !important; }
}

/* ── round 2 (after the first look) ── */
/* one header row always (two short tabs fit at 390 and in the 400px card); 200% text still wraps via .is-stacked below */
html.ap-ui .wf-help-head, html.ap-ui .wf-help-head.is-stacked { flex-wrap: nowrap; }
html.ap-ui .wf-help-head .wf-help-tabs, html.ap-ui .wf-help-head.is-stacked .wf-help-tabs { order: 0; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; border-radius: 11px; }
html.ap-ui .wf-help-head .wf-help-tabs .inv-kind-tab { justify-content: center; min-width: 0; }
html.ap-ui .wf-help-head .wf-help-tools { order: 1; flex: 0 0 auto; }
html.ap-ui #wf-help-tab-ai { order: -1; }      /* Speedy AI first, Feedback second */
html.ap-ui .wf-help-head .wf-help-grip { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); }
html.ap-ui .spd-stage .spd-poster { position: absolute; inset: 0; }
html.ap-ui .spd-stage.is-live .spd-poster { opacity: 0; transition: opacity var(--ap-d) ease; }
/* bot turns: the avatar column (the turn has no bubble wrapper) */
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot.wf-aih-msg { display: flex; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot.wf-aih-msg > .wf-aih-turn { flex: 1 1 auto; min-width: 0; }
/* the "This page" answer card: an inset grouped list */
html.ap-ui .wf-aih-pane .wf-aih-card.is-screen { padding: 0; background: transparent; box-shadow: none; animation: none; }
html.ap-ui .wf-aih-pane .wf-aih-card.is-screen .wf-aih-lines { border-radius: var(--ap-r); background: var(--ap-card); box-shadow: var(--ap-sh-1); }
html.ap-ui .wf-aih-pane .wf-aih-card.is-screen .wf-aih-line { background: transparent; border-radius: 0; }
html.ap-ui .wf-aih-pane .wf-aih-line-title { color: var(--ap-ink); font: var(--ap-t-callout); font-weight: 600; }
html.ap-ui .wf-aih-pane .wf-aih-line-sub, html.ap-ui .wf-aih-pane .wf-aih-line-meta { color: var(--ap-ink-2); }
/* hero placement is measured (wf-speedy.js place()); reserve exactly its height + a 12px gap */
html.ap-ui .spd-stage.is-hero { top: 120px; }
html.ap-ui .wf-aih-pane .wf-help-empty { padding-top: 218px; }
@media (max-width: 768px) { html.ap-ui .spd-stage.is-hero { top: 140px; } html.ap-ui .wf-aih-pane .wf-help-empty { padding-top: 228px; } }
html.ap-ui .spd-stage.is-hero { transition: left var(--ap-d-slow) var(--ap-spring), width var(--ap-d-slow) var(--ap-spring), height var(--ap-d-slow) var(--ap-spring), opacity var(--ap-d) ease; }
/* the confirm sheet dims the header too, like a real sheet */
html.ap-ui .wf-aih-pane .wf-aih-sheet::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; background: var(--ap-scrim); }
/* the context capsule floats over the thread as a frosted chip */
html.ap-ui .wf-aih-ctx { position: relative; z-index: 2; background: var(--ap-mat-thick); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: var(--ap-sh-1), inset 0 0 0 .5px var(--ap-hair); }
/* desktop: a taller card by default so the empty state breathes (a size the person sets by dragging still wins: inline styles) */
@media (min-width: 769px) {
  html.ap-ui .wf-help-panel { height: min(760px, calc(100vh - 104px)); }
  html.ap-ui .spd-stage.is-hero { left: calc(50% - 80px); width: 160px; height: 174px; }
  html.ap-ui .wf-aih-pane .wf-help-empty { padding-top: 182px; }
}
/* round 2 (11-09): the 97% sheet still let the preview card's text ghost through behind "That's it?" (nested backdrop blur inside
   the frosted panel). The sheet itself is now opaque, and the blur moves to the scrim: what is behind the sheet is frosted and
   dimmed, so the material look stays and nothing behind the sheet is readable. */
html.ap-ui .wf-aih-pane .wf-aih-sheet { -webkit-backdrop-filter: saturate(140%) blur(6px); backdrop-filter: saturate(140%) blur(6px); }
html.ap-ui .wf-aih-pane .wf-aih-sheet-box { background: var(--ap-card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--ap-sh-3), inset 0 .5px 0 rgba(255, 255, 255, .7); }
html[data-remodel-mode="night"].ap-ui .wf-aih-pane .wf-aih-sheet-box { background: #18202a; box-shadow: var(--ap-sh-3), inset 0 .5px 0 rgba(255, 255, 255, .08); }
@media (prefers-reduced-transparency: reduce) { html.ap-ui .wf-aih-pane .wf-aih-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* build (2026-11-08): the composer field keeps a 44px tap target on phone */
@media (max-width: 768px) { html.ap-ui .wf-aih-pane .wf-help-input { min-height: 44px; padding-top: 11px; padding-bottom: 11px; } html.ap-ui .wf-aih-pane .wf-help-send { bottom: 6px; } }
/* after #1681 (pasted tables in the user bubble use --on-accent ink, made for the old gold bubble): on the blue Messages bubble
   the table reads in white, day and night */
html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-aih-grid th, html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-aih-grid td,
html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-aih-grid-hint, html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-aih-fine { color: #fff !important; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-aih-grid th, html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-aih-grid td { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22); }
/* white-on-blue fills use --ap-blue-fill (AA in night too) */
html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-help-bubble, html.ap-ui .wf-aih-pane .wf-aih-btn.is-primary,
html.ap-ui .wf-aih-pane .wf-help-send::before, html.ap-ui .wf-help-btn.is-open { background: var(--ap-blue-fill); }
html.ap-ui .wf-aih-pane .wf-aih-btn.is-primary:hover { background: color-mix(in srgb, var(--ap-blue-fill) 88%, #fff); }
html.ap-ui .wf-aih-pane .wf-help-compose:not(.spd-has-text) .wf-help-send::before { background: var(--ap-ink-4); }

/* ══ S5 (11-09): a native conversation with an employee ══════════════════════════════════════════════════════════════
   Message groups, tails, a still avatar per group, time dividers, receipts on your own messages, a typing indicator and
   step chips that settle into the reply, cards attached under the bubbles, and the "WatchFlow team" sender. Solid bubble
   colours (so a tail can overlap its bubble), AA text in day and night, 44px targets on phone. Reduced motion: none of it. */
html.ap-ui { --spd-bot: #eceef1; --spd-bot-ink: var(--ap-ink); --spd-team: #f7efdf; --spd-team-ring: rgba(150, 112, 44, .30);
  --spd-green-text: #1d6b42; --spd-amber-text: #7a5100; --spd-red-text: #b3261e; --spd-amber-tint: rgba(196, 140, 20, .16); --spd-green-tint: rgba(46, 139, 87, .14); }
html[data-remodel-mode="night"].ap-ui { --spd-bot: #232b35; --spd-team: #2c2619; --spd-team-ring: rgba(212, 175, 105, .28);
  --spd-green-text: #74d6a0; --spd-amber-text: #f0c46a; --spd-red-text: #ff8f86; --spd-amber-tint: rgba(240, 196, 106, .16); --spd-green-tint: rgba(116, 214, 160, .14); }

/* groups: a still avatar column; continued groups keep the column but hide the face; tight 3px gaps inside a group */
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot::before { content: none; display: none; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot { display: flex; gap: 8px; align-items: flex-start; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot > .wf-aih-turn { flex: 1 1 auto; min-width: 0; gap: 10px; }
html.ap-ui .wf-aih-pane .spd-av { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--ap-tint); box-shadow: 0 0 0 .5px var(--ap-hair); display: grid; place-items: center; }
html.ap-ui .wf-aih-pane .spd-av-img { width: 116%; height: 116%; object-fit: cover; object-position: 50% 30%; }
html.ap-ui .wf-aih-pane .spd-av.spd-av-team { background: #0f1822; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12); }
html.ap-ui .wf-aih-pane .spd-av.spd-av-team .ap-mark { width: 16px; height: 16px; color: #d4b06a; }
html.ap-ui .wf-aih-pane .wf-help-msg.spd-cont { margin-top: -11px; }
html.ap-ui .wf-aih-pane .wf-help-msg.spd-cont > .spd-av { visibility: hidden; height: 0; }
html.ap-ui .wf-aih-pane .wf-help-msg.spd-cont .spd-sender { display: none; }
html.ap-ui .wf-aih-pane .spd-sender { margin: 0 0 -6px 4px; font: var(--ap-t-cap); font-size: 11.5px; letter-spacing: .01em; color: var(--ap-ink-2); }

/* Speedy's bubbles: solid, 20px, joined corners inside a group, a tail on the group's last bubble */
html.ap-ui .wf-aih-pane .wf-aih-reply { position: relative; max-width: 88%; padding: 9px 14px; border-radius: 20px; background: var(--spd-bot); color: var(--spd-bot-ink); font: var(--ap-t-body); font-weight: 400; overflow-wrap: anywhere; }
html.ap-ui .wf-aih-pane .wf-aih-reply + .wf-aih-reply { margin-top: -7px; border-top-left-radius: 6px; }
html.ap-ui .wf-aih-pane .wf-aih-reply:not(.is-last), html.ap-ui .wf-aih-pane .wf-help-msg.spd-more .wf-aih-reply { border-bottom-left-radius: 6px; }
html.ap-ui .wf-aih-pane .wf-help-msg.spd-cont .wf-aih-turn > .wf-aih-reply:first-of-type { border-top-left-radius: 6px; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot:not(.spd-more) .wf-aih-reply.is-last { border-bottom-left-radius: 4px; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-bot:not(.spd-more) .wf-aih-reply.is-last::after { content: ''; position: absolute; left: -6px; bottom: 0; width: 16px; height: 20px; background: inherit; clip-path: path('M6 0H16V20H0C4 19.5 6 16 6 8Z'); pointer-events: none; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-canned .wf-aih-reply { color: var(--ap-ink-2); }
/* the WatchFlow team: a warm gold-tinted bubble, the bezel mark, a name over the group */
html.ap-ui .wf-aih-pane .wf-help-msg.is-team .wf-aih-reply { background: var(--spd-team); color: var(--ap-ink); }

/* your bubbles: joined corners, the tail on the last one, and the receipt under the newest */
html.ap-ui .wf-aih-pane .wf-help-msg.is-user { flex-direction: column; align-items: flex-end; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user .wf-help-bubble { position: relative; border-radius: 20px; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user.spd-more .wf-help-bubble { border-bottom-right-radius: 6px; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user.spd-cont .wf-help-bubble { border-top-right-radius: 6px; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user:not(.spd-more) .wf-help-bubble { border-bottom-right-radius: 4px; }
html.ap-ui .wf-aih-pane .wf-help-msg.is-user:not(.spd-more):not(.has-table) .wf-help-bubble::after { content: ''; position: absolute; right: -6px; bottom: 0; width: 16px; height: 20px; background: inherit; clip-path: path('M0 0H10V8C10 16 12 19.5 16 20H0Z'); pointer-events: none; }
html.ap-ui .wf-aih-pane .spd-receipt { display: flex; align-items: center; gap: 4px; margin: 4px 4px 0 0; font: 500 11.5px/14px var(--font-body); color: var(--ap-ink-3); animation: ap-fade var(--ap-d) ease both; }
html.ap-ui .wf-aih-pane .spd-receipt.is-working span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--ap-blue-text); vertical-align: 1px; animation: spd-breathe 1.2s ease-in-out infinite; }
html.ap-ui .wf-aih-pane .spd-receipt.is-failed { color: var(--spd-red-text); font-weight: 600; }
html.ap-ui .wf-aih-pane .spd-retry { min-height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ap-blue-text); font: 600 12px/1 var(--font-body); cursor: pointer; }
@keyframes spd-breathe { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* time dividers */
html.ap-ui .wf-aih-pane .spd-time { align-self: center; margin: 4px 0 -4px; font: 600 11.5px/14px var(--font-body); letter-spacing: .01em; color: var(--ap-ink-3); }

/* typing + step chips (live), then one quiet "done" line inside the first bubble */
html.ap-ui .wf-aih-pane .wf-aih-turn > .wf-help-typing { margin: 0; background: var(--spd-bot) !important; }
html.ap-ui .wf-aih-pane .spd-steps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
html.ap-ui .wf-aih-pane .spd-step { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--ap-fill); color: var(--ap-ink-2);
  font: 500 13px/18px var(--font-body); animation: spd-in var(--ap-d) var(--ap-spring) both; transition: background var(--ap-d) ease, color var(--ap-d) ease; }
html.ap-ui .wf-aih-pane .spd-step-ic { position: relative; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ap-blue-text) 25%, transparent); border-top-color: var(--ap-blue-text); animation: spd-spin .8s linear infinite; box-sizing: border-box; }
html.ap-ui .wf-aih-pane .spd-step.is-done { color: var(--ap-ink-3); }
html.ap-ui .wf-aih-pane .spd-step.is-done .spd-step-ic { border: 0; animation: spd-pop-in var(--ap-d) var(--ap-spring) both; background: var(--ap-green); }
html.ap-ui .wf-aih-pane .spd-step.is-done .spd-step-ic::after { content: ''; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
@keyframes spd-spin { to { transform: rotate(360deg); } }
@keyframes spd-pop-in { from { transform: scale(.4); } to { transform: none; } }
html.ap-ui .wf-aih-pane .spd-did { display: flex; align-items: center; gap: 5px; margin: -1px 0 3px; font: 500 12px/16px var(--font-body); color: var(--ap-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ap-fade var(--ap-d) ease both; }
html.ap-ui .wf-aih-pane .spd-did span { overflow: hidden; text-overflow: ellipsis; }
html.ap-ui .wf-aih-pane .spd-did svg { flex: 0 0 12px; color: var(--spd-green-text); }
html.ap-ui .wf-aih-pane .wf-aih-turn > .spd-did { padding: 0 4px; }

/* cards attached under the bubbles: same column, a hair closer to their bubble */
html.ap-ui .wf-aih-pane .wf-aih-reply + .wf-aih-card { margin-top: -4px; }
html.ap-ui .wf-aih-pane .wf-aih-card { max-width: 100%; box-sizing: border-box; }
/* inset rows (math lines, records, choices, the switch): hairlines, no boxes inside the card */
html.ap-ui .wf-aih-pane .spd-list { display: flex; flex-direction: column; margin: 0 -16px; }
html.ap-ui .wf-aih-pane .spd-row, html.ap-ui .wf-aih-pane .spd-pick { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 9px 16px; border: 0; border-radius: 0;
  background: transparent; color: var(--ap-ink); text-align: left; font: inherit; box-sizing: border-box; }
html.ap-ui .wf-aih-pane .spd-list > * + *::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--ap-hair); }
html.ap-ui .wf-aih-pane .spd-row.is-go, html.ap-ui .wf-aih-pane .spd-pick { cursor: pointer; transition: background var(--ap-d-fast) ease, transform var(--ap-d) var(--ap-spring); }
html.ap-ui .wf-aih-pane .spd-row.is-go:hover, html.ap-ui .wf-aih-pane .spd-pick:hover:not(:disabled) { background: var(--ap-fill); }
html.ap-ui .wf-aih-pane .spd-row.is-go:active, html.ap-ui .wf-aih-pane .spd-pick:active:not(:disabled) { background: var(--ap-fill-2); }
html.ap-ui .wf-aih-pane .spd-row-main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
html.ap-ui .wf-aih-pane .spd-row-t { font: var(--ap-t-callout); font-weight: 600; color: var(--ap-ink); overflow-wrap: anywhere; }
html.ap-ui .wf-aih-pane .spd-row-s { font: var(--ap-t-foot); font-size: 12.5px; color: var(--ap-ink-2); overflow-wrap: anywhere; }
html.ap-ui .wf-aih-pane .spd-row-v { flex: 0 0 auto; font: 600 14.5px/20px var(--font-body); font-variant-numeric: tabular-nums; color: var(--ap-ink); white-space: nowrap; }
html.ap-ui .wf-aih-pane .spd-row-v.is-flag, html.ap-ui .wf-aih-pane .spd-row.is-flag .spd-row-t { color: var(--spd-red-text); }
html.ap-ui .wf-aih-pane .spd-row-chev { flex: 0 0 7px; width: 7px; height: 7px; margin-left: -2px; border-right: 1.8px solid var(--ap-ink-4); border-top: 1.8px solid var(--ap-ink-4); transform: rotate(45deg); }
html.ap-ui .wf-aih-pane .spd-list > .spd-row:last-child:not(.is-go) { padding-bottom: 4px; }
html.ap-ui .wf-aih-pane .spd-more-btn { align-self: flex-start; min-height: 36px; margin: -6px 0 -4px; padding: 0; border: 0; background: transparent; color: var(--ap-blue-text); font: var(--ap-t-callout); font-weight: 600; cursor: pointer; }
/* the answer figure first */
html.ap-ui .wf-aih-pane .spd-figs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
html.ap-ui .wf-aih-pane .spd-fig { display: flex; flex-direction: column; gap: 2px; }
html.ap-ui .wf-aih-pane .spd-fig-l { font: var(--ap-t-cap); letter-spacing: .02em; color: var(--ap-ink-3); }
html.ap-ui .wf-aih-pane .spd-fig-v { font: 600 15px/20px var(--font-body); font-variant-numeric: tabular-nums; color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .spd-fig.is-main .spd-fig-v { font: 700 28px/32px var(--font-body); letter-spacing: -.01em; }
html.ap-ui .wf-aih-pane .spd-math .wf-aih-card-type { color: var(--spd-green-text); }
html.ap-ui .wf-aih-pane .spd-rules summary, html.ap-ui .wf-aih-pane .wf-aih-src summary { min-height: 32px; display: flex; align-items: center; color: var(--ap-blue-text); font: var(--ap-t-foot); font-weight: 600; cursor: pointer; }
html.ap-ui .wf-aih-pane .spd-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -2px; }
/* the picker: radio-style rows; the pick fills, the rest fade */
html.ap-ui .wf-aih-pane .spd-pick-dot { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ap-ink-4); transition: box-shadow var(--ap-d) var(--ap-spring), background var(--ap-d-fast) ease; }
html.ap-ui .wf-aih-pane .spd-pick.is-picked .spd-pick-dot { background: var(--ap-blue-fill); box-shadow: inset 0 0 0 5px var(--ap-card), 0 0 0 1.5px var(--ap-blue-fill); }
html.ap-ui .wf-aih-pane .is-decided .spd-pick:not(.is-picked) { opacity: .5; }
html.ap-ui .wf-aih-pane .spd-pick:disabled { cursor: default; color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .wf-aih-card.is-picker { padding-bottom: 4px; }
/* the nudge: a quiet suggestion */
html.ap-ui .wf-aih-pane .wf-aih-card.is-nudge { background: color-mix(in srgb, var(--ap-card) 86%, var(--ap-gold)); }
html.ap-ui .wf-aih-pane .wf-aih-card.is-nudge .wf-aih-card-type { color: var(--spd-amber-text); }
/* build requests: their words as a quote, Speedy's summary, a category pill, Send as the one primary */
html.ap-ui .wf-aih-pane .spd-quote { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--ap-fill); color: var(--ap-ink); font: var(--ap-t-body); font-style: italic; overflow-wrap: anywhere; }
html.ap-ui .wf-aih-pane .spd-br-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html.ap-ui .wf-aih-pane .spd-br-sum { font: var(--ap-t-callout); color: var(--ap-ink-2); }
html.ap-ui .spd-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border-radius: 999px; font: 600 11.5px/14px var(--font-body); letter-spacing: .01em; white-space: nowrap; background: var(--ap-fill-2); color: var(--ap-ink-2); }
html.ap-ui .spd-pill.is-planned { background: var(--ap-tint); color: var(--ap-blue-text); }
html.ap-ui .spd-pill.is-building { background: var(--spd-amber-tint); color: var(--spd-amber-text); }
html.ap-ui .spd-pill.is-shipped { background: var(--spd-green-tint); color: var(--spd-green-text); }
html.ap-ui .spd-pill.is-declined { background: var(--ap-fill); color: var(--ap-ink-3); }
html.ap-ui .wf-aih-pane .wf-aih-card.is-sent { box-shadow: var(--ap-sh-2), inset 0 0 0 1px color-mix(in srgb, var(--ap-green) 32%, transparent); }
html.ap-ui .wf-aih-pane .wf-aih-card .wf-aih-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.ap-ui .wf-aih-pane .wf-aih-card .wf-aih-status:empty { display: none; }
html.ap-ui .wf-aih-pane .spd-sent { display: inline-flex; align-items: center; gap: 6px; color: var(--spd-green-text); font: var(--ap-t-callout); font-weight: 600; }
html.ap-ui .wf-aih-pane .wf-aih-card.is-shipped .wf-aih-card-type { color: var(--spd-green-text); }
/* set it up: the switch (a picture of it; Confirm flips it), then the steps */
html.ap-ui .wf-aih-pane .spd-switch { position: relative; flex: 0 0 46px; width: 46px; height: 28px; border-radius: 999px; background: var(--ap-fill-2); transition: background var(--ap-d) ease; }
html.ap-ui .wf-aih-pane .spd-switch i { position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform var(--ap-d) var(--ap-spring); }
html.ap-ui .wf-aih-pane .spd-switch.is-on { background: var(--ap-green); }
html.ap-ui .wf-aih-pane .spd-switch.is-on i { transform: translateX(18px); }
html.ap-ui .wf-aih-pane .spd-howto { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.ap-ui .wf-aih-pane .spd-howto li { display: flex; align-items: flex-start; gap: 10px; font: var(--ap-t-callout); color: var(--ap-ink); }
html.ap-ui .wf-aih-pane .spd-howto-n, html.ap-ui .spd-coach-n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ap-tint); color: var(--ap-blue-text); font: 700 12px/1 var(--font-body); }

/* My requests (sheet) */
html.ap-ui .wf-aih-pane .spd-req-list { display: flex; flex-direction: column; overflow-y: auto; }
html.ap-ui .wf-aih-pane .spd-req { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
html.ap-ui .wf-aih-pane .spd-req + .spd-req::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: .5px; background: var(--ap-hair); }
html.ap-ui .wf-aih-pane .spd-req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
html.ap-ui .wf-aih-pane .spd-req-words { font: var(--ap-t-foot); font-size: 13.5px; font-style: italic; color: var(--ap-ink-2); overflow-wrap: anywhere; }
html.ap-ui .wf-aih-pane .spd-req-reply { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 8px 12px; border-radius: 14px; background: var(--spd-team); color: var(--ap-ink); font: var(--ap-t-foot); font-size: 13.5px; overflow-wrap: anywhere; }
html.ap-ui .wf-aih-pane .spd-req-reply .spd-av { flex: 0 0 18px; width: 18px; height: 18px; align-self: center; }
html.ap-ui .wf-aih-pane .spd-req-reply .spd-av .ap-mark { width: 11px; height: 11px; }
html.ap-ui .wf-aih-pane .spd-req-from { font-weight: 700; }
html.ap-ui .wf-aih-pane .spd-req .wf-aih-btn.is-primary { align-self: flex-start; margin-top: 4px; }
html.ap-ui .wf-aih-pane .spd-req-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; }

/* the "Show me" coach: a small card over the real page, the place lit up */
html.ap-ui .spd-coach { position: fixed; left: calc(50% - 160px); bottom: 24px; z-index: 1160; width: 320px; max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px; border-radius: 20px; background: var(--ap-card); color: var(--ap-ink); box-shadow: var(--ap-sh-3); font: var(--ap-t-body); animation: spd-pop var(--ap-d-slow) var(--ap-spring) both; }
html.ap-ui .spd-coach-head { display: flex; align-items: center; gap: 8px; }
html.ap-ui .spd-coach-head .spd-av-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--ap-tint); }
html.ap-ui .spd-coach .spd-coach-n { flex: 1 1 auto; width: auto; height: auto; display: block; background: none; color: var(--ap-ink-2); font: var(--ap-t-cap); font-size: 12px; letter-spacing: .02em; }
html.ap-ui .spd-coach-x { width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; border-radius: 50%; background: transparent; color: var(--ap-ink-2); display: grid; place-items: center; cursor: pointer; }
html.ap-ui .spd-coach .wf-aih-btn { min-height: 44px; border: 0; border-radius: 13px; font: var(--ap-t-callout); font-weight: 600; cursor: pointer; }
html.ap-ui .spd-coach .wf-aih-btn.is-primary { background: var(--ap-blue-fill); color: #fff; }
html.ap-ui .spd-spot { outline: 3px solid var(--ap-blue); outline-offset: 4px; border-radius: 10px; animation: spd-spot 1.6s var(--ap-ease-out) 2; }
@keyframes spd-spot { 0% { outline-offset: 12px; outline-color: transparent; } 40% { outline-offset: 4px; outline-color: var(--ap-blue); } 100% { outline-offset: 4px; } }

@media (max-width: 768px) {
  html.ap-ui .wf-aih-pane .spd-row, html.ap-ui .wf-aih-pane .spd-pick { min-height: 52px; }
  html.ap-ui .wf-aih-pane .spd-retry, html.ap-ui .wf-aih-pane .spd-more-btn, html.ap-ui .wf-aih-pane .spd-rules summary, html.ap-ui .wf-aih-pane .wf-aih-src summary { min-height: 44px; }
  html.ap-ui .wf-aih-pane .wf-aih-reply { max-width: 86%; }
  html.ap-ui .spd-coach { left: 16px; right: 16px; width: auto; bottom: calc(var(--mobile-bottom-nav-h, 64px) + 12px + var(--ap-safe-b)); }
}
@media (prefers-reduced-motion: reduce) {
  html.ap-ui .spd-coach, html.ap-ui .spd-spot, html.ap-ui .spd-coach * { animation: none !important; transition: none !important; }
}
/* a sheet's own close (11-09): NOT .wf-help-x, which wf-speedy.js treats as "close the whole panel" */
html.ap-ui .wf-aih-pane .wf-aih-sheet-head { justify-content: space-between; }
html.ap-ui .wf-aih-pane .wf-aih-sheet-x { position: relative; z-index: 0; flex: 0 0 44px; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: 50%; background: transparent; color: var(--ap-ink-2); display: grid; place-items: center; cursor: pointer; }
html.ap-ui .wf-aih-pane .wf-aih-sheet-x::before { content: ''; position: absolute; left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--ap-fill); z-index: -1; }
html.ap-ui .wf-aih-pane .wf-aih-sheet-x svg { width: 14px; height: 14px; }

/* ── Panel polish (2026-11-10, Hal: "an Apple-designed, native conversation"). Thread and cards only; nothing here
   touches the launcher / bubble position. ───────────────────────────────────────────────────────────────────── */
/* The thread: its first message always clears the floating "Looking at" pill (padding), and only content that is
   scrolled up fades out under it (mask), instead of being cut in a hard line. */
html.ap-ui .wf-aih-pane .wf-help-log { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px); padding-top: var(--spd-log-top, 24px); scroll-padding-top: var(--spd-log-top, 24px); }
html.ap-ui .wf-aih-pane .wf-help-log > .wf-help-msg { scroll-margin-top: var(--spd-log-top, 24px); }
/* The settled progress line: one short complete phrase, never cut mid-word. */
html.ap-ui .wf-aih-pane .spd-did { white-space: normal; overflow: visible; text-overflow: clip; }
html.ap-ui .wf-aih-pane .spd-did span { overflow: visible; text-overflow: clip; }
/* Result tables: a quiet header on the card's own fill (it read as a black bar at night). */
html.ap-ui .wf-aih-pane .wf-aih-table th { background: var(--ap-fill); color: var(--ap-ink-2); }
/* Rows of a list (a name, then numbers): one line each, the same height. The name takes the free width and ends in "…"
   only when it truly does not fit; numbers sit right in tabular figures. */
html.ap-ui .wf-aih-pane .wf-aih-table.is-rows th, html.ap-ui .wf-aih-pane .wf-aih-table.is-rows td { height: 40px; padding: 0 10px; white-space: nowrap; vertical-align: middle; box-sizing: border-box; }
html.ap-ui .wf-aih-pane .wf-aih-table.is-rows th:first-child, html.ap-ui .wf-aih-pane .wf-aih-table.is-rows td:first-child { width: 99%; max-width: 0; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; }
html.ap-ui .wf-aih-pane .wf-aih-table.is-rows th { letter-spacing: .03em; }
html.ap-ui .wf-aih-pane .wf-aih-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
html.ap-ui .wf-aih-pane .wf-aih-table.is-rows th:not(:first-child), html.ap-ui .wf-aih-pane .wf-aih-table.is-rows td:not(:first-child) { width: 1%; padding-left: 6px; }
/* A sent request: the summary, its category and where it stands, once. */
html.ap-ui .spd-pill.is-sent { background: var(--spd-green-tint); color: var(--spd-green-text); }
html.ap-ui .wf-aih-pane .spd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* App notification pop-ups while the panel is open on a phone: they sat on the composer. They now drop in under the
   panel's header, over the thread, so neither the header nor the composer is ever covered. CSS only: the pop-up code
   and its API are untouched (html.wf-help-open is the panel's own open flag). */
@media (max-width: 768px) {
  html.ap-ui.wf-help-open .nt-stack { top: calc(env(safe-area-inset-top, 0px) + var(--spd-toast-top, 96px)); bottom: auto; flex-direction: column; }
  html.ap-ui.wf-help-open .nt-toast, html.ap-ui.wf-help-open .nt-toast.nt-out { transform: translateY(-16px); }
  html.ap-ui.wf-help-open .nt-toast.nt-in { transform: none; }
}