/* ═══════════════════════════════════════════════════════════════════════════
   SAM — Smart Assistance Manager · shell-level chat widget
   Loaded by portal/index.html into the SHELL document only (never into an app
   iframe). Everything here is scoped to #sam-fab / #sam-panel so nothing leaks
   into the home page or an app.

   THE DESIGN IS THE LAW: docs/design/sam/CSD-AI-Manager.v2.dc.html (widget
   markup, lines 504-598). Floating FAB pill bottom-right + an anchored card
   above it — NOT the old right-edge slide-over.

   Colour discipline: Fluent blue #0F6CBD is the machine/brand ink. There is
   exactly ONE green in this surface — `--sam-online`, the header presence dot,
   which the owner's design chose. Nothing else in the widget may be green; a
   completed/verified mark stays blue (--sam-ok #2563eb).
   ═══════════════════════════════════════════════════════════════════════════ */

#sam-fab, #sam-panel {
  --sam-blue: #0F6CBD;
  --sam-blue-h: #115EA3;
  --sam-tint: #EFF6FC;
  --sam-chip-line: #b3d1ec;
  --sam-line: #e1dfdd;
  --sam-line-2: #f3f2f1;
  --sam-thread: #faf9f8;
  --sam-ink: #201f1e;
  --sam-ink-2: #605e5c;
  --sam-ink-3: #a19f9d;
  --sam-field: #c8c6c4;
  /* The owner's design chose #6BB700 for the "SAM is online" presence dot in the
     widget header. It is the ONLY green anywhere in this surface — do not reuse
     it for status, success, deltas or ticks. A tick is --sam-ok (blue). */
  --sam-online: #6BB700;
  --sam-offline: #c8c6c4;
  --sam-badge: #CA5010;
  --sam-ok: #2563eb;
  --sam-warn: #8a5300;
  --sam-err: #A4262C;
  --sam-err-bg: #FCF0F0;
  --sam-font: var(--font, 'Segoe UI', system-ui, -apple-system, sans-serif);
}

@keyframes samin  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes samdot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes sam-spin { to { transform: rotate(360deg); } }

/* ═════════════════ launcher — the floating FAB pill ═════════════════ */
#sam-fab {
  /* bottom:88px clears the in-app floating action buttons that live inside the iframe
     (procure/styles.css .fab = right:16px bottom:16px, 56px tall → 72px tall stack);
     z-index 55 keeps SAM UNDER the shell's own modals, menus and toasts (60+). */
  position: fixed; right: 22px; bottom: 88px; z-index: 55;
  display: flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; background: var(--sam-blue); color: #fff;
  font: 600 13.5px/1 var(--sam-font); cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 108, 189, .42);
  /* --sam-dock is the ONLY thing the auto-dock animates (plus opacity). Keeping it a custom
     property is what lets the :hover lift compose with it instead of cancelling it: both rules
     write translateX(var(--sam-dock)), so whichever wins still carries the dock offset. */
  --sam-dock: 0px;
  transform: translateX(var(--sam-dock));
  transition: background .15s ease, transform .28s ease, opacity .28s ease;
}
#sam-fab:hover { background: var(--sam-blue-h); transform: translateX(var(--sam-dock)) translateY(-1px); }
#sam-fab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
#sam-fab svg { display: block; flex: none; }
#sam-fab .sam-fab-label { white-space: nowrap; }
/* Unread mark — a DOT, never a fabricated count. Cleared on first open. */
#sam-fab .sam-fab-dot {
  position: absolute; top: -3px; right: -2px; width: 14px; height: 14px;
  border-radius: 999px; background: var(--sam-badge); border: 2px solid #fff;
  box-sizing: border-box;
  transition: opacity .28s ease;
}

/* ═════════════════ docked state ═════════════════
   After 5s idle the pill slides right until only a 14px tab is left flush against the viewport
   edge (20px on a phone). The maths: the FAB's right edge sits 22px in, so translating by
   (own width − 14px + 22px) leaves exactly 14px showing, hard against the edge.

   ⚠ TRANSFORM + OPACITY ONLY — never width/right/display. Animating the box would reflow the
   label and fight the pill's own layout; a transform is composited, cheap, and leaves the
   button's hit box, tab order and accessible name completely untouched. The docked FAB is still
   a real, focusable, clickable button: it is NOT hidden, it has moved.
   ⚠ These rules sit AFTER :hover deliberately — equal specificity, so source order decides, and
   a pointer that lands on the tab must not visually undock it before assistant.js says so. */
#sam-fab.is-docked {
  --sam-dock: calc(100% - 14px + 22px);
  opacity: .85;
  box-shadow: -3px 6px 18px rgba(15, 108, 189, .32);
}
#sam-fab.is-docked .sam-fab-label,
#sam-fab.is-docked .sam-fab-dot { opacity: 0; }
#sam-fab .sam-fab-label { transition: opacity .18s ease; }
/* The tab's glyph — decoration inside the same button, so it can never be a second control. */
#sam-fab .sam-fab-tab {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
#sam-fab .sam-fab-tab svg { display: block; }
#sam-fab.is-docked .sam-fab-tab { opacity: .95; }

/* ═════════════════ shortcut hint ═════════════════
   A once-per-session nudge above the FAB. ⚠ pointer-events:none is load-bearing — it sits over
   the launcher's hit area, and a hint that blocks the button it describes is a bug. z-index sits
   just under the FAB for the same reason. Auto-dismisses after ~5s (assistant.js). */
#sam-tip {
  /* Sits LEFT of the docked tab (the tab occupies the outer 14px), vertically level with it —
     the hint appears on the first dock of the session, so it must point at the tab, not at the
     pill that has just left. */
  position: fixed; right: 24px; bottom: 92px; z-index: 54;
  max-width: min(230px, calc(100vw - 62px));
  background: #fff; color: var(--sam-ink); border: 1px solid var(--sam-line);
  border-left: 3px solid var(--sam-blue); border-radius: 8px;
  padding: 8px 12px; font: 400 11.5px/1.4 var(--sam-font);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  pointer-events: none;
  opacity: 0; transform: translateX(8px);
  transition: opacity .22s ease, transform .22s ease;
}
#sam-tip.is-in { opacity: 1; transform: translateX(0); }
@media (max-width: 480px) { #sam-tip { right: 30px; bottom: 88px; } }
@media (prefers-reduced-motion: reduce) { #sam-tip { transition: opacity .22s ease; transform: none; } }

/* ═════════════════ widget card ═════════════════ */
#sam-panel {
  /* Opens directly above the FAB: 88px (FAB bottom) + 52px (FAB height) + 12px gap = 152px.
     The height budget is bottom + a 32px top gap, so it can never overrun the viewport. */
  position: fixed; right: 22px; bottom: 152px; z-index: 55;
  width: min(408px, calc(100vw - 34px));
  height: min(600px, calc(100vh - 184px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--sam-line); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
  transform-origin: 100% 100%;
  transform: translateY(14px) scale(.96); opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
  font: 400 13px/1.5 var(--sam-font); color: var(--sam-ink);
}
#sam-panel.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

@media (max-width: 480px) {
  /* Same 66px lift as desktop, so the FAB still clears an in-app FAB on a phone and the
     card still sits above it (the card stays edge-to-edge; only the vertical anchor moves). */
  #sam-fab { right: 16px; bottom: 82px; width: 52px; padding: 0; justify-content: center; }
  #sam-fab .sam-fab-label { display: none; }
  /* A 20px tab, not 14px: it is flush with the screen edge, so Fitts's law makes it effectively
     unmissable horizontally, and a tap does the whole job (undock AND open) in one gesture —
     which is why the absence of hover on touch costs nothing here. */
  #sam-fab .sam-fab-tab { width: 20px; }
  #sam-fab.is-docked { --sam-dock: calc(100% - 20px + 16px); }
  #sam-panel {
    right: 10px; left: 10px; width: auto; bottom: 144px;
    height: min(600px, calc(100vh - 172px));
  }
}
@media (prefers-reduced-motion: reduce) {
  #sam-panel { transition: opacity .18s ease; }
  #sam-panel .sam-msg { animation: none; }
  /* Docking/undocking becomes an instant jump — the position still changes (that IS the
     feature), only the 280ms slide is dropped. */
  #sam-fab { transition: background .15s ease; }
  #sam-fab .sam-fab-tab,
  #sam-fab .sam-fab-label,
  #sam-fab .sam-fab-dot { transition: none; }
}

/* ═════════════════ header ═════════════════ */
#sam-panel .sam-head {
  flex: none; height: 62px; box-sizing: border-box;
  background: var(--sam-blue); color: #fff;
  padding: 13px 14px 13px 16px; display: flex; align-items: center; gap: 11px;
}
#sam-panel .sam-av {
  width: 36px; height: 36px; flex: none; border-radius: 999px;
  background: rgba(255, 255, 255, .18); display: grid; place-items: center; position: relative;
}
#sam-panel .sam-av svg { display: block; }
#sam-panel .sam-dot {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 999px; background: var(--sam-online); border: 2px solid var(--sam-blue);
  box-sizing: border-box;
}
#sam-panel .sam-dot.is-off { background: var(--sam-offline); }
#sam-panel .sam-id { flex: 1; min-width: 0; }
#sam-panel .sam-mark { font-size: 14px; font-weight: 600; line-height: 1.2; }
#sam-panel .sam-sub {
  font-size: 11.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sam-panel .sam-ic {
  width: 30px; height: 30px; flex: none; border: 0; border-radius: 6px; background: transparent;
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s ease;
}
#sam-panel .sam-ic:hover { background: rgba(255, 255, 255, .15); }
#sam-panel .sam-ic:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
#sam-panel .sam-ic svg { display: block; }
#sam-panel .sam-ic[hidden] { display: none; }

/* ═════════════════ thread ═════════════════ */
#sam-panel .sam-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  background: var(--sam-thread); padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain;
}
#sam-panel .sam-body > div:empty { display: none; }
#sam-panel .sam-thread { display: flex; flex-direction: column; gap: 12px; }
#sam-panel .sam-sep {
  text-align: center; font-size: 10.5px; color: var(--sam-ink-3); padding: 2px 0 0;
}

#sam-panel .sam-msg {
  display: flex; flex-direction: column; align-items: flex-start;
  animation: samin .18s ease both;
}
#sam-panel .sam-msg.is-user { align-items: flex-end; }
#sam-panel .sam-row {
  display: flex; gap: 8px; align-items: flex-end; max-width: 90%; flex-direction: row;
}
#sam-panel .sam-msg.is-user .sam-row { flex-direction: row-reverse; }
#sam-panel .sam-mav {
  width: 24px; height: 24px; flex: none; border-radius: 999px;
  background: var(--sam-blue); color: #fff; display: grid; place-items: center;
}
#sam-panel .sam-mav svg { display: block; }
#sam-panel .sam-bubble {
  background: #fff; color: var(--sam-ink); border: 1px solid var(--sam-line);
  border-radius: 12px 12px 12px 4px; padding: 9px 13px;
  font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0;
}
#sam-panel .sam-msg.is-user .sam-bubble {
  background: var(--sam-blue); color: #fff; border-color: var(--sam-blue);
  border-radius: 12px 12px 4px 12px;
}
#sam-panel .sam-bubble > :first-child { margin-top: 0; }
#sam-panel .sam-bubble > :last-child { margin-bottom: 0; }
#sam-panel .sam-bubble p { margin: 0 0 8px; white-space: pre-wrap; }
#sam-panel .sam-bubble h1,
#sam-panel .sam-bubble h2,
#sam-panel .sam-bubble h3,
#sam-panel .sam-bubble h4 { margin: 10px 0 5px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
#sam-panel .sam-bubble h1 { font-size: 14px; }
#sam-panel .sam-bubble h2 { font-size: 13.5px; }
#sam-panel .sam-bubble ul,
#sam-panel .sam-bubble ol { margin: 0 0 8px; padding-left: 20px; }
#sam-panel .sam-bubble li { margin: 0 0 3px; }
#sam-panel .sam-bubble code {
  font-family: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace; font-size: 11.5px;
  background: var(--sam-line-2); border: 1px solid var(--sam-line); border-radius: 3px; padding: 0 4px;
}
#sam-panel .sam-bubble pre {
  margin: 0 0 8px; background: var(--sam-thread); border: 1px solid var(--sam-line);
  border-radius: 6px; padding: 8px 10px; overflow-x: auto;
}
#sam-panel .sam-bubble pre code { border: 0; background: none; padding: 0; }
#sam-panel .sam-bubble a { color: var(--sam-blue); text-decoration: underline; }
#sam-panel .sam-msg.is-user .sam-bubble a,
#sam-panel .sam-msg.is-user .sam-bubble code { color: #fff; }
#sam-panel .sam-msg.is-user .sam-bubble code { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
#sam-panel .sam-bubble table {
  width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 11.5px;
  display: block; overflow-x: auto;
}
#sam-panel .sam-bubble th, #sam-panel .sam-bubble td {
  border-bottom: 1px solid var(--sam-line); padding: 4px 8px 4px 0; text-align: left; white-space: nowrap;
}
#sam-panel .sam-bubble th { font-weight: 600; color: var(--sam-ink-2); }
#sam-panel .sam-tail { white-space: pre-wrap; }
#sam-panel .sam-caret {
  display: inline-block; width: 6px; height: 13px; margin-left: 1px;
  background: var(--sam-ink-3); vertical-align: -2px; animation: sam-blink 1s steps(2) infinite;
}
@keyframes sam-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #sam-panel .sam-caret { animation: none; } }

/* typing indicator — 3 bouncing dots, up until the first token lands */
#sam-panel .sam-typing { display: flex; gap: 8px; align-items: flex-end; }
#sam-panel .sam-typing .sam-dots {
  background: #fff; border: 1px solid var(--sam-line); border-radius: 12px 12px 12px 4px;
  padding: 12px 14px; display: flex; gap: 4px; align-items: center;
}
#sam-panel .sam-typing .sam-dots span {
  width: 6px; height: 6px; border-radius: 999px; background: var(--sam-blue);
  animation: samdot 1.1s infinite;
}
#sam-panel .sam-typing .sam-dots span:nth-child(2) { animation-delay: .15s; }
#sam-panel .sam-typing .sam-dots span:nth-child(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { #sam-panel .sam-typing .sam-dots span { animation: none; opacity: .5; } }

/* k/v card — the renderer for a `card` SSE payload (never fabricated client-side) */
#sam-panel .sam-kv {
  margin: 8px 0 0 32px; align-self: stretch; background: #fff;
  border: 1px solid var(--sam-line); border-radius: 10px; overflow: hidden;
}
#sam-panel .sam-kv-h {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px;
  border-bottom: 1px solid var(--sam-line-2); font-size: 12px; font-weight: 600;
}
#sam-panel .sam-kv-h svg { flex: none; }
#sam-panel .sam-kv-r {
  display: flex; justify-content: space-between; gap: 14px; padding: 7px 13px;
  border-bottom: 1px solid var(--sam-thread); font-size: 11.5px;
}
#sam-panel .sam-kv-r:last-child { border-bottom: 0; }
#sam-panel .sam-kv-k { color: var(--sam-ink-2); white-space: nowrap; }
#sam-panel .sam-kv-v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* suggestion chips — only under the LAST AI message, never while streaming */
/* Five greeting chips wrap to two rows inside the 408px card — the row-gap is what keeps the
   second row off the first, and max-width stops a long label ever pushing the card wider. */
#sam-panel .sam-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 0 32px; }
#sam-panel .sam-chip {
  max-width: 100%; text-align: left;
  border: 1px solid var(--sam-chip-line); background: #fff; color: var(--sam-blue);
  border-radius: 999px; padding: 6px 13px; font: 600 12px/1.2 var(--sam-font); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#sam-panel .sam-chip:hover { background: var(--sam-tint); border-color: var(--sam-blue); }
#sam-panel .sam-chip:disabled { opacity: .5; cursor: default; }

/* Reply chips — one row per question SAM asked ([[chips: …]] markers in its reply).
   Same family as the suggestion chips above: white plate, blue ink, pill. The only
   addition is `is-on`, the FILLED selected state a multi-group set uses while the
   person builds their answer in the composer. Still blue, never green. */
#sam-panel .sam-rchips { align-items: center; gap: 6px; margin-top: 7px; }
#sam-panel .sam-rchips + .sam-rchips { margin-top: 5px; }
#sam-panel .sam-chip-lab {
  font: 600 10.5px/1.2 var(--sam-font); color: var(--sam-ink-2);
  letter-spacing: .01em; padding-right: 2px; flex: 0 0 auto;
}
#sam-panel .sam-chip.is-on,
#sam-panel .sam-chip.is-on:hover { background: var(--sam-blue); border-color: var(--sam-blue); color: #fff; }

/* per-turn meta row: feedback + token hint */
#sam-panel .sam-meta { display: flex; align-items: center; gap: 6px; margin: 5px 0 0 32px; }
#sam-panel .sam-fb {
  width: 24px; height: 22px; border: 0; border-radius: 4px; background: transparent;
  color: var(--sam-ink-3); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease;
}
#sam-panel .sam-fb:hover { background: var(--sam-line-2); color: var(--sam-ink-2); }
#sam-panel .sam-fb.is-on { color: var(--sam-blue); background: var(--sam-tint); }
#sam-panel .sam-fb svg { display: block; }
#sam-panel .sam-tok { font-size: 10.5px; color: var(--sam-ink-3); }
#sam-panel .sam-fbnote { display: flex; gap: 6px; margin: 6px 0 0 32px; }
#sam-panel .sam-fbnote input {
  flex: 1; min-width: 0; height: 28px; border: 1px solid var(--sam-field); border-radius: 999px;
  padding: 0 10px; font: inherit; font-size: 12px; color: var(--sam-ink); background: #fff;
}
#sam-panel .sam-fbdone { font-size: 10.5px; color: var(--sam-ink-3); }

/* first-open privacy notice */
#sam-panel .sam-notice {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--sam-tint); border: 1px solid #cfe4f7; border-radius: 8px;
  padding: 9px 10px; font-size: 11.5px; line-height: 1.45; color: var(--sam-ink-2);
}
#sam-panel .sam-notice button {
  flex: none; border: 0; background: transparent; color: var(--sam-ink-2);
  cursor: pointer; font: inherit; font-size: 15px; line-height: 1; padding: 0 2px;
}
#sam-panel .sam-notice button:hover { color: var(--sam-ink); }

/* honest error / session banner */
#sam-panel .sam-banner {
  border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.45;
  background: var(--sam-err-bg); color: var(--sam-err); border: 1px solid #f0d3d3;
}
#sam-panel .sam-msg .sam-banner { margin: 6px 0 0 32px; }
#sam-panel .sam-banner a, #sam-panel .sam-banner button.sam-link {
  color: inherit; text-decoration: underline; background: none; border: 0;
  padding: 0; font: inherit; cursor: pointer;
}

/* ═════════════════ tool activity strip ═════════════════
   The "Checking the Task Tracker…" line that sits ABOVE a reply. Deliberately quiet: it is
   provenance, not content. Aligned to the 32px avatar gutter like every other in-thread block. */
#sam-panel .sam-tools { display: flex; flex-direction: column; gap: 3px; margin: 0 0 6px 32px; }
#sam-panel .sam-toolr {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; line-height: 1.35; color: var(--sam-ink-3);
}
#sam-panel .sam-toolr svg { flex: none; }
#sam-panel .sam-toolr.is-done { color: var(--sam-ink-2); }
#sam-panel .sam-toolr.is-done svg { color: var(--sam-ok); }        /* a tick is BLUE, never green */
#sam-panel .sam-toolr.is-error { color: var(--sam-err); }
#sam-panel .sam-toolt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═════════════════ approval card ═════════════════
   Server-rendered fields only (see actionCard() in assistant.js). White Fluent card, blue accent,
   amber-ink warnings; the only red is a dead/failed receipt. No green anywhere. */
/* ⚠ NO `overflow: hidden` HERE. It used to round the corners, and it also clipped the notes
   popover — an absolutely positioned element IS clipped by any overflow:hidden ancestor above its
   containing block, so the popover could never leave the card it is meant to float over (its
   z-index and drop shadow only make sense if it can). The corners are rounded on the first and last
   children instead, which is all the overflow was ever doing. */
#sam-panel .sam-act {
  margin: 8px 0 0 32px; align-self: stretch; background: #fff;
  border: 1px solid var(--sam-chip-line); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 108, 189, .07);
}
#sam-panel .sam-act-h {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px;
  background: var(--sam-tint); border-bottom: 1px solid var(--sam-chip-line);
  border-radius: 9px 9px 0 0;
  font-size: 12px; font-weight: 600; color: var(--sam-blue); line-height: 1.35;
}
#sam-panel .sam-act-h svg { flex: none; }
#sam-panel .sam-act-f { padding: 2px 0; }
#sam-panel .sam-act-r {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 7px 13px; border-bottom: 1px solid var(--sam-thread); font-size: 11.5px;
}
#sam-panel .sam-act-r:last-child { border-bottom: 0; }
#sam-panel .sam-act-k { color: var(--sam-ink-2); white-space: nowrap; flex: none; padding-top: 1px; }
#sam-panel .sam-act-v {
  font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0;
  white-space: pre-wrap;
}
/* The edit control lives beside its display value and swaps in with the card's .is-edit class,
   so toggling never rebuilds the DOM (a rebuild would drop the combobox combo.js wrapped). */
#sam-panel .sam-act-e { display: none; flex: 1; min-width: 0; }
#sam-panel .sam-act.is-edit .sam-act-r.is-editable { flex-direction: column; align-items: stretch; gap: 5px; }
#sam-panel .sam-act.is-edit .sam-act-r.is-editable .sam-act-v { display: none; }
#sam-panel .sam-act.is-edit .sam-act-r.is-editable .sam-act-e { display: block; }
#sam-panel .sam-act.is-edit .sam-act-r.is-editable .sam-act-k { text-align: left; }
#sam-panel .sam-act-i {
  width: 100%; box-sizing: border-box; border: 1px solid var(--sam-field); border-radius: 6px;
  padding: 6px 8px; font: inherit; font-size: 11.5px; line-height: 1.45;
  color: var(--sam-ink); background: #fff;
}
#sam-panel textarea.sam-act-i { resize: vertical; min-height: 58px; }
#sam-panel .sam-act-i:focus-visible { outline: 2px solid var(--sam-blue); outline-offset: -1px; border-color: var(--sam-blue); }
/* combo.js wraps a <select> in .combo — keep it inside the card's width. */
#sam-panel .sam-act-e .combo { width: 100%; min-width: 0; }

/* the notes battery lives behind an ⓘ in the card header (2026-09-14): hover / focus / tap opens
   it; the list itself keeps the amber warning styling below. The header is the anchor. */
#sam-panel .sam-act-h { position: relative; }
#sam-panel .sam-act-info { margin-left: auto; position: relative; display: inline-flex; }
#sam-panel .sam-act-info-b {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border: 1px solid var(--sam-line-2); border-radius: 11px; background: #fffaf2;
  color: var(--sam-warn); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
}
#sam-panel .sam-act-info-b:hover, #sam-panel .sam-act-info.is-open .sam-act-info-b { border-color: var(--sam-warn); }
#sam-panel .sam-act-info-b:focus-visible { outline: 2px solid var(--sam-blue); outline-offset: 1px; }
#sam-panel .sam-act-notes {
  /* Sized to the CARD, not to the viewport. The panel is 408px wide, .sam-body takes 14px of
     padding each side and .sam-act a 32px left margin — the card's inner width is ~344px, so the
     old `min(360px, 80vw)` resolved to 360px on any desktop and hung ~29px off the left edge. */
  display: none; position: absolute; right: 0; top: calc(100% + 6px); bottom: auto; z-index: 5;
  width: 320px; max-width: calc(100vw - 80px); max-height: 320px; overflow: auto;
  background: #fff; border: 1px solid var(--sam-line-2); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 27, 45, .16);
}
/* Opened by TAP on a short card, the popover would otherwise sit over the Approve/Decline row and
   the person has to find the ⓘ again before they can act. `.drop-up` (set by assistant.js when the
   card has more room above than below) flips it over the header instead. */
#sam-panel .sam-act-info.drop-up .sam-act-notes { top: auto; bottom: calc(100% + 6px); }
#sam-panel .sam-act-info:hover .sam-act-notes,
#sam-panel .sam-act-info:focus-within .sam-act-notes,
#sam-panel .sam-act-info.is-open .sam-act-notes { display: block; }
#sam-panel .sam-act-notes .sam-act-w:first-child { border-top: 0; }

/* warnings — amber ink (the "SAM drafted this description" notice lives here) */
#sam-panel .sam-act-w {
  display: flex; align-items: flex-start; gap: 7px; padding: 8px 13px;
  border-top: 1px solid var(--sam-line-2); background: #fffaf2;
  font-size: 11px; line-height: 1.4; color: var(--sam-warn);
}
#sam-panel .sam-act-w svg { flex: none; margin-top: 1px; }
/* The PINNED notes: the one or two the server marks as non-suppressible compensating controls, kept
   on the face of the card. Everything else stays behind the ⓘ. */
#sam-panel .sam-act-pin { border-top: 1px solid var(--sam-line-2); }
#sam-panel .sam-act-pin .sam-act-w { border-top: 0; }
#sam-panel .sam-act-pin .sam-act-w + .sam-act-w { border-top: 1px solid var(--sam-line-2); }
#sam-panel .sam-act-w.is-err { background: var(--sam-err-bg); color: var(--sam-err); }

/* actions row — also carries the card's bottom corners (see .sam-act: no overflow clipping) */
#sam-panel .sam-act-a {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px;
  border-top: 1px solid var(--sam-line-2); border-radius: 0 0 9px 9px; flex-wrap: wrap;
}
#sam-panel .sam-act-a .sam-btn { height: 30px; padding: 0 15px; font-size: 12px; }
/* Decline is deliberately the quietest control on the card — a text button, not a red one. It is
   the safe outcome, so it must not be dressed up as the dangerous one. */
#sam-panel .sam-act-x {
  margin-left: auto; border: 0; background: none; padding: 0 2px;
  font: 600 11.5px/1 var(--sam-font); color: var(--sam-ink-2); cursor: pointer;
}
#sam-panel .sam-act-x:hover { color: var(--sam-err); text-decoration: underline; }
#sam-panel .sam-act-x:disabled { opacity: .45; cursor: default; text-decoration: none; color: var(--sam-ink-3); }

/* receipts — what the card becomes once it has been decided */
#sam-panel .sam-act-n {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; line-height: 1.45; color: var(--sam-ink-2);
}
#sam-panel .sam-act-n svg { flex: none; }
#sam-panel .sam-act-n.is-ok { color: var(--sam-ok); font-weight: 600; }
#sam-panel .sam-act-n.is-err { color: var(--sam-err); }
#sam-panel .sam-act-n .sam-link {
  color: var(--sam-blue); text-decoration: underline; background: none; border: 0;
  padding: 0; font: inherit; cursor: pointer;
}
#sam-panel .sam-act.is-done { border-color: var(--sam-line); }
#sam-panel .sam-act.is-declined, #sam-panel .sam-act.is-dead { border-color: var(--sam-line); opacity: .78; }
#sam-panel .sam-act.is-declined .sam-act-h, #sam-panel .sam-act.is-dead .sam-act-h {
  background: var(--sam-line-2); color: var(--sam-ink-2); border-bottom-color: var(--sam-line);
}

/* ═════════════════ gate cards (no access / paused / not connected / session) ═════════════════ */
#sam-panel .sam-card {
  border: 1px solid var(--sam-line); border-radius: 10px; padding: 16px; background: #fff;
}
#sam-panel .sam-card h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; }
#sam-panel .sam-card p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--sam-ink-2); }
#sam-panel .sam-card .sam-hint { font-size: 11.5px; color: var(--sam-ink-3); }
#sam-panel .sam-btn {
  height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--sam-blue);
  color: #fff; font: 600 12.5px/1 var(--sam-font); cursor: pointer; transition: background .15s ease;
}
#sam-panel .sam-btn:hover { background: var(--sam-blue-h); }
#sam-panel .sam-btn:disabled { background: var(--sam-field); cursor: default; }
#sam-panel .sam-btn.sam-ghost { background: #fff; color: var(--sam-ink); border: 1px solid var(--sam-field); }
#sam-panel .sam-btn.sam-ghost:hover { background: var(--sam-line-2); }

/* ═════════════════ first-run intro — "Meet SAM" ═════════════════
   Shown ONCE per user (localStorage sam_intro_seen_v1:<email>, see assistant.js) in place of
   the greeting, and only on a genuinely fresh start — never over a resumed conversation.
   Adapted from the approved "Meet SAM" page down to the 408px card: same palette, same
   capability icons, none of the page furniture. The footer is hidden while it is up
   (setMode('intro')), and the card scrolls with the thread body on a short viewport. */
#sam-panel .sam-intro {
  background: #fff; border: 1px solid var(--sam-line); border-radius: 12px;
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px;
  animation: samin .18s ease both;
}
#sam-panel .sam-intro-h { display: flex; align-items: flex-start; gap: 10px; }
#sam-panel .sam-intro-av {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  background: var(--sam-blue); color: #fff; display: grid; place-items: center;
}
#sam-panel .sam-intro-av svg { display: block; }
#sam-panel .sam-intro-ht { min-width: 0; }
#sam-panel .sam-intro-ht h3 {
  margin: 1px 0 3px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--sam-ink);
}
#sam-panel .sam-intro-ht p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--sam-ink-2); }
#sam-panel .sam-intro-l { display: flex; flex-direction: column; }
#sam-panel .sam-intro-r {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--sam-line-2); font-size: 12px; line-height: 1.4;
  color: var(--sam-ink-2);
}
#sam-panel .sam-intro-r:first-child { border-top: 0; }
#sam-panel .sam-intro-r svg { flex: none; color: var(--sam-blue); }
#sam-panel .sam-intro-rt { min-width: 0; overflow-wrap: anywhere; }
#sam-panel .sam-intro-rt b { color: var(--sam-ink); font-weight: 600; }
/* The trust line — the tint block, exactly the register the privacy notice uses. */
#sam-panel .sam-intro-t {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--sam-tint); border: 1px solid var(--sam-chip-line); border-radius: 8px;
  padding: 9px 11px; font-size: 11.5px; line-height: 1.45; color: var(--sam-ink-2);
}
#sam-panel .sam-intro-t svg { flex: none; margin-top: 1px; color: var(--sam-blue); }
/* The one primary action — the widget's own blue pill, stretched to the card. */
#sam-panel .sam-intro-go { align-self: stretch; height: 34px; }
@media (prefers-reduced-motion: reduce) { #sam-panel .sam-intro { animation: none; } }

/* ═════════════════ composer ═════════════════ */
#sam-panel .sam-foot {
  /* `position: relative` is load-bearing: the @-mention menu is absolutely positioned against
     this box so it floats OVER the thread instead of resizing the footer. */
  position: relative;
  flex: none; border-top: 1px solid var(--sam-line); background: #fff; padding: 10px 12px 8px;
}
#sam-panel .sam-activity {
  display: flex; align-items: center; gap: 7px; padding: 0 6px 7px;
  font-size: 11px; color: var(--sam-ink-2); min-width: 0;
}
#sam-panel .sam-activity .sam-frag {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--sam-ink-3);
}
#sam-panel .sam-spin {
  width: 11px; height: 11px; flex: none; border: 2px solid var(--sam-line);
  border-top-color: var(--sam-blue); border-radius: 50%; animation: sam-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { #sam-panel .sam-spin { animation-duration: 2.4s; } }

/* ═════════════════ attachments ═════════════════
   Staged-file chips and the inline rejection chip, both directly above the composer. Filenames
   can be long and are user-controlled: each chip clamps its name with ellipsis rather than
   letting the composer grow, and the row wraps instead of scrolling sideways. */
#sam-panel .sam-atts {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 8px;
}
#sam-panel .sam-att {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--sam-tint); border: 1px solid var(--sam-chip-line); border-radius: 999px;
  padding: 4px 5px 4px 10px; font-size: 11.5px; line-height: 1.2; color: var(--sam-ink);
}
#sam-panel .sam-att svg { flex: none; color: var(--sam-blue); }
#sam-panel .sam-att-n {
  min-width: 0; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
#sam-panel .sam-att-s { flex: none; color: var(--sam-ink-2); font-variant-numeric: tabular-nums; }
#sam-panel .sam-att-x {
  flex: none; width: 18px; height: 18px; border: 0; border-radius: 999px; padding: 0;
  background: transparent; color: var(--sam-ink-2); cursor: pointer;
  font: 400 14px/1 var(--sam-font); display: grid; place-items: center;
}
#sam-panel .sam-att-x:hover { background: rgba(15, 108, 189, .14); color: var(--sam-blue-h); }

#sam-panel .sam-atterr { padding: 0 6px 8px; }
#sam-panel .sam-atterr-c {
  display: flex; align-items: flex-start; gap: 7px;
  background: var(--sam-err-bg); border: 1px solid #f0d3d3; border-radius: 8px;
  padding: 7px 6px 7px 10px; font-size: 11.5px; line-height: 1.4; color: var(--sam-err);
}
#sam-panel .sam-atterr-c svg { flex: none; margin-top: 1px; }
#sam-panel .sam-atterr-c > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#sam-panel .sam-atterr-c .sam-att-x { color: var(--sam-err); }
#sam-panel .sam-atterr-c .sam-att-x:hover { background: rgba(164, 38, 44, .12); color: var(--sam-err); }
/* Voice guidance reuses the same chip in NEUTRAL ink — "didn't catch anything" and "press send
   when you're ready" are instructions, not failures, and red would make a mic that WORKED look
   broken (2026-08-28 hang-mode fix). */
#sam-panel .sam-atterr-c.is-note {
  background: var(--sam-tint); border-color: var(--sam-chip-line); color: var(--sam-ink-2);
}
#sam-panel .sam-atterr-c.is-note svg { color: var(--sam-blue); }
#sam-panel .sam-atterr-c.is-note .sam-att-x { color: var(--sam-ink-3); }
#sam-panel .sam-atterr-c.is-note .sam-att-x:hover { background: var(--sam-line-2); color: var(--sam-ink); }

/* Chips for files already SENT, rendered inside the message bubble. On a user bubble that ground
   is blue, so they invert to translucent white; the SAM/replay case keeps the neutral treatment. */
#sam-panel .sam-sent { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; }
#sam-panel .sam-sent-c {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  border-radius: 999px; padding: 3px 9px; font-size: 11px; line-height: 1.3;
  background: var(--sam-line-2); border: 1px solid var(--sam-line); color: var(--sam-ink-2);
}
#sam-panel .sam-sent-c svg { flex: none; }
#sam-panel .sam-sent-c > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sam-panel .sam-msg.is-user .sam-sent-c {
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); color: #fff;
}

#sam-panel .sam-composer { display: flex; align-items: center; gap: 6px; }
#sam-panel .sam-tool {
  position: relative;                 /* the dictation pulse is an ::after ring on this box */
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 999px; background: transparent;
  color: var(--sam-ink-2); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease;
}
#sam-panel .sam-tool:hover:not(:disabled) { background: var(--sam-line-2); color: var(--sam-blue); }
#sam-panel .sam-tool:disabled { color: var(--sam-ink-3); cursor: not-allowed; }
#sam-panel .sam-tool svg { display: block; position: relative; z-index: 1; }

/* ── dictation: the mic while it is LISTENING ───────────────────────────────
   The only composer control with an on-state, so it borrows the send button's own filled blue —
   same token, so the strip still reads as one control set rather than a new colour appearing.
   The pulse is a ring that expands and fades OUTSIDE the button; it is ::after with
   pointer-events:none, so it can never sit between the person and the button it decorates.
   ⚠ The FILL is the state; the pulse is only emphasis. prefers-reduced-motion drops the ring
   entirely and the filled button alone still says "recording". */
#sam-panel .sam-tool.is-rec,
#sam-panel .sam-tool.is-rec:hover:not(:disabled) { background: var(--sam-blue); color: #fff; }
#sam-panel .sam-tool.is-rec::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--sam-blue); pointer-events: none; z-index: 0;
  animation: sam-rec 1.6s ease-out infinite;
}
@keyframes sam-rec {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #sam-panel .sam-tool.is-rec::after { animation: none; opacity: 0; }
}
/* ── the composer box + its highlight mirror ─────────────────────────────────────
   .sam-hlwrap is the flex child now; the textarea fills it and .sam-hl sits BEHIND, painting a
   tint pill under each name picked from the @ menu (assistant.js hlPaint).

   ⚠ EVERY METRIC BELOW MUST MATCH ON BOTH ELEMENTS — font, size, line-height, padding, border
   width, box-sizing, wrapping. The mirror is aligned by geometry alone; change one and the pill
   slides off the word. The mirror's own text is transparent: only its backgrounds are visible,
   and the real glyphs come from the textarea in front of it. */
#sam-panel .sam-hlwrap { position: relative; flex: 1; min-width: 0; display: flex; }
#sam-panel .sam-hl {
  /* IN FRONT of the textarea (z-index 2 vs 1) and click-through. Everything in it is invisible —
     transparent text, no background — EXCEPT .sam-hl-m, which paints an OPAQUE pill with blue
     text exactly over the dark glyphs the textarea drew underneath. That is how the name reads
     blue without ever setting `color: transparent` on the textarea itself (which would also
     blank IME composition text and the selection). */
  position: absolute; inset: 0; z-index: 2; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 999px; padding: 8px 15px;
  font: inherit; font-size: 12.5px; line-height: 1.5; color: transparent;
  background: transparent;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  overflow: hidden; pointer-events: none; user-select: none;
  /* ⚠ MUST MATCH THE TEXTAREA'S GUTTER. The textarea grows a scrollbar past max-height, which
     narrows ITS content box only — the mirror can never scroll, so without a stable gutter on
     both the two wrap differently and every pill below the fold sits in the wrong place
     (2026-08-25 review). Engines without scrollbar-gutter overlay their scrollbars anyway. */
  scrollbar-gutter: stable;
}
#sam-panel .sam-hl-m {
  /* ⚠ WEIGHT AND SPACING MUST NOT CHANGE. A 600-weight pill is WIDER than the 400-weight text
     beneath it, and the cover would slide off the word — colour only. The 2px padding is
     cancelled by an equal negative margin so the pill paints past the glyph edges (round corners)
     without adding a single pixel of advance. */
  color: var(--sam-blue); font-weight: 400;
  background: var(--sam-tint); border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sam-chip-line) inset;
  padding: 0 2px; margin: 0 -2px;
}
#sam-panel .sam-composer textarea {
  position: relative; z-index: 1;
  flex: 1; width: 100%; min-width: 0; height: 36px; max-height: 108px; box-sizing: border-box;
  border: 1px solid var(--sam-field); border-radius: 999px; padding: 8px 15px;
  font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--sam-ink); background: #fff;
  resize: none; outline: none; overflow-y: auto;
  scrollbar-gutter: stable;              /* pairs with .sam-hl — see the note there */
}
#sam-panel .sam-composer textarea::placeholder { color: var(--sam-ink-3); }
#sam-panel .sam-composer textarea:focus {
  border-color: var(--sam-blue); box-shadow: 0 0 0 1px var(--sam-blue) inset;
}
#sam-panel .sam-composer textarea:disabled { background: var(--sam-line-2); }
#sam-panel .sam-send {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 999px; background: var(--sam-blue);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s ease;
}
#sam-panel .sam-send:hover:not(:disabled) { background: var(--sam-blue-h); }
#sam-panel .sam-send:disabled { background: var(--sam-field); cursor: default; }
#sam-panel .sam-send svg { display: block; }
/* Two pulses when dictation ends with words in the box — "your words are here, THIS sends them".
   Driven by .is-nudge from voiceNudgeSend(); reduced-motion keeps the notice and drops the ring. */
@keyframes sam-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(15, 108, 189, .45); } 50% { box-shadow: 0 0 0 7px rgba(15, 108, 189, 0); } }
#sam-panel .sam-send.is-nudge { animation: sam-nudge 1.2s ease-out 2; }
@media (prefers-reduced-motion: reduce) { #sam-panel .sam-send.is-nudge { animation: none; } }
#sam-panel .sam-quota {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; padding: 0 6px;
  font-size: 10.5px; color: var(--sam-ink-3); line-height: 1.35;
}
#sam-panel .sam-quota svg { flex: none; margin-top: 2px; }
#sam-panel .sam-budget { margin-top: 6px; padding: 0 6px; font-size: 10.5px; color: var(--sam-warn); }

/* ═════════════════ @-mention menu ═════════════════
   Opens above the composer when the person types `@`. Anchored to .sam-foot (which is
   position:relative for exactly this) and lifted clear of the footer's top border, so it
   overlays the thread rather than pushing the composer down mid-sentence.

   Rows are DIVs with role="option", never buttons — they must stay out of focusable()/trapTab,
   and mousedown is prevented on them so the composer keeps focus and its caret. The highlight
   is the SAME blue tint the chips use; there is no second accent in this menu. */
#sam-panel .sam-men {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% - 4px); z-index: 3;
  max-height: 216px; overflow-y: auto; padding: 4px;
  background: #fff; border: 1px solid var(--sam-line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
#sam-panel .sam-men-r {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px;
  cursor: pointer; min-width: 0;
}
#sam-panel .sam-men-r.is-on { background: var(--sam-tint); }
#sam-panel .sam-men-r:hover { background: var(--sam-tint); }
#sam-panel .sam-men-av {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--sam-blue); color: #fff;
  display: grid; place-items: center; font: 600 10px/1 var(--sam-font); letter-spacing: .02em;
}
#sam-panel .sam-men-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Names and departments are roster strings and can be long — clamp, never wrap the row. */
#sam-panel .sam-men-n {
  font: 600 12px/1.25 var(--sam-font); color: var(--sam-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sam-panel .sam-men-s {
  font: 400 10.5px/1.25 var(--sam-font); color: var(--sam-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═════════════════ rotating composer tip ═════════════════
   One quiet line directly above the composer. Muted ink at footnote size: it teaches, it does
   not compete with the conversation, and it is hidden the moment the person starts typing.
   ⚠ NOT the same thing as `.sam-tip` — that id/class belongs to the FAB's docked-tab hint,
   which lives on <body> and is REMOVED by dropTip(). Keep the two namespaces apart. */
#sam-panel .sam-tipbar {
  display: flex; align-items: flex-start; gap: 6px; padding: 0 6px 7px;
  font: 400 10.5px/1.4 var(--sam-font); color: var(--sam-ink-3);
  animation: samin .22s ease both;
}
#sam-panel .sam-tipbar svg { flex: none; margin-top: 1px; color: var(--sam-blue); opacity: .8; }
#sam-panel .sam-tipbar-t { flex: 1; min-width: 0; }
#sam-panel .sam-tipbar-t b { font-weight: 600; color: var(--sam-ink-2); }
#sam-panel .sam-tipbar-x {
  flex: none; border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  color: var(--sam-ink-3); font: 400 13px/1 var(--sam-font);
}
#sam-panel .sam-tipbar-x:hover { color: var(--sam-ink); }
@media (prefers-reduced-motion: reduce) { #sam-panel .sam-tipbar { animation: none; } }

/* ═════════════════ history pane (slides over the thread, inside the card) ═════════════════ */
#sam-panel .sam-hist {
  position: absolute; left: 0; right: 0; top: 62px; bottom: 0; z-index: 2;
  background: #fff; display: flex; flex-direction: column; min-height: 0;
}
#sam-panel .sam-hist-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--sam-line-2);
}
#sam-panel .sam-hist-head h3 { margin: 0; flex: 1; font-size: 12.5px; font-weight: 600; }
#sam-panel .sam-hist-head .sam-ic { color: var(--sam-ink-2); }
#sam-panel .sam-hist-head .sam-ic:hover { background: var(--sam-line-2); color: var(--sam-ink); }
#sam-panel .sam-hist-when {
  flex: none; padding: 7px 14px 0; font-size: 10.5px; color: var(--sam-ink-3);
}
#sam-panel .sam-hist-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 12px; }
#sam-panel .sam-row-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; border-radius: 8px; background: transparent; padding: 8px;
  font: inherit; color: var(--sam-ink); text-align: left; cursor: pointer;
  transition: background .15s ease;
}
#sam-panel .sam-row-btn:hover { background: var(--sam-line-2); }
#sam-panel .sam-row-main { flex: 1; min-width: 0; }
#sam-panel .sam-row-t {
  font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sam-panel .sam-row-s { font-size: 11px; color: var(--sam-ink-2); margin-top: 1px; }
#sam-panel .sam-row-x {
  flex: none; width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent;
  color: var(--sam-ink-3); cursor: pointer; padding: 0; opacity: 0; font: inherit; font-size: 14px;
  line-height: 1; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
#sam-panel .sam-rowwrap { display: flex; align-items: center; }
#sam-panel .sam-rowwrap:hover .sam-row-x,
#sam-panel .sam-row-x:focus-visible { opacity: 1; }
#sam-panel .sam-row-x:hover { background: var(--sam-err-bg); color: var(--sam-err); }
#sam-panel .sam-confirm {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11.5px;
  color: var(--sam-ink-2);
}
#sam-panel .sam-confirm button {
  border: 0; background: transparent; padding: 0 2px; font: inherit; font-size: 11.5px;
  font-weight: 600; cursor: pointer; text-decoration: underline;
}
#sam-panel .sam-confirm .sam-yes { color: var(--sam-err); }
#sam-panel .sam-confirm .sam-no { color: var(--sam-ink-2); }
#sam-panel .sam-none { padding: 18px 8px; font-size: 12.5px; color: var(--sam-ink-2); }
#sam-panel .sam-older { display: block; width: calc(100% - 16px); margin: 10px 8px 0; }

/* pager — same shape as the tasks/app.js control (portal pagination standard) */
#sam-panel .sam-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 8px 2px; border-top: 1px solid var(--sam-line-2); margin-top: 6px;
  font-size: 11.5px; color: var(--sam-ink-2);
}
#sam-panel .sam-pager .sam-pg-info { flex: 1; min-width: 0; }
#sam-panel .sam-pager label { display: flex; align-items: center; gap: 5px; }
#sam-panel .sam-pager select {
  height: 26px; border: 1px solid var(--sam-field); border-radius: 4px; background: #fff;
  font: inherit; font-size: 11.5px; color: var(--sam-ink); padding: 0 4px;
}
#sam-panel .sam-pg-nav { display: flex; align-items: center; gap: 3px; }
#sam-panel .sam-pg-btn {
  min-width: 24px; height: 24px; border: 1px solid var(--sam-field); border-radius: 4px;
  background: #fff; color: var(--sam-ink-2); font: inherit; font-size: 12px; cursor: pointer; padding: 0 4px;
}
#sam-panel .sam-pg-btn:hover:not(:disabled) { background: var(--sam-line-2); color: var(--sam-ink); }
#sam-panel .sam-pg-btn:disabled { opacity: .4; cursor: default; }

/* Date control inside a reply-chip row (`[[date(Due date)]]`). Sized to sit level with the
   text chips beside it; the picker opens on a click anywhere in the field via combo.js's
   delegated capture listener — never wire showPicker() per field (docs/PORTAL_STANDARDS.md). */
#sam-panel .sam-chip-date {
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 148px;
}
#sam-panel .sam-chip-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
#sam-panel .sam-chip-date:hover::-webkit-calendar-picker-indicator { opacity: 1; }