/* ══════════════════════════════════════════════════════════════════
   CS Workspace — Gemini-philosophy, gamified, mobile-first.
   Design: CRUX dark + lime is the canvas (quiet authority); the Gemini
   gradient is the *energy* — used only for intelligence / achievement /
   live activity (ring, AI chips, active accent, send pulse, celebrate).
   Spec: docs/cs_workspace_gemini_spec_2026_06.md
   MOBILE-FIRST: base rules target the phone; desktop is @min-width.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Gemini gradient — the intelligence/achievement accent */
  --g-blue: #4796E3; --g-violet: #9177C7; --g-magenta: #CA6673; --g-azure: #078efb;
  --gemini-grad: linear-gradient(115deg, var(--g-blue) 0%, var(--g-violet) 50%, var(--g-magenta) 100%);
  --gemini-grad-vivid: linear-gradient(135deg, #217bfe 0%, #078efb 33%, #ac87eb 66%, #217bfe 100%);
  --gemini-grad-crux: linear-gradient(120deg, var(--accent) 0%, #7fd6c0 38%, var(--g-violet) 74%, var(--g-magenta) 100%);
  /* Material-3 expressive motion */
  --ease-emph: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emph-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-2: 100ms; --dur-3: 150ms; --dur-4: 200ms; --dur-m: 300ms; --dur-l: 500ms; --dur-xl: 800ms;
  --glass: blur(20px) saturate(140%);
  --r-squircle: 10px;   /* design pass 02: cards join the 6/8/10 scale */
}

/* Original operational CS palette, before the cyan palette change.
   These names do not change any theme until the CS House scope uses them. */
.csw-shell, .csw-overlay {
  --csw-brand-accent:#C8FF4D; --csw-brand-on-accent:#0A0A0C;
  --csw-brand-out:#11402F; --csw-brand-out-ink:#EAFFF2;
  /* Payment evidence uses separate action and status tones for contrast. */
  --csw-payment-action:#138463; --csw-payment-confirmed:#198f6c;
  --csw-payment-on-action:#ffffff;
}
/* Shared conversation actions remain usable in every supported theme. */
.csw-conv-menu { position:relative; flex:0 0 44px; }
.csw-conv-menu summary { display:flex; align-items:center; justify-content:center; list-style:none; width:44px; height:44px; border-radius:12px; color:var(--ink); cursor:pointer; }
.csw-conv-menu summary::-webkit-details-marker { display:none; }
.csw-conv-menu summary svg { width:23px; height:23px; fill:currentColor; }
.csw-conv-menu__items { position:absolute; z-index:15; right:0; top:50px; width:240px; padding:6px; background:var(--bg-card); border:1px solid var(--line-strong); border-radius:14px; }
.csw-conv-menu__items button { display:flex; align-items:center; gap:10px; width:100%; max-width:none; min-height:48px; height:auto; padding:12px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:13px var(--body); text-align:left; white-space:normal; }
.csw-conv-menu__items button svg { width:18px; height:18px; flex:none; }
.csw-conv-menu summary:focus-visible, .csw-conv-menu__items button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* Classic retains its newly shipped inline path; House uses the reviewed
   compact rail and its detail sheets, with one visible path in either skin. */
.csw-legacy-context + .csw-service-rail { display:none; }
[data-theme]:not([data-theme="house"]) .csw-service-meta { display:none; }

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes csw-shimmer   { from{background-position:200% 0} to{background-position:-200% 0} }
@keyframes csw-bubble-in { from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }
@keyframes csw-rise      { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@keyframes csw-pop       { 0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)} }
@keyframes csw-confetti  { 0%{opacity:1; transform:translate(0,0) scale(1)} 100%{opacity:0; transform:translate(var(--cx),var(--cy)) scale(.4) rotate(220deg)} }
@keyframes csw-dot-pulse { 0%,100%{opacity:.35; transform:scale(.85)} 50%{opacity:1; transform:scale(1)} }
@keyframes csw-sheet-up  { from{transform:translateY(100%)} to{transform:none} }

/* ══ Shell + top bar ════════════════════════════════════════════ */
.csw-shell{
  /* height tracks the VISUAL viewport (--app-height from the keyboard
     listener) so the composer lifts above the mobile keyboard instead of
     hiding behind it; 100dvh fallback when visualViewport is unavailable.
     `top` mirrors visualViewport.offsetTop so the surface stays glued to
     the visible area when iOS scrolls the layout viewport to reveal the
     focused composer (otherwise the composer slides off-screen). */
  position:fixed; top:var(--vv-offset-top, 0px); left:0; right:0; height:var(--app-height, 100dvh);
  z-index:60; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--g-violet) 9%, transparent) 0%, transparent 55%),
    var(--bg);
  font-family:var(--body); color:var(--ink);
  /* ONE owner per safe-area edge (design vet 2026-07-26, SEV-2): the shell
     owns top only. Bottom belongs to the children that touch it —
     .csw-composer (calc(8px + var(--safe-bottom))) and .csw-threads
     (padding-bottom:var(--safe-bottom)). When the shell ALSO padded the
     bottom, the composer floated a home-indicator-height dead band above
     the keyboard even with a perfect --app-height. */
  padding-top:var(--safe-top);
  animation:csw-rise var(--dur-m) var(--ease-emph-decel);
}
/* WebGL header band (aurora anchor #7 — operator 2026-07-26 "make it
   animated ... use webgl"): the LIST topbar only. Negative z-index paints
   it above the bar's own glass background but under every control; masked
   so it dissolves before the border. FLAT LAW holds below this line —
   the thread list and transcripts stay flat. */
.csw-topbar-band{
  position:absolute; inset:0; width:100%; height:100%; z-index:-1;
  opacity:.5; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000, transparent);
  mask-image:linear-gradient(#000, transparent);
}
/* 3-zone grid (left controls · centered segment · right) so the segment is
   TRUE-centered no matter what's on the left, and nothing crowds onto one rail
   (research: thin, balanced top bar — back + one content control + overflow). */
/* POSITIONED, NEVER STICKY (2026-08-21, the sweep after #2523/#2529).
   This bar was position:sticky; top:0 — inert in every engine (the shell is
   fixed and the scrollers, .csw-threads/.csw-script, are nested SIBLINGS, so
   the bar can never scroll) and a landmine in one: WebKit clamps a sticky
   element whose scrollport is the ROOT to the BODY's padding-top, and app.css
   sets body{padding-top:var(--safe-top)} for the notch. Measured in WebKit
   26.5 at 402x874: body 80 / shell 30 pushed the bar 50px (= 80 - 30) down
   its own layout slot, over the thread list; Chromium never moved it. On a
   real iPhone the displacement is currently ZERO — .csw-shell pads the same
   var(--safe-top), so the phantom offset and the bar's slot cancel EXACTLY
   (measured: body 59 / shell 59 -> 0). That cancellation is the only thing
   standing between this desk and the tasks-page defect (#2529), and it
   breaks the moment either side moves — which is why the sticky goes rather
   than the pad. relative is belt-and-braces, NOT a requirement: this bar is a
   flex item of .csw-shell, so z-index:5 applies to it even at static, and the
   band below anchors to this box through backdrop-filter rather than through
   position (all three measured — sticky, relative and static paint the band
   and order the bar identically in WebKit and Chromium). It stays positioned
   so the anchoring survives anyone ever dropping backdrop-filter.
   The top inset stays the SHELL's (ONE owner per safe-area edge, above). */
.csw-topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:12px 16px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:var(--glass); backdrop-filter:var(--glass);
  border-bottom:1px solid var(--line-soft); position:relative; z-index:5;
  overflow:hidden;   /* the aurora band clips to the bar */
}
.csw-topleft{ display:flex; align-items:center; gap:10px; justify-self:start; min-width:0; }
.csw-back{
  flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:transparent; color:var(--ink-dim);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--dur-3) var(--ease-emph);
}
.csw-back:active{ transform:scale(.92); background:var(--bg-card); }
/* Topbar title (centre grid cell). The Pulse/Inbox/Automated segment that
   used to sit here was removed 2026-06-18 — the inbox is the only body now,
   Automated moved into the drawer, Pulse retired. */
.csw-title i{ color:var(--accent); font-style:normal; }
.csw-title{ font-family:var(--display); font-weight:800; text-transform:lowercase; font-size:var(--fs-disp); line-height:1.05; letter-spacing:-.01em; text-align:center; color:var(--ink); white-space:nowrap; }
/* Header count retired (research: thin the top bar to title + back + one
   control; the filter chips already carry the counts). Element kept for JS that
   writes to it, but hidden so it never crowds/clips the top bar. */
.csw-sub{ display:none; }
.csw-grow{ flex:1; min-width:0; }
/* segmented Pulse|Inbox|Abandoned — centred between back/burger (left) and
   the count (right) so the header reads as one clean control row. */
.csw-seg{ display:flex; gap:2px; margin-inline:auto; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.csw-seg button{
  border:none; background:transparent; color:var(--ink-mute); cursor:pointer;
  font-family:var(--body); font-size:12.5px; font-weight:600; letter-spacing:.01em;
  padding:7px 16px; border-radius:var(--r-pill); transition:all var(--dur-3) var(--ease-emph); position:relative;
}
.csw-seg button.on{ color:var(--accent-text); background:var(--accent); box-shadow:0 2px 10px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
/* on-shift pill */
.csw-shift{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-dim); white-space:nowrap; }
/* L6 (2026-08-30): the two .csw-shift__dot rules are DELETED — no
   emitter anywhere (repo grep: zero hits outside this file), and they
   carried two of the four infinite loops. Rules, not files: the
   deletion manifest gates files. */

.csw-body{ flex:1; min-height:0; overflow:hidden; display:flex; }

/* ══ PR-F #1 — Staff OS CS embed (EXACT match to standalone /cs) ══════
   When the CS inbox is mounted inside Staff OS (Chat tab for a CS rep) it
   carries .csw-embedded. Daniel 2026-06-16 (round 3): the chat must be a
   TRUE FULL PAGE — no Staff OS bottom footer (the footer was the problem;
   it stacked under the CS composer and read as broken). The ONLY way out is
   the top-left back chevron (.csw-back), which sosRenderChat rewires to
   return to the Staff OS Day/home view. So the back chevron now SHOWS in the
   embed (it's the home button), and everything else — Pulse/Inbox/Automated
   segment + the cross-dept queue pills — renders IDENTICALLY to /cs. The
   footer hide + full-bleed shell live in staff_os.css .sos-csfull. */
.csw-embedded .csw-back{ display:flex; }
/* 2026-06-18: the Pulse/Inbox/Automated segment was removed from the top bar
   (inbox is the only body; Automated lives in the drawer; Pulse retired), so
   the old per-mode hide rules are gone. */
/* Non-CS queue-locked embed (logistics/store sales): full CS tools but ONLY
   the threads routed to their queue. Hide the CS-desk-only chrome — the queue
   drawer (burger), which also gates Automated — so it reads as a simple inbox
   scoped to them. */
.csw-locked .csw-burger{ display:none; }
/* Pinned Team @-mention row at the very top of the embedded inbox (PR-F #4).
   One clean row — CS reps get no separate Team tab. */
.sos-csteam{
  display:flex; align-items:center; gap:10px; width:100%; flex:0 0 auto;
  padding:10px 16px; background:color-mix(in srgb, var(--bg) 80%, transparent);
  border:none; border-bottom:1px solid var(--line-soft); color:var(--ink);
  font-family:var(--body); cursor:pointer; text-align:left;
}
.sos-csteam:active{ background:var(--bg-card); }
.sos-csteam.unread{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.sos-csteam__ic{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800;
  background:var(--gemini-grad); color:#fff; font-size:14px;
}
.sos-csteam__t{ font-size:13px; font-weight:700; }
.sos-csteam__s{ font-size:11px; color:var(--ink-mute); margin-left:auto; }
.sos-csteam.unread .sos-csteam__s{ margin-left:8px; }
.sos-csteam .scw-unread--n{
  margin-left:auto; background:var(--accent); color:var(--accent-text);
  font-size:10px; font-weight:800; border-radius:999px; padding:1px 7px; min-width:18px;
  text-align:center;
}

/* ══ PULSE dashboard (mobile-first single column) ═══════════════ */
.csw-pulse{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px 40px; display:flex; flex-direction:column; gap:14px; }
.csw-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), var(--bg-card));
  border:1px solid var(--line); border-radius:var(--r-squircle);
  padding:18px; animation:csw-rise var(--dur-m) var(--ease-emph-decel) both;
}
.csw-card__h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
.csw-card__t{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute); font-family:var(--mono); }
.csw-card__act{ font-size:11px; color:var(--g-violet); background:none; border:none; cursor:pointer; font-family:var(--body); }

/* Hero: my ring */
.csw-hero{ position:relative; overflow:hidden; }
/* L6 (2026-08-30): the three My-Performance loops (wash, level chip,
   goal fill) animated background-position — paint-layer work, forever,
   behind numbers that were not moving — on gradient fills the flat law
   never allowed. Flat accent, still. The ring's stroke-dashoffset and
   csw-pop stay: those encode a real change. */
.csw-hero::before{ content:''; position:absolute; inset:0; opacity:.10; background:var(--accent); pointer-events:none; }
.csw-hero__row{ display:flex; align-items:center; gap:18px; position:relative; }
.csw-ring{ flex:0 0 auto; width:104px; height:104px; position:relative; }
.csw-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.csw-ring__bg{ fill:none; stroke:var(--line); stroke-width:9; }
.csw-ring__fg{ fill:none; stroke:url(#cswGrad); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset var(--dur-xl) var(--ease-emph-decel); }
.csw-ring__c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.csw-ring__pts{ font-family:var(--display); font-size:26px; line-height:1; }
.csw-ring__tot{ font-size:10px; color:var(--ink-mute); font-family:var(--mono); margin-top:2px; }
.csw-ring--closed .csw-ring__c{ animation:csw-pop var(--dur-l) var(--ease-spring); }
.csw-hero__meta{ flex:1; min-width:0; }
.csw-hero__name{ font-family:var(--display); font-size:20px; letter-spacing:-.015em; }
.csw-streak{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; color:var(--ink-dim); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--r-pill); padding:4px 11px; }
.csw-streak b{ color:var(--accent); }
.csw-hero__hint{ font-size:11.5px; color:var(--ink-mute); margin-top:8px; }
/* level + streak-freeze identity bits */
.csw-level{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.csw-levelchip{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-text); padding:3px 10px; border-radius:var(--r-pill); background:var(--accent); }
.csw-levelnext{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); }
.csw-freeze{ font-size:11px; color:var(--g-blue); }
/* team co-op goal bar */
.csw-goalbar{ height:10px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.csw-goalbar i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--accent); transition:width var(--dur-xl) var(--ease-emph-decel); }
.csw-goalmeta{ font-size:11.5px; color:var(--ink-mute); margin-top:8px; }

/* metric gauges */
.csw-gauges{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.csw-gauge{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 0; }
.csw-gauge__ring{ width:78px; height:78px; position:relative; }
.csw-gauge__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.csw-gauge__bg{ fill:none; stroke:var(--line); stroke-width:7; }
.csw-gauge__fg{ fill:none; stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset var(--dur-xl) var(--ease-emph-decel); }
.csw-gauge__v{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:17px; }
.csw-gauge__l{ font-size:10px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono); text-align:center; }

/* needs-you */
.csw-needs{ display:flex; flex-direction:column; gap:8px; }
.csw-need{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg); cursor:pointer; transition:all var(--dur-3) var(--ease-emph); text-align:left; width:100%; font-family:var(--body); color:var(--ink); }
.csw-need:active{ transform:scale(.985); }
.csw-need__n{ font-family:var(--display); font-size:22px; min-width:34px; }
.csw-need--alert .csw-need__n{ color:var(--warn); }
.csw-need--hot .csw-need__n{ background:var(--gemini-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.csw-need__l{ flex:1; font-size:13px; color:var(--ink-dim); }
.csw-need__arrow{ color:var(--ink-mute); font-size:16px; }

/* leaderboard */
.csw-board{ display:flex; flex-direction:column; gap:2px; }
.csw-rep{ display:flex; align-items:center; gap:12px; padding:11px 6px; border-top:1px solid var(--line-soft); }
.csw-rep:first-child{ border-top:none; }
.csw-rep__rank{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); width:18px; }
.csw-rep__meta{ flex:1; min-width:0; }
.csw-rep__name{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-rep__role{ font-size:10.5px; color:var(--ink-mute); }
.csw-rep__bar{ height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; margin-top:5px; }
.csw-rep__bar i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--gemini-grad-crux); background-size:200% 100%; }
.csw-rep__stat{ text-align:right; flex:0 0 auto; }
.csw-rep__pts{ font-family:var(--display); font-size:16px; }
.csw-rep__conv{ font-size:10.5px; color:var(--ink-mute); font-family:var(--mono); }
.csw-rep--top .csw-rep__name{ background:var(--gemini-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* why themes */
.csw-theme{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:12.5px; }
.csw-theme:first-child{ border-top:none; }
.csw-theme b{ font-family:var(--mono); color:var(--warn); }

/* ══ INBOX ══════════════════════════════════════════════════════ */
/* THE STRIP SITS ABOVE THE DESK, NOT BESIDE IT (2026-09-03).
   .csw-inbox was a flex ROW holding exactly two panes — the list and the
   conversation. The board strip (WS-B) was added as a THIRD child, so it
   became a third COLUMN: on a phone it took the whole desk, its four keys
   stretched to half the screen each (flex-wrap + the default
   align-content:stretch), and the conversation list was squeezed out of
   sight. The operator's desk showed four empty boxes and no chats.
   The inbox is now a COLUMN — strip on top, panes below — and .csw-panes
   is the row the two panes always were. Every existing rule still matches:
   nothing selected .csw-side or .csw-conv as a DIRECT child (checked). */
.csw-inbox{ flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; }
.csw-panes{ flex:1; min-height:0; min-width:0; display:flex; }
.csw-side{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg); }
/* Search + filter row stay stuck to the top of the list pane while the
   threads scroll (WhatsApp/Telegram). They already sit OUTSIDE the scroll
   container (.csw-threads) by layout; an opaque bg hardens it so nothing
   ever bleeds through under them. (Sticky is set on .csw-searchwrap below,
   next to its other rules.) (2026-06-18) */
.csw-filters{ display:flex; align-items:center; gap:6px; padding:8px 14px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; background:var(--bg); }
.csw-filters::-webkit-scrollbar{ display:none; }
.csw-filter{ flex:0 0 auto; border:1px solid transparent; background:var(--bg-card); color:var(--ink-mute); padding:7px 14px; border-radius:var(--r-pill); font-size:var(--fs-small); font-weight:600; cursor:pointer; font-family:var(--body); display:flex; gap:7px; align-items:center; transition:all var(--dur-3) var(--ease-emph); white-space:nowrap; }
/* Selected = a calm accent-tinted pill (research: dark-mode accents stay
   unsaturated; the old solid-white pill optically vibrated). */
.csw-filter.on{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 42%, transparent); }
.csw-filter__c{ font-size:10.5px; opacity:.7; }
/* Department/queue chips now live INLINE in the single filter row (no second
   row). A hairline separator marks the status→queue boundary. */
.csw-filtsep{ flex:0 0 auto; width:1px; height:18px; align-self:center; background:var(--line); margin:0 3px; }
.csw-queue{ flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--ink-mute); padding:7px 12px; border-radius:var(--r-pill); font-size:var(--fs-small); font-weight:600; cursor:pointer; font-family:var(--body); display:flex; gap:6px; align-items:center; transition:all var(--dur-3) var(--ease-emph); white-space:nowrap; }
.csw-queue.on{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 42%, transparent); }
.csw-queue__c{ font-size:10px; opacity:.7; font-family:var(--mono); }
/* Re-route control in the conversation header. */
.csw-routebtn{ flex:0 0 auto; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-mute); border-radius:var(--r-pill); min-height:34px; padding:0 12px; cursor:pointer; font-size:11.5px; font-weight:600; font-family:var(--body); white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis; transition:all var(--dur-3) var(--ease-emph); }
.csw-routebtn.routed{ color:var(--ink-dim); border-color:color-mix(in srgb, var(--g-violet) 45%, transparent); }
/* Search bar (WhatsApp/Telegram staple). position:sticky still establishes
   the containing block for the absolutely-positioned search icon AND keeps
   the bar pinned to the top of the list pane while threads scroll. */
.csw-searchwrap{ position:sticky; top:0; z-index:3; padding:8px 14px 4px; background:var(--bg); }
.csw-searchwrap__i{ position:absolute; left:24px; top:50%; transform:translateY(-30%); color:var(--ink-mute); font-size:16px; pointer-events:none; }
.csw-searchbar{ width:100%; height:38px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--bg-card); color:var(--ink); font-family:var(--body); font-size:var(--fs-body); padding:0 14px 0 34px; }
.csw-searchbar::placeholder{ color:var(--ink-mute); }
.csw-searchbar:focus{ outline:none; border-color:color-mix(in srgb,var(--g-violet) 45%,transparent); }
/* padding-bottom clears the home indicator so the last row isn't cut off
   and there's no dead gap below the list (2026-06-11). */
.csw-threads{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--safe-bottom); }
/* Tighter rows (10px) so more conversations fit per screen (WhatsApp density). */
.csw-thread{ display:flex; gap:13px; align-items:center; width:100%; text-align:left; border:none; background:transparent; cursor:pointer; padding:10px 16px; border-bottom:1px solid var(--line-soft); position:relative; font-family:var(--body); color:var(--ink); transition:background var(--dur-3) var(--ease-emph); }
.csw-thread:active{ background:var(--bg-card); }
.csw-thread.on{ background:linear-gradient(90deg, color-mix(in srgb, var(--g-violet) 9%, transparent), transparent); }
.csw-thread.on::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
.csw-thread__main{ flex:1; min-width:0; }
.csw-thread__top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; min-width:0; }
/* name flexes + truncates so the time NEVER clips at the right edge (research:
   truncate the name, never lose the trailing timestamp). */
.csw-thread__name{ flex:1 1 auto; min-width:0; font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-dim); }
.csw-thread.unread .csw-thread__name{ color:var(--ink); font-weight:600; }
.csw-thread__time{ flex:0 0 auto; padding-left:8px; font-size:var(--fs-micro); color:var(--ink-mute); font-family:var(--mono); white-space:nowrap; }
/* Clean WhatsApp/Telegram row: preview + a single unread dot. No pills. */
.csw-thread__bot{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.csw-thread__prev{ flex:1; min-width:0; font-size:var(--fs-small); color:var(--ink-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-thread__prev.muted{ font-style:italic; }
.csw-prevtag{ color:var(--ink-faint); }
.csw-unread{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.csw-time--soon{ color:var(--warn); }
.csw-time--late{ color:var(--danger); }

/* gradient-initial avatar (the universal default) */
.csw-av{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:500; font-size:17px; color:#fff; position:relative; overflow:hidden; }
.csw-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.csw-av--sm{ width:36px; height:36px; font-size:14px; }
.csw-av--lg{ width:58px; height:58px; font-size:22px; }
.csw-av__ring{ position:absolute; inset:-3px; border-radius:50%; padding:2px; background:var(--gemini-grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity var(--dur-3); }
.csw-thread.unread .csw-av__ring, .csw-av--live .csw-av__ring{ opacity:1; }
.csw-av__pres{ position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; border:2.5px solid var(--bg); }
.csw-av__pres--wa{ background:var(--ch-wa); } .csw-av__pres--ig{ background:var(--ch-ig); }
/* 2026-06-11 corner flag: high buy-intent (green ₦) or returning (gold ★).
   Top corner so it never collides with the channel presence dot below. */
.csw-av__flag{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 3px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; font-family:var(--mono); line-height:1; border:2px solid var(--bg); z-index:2; }
.csw-av__flag--hot{ background:var(--ch-wa); color:#06210f; }
.csw-av__flag--vip{ background:#f5c451; color:#3a2a00; }

/* channel + status badges */
.csw-badge{ font-size:9.5px; padding:2px 8px; border-radius:var(--r-pill); font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; font-weight:600; border:1px solid; }
.csw-badge--new{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.csw-badge--hot{ color:#fff; border-color:transparent; background:var(--gemini-grad); }
.csw-badge--wa{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, transparent); }
.csw-badge--ig{ color:#d8a5e8; border-color:color-mix(in srgb, #e879f9 32%, transparent); }
.csw-badge--refund{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.csw-badge--quality{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 35%, transparent); }
/* 24h WhatsApp window — thread-row chip */
.csw-win--soon{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent); background:color-mix(in srgb, var(--warn) 12%, transparent); }
.csw-win--closed{ color:var(--ink-mute); border-color:var(--line-strong); background:transparent; }
/* the held line on the closed-window banner: reassurance, not the alarm's colour (2026-09-06) */
.csw-heldline{color:var(--ink);font-weight:700}
/* the head strips a rep reads are at the 12px floor (2026-09-06 rating): the
   path strip, the board-reason label and the trail's times were set at 10 and
   10.5px mono — under the shared rubric's floor for anything a rep must read.
   The path strip already scrolls sideways, so nothing wraps at 375. */
.csw-conv__why{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:6px 14px 8px; border-bottom:1px solid var(--line-soft); font-size:12.5px; line-height:1.4; color:var(--ink-dim); }
.csw-conv__why-k{ font-family:var(--mono); font-size:var(--fs-small); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.csw-conv__why-t{ font-weight:600; color:var(--ink); }
.csw-conv__why .crd-why{ margin:0; flex-basis:100%; }
.csw-conv__path{ display:flex; gap:0; margin:0; padding:5px 14px 6px; list-style:none; border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:var(--fs-small); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); overflow-x:auto; }
.csw-conv__path li{ display:flex; align-items:center; gap:6px; padding-right:14px; white-space:nowrap; }
.csw-conv__path li i{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--line-strong); font-size:10.5px; }
.csw-conv__path li.done{ color:var(--ink-dim); } .csw-conv__path li.done i{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.csw-conv__path li.cur{ color:var(--ink); } .csw-conv__path li.cur i{ background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.csw-trail{ display:flex; flex-direction:column; gap:6px; }
.csw-trail--empty{ color:var(--ink-mute); font-size:12.5px; }
.csw-trail__row{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; font-size:12.5px; line-height:1.4; color:var(--ink-dim); }
.csw-trail__k{ font-family:var(--mono); font-size:var(--fs-small); color:var(--ink-mute); padding-top:2px; }
.csw-trail__row--in .csw-trail__t{ color:var(--ink); } .csw-trail__row--eon .csw-trail__t::before{ content:'✦ '; color:var(--accent); }
.csw-trail__row--held .csw-trail__t{ color:var(--warn); } .csw-trail__row--done .csw-trail__t{ color:var(--ok); }
/* ONE window dial (design pass 02): a tiny draining ring + mono label in the
   conversation bar replaces the three winbar pill treatments. Draw verb —
   the ring is stroke-dashoffset. Mint = CTWA free window, amber = closing
   (<2h), red = closed (the composer template gate carries the CTA). */
.csw-windial{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.05em; color:var(--ink-mute); }
/* origin chip — which page's WhatsApp button sent this customer */
.csw-src{ flex:0 0 auto; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.04em; color:var(--ink-mute); border:1px solid var(--bg-card-2); border-radius:999px; padding:1px 8px; }
.csw-windial svg{ width:22px; height:22px; transform:rotate(-90deg); flex:0 0 auto; }
.csw-windial__tr{ fill:none; stroke:var(--bg-card-2); stroke-width:2.6; }
.csw-windial__pr{ fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; transition:stroke-dashoffset var(--dur-xl) var(--ease-emph-decel); }
.csw-windial--soon{ color:var(--warn); }
.csw-windial--ctwa{ color:var(--ok); }
.csw-windial--closed{ color:var(--danger); }
/* assignment + status chips on the thread row */
.csw-badge--resolved{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent); background:color-mix(in srgb, var(--ok) 10%, transparent); }
.csw-badge--owner{ color:var(--g-violet); border-color:color-mix(in srgb, var(--g-violet) 40%, transparent); text-transform:none; }
/* 360 actions + proactive order status + size hint */
/* L5 (vet 2026-08-30, csw-360-acts-nowrap-clip): five pills in a nowrap
   row inside an overflow-x:hidden panel clipped 'Mark resolved' off a
   360px phone — the row wraps, and these five controls sit on the house
   44px floor (scoped: .csw-mini elsewhere keeps its shared 40px base). */
.csw-360__acts{ display:flex; gap:8px; flex-wrap:wrap; }
.csw-360__acts .csw-mini{ min-height:44px; }
.csw-ord{ border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; font-size:12.5px; background:var(--bg); }
.csw-ord--pending{ border-color:color-mix(in srgb, var(--warn) 35%, var(--line)); }
.csw-ord--done{ border-color:color-mix(in srgb, var(--ok) 35%, var(--line)); }
.csw-ord__sub{ font-size:11px; color:var(--ink-mute); margin-top:3px; font-family:var(--mono); }
.csw-ord .csw-mini{ margin-top:8px; }
.csw-sizehint{ font-size:12px; color:var(--ink-dim); background:color-mix(in srgb, var(--g-violet) 8%, transparent); border:1px solid color-mix(in srgb, var(--g-violet) 22%, transparent); border-radius:var(--r-md); padding:8px 11px; }
.csw-sizehint b{ color:var(--g-violet); }
/* order lifecycle strip on the 360 order card (tail-doors 2026-07-27) */
.csw-olc{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.csw-olc__trail{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.csw-olc__step{ color:var(--ink-mute); opacity:.55; }
.csw-olc__step.on{ color:var(--ok); opacity:1; }
.csw-olc__sep{ color:var(--ink-mute); opacity:.4; }
.csw-olc__sub{ font-size:11px; color:var(--ink-mute); margin-top:4px; }
.csw-olc__sub a{ color:var(--g-violet); }
.csw-olc__due{ color:var(--warn); }
.csw-olc__acts{ margin-top:6px; }
.csw-olc__stars{ display:flex; gap:5px; margin:6px 0; }
.csw-olc__stars button{ width:30px; height:30px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg); color:var(--ink-mute); font-size:12px; font-family:var(--mono); cursor:pointer; }
.csw-olc__stars button.on{ border-color:color-mix(in srgb, var(--ok) 45%, var(--line)); color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent); }

/* ── Conversation pane ─────────────────────────────────────── */
.csw-conv{ flex:1; min-width:0; display:none; flex-direction:column; position:relative; background:radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--g-violet) 5%, transparent), transparent 60%), var(--bg); }
.csw-conv.show{ display:flex; }
/* Sticky so the customer header stays pinned at the top of the conversation
   instead of scrolling away with the transcript on mount (2026-06-18). */
.csw-conv__bar{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line-soft); background:color-mix(in srgb, var(--bg) 75%, transparent); -webkit-backdrop-filter:var(--glass); backdrop-filter:var(--glass); position:sticky; top:0; z-index:4; }
.csw-conv__back{ display:flex; width:34px; height:34px; border-radius:var(--r-pill); border:1px solid var(--line); background:transparent; color:var(--ink-dim); align-items:center; justify-content:center; cursor:pointer; font-size:17px; flex:0 0 auto; }
.csw-conv__id{ flex:1; min-width:0; cursor:pointer; }
.csw-conv__name{ font-family:var(--display); font-size:var(--fs-lg); line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-conv__phone{ font-family:var(--mono); font-size:var(--fs-micro); color:var(--ink-mute); margin-top:1px; }
.csw-conv__sub{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:var(--fs-micro); color:var(--ink-mute); margin-top:3px; }
.csw-conv__360btn{ flex:0 0 auto; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim); border-radius:var(--r-pill); width:34px; height:34px; cursor:pointer; font-size:14px; }

/* customer 360 strip (collapsible) */
.csw-360{ background:color-mix(in srgb, var(--bg-card) 40%, transparent); overflow:hidden; max-height:0; transition:max-height var(--dur-m) var(--ease-emph); will-change:max-height; }
/* 2026-07-25 vet (AW-07): a note-heavy customer's actions row (Assign /
   Resolve / Pin) was silently cut off — the panel clipped at 560px with
   overflow:hidden and no scroll. Cap to the viewport and let it scroll.
   2026-08-09: the border joined this rule rather than gaining a second
   .csw-360.open block — at max-height:0 a standing border-bottom on the
   base painted a permanent hairline under the header (one strand of the
   operator's "green line"), and a duplicate open-rule shadowed this one
   for the pin that guards the scroll. One state, one rule. */
.csw-360.open{ max-height:min(560px, 60vh); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-bottom:1px solid var(--line-soft); }
.csw-360__in{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.csw-360__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:var(--bg-card);border-bottom:1px solid var(--line-soft);font:13px var(--body)}
.csw-360__head button{display:flex;align-items:center;gap:8px;min-height:44px;min-width:64px;border:0;background:transparent;color:var(--ink-dim);font:12px var(--body);cursor:pointer}
.csw-360__head button span{font-size:20px}
/* 2026-07-25 panel reorganisation: labelled sections replace the flat
   slot pile. A section with no painted content collapses to just its
   header (async loaders fill slots in place). */
.csw-360sec{ display:flex; flex-direction:column; gap:8px; padding:10px 0 12px; border-top:1px solid var(--line-soft); }
.csw-360sec:first-child{ border-top:0; padding-top:0; }
.csw-360sec__h{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }
.csw-360__stats{ display:flex; gap:8px; flex-wrap:wrap; }
.csw-stat{ flex:1; min-width:72px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:9px 11px; }
.csw-stat__n{ font-family:var(--display); font-size:17px; }
.csw-stat__l{ font-size:9.5px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono); margin-top:2px; }
.csw-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.csw-chip{ font-size:10px; padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-mute); font-family:var(--mono); text-transform:uppercase; }
.csw-chip.on{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent); background:color-mix(in srgb, var(--ok) 10%, transparent); }
/* G5: "came from ad X" source badge — the click-to-WhatsApp ad that started the chat. */
.csw-src{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:11px; color:var(--ink-dim); background:color-mix(in srgb, var(--a3-lime, var(--ok)) 9%, transparent); border:1px solid color-mix(in srgb, var(--a3-lime, var(--ok)) 30%, transparent); border-radius:var(--r-pill); padding:4px 11px; max-width:100%; }
.csw-src__dot{ width:6px; height:6px; border-radius:50%; background:var(--a3-lime, var(--ok)); flex:0 0 auto; box-shadow:0 0 0 3px color-mix(in srgb, var(--a3-lime, var(--ok)) 18%, transparent); }
.csw-src__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-pinnote{ font-size:12px; color:var(--ink-dim); background:color-mix(in srgb, var(--warn) 8%, transparent); border:1px solid color-mix(in srgb, var(--warn) 25%, transparent); border-radius:var(--r-md); padding:9px 11px; }
.csw-pinnote b{ color:var(--warn); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
/* Editable notes panel in the 360 side panel */
.csw-notes{ display:flex; flex-direction:column; gap:8px; padding:11px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-card); }
.csw-notes__hd{ font-size:10px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute); display:flex; align-items:center; gap:6px; }
.csw-notes__count{ color:var(--accent); }
.csw-notes__list{ display:flex; flex-direction:column; gap:6px; }
.csw-notes__empty{ font-size:12px; color:var(--ink-faint); }
.csw-noteitem{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-dim); line-height:1.4; }
.csw-noteitem span{ flex:1; }
.csw-noteitem__x{ flex:0 0 auto; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:11px; padding:2px; transition:color var(--dur-3); }
.csw-noteitem__x:hover{ color:var(--danger); }
.csw-notes__add{ display:flex; gap:7px; align-items:center; }
.csw-notes__inp{ flex:1; min-width:0; border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:7px 10px; color:var(--ink); font-family:var(--body); font-size:13px; }
.csw-notes__inp:focus{ outline:none; border-color:color-mix(in srgb,var(--g-violet) 50%,var(--line-strong)); }
.csw-notes__btn{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none; background:color-mix(in srgb,var(--accent) 16%,var(--bg-card-2)); color:var(--accent); font-size:17px; line-height:0; cursor:pointer; transition:transform var(--dur-3) var(--ease-emph); }
.csw-notes__btn:active{ transform:scale(.9); }

/* Customer-Intelligence card — value + history + one-click outreach.
   Decision-first: the segment badge + suggested action are the hero. */
.csw-cust{ border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px; background:var(--bg); display:flex; flex-direction:column; gap:9px; animation:csw-bubble-in var(--dur-m) var(--ease-emph) both; }
.csw-cust--new{ background:color-mix(in srgb, var(--g-violet) 6%, var(--bg)); border-color:color-mix(in srgb, var(--g-violet) 30%, var(--line)); }
.csw-cust__hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.csw-cust__name{ font-family:var(--display); font-size:15px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-segbadge{ flex:0 0 auto; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-mute); }
.csw-segbadge.csw-seg--champ{ color:#fff; border-color:transparent; background:var(--gemini-grad-crux); background-size:200% 200%; }
.csw-segbadge.csw-seg--loyal{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent); background:color-mix(in srgb, var(--ok) 10%, transparent); }
.csw-segbadge.csw-seg--risk{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent); background:color-mix(in srgb, var(--warn) 10%, transparent); }
.csw-segbadge.csw-seg--lapsed{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.csw-segbadge.csw-seg--new{ color:var(--g-violet); border-color:color-mix(in srgb, var(--g-violet) 40%, transparent); background:color-mix(in srgb, var(--g-violet) 10%, transparent); }
.csw-cust__stats{ display:flex; gap:6px; flex-wrap:wrap; }
.csw-cstat{ flex:1; min-width:54px; }
.csw-cstat__n{ font-family:var(--mono); font-size:13px; color:var(--ink); line-height:1.1; }
.csw-cstat__l{ font-size:9px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.05em; font-family:var(--mono); margin-top:2px; }
.csw-cust__cats{ font-size:11px; color:var(--ink-mute); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.csw-catchip{ font-size:10px; padding:2px 8px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-dim); }
.csw-cust__act{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line-soft); padding-top:9px; }
.csw-cust__sug{ font-size:12px; color:var(--ink); line-height:1.35; flex:1; min-width:0; }
.csw-cust__draft{ flex:0 0 auto; white-space:nowrap; }
/* L5: the prior-episode line ('Last conversation: quoted ₦X, no order —
   10 days ago') and the panel's loading text — plain, muted, one line.
   .csw-cust-loading had NO rule at all (it painted as raw text). */
.csw-cust__prior{ font-size:12px; color:var(--warn); line-height:1.35; }
.csw-cust-loading{ font-size:12px; color:var(--ink-mute); padding:2px 0; }

/* transcript + bubbles
   2026-06-18 (WhatsApp-grade): tighter row rhythm (~1px between consecutive
   bubbles), CSS bubble tails, and an inline bottom-right time.
   Keyboard avoidance: the .csw-shell already shrinks to the VISUAL viewport
   (--app-height) and pins to --vv-offset-top, so the composer sits above the
   keyboard and .csw-script (flex:1) fills only the visible gap above it — no
   message is hidden. We DON'T add --keyboard-inset padding here: it is set by
   the same visualViewport listener that drives the shell-shrink, so adding it
   would double-count and leave a dead gap between the last bubble and the
   composer. The .csw-kb-open class trims the composer's safe-area pad so it
   rests flush above the keyboard (see .csw-kb-open .csw-composer). */
.csw-script{ flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:14px 12px; display:flex; flex-direction:column; gap:1px;
  /* operator 2026-08-07 "jumbled page": an end-of-thread overscroll must
     die here, never chain up and rubber-band the fixed shell */
  overscroll-behavior:contain;
  /* L1 (2026-08-30): the transcript's FLOOR. As a scroll container its
     automatic minimum size is 0, so it was the only shrinkable item in
     the column and absorbed every band's growth — a lit close thread
     measured it at 28-80px. The floor rides the SHELL's scale, never
     vh: --app-height tracks the visual viewport (keyboard-aware), so
     with the keyboard up the floor shrinks with the shell instead of
     re-clipping the composer mid-typing. */
  min-height:calc(var(--app-height, 100dvh) * .3); }
/* L1: the band budget. Every band between the transcript and the
   composer lives here (shell template wraps them); the STACK is
   bounded, not each band alone, so a fourth lit band scrolls inside
   the wrapper instead of shrinking the conversation — and the composer
   can never leave the shell. Same shell-scale unit as the floor. */
.csw-bands{ flex:0 1 auto; min-height:0;
  max-height:calc(var(--app-height, 100dvh) * .34);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* 6px headroom for .csw-stage__peek (top:-6px on the Stage): as the
     wrapper's first visible band the peek would sit above the scrollport
     and be clipped — pre-L1 it overhung the transcript's bottom edge
     and showed. Costs a 6px strip when no band is lit; invisible on
     the shell's own background. */
  padding-top:6px;
  overscroll-behavior:contain; }
.csw-row{ display:flex; flex-wrap:wrap; margin-top:6px; }
/* Motion = arrival (L4, 2026-08-30). The entrance used to sit on .csw-row
   itself, so it played on the fresh-open innerHTML paint — a flourish over
   history the rep asked for — and was suppressed (no-anim) on the quiet
   poll that inserts the one row that IS news. Now only the reconciler's
   genuinely-new INBOUND row wears it (app.js adds .csw-row--new to fresh
   inserts newer than the previous paint; never the adopted-optimistic
   swap, never a Load-earlier prepend). Same keyframe, new trigger. */
.csw-row--new{ animation:csw-bubble-in var(--dur-m) var(--ease-spring) both; }
.csw-row.grouped{ margin-top:1px; }   /* consecutive same-sender = tight */
/* Product-match chips rendered as ROW SIBLINGS (the folded-album path emits
   them next to the album bubble) must break onto their own full-width line —
   without this they sat BESIDE the album in the flex row and a 2-photo run
   with candidates crushed/overpainted itself on phones (operator IMG_8752,
   2026-07-09). The single-image path nests the chip INSIDE .csw-bub, which
   this selector deliberately does not touch. */
.csw-row > .csw-pm{ flex-basis:100%; }
.csw-row.in{ justify-content:flex-start; } .csw-row.out{ justify-content:flex-end; }
/* Bubble grammar (design pass 02): 7px radius, 3px clipped corner on the
   run-first bubble only; in = card + hairline, out = --bub-out. The CSS
   notch tails retired — hairlines, not boxes. */
.csw-bub{ max-width:min(78%, 300px); padding:6px 9px 5px; border-radius:7px; font-size:var(--fs-lg); line-height:1.4; position:relative; overflow-wrap:anywhere; min-width:0; }
.csw-bub.in{ background:var(--bg-card); border:1px solid var(--line-soft); border-top-left-radius:3px; }
.csw-bub.out{ background:var(--bub-out); color:var(--bub-out-ink); border-top-right-radius:3px; }
.csw-row.grouped .csw-bub.in{ border-top-left-radius:7px; }
.csw-row.grouped .csw-bub.out{ border-top-right-radius:7px; }
/* day divider */
.csw-daydiv{ align-self:center; font-size:var(--fs-micro); color:var(--ink-mute); background:var(--bg-card); border:1px solid var(--line-soft); padding:3px 12px; border-radius:var(--r-pill); margin:12px 0 6px; font-family:var(--mono); }
.csw-bub.pending{ opacity:.55; } .csw-bub.failed{ border-color:var(--danger); cursor:pointer; }
.csw-bub.failed .csw-bub__t{ color:var(--danger); }
.csw-tick{ margin-left:3px; opacity:.85; letter-spacing:-2px; }
.csw-tick.read{ color:var(--g-blue); opacity:1; }
/* A rejected send must never look like a delivered one. 663 rows in 60
   days rendered identically to a delivered message until 2026-08-31 —
   the tick was blank and the rep read that as "sent". Red mark, and the
   reason in plain words on its own line under the bubble. */
.csw-failwhy{ display:block; margin-top:2px; color:var(--danger); opacity:.9;
  font-size:11px; line-height:1.35; letter-spacing:0; white-space:normal; }

/* Toasts (replace native alert) */
.csw-toasts{ position:fixed; left:0; right:0; bottom:calc(16px + var(--safe-bottom)); z-index:96; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.csw-toast{ background:var(--bg-elev); border:1px solid var(--line-strong); color:var(--ink); font-size:13px; padding:11px 16px; border-radius:var(--r-pill); box-shadow:0 8px 28px rgba(0,0,0,.5); max-width:88vw; animation:csw-fade var(--dur-3) both; pointer-events:auto; }
/* L6 (2026-08-30): Undo was padding:0 on 12.5px text — a ~15px target at
   the exact moment a rep reverses a mis-tap one-thumbed. The one-click-
   no-confirms law leans on undo being genuinely REACHABLE: 44px both
   ways, type untouched. */
.csw-toast__undo{ margin-left:12px; border:none; background:none; color:var(--accent); font-weight:700; font-size:12.5px; cursor:pointer; padding:0 12px; min-height:44px; min-width:44px; font-family:var(--body); }
/* The undo toast lays out as a flex row so the 44px key doesn't hang off
   the text baseline, and a 2px hairline drains left-to-right along its
   bottom edge over the SAME six seconds cswToastUndo dwells (keep the
   two in step) — the window the rep could never time is now visible.
   transform-only: one composited property, no layout, no glow. Reduced
   motion: pinned FULL in the reduced-motion block below (the
   .csw-toasts * sweep would snap it to empty on frame one — a bar that
   lies "already gone" is worse than no bar). */
.csw-toast--undo{ display:flex; align-items:center; position:relative; overflow:hidden; padding-top:0; padding-bottom:0; }
.csw-toast__drain{ position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); transform-origin:left; animation:csw-toast-drain 6s linear both; }
@keyframes csw-toast-drain{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.csw-toast.err{ border-color:color-mix(in srgb,var(--danger) 55%,transparent); }
.csw-toast.out{ opacity:0; transform:translateY(8px); transition:all var(--dur-m); }
.csw-bub__src{ font-size:9.5px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); margin-bottom:5px; }
.csw-bub__txt{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; min-width:0; }
/* Photo messages: fill the bubble edge-to-edge (WhatsApp-style), no green
   padding box, never stunted. Negative margins cancel the bubble padding. */
.csw-bub.has-img{ padding:3px 3px 5px; }
.csw-bub__img{ display:block; width:auto; max-width:100%; min-width:230px; max-height:440px; border-radius:5px; object-fit:cover; cursor:zoom-in; background:var(--bg-card-2); transition:transform var(--dur-3) var(--ease-emph); }
.csw-bub.has-img .csw-bub__txt{ padding:2px 8px 0; }
.csw-bub__img:active{ transform:scale(.985); }
/* Inline bottom-right time (WhatsApp): the meta is pinned to the bubble's
   bottom-right corner; an inline spacer appended to the END of the text
   reserves room ONLY on the final line, so a short last line keeps the clock
   on the same row (no extra line of bubble height) while full-width lines
   stay full width. */
.csw-bub__t{ position:absolute; right:9px; bottom:3px; font-size:var(--fs-micro); color:var(--ink-mute); font-family:var(--mono); line-height:1; white-space:nowrap; }
/* WHY a send failed — rendered inside the failed bubble, under the text
   (operator 2026-07-20: show an error message when a message doesn't deliver) */
.csw-send-err{ margin-top:6px; padding-top:5px; border-top:1px solid rgba(255,255,255,.12); font-size:var(--fs-micro); color:var(--danger); line-height:1.35; }
.csw-bub.out .csw-bub__t{ color:color-mix(in srgb,var(--bub-out-ink) 62%,transparent); }
/* trailing inline gutter on the last line only (the clock floats over it) */
.csw-bub__txt::after{ content:''; display:inline-block; width:46px; height:1px; }
/* media / album / template / voice bubbles keep the time as a normal row
   under the asset (an absolute clock would overlap the image), so reset
   those to in-flow and drop the inline text gutter. */
.csw-bub.has-img .csw-bub__t, .csw-bub--album .csw-bub__t, .csw-bub--tpl .csw-bub__t,
.csw-bub--tplcard .csw-bub__t,
.csw-bub:has(.csw-voice) .csw-bub__t, .csw-bub:has(.csw-bub__video) .csw-bub__t,
.csw-bub:has(.csw-bub__file) .csw-bub__t{ position:static; right:auto; bottom:auto; margin-top:4px; text-align:right; }
.csw-bub.has-img .csw-bub__txt::after, .csw-bub--album .csw-bub__txt::after, .csw-bub--tpl .csw-bub__txt::after,
.csw-bub--tplcard .csw-bub__txt::after,
.csw-bub:has(.csw-voice) .csw-bub__txt::after, .csw-bub:has(.csw-bub__video) .csw-bub__txt::after,
.csw-bub:has(.csw-bub__file) .csw-bub__txt::after{ content:none; }
.csw-bub__audio{ display:block; width:230px; max-width:100%; height:38px; margin:2px 0 6px; }
/* Custom voice-note player — WhatsApp-grade: compact single row, round
   play button, waveform scrubber, duration + speed. Does NOT hog height. */
.csw-voice{ display:flex; align-items:center; gap:10px; width:248px; max-width:100%; margin:1px 0 3px; }
.csw-voice__play{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:var(--accent-text); display:flex; align-items:center; justify-content:center; transition:transform var(--dur-3) var(--ease-emph); }
.csw-voice__play:active{ transform:scale(.9); }
.csw-bub.in .csw-voice__play{ background:var(--g-violet); color:#fff; }
.csw-voice__ico{ display:block; width:0; height:0; }
.csw-voice__ico--play{ border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; margin-left:2px; }
.csw-voice__ico--pause{ width:9px; height:11px; border:0; border-left:3px solid currentColor; border-right:3px solid currentColor; box-sizing:border-box; }
/* waveform bar — base (unplayed) + a clipped played overlay on top */
.csw-voice__bar{ flex:1; height:26px; cursor:pointer; position:relative; overflow:hidden; }
.csw-voice__wave{ position:absolute; inset:0; display:flex; align-items:center; gap:2px; }
.csw-voice__wave i{ flex:1; min-width:2px; border-radius:2px; background:color-mix(in srgb,var(--ink) 26%,transparent); }
.csw-bub.out .csw-voice__wave i{ background:rgba(255,255,255,.32); }
.csw-voice__fillwrap{ position:absolute; left:0; top:0; bottom:0; width:0%; overflow:hidden; pointer-events:none; }
/* inner played wave is pinned to the FULL bar width (set in JS) so its bars
   line up 1:1 with the base wave; the fillwrap's width clips the reveal. */
.csw-voice__wave--played{ position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; gap:2px; }
.csw-voice__wave--played i{ flex:1; min-width:2px; border-radius:2px; background:var(--accent); }
.csw-bub.in .csw-voice__wave--played i{ background:var(--g-violet); }
.csw-bub.out .csw-voice__wave--played i{ background:#fff; }
.csw-voice__t{ flex:0 0 auto; font-size:10.5px; font-family:var(--mono); color:var(--ink-mute); min-width:30px; text-align:right; }
.csw-bub.out .csw-voice__t{ color:rgba(255,255,255,.7); }
.csw-voice__spd{ flex:0 0 auto; border:none; background:color-mix(in srgb,var(--ink) 12%,transparent); border-radius:9px; color:var(--ink-mute); font-size:10px; font-family:var(--mono); cursor:pointer; padding:3px 6px; }
.csw-bub.out .csw-voice__spd{ background:rgba(255,255,255,.16); color:rgba(255,255,255,.85); }
.csw-bub__transcript{ font-style:italic; opacity:.85; }
.csw-transcribe{ margin-top:2px; }

/* ── Link previews (unfurls) — WhatsApp/Telegram-style card ──────────
   Appended UNDER the message text inside the bubble. Image on top, then a
   compact site/title/description stack. Tappable (the whole card is an <a>).
   Uses bubble-relative surfaces so it sits flush inside both in/out bubbles. */
.csw-unfurl{
  display:block; margin-top:7px; border-radius:5px; overflow:hidden;
  text-decoration:none; color:inherit;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  border-left:3px solid var(--accent);
  transition:transform var(--dur-3) var(--ease-emph), background var(--dur-3) var(--ease-emph);
  max-width:300px;
}
.csw-bub.out .csw-unfurl{
  border-color:rgba(255,255,255,.16);
  background:rgba(0,0,0,.16);
  border-left-color:var(--accent);
}
.csw-unfurl:active{ transform:scale(.985); }
.csw-unfurl:hover{ background:color-mix(in srgb, var(--bg) 75%, transparent); }
.csw-unfurl__imgwrap{
  width:100%; max-height:170px; overflow:hidden; background:var(--bg-card-2);
  display:flex; align-items:center; justify-content:center;
}
.csw-unfurl__img{
  display:block; width:100%; height:auto; max-height:170px; object-fit:cover;
}
.csw-unfurl__body{ padding:8px 11px 9px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.csw-unfurl__site{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.csw-bub.out .csw-unfurl__site{ color:color-mix(in srgb, var(--accent) 88%, #fff); }
.csw-unfurl__title{
  font-size:13px; font-weight:600; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.csw-bub.out .csw-unfurl__title{ color:var(--bub-out-ink); }
.csw-unfurl__desc{
  font-size:11.5px; line-height:1.35; color:var(--ink-mute);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.csw-bub.out .csw-unfurl__desc{ color:color-mix(in srgb,var(--bub-out-ink) 62%,transparent); }
/* No-image variant → tighter text-only card. */
.csw-unfurl--noimg .csw-unfurl__imgwrap{ display:none; }
/* Storefront product references: one compact photo/title row, not a second
   tall message. The original text and reference remain in .csw-bub__txt. */
.csw-unfurl--product{
  display:grid; grid-template-columns:80px minmax(0,1fr); min-height:88px;
  border-left-width:1px; border-radius:10px; max-width:300px;
}
.csw-unfurl--product .csw-unfurl__imgwrap{
  width:80px; height:96px; max-height:none;
}
.csw-unfurl--product .csw-unfurl__img{
  width:100%; height:100%; max-height:none; object-fit:contain;
}
.csw-unfurl--product .csw-unfurl__body{ justify-content:center; gap:8px; padding:10px; }
.csw-unfurl--product .csw-unfurl__title{ font-size:14px; line-height:1.35; }
.csw-unfurl__open{ display:flex; align-items:center; gap:5px; font-size:12px; line-height:1.3; color:var(--ink-mute); }
.csw-unfurl__open svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; }
.csw-unfurl--product.csw-unfurl--noimg{ grid-template-columns:minmax(0,1fr); min-height:64px; }
/* Generated storefront question: product first, exact source one tap away. */
.csw-product-intent{ font-size:12px; line-height:1.35; color:var(--ink-mute); margin-bottom:4px; }
.csw-product-original{ margin-top:4px; min-width:0; }
.csw-product-original summary{
  display:flex; align-items:center; gap:6px; min-height:44px;
  font-size:12px; line-height:1.35; color:var(--ink-mute); cursor:pointer;
  list-style:none;
}
.csw-product-original summary::-webkit-details-marker{ display:none; }
.csw-product-original summary::before{
  content:'›'; display:inline-block; width:8px; flex-shrink:0;
  font-size:16px; line-height:1; transition:transform 140ms ease;
}
.csw-product-original[open] summary::before{ transform:rotate(90deg); }
.csw-product-original summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.csw-product-original .csw-bub__txt{ font-size:13px; line-height:1.4; padding:2px 0 8px; }
/* intent/sentiment chip in the conversation header */
.csw-intentchip{ display:inline-block; margin-top:5px; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:2px 9px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-mute); }
.csw-intentchip.csw-intent--high{ color:#fff; border-color:transparent; background:var(--gemini-grad); }
.csw-intentchip.csw-intent--neg{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); background:color-mix(in srgb, var(--danger) 10%, transparent); }

/* ── Channel label (WA/IG) in the conversation header ── */
.csw-ch{ font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:1px 6px; border-radius:var(--r-pill); margin-right:5px; }
.csw-ch--wa{ color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.csw-ch--ig{ color:#d8a5e8; border:1px solid color-mix(in srgb, #e879f9 40%, transparent); }

/* ── Loyalty / VIP tier badge (conversation header) ── */
.csw-tier{ font-family:var(--mono); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:1px 7px; border-radius:var(--r-pill); margin-right:5px; }
.csw-tier--gold{ color:#1a1400; background:linear-gradient(135deg,#ffd36e,#e8b53a); border:1px solid color-mix(in srgb,#ffd36e 60%,transparent); }
.csw-tier--silver{ color:#cfe6ff; border:1px solid color-mix(in srgb,#9ec5ff 45%,transparent); background:color-mix(in srgb,#9ec5ff 12%,transparent); }
/* Concierge (mig 645) — the band above gold. Deliberately quieter than gold's
   metal: this is standing, not a prize. Ink on bone, one hairline. */
.csw-tier--concierge{ color:#141414; background:linear-gradient(135deg,#f4efe6,#ded5c6); border:1px solid color-mix(in srgb,#8c8272 55%,transparent); }

/* ── Labels ── */
.csw-labels{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.csw-labeltag{ font-size:9.5px; padding:2px 8px; border-radius:var(--r-pill); border:1px solid var(--line-strong); color:var(--ink-dim); font-family:var(--mono); text-transform:none; letter-spacing:0; }
/* Hamburger button */
.csw-burger{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:38px; height:38px; padding:0 9px; border:none; background:transparent; cursor:pointer; border-radius:var(--r-sm); position:relative; flex:0 0 auto; }
.csw-burger span{ display:block; height:2px; border-radius:2px; background:var(--ink-dim); transition:background var(--dur-3); }
.csw-burger:hover span{ background:var(--ink); }
.csw-burger.on::after{ content:''; position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--bg-elev); }
.csw-burger.csw-burger--alert::after{ content:''; position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 2px var(--bg-elev); }
/* Pending automated-messages indicator (Automated lives in the drawer now). */
.csw-burger--dot:not(.on)::after{ content:''; position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--g-violet); box-shadow:0 0 0 2px var(--bg-elev); }

/* Active-filter pill above the thread list */
.csw-activefilter{ padding:0 14px 8px; }
.csw-activefilter__pill{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; padding:5px 6px 5px 11px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); color:var(--ink); }
.csw-activefilter__x{ border:none; background:rgba(0,0,0,.25); color:var(--ink); width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:10px; line-height:1; }

/* Left drawer (Telegram-style) */
@keyframes csw-fade { from{opacity:0} to{opacity:1} }
.csw-drawer-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; animation:csw-fade var(--dur-3) both; }
.csw-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(82vw,320px); background:var(--bg-elev); border-right:1px solid var(--line); z-index:61; transform:translateX(-102%); transition:transform var(--dur-4) var(--ease-emph-decel); display:flex; flex-direction:column; padding-top:var(--safe-top); box-shadow:2px 0 24px rgba(0,0,0,.4); }
.csw-drawer.open{ transform:translateX(0); }
.csw-drawer__h{ display:flex; align-items:center; justify-content:space-between; padding:18px 16px 12px; border-bottom:1px solid var(--line-soft); }
.csw-drawer__t{ font-family:var(--display); font-size:18px; }
.csw-drawer__scroll{ flex:1; overflow-y:auto; padding:8px 8px 24px; }
.csw-drawer__sec{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); padding:14px 10px 6px; }
.csw-drawer__item{ display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:11px 10px; border:none; background:transparent; color:var(--ink-dim); cursor:pointer; border-radius:var(--r-sm); font-family:var(--body); font-size:14px; text-align:left; }
.csw-drawer__item:hover{ background:var(--bg-card); }
.csw-drawer__item.on{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--ink); }
.csw-drawer__dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.csw-drawer__dot--all{ background:linear-gradient(135deg,#4796E3,#9177C7,#CA6673); }
.csw-drawer__alert{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 4px 6px; padding:10px; border-radius:var(--r-sm); background:var(--bg-card); color:var(--ink-dim); font-size:14px; line-height:1.35; }
.csw-drawer__alert--down{ color:var(--danger); }
.csw-drawer__alert .csw-boardline__act{ flex:0 0 auto; min-height:44px; }
.csw-drawer__dot--add{ display:flex; align-items:center; justify-content:center; background:var(--bg-card-2); color:var(--accent); font-size:13px; line-height:1; }
/* Automated-messages drawer entry (moved out of the top bar 2026-06-18). */
.csw-drawer__dot--auto{ background:color-mix(in srgb, var(--g-violet) 55%, var(--bg-card-2)); }
.csw-drawer__lbl{ flex:1; }
.csw-drawer__c{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); background:var(--bg-card); padding:1px 8px; border-radius:var(--r-pill); }
.csw-labelpick{ display:flex; gap:8px; flex-wrap:wrap; }
.csw-labelchip{ font-size:12.5px; padding:8px 14px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim); cursor:pointer; font-family:var(--body); border-left:3px solid var(--lc); }
.csw-labelchip.on{ background:color-mix(in srgb, var(--lc) 18%, transparent); color:var(--ink); border-color:var(--lc); }
.csw-newlabel{ border-top:1px solid var(--line-soft); margin-top:14px; }
.csw-colorpick{ display:flex; gap:10px; }
.csw-colordot{ width:24px; height:24px; border-radius:50%; border:2px solid transparent; background:var(--lc); cursor:pointer; padding:0; }
.csw-colordot.on{ border-color:var(--ink); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--lc); }

/* ── Reply / quote ── */
.csw-reply-ctx{ padding:6px 2px 8px; }
.csw-reply-q{ display:flex; align-items:center; gap:10px; background:color-mix(in srgb, var(--g-violet) 9%, var(--bg-card)); border-left:3px solid var(--g-violet); border-radius:10px; padding:9px 10px; }
.csw-reply-q__t{ flex:1; font-size:12.5px; color:var(--ink-dim); line-height:1.35; overflow:hidden; }
.csw-reply-q__t b{ color:var(--g-violet); font-size:11px; display:block; margin-bottom:1px; }
.csw-reply-x{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink-mute); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; transition:all var(--dur-3) var(--ease-emph); }
.csw-reply-x:hover{ color:var(--ink); border-color:var(--line-strong); }
.csw-bub{ position:relative; }
.csw-bub__reply{ position:absolute; top:5px; right:5px; opacity:0; width:24px; height:24px; border-radius:50%; border:none; background:color-mix(in srgb,var(--bg) 70%,transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--ink-dim); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; transition:opacity var(--dur-3), color var(--dur-3), transform var(--dur-3) var(--ease-emph); z-index:2; }
.csw-bub:hover .csw-bub__reply{ opacity:.9; }
.csw-bub__reply:hover{ color:var(--ink); }
.csw-bub__reply:active{ transform:scale(.88); }
/* touch (no hover): keep the reply affordance hidden — swipe-to-reply + the
   long-press react bar are the touch gestures, matching WhatsApp. */
@media (hover:none){ .csw-bub__reply{ display:none; } }

/* iOS-safe hidden file inputs (2026-08-28): display:none can make a
   programmatic .click() a silent no-op in a standalone PWA — off-screen
   keeps the input clickable everywhere. */
.csw-fileoff{ position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0; }

/* The copy icon (operator ask, 2026-08-28): the long-press menu's Copy
   existed but nobody could see it. Same family as the reply key, one
   slot left of it; on TOUCH it stays visible at a whisper — reps live
   on phones and discoverability is the whole ask. */
.csw-bub__copy{ position:absolute; top:5px; right:34px; opacity:0; width:24px; height:24px;
  border-radius:50%; border:none; background:color-mix(in srgb,var(--bg) 70%,transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--ink-dim);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:opacity var(--dur-3), color var(--dur-3), transform var(--dur-3) var(--ease-emph); z-index:2; }
.csw-bub__copy svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.csw-bub:hover .csw-bub__copy{ opacity:.9; }
.csw-bub__copy:hover{ color:var(--ink); }
.csw-bub__copy:active{ transform:scale(.88); }
/* TOUCH (the rep's world): the overlay slot collided with line one and
   the clock (Opus vet: 5 glyphs under the button on a real message).
   The key moves into the CLOCK STRIP — the bottom padding every bubble
   already reserves — bottom-left, opposite the timestamp, with a 44px
   hit box around a 24px glyph (the desk's own tap-target floor). */
@media (hover:none){
  .csw-bub__copy{ opacity:.5; top:auto; right:auto; bottom:-8px; left:-4px;
    width:44px; height:44px; background:none; -webkit-backdrop-filter:none;
    backdrop-filter:none; }
  .csw-bub__copy svg{ width:14px; height:14px; }
  .csw-bub.in .csw-bub__copy, .csw-bub.out .csw-bub__copy{ border-radius:12px; }
  /* Confirmation vet: the bottom-left key sat ON the last text line of
     every INBOUND bubble (outbound got the static clock strip, inbound
     kept the absolute corner clock with 5px pad — no strip existed).
     On touch, inbound joins the strip so the key owns its own row.
     Desktop keeps the corner clock (the key floats top-right there). */
  .csw-bub.in .csw-bub__t{ position:static; right:auto; bottom:auto;
    margin-top:3px; text-align:right; }
  .csw-bub.in .csw-bub__txt::after{ content:none; }
}

/* ── Extra media bubbles ── */
.csw-bub__video{ display:block; max-width:240px; width:100%; border-radius:5px; margin:2px 0 4px; background:#000; }
.csw-bub__sticker{ max-width:140px !important; background:transparent !important; }
.csw-bub__file{ display:inline-block; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--line); color:var(--ink-dim); text-decoration:none; font-size:12.5px; }
.csw-bub__unsupported{ font-style:italic; color:var(--ink-mute); }
/* Expired/unavailable IG story media — clean placeholder, not a broken glyph. */
.csw-bub__storygone{ display:flex; align-items:center; justify-content:center; gap:7px; min-width:210px; min-height:96px; padding:18px 16px; border-radius:5px; background:var(--bg-card-2); border:1px solid var(--line); color:var(--ink-mute); font-size:12.5px; font-style:italic; text-align:center; }

/* ── Command bar ───────────────────────────────────────────── */
.csw-composer{ flex:0 0 auto; border-top:1px solid var(--line-soft); background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:var(--glass); backdrop-filter:var(--glass); padding:8px 12px calc(8px + var(--safe-bottom)); position:relative; }
/* While the keyboard is up the home-indicator inset is hidden behind it —
   drop the safe-area pad so the composer sits flush above the keyboard with
   no dead gap (WhatsApp). */
.csw-kb-open .csw-composer{ padding-bottom:8px; }
.csw-winclosed{ font-size:11.5px; color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); border-radius:var(--r-sm); padding:7px 11px; margin-bottom:9px; }
/* Conversation pickup (2026-07-26): the one-tap template re-open inside the
   closed-window banner. */
.csw-pickupbtn{ margin-left:8px; font-size:11px; font-weight:600; font-family:var(--body); color:color-mix(in srgb,var(--accent) 88%,#fff); background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius:var(--r-pill,999px); padding:4px 11px; cursor:pointer; white-space:nowrap; }
.csw-pickupbtn:disabled{ opacity:.65; cursor:default; }
/* Delivered-template log rows: template name rides beside the customer. */
.csw-tplrow__tpl{ font-size:10px; font-weight:500; color:var(--ink-mute); margin-left:6px; }
/* Template gallery (2026-08-02, fr 8e666ddb view 3): one card per distinct
   template — family art, plain label, newest real copy, honest counts. */
.csw-gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; padding:2px; }
.csw-galcard{ display:flex; flex-direction:column; background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden; }
.csw-galcard__img{ width:100%; height:86px; object-fit:cover; display:block; }
.csw-galcard__body{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.csw-galcard__fam{ font-size:12.5px; font-weight:700; color:var(--ink); }
.csw-galcard__raw{ font-size:10px; font-weight:500; color:var(--ink-mute); margin-left:5px; }
.csw-galcard__sample{ font-size:11.5px; color:var(--ink-dim); line-height:1.45; }
.csw-galcard__meta{ font-size:10.5px; color:var(--ink-mute); }
.csw-galcard__bad{ color:var(--warn); font-weight:600; }
/* Jump-to-latest pill (L4, 2026-08-30): 44px floor (was 40 — under the
   desk's own law), decorative drop shadow dropped for the flat 1px border,
   and pill-shaped so the plain-text count ('3 new') fits when the
   reconciler feeds it. Entrance stays the existing csw-fade — the un-hide
   replays it, so the pill appearing IS the arrival cue; no new keyframe. */
.csw-scrollbtm{ position:absolute; right:14px; bottom:calc(84px + var(--safe-bottom)); min-width:44px; min-height:44px; padding:0 13px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--bg-elev); color:var(--ink); font-size:15px; font-weight:600; font-family:var(--body); cursor:pointer; z-index:5; animation:csw-fade var(--dur-3) both; }
/* Macro strip (design pass 02): the research macro pack — the measured
   closers — one tap above the composer instead of behind the + tray.
   Same source as the Quick sheet (/api/cs/canned-replies; DB rows override
   the defaults). ✦ Suggest keeps violet: AI stays visually reserved. */
.csw-macros{ display:flex; gap:6px; padding:0 2px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.csw-macros::-webkit-scrollbar{ display:none; }
.csw-macro{ flex:0 0 auto; font-family:var(--body); font-size:var(--fs-small); font-weight:600; color:var(--ink-dim); border:1px solid var(--line-soft); border-radius:var(--r-xs); padding:6px 11px; background:var(--bg-elev); cursor:pointer; transition:border-color var(--dur-3) var(--ease-emph), color var(--dur-3), transform var(--dur-2) var(--ease-emph); white-space:nowrap; }
.csw-macro:hover{ border-color:var(--accent); color:var(--ink); }
.csw-macro:active{ transform:scale(.96); }
.csw-macro--ai{ color:var(--g-violet); border-color:color-mix(in srgb, var(--g-violet) 35%, transparent); }
.csw-tray{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:9px; }
.csw-tray::-webkit-scrollbar{ display:none; }
.csw-tray.collapsed{ display:none; }
/* 2026-06-11 WhatsApp-style composer: ONE soft pill row — [+] textarea
   [send] all inline inside the same surface, no hard border / no second
   "toolbar" line shrinking the text area. The "+" toggles the tools tray.
   2026-06-18 (WhatsApp-grade): center-aligned row + equal 36px controls +
   a one-line textarea that grows; the bar no longer looks oversized or
   misaligned on mobile. */
/* 2026-06-19: aligned to the EON-main .composer (app.css ~1913): a hairline
   --line border + a border-strengthen on focus (instead of the violet ring),
   so the CS pill reads as the same control family as the owner's chat. Keeps
   the CRUX dark surface — no light background imported. */
/* flex-end (not center): on a multi-line draft the +/emoji/send controls
   pin to the bottom row beside the send action (WhatsApp), instead of
   floating to vertical center of the grown box. */
.csw-inputbox{ display:flex; align-items:flex-end; gap:8px; border:1px solid var(--line); background:var(--bg-card); border-radius:var(--r-md); padding:6px 8px; transition:border-color var(--dur-3); }
/* Opus vet M-12 (WCAG 2.4.11): with the textarea's own outline opted out
   below, line-strong vs line was two near-identical greys — keyboard
   focus was effectively invisible. The inputbox now takes the same
   violet focus voice every other input on this desk already speaks. */
.csw-inputbox:focus-within{ border-color:color-mix(in srgb, var(--g-violet) 50%, var(--line-strong)); }
.csw-plus{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:var(--ink-mute); font-size:23px; line-height:0; cursor:pointer; transition:transform var(--dur-3) var(--ease-emph), color var(--dur-3); }
/* nothing rotates (design pass 02) — the + signals open state by color */
.csw-plus.on{ color:var(--accent); }
.csw-tool{ flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim); border-radius:var(--r-pill); padding:7px 13px; font-size:var(--fs-small); font-weight:600; cursor:pointer; font-family:var(--body); transition:all var(--dur-3) var(--ease-emph); white-space:nowrap; }
.csw-tool:active{ transform:scale(.94); }
.csw-tool svg{ width:15px; height:15px; }
.csw-tool--ai{ border-color:transparent; background:color-mix(in srgb, var(--g-violet) 14%, var(--bg-card)); color:#cdbcf0; }
/* Grows from a single line; height tracks one row at rest (no oversized box),
   line-height 1.3, 15px on mobile for legibility / 14px on desktop. */
/* max-height MUST equal the JS grow cap (160px in bindComposer's grow()):
   when CSS capped at 150 while JS grew to 160 with overflow hidden, content
   in the 150–160px band clipped mid-word with scrolling disabled (design
   vet 2026-07-26, SEV-3). One owner per dimension: JS grows, CSS agrees. */
.csw-input{ flex:1; min-width:0; display:block; resize:none; height:34px; min-height:34px; max-height:160px; padding:7px 6px; border:none; background:transparent; color:var(--ink); font-family:var(--body);
  /* 16px, NOT var(--fs-lg)=15px (operator 2026-08-07: "the full page gets
     jumbled up when I want to chat"): iOS Safari auto-ZOOMS the whole page
     on focusing any input under 16px — the zoom is the jumble. The main
     chat learned this in WS-C (app.css: "16px — no iOS zoom"); this desk
     never did. Desktop pointers get the design size back below. */
  font-size:16px; line-height:1.3;
  /* grow() writes measure ('auto') + final px in ONE frame — only the final
     value commits, so this animates px→px between keystrokes: the box grows
     smoothly instead of snapping a line at a time (motion pass 2026-07-26). */
  transition:height .14s var(--ease-emph-decel); }
/* pointer:fine — a touch-primary iPad stays ≥16px (it zooms like a phone) */
@media (min-width:880px) and (pointer:fine){ .csw-input{ font-size:var(--fs-body); } }
.csw-input:focus{ outline:none; }
.csw-input::placeholder{ color:var(--ink-mute); }
.csw-send{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:var(--accent-text); display:flex; align-items:center; justify-content:center; transition:all var(--dur-3) var(--ease-emph); }
.csw-send:active{ transform:scale(.9); }
.csw-send:disabled{ opacity:.35; background:var(--bg-card-2); color:var(--ink-mute); }
.csw-send svg{ width:18px; height:18px; }
/* Keyboard-shortcut hint under the composer pill — mirrors the EON-main
   .composer-hint (↵ to send · ⇧↵ for newline) but on the CRUX dark palette
   (uses --ink-mute, no light background). Compact, right-aligned, fades. */
.csw-hint{ font-size:10px; color:var(--ink-mute); letter-spacing:.04em; padding:2px 6px 0; margin-top:3px; opacity:.6; text-align:right; user-select:none; transition:opacity var(--dur-3); }
.csw-inputbox:focus-within + .csw-hint{ opacity:.85; }
@media (max-width:480px){ .csw-hint{ font-size:9.5px; opacity:.45; } }

/* ══ Overlays: lightbox, sheets, modals ════════════════════════
   z ladder (design pass 02, normalized): in-pane chrome 1-5 (wash 0 ·
   content 1 · searchwrap 3 · conv bar 4 · topbar 5) · emojipop 30 ·
   reactbar 40 · shell 60 · drawer 61 · overlay/sheets 80 · lightbox 90 ·
   confetti 95 · toasts 96 (feedback always wins). ══ */
.csw-overlay{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:flex-end; justify-content:center; }
.csw-overlay--center{ align-items:center; padding:18px; }
/* --aside: a sheet you can think ALONGSIDE, not one that blinds you.
   Operator 2026-08-07 ("ask eon blocks chat"): the per-task Ask EON
   drawer opened as a full modal over the very task it was answering
   about — 62% black plus an 8px blur — so the thing you were asking
   about was unreadable while you asked. Light scrim, no blur, and a
   shorter sheet so the content above stays legible. */
.csw-overlay--aside{ background:rgba(0,0,0,.28); -webkit-backdrop-filter:none;
  backdrop-filter:none; }
.csw-overlay--aside .csw-sheet{ max-height:62vh; }
@media (min-width:880px){ .csw-overlay{ align-items:center; padding:24px; } }
.csw-sheet{ width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-squircle) var(--r-squircle) 0 0; animation:csw-sheet-up var(--dur-m) var(--ease-emph-decel); padding:18px 16px calc(18px + var(--safe-bottom)); }
@media (min-width:880px){ .csw-sheet{ border-radius:var(--r-squircle); animation:csw-rise var(--dur-m) var(--ease-emph-decel); } }
.csw-sheet__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.csw-sheet__t{ font-family:var(--display); font-size:19px; }
.csw-x{ border:1px solid var(--line); background:transparent; color:var(--ink-dim); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px; }
.csw-grab{ width:38px; height:4px; border-radius:2px; background:var(--line-strong); margin:0 auto 14px; }

/* lightbox */
.csw-lightbox{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; padding:20px; }
.csw-lightbox img, .csw-lightbox video{ max-width:100%; max-height:80vh; border-radius:14px; object-fit:contain; }
/* zoomable photo (2026-07-25): transform driven by the pinch/double-tap
   handler in cswLightbox — pan is a translate, so no scrollbars. */
.csw-lightbox img{ touch-action:none; will-change:transform; cursor:zoom-in; }
.csw-lightbox img.zoomed{ cursor:grab; }
.csw-lightbox__hint{ color:rgba(255,255,255,.55); font-size:11.5px; letter-spacing:.04em; }
.csw-lightbox__cap{ color:var(--ink-dim); font-size:13px; text-align:center; max-width:560px; }
.csw-lightbox__x{ position:absolute; top:calc(16px + var(--safe-top)); right:16px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-size:20px; cursor:pointer; }

/* search input in sheets */
.csw-search{ width:100%; padding:12px 15px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--bg-card); color:var(--ink); font-family:var(--body); font-size:14px; margin-bottom:14px; }
.csw-search:focus{ outline:none; border-color:color-mix(in srgb, var(--g-violet) 50%, var(--line-strong)); }

/* product card (in sheet + in chat) */
.csw-prod{ display:flex; gap:12px; padding:11px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); margin-bottom:10px; }

/* WA-taps badge on tapped cards (upgrade 2026-07-24) */
.csw-taps { position: absolute; z-index: 2; bottom: 4px; left: 4px; font-size: 10px;
  padding: 2px 6px; border-radius: 3px; background: rgba(10,10,12,.78);
  color: #b5f23d; border: 1px solid rgba(181,242,61,.5); font-family: var(--mono, 'Archivo', sans-serif); }
.csw-prod__imgwrap{ position:relative; flex:0 0 auto; width:80px; height:80px; border-radius:12px; overflow:hidden; background:var(--bg-card-2); display:flex; align-items:center; justify-content:center; }
.csw-prod__img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.csw-prod__ph{ position:absolute; color:var(--ink-faint); font-size:26px; z-index:0; }
.csw-prod__m{ flex:1; min-width:0; }
.csw-prod__t{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-prod__row{ display:flex; align-items:center; gap:8px; margin-top:3px; flex-wrap:wrap; }
.csw-prod__p{ font-family:var(--display); font-size:15px; }
.csw-prod__stk{ font-size:10px; font-family:var(--mono); padding:1px 7px; border-radius:var(--r-pill); }
.csw-prod__stk.ok{ color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 40%,transparent); }
.csw-prod__stk.zero{ color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 40%,transparent); }
.csw-prod__stk.draft{ color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); text-transform:uppercase; }
.csw-sizes{ display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.csw-size{ font-size:11px; padding:3px 9px; border-radius:8px; border:1px solid var(--line); color:var(--ink-dim); cursor:pointer; background:var(--bg-card); font-family:var(--mono); }
.csw-size.oos{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.csw-size.sel{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.csw-prod__acts{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.csw-mini{ font-size:12px; font-weight:600; padding:7px 13px; border-radius:var(--r-pill); cursor:pointer; border:1px solid var(--line); background:var(--bg-card); color:var(--ink); font-family:var(--body); }
.csw-mini--p{ border-color:transparent; background:var(--accent); color:var(--accent-text); }
/* on-theme product action buttons (replaces the dated round green pills):
   squared, mono-tinted, decision-first; the primary action uses an accent
   tint rather than a full lime fill so it reads as part of the dark UI. */
.csw-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:8px 14px; border-radius:10px; cursor:pointer; border:1px solid var(--line-strong); background:var(--bg-card-2); color:var(--ink-dim); font-family:var(--body); transition:all var(--dur-3) var(--ease-emph); min-height:38px; }
.csw-pill:hover{ color:var(--ink); border-color:color-mix(in srgb,var(--ink) 28%,transparent); }
.csw-pill:active{ transform:scale(.95); }
.csw-pill__i{ font-size:13px; line-height:1; opacity:.85; }
.csw-pill--accent{ border-color:transparent; background:color-mix(in srgb,var(--accent) 16%,var(--bg-card-2)); color:var(--accent); }
.csw-pill--accent:hover{ background:color-mix(in srgb,var(--accent) 24%,var(--bg-card-2)); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
/* photo source picker — library vs camera, side by side */
.csw-photopick{ display:flex; gap:10px; }
.csw-photopick__b{ flex:1; justify-content:center; padding:13px 14px; font-size:13.5px; border-radius:12px; }

/* inventory chip */
.csw-stock{ display:flex; flex-direction:column; gap:8px; font-size:12px; }
.csw-stock__l{ padding:4px 10px; border-radius:var(--r-pill); border:1px solid var(--line); font-family:var(--mono); color:var(--ink-dim); align-self:flex-start; }
.csw-stock__l b{ color:var(--ok); } .csw-stock__l.zero b{ color:var(--danger); }
/* per-location SIZE breakdown ("XL·11 · L·9 — Abuja") */
.csw-stockloc{ display:flex; flex-direction:column; gap:5px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-card); }
.csw-stockloc__sizes{ display:flex; gap:5px; flex-wrap:wrap; }
.csw-stockloc__name{ font-size:10.5px; font-family:var(--mono); color:var(--ink-mute); text-transform:uppercase; letter-spacing:.04em; }
.csw-szchip{ font-size:11px; font-family:var(--mono); color:var(--ink-dim); background:var(--bg-card-2); border:1px solid var(--line-soft); border-radius:7px; padding:2px 7px; }
.csw-szchip b{ color:var(--ok); font-weight:700; }
/* live-stock sheet honest hedge (Shopify sells it, no branch shows units) */
.csw-stockhedge{ font-size:11.5px; color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); border-radius:var(--r-md); padding:7px 10px; }
/* staff notes under the stock panel (catalog_facts — measurements, live media, taught names) */
.csw-stockfacts{ margin-top:8px; }
.csw-stockfacts:empty{ display:none; }
.csw-stockfacts__h{ font-size:10.5px; font-family:var(--mono); color:var(--ink-mute); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.csw-factline{ font-size:12px; color:var(--ink-dim); padding:3px 0; }
.csw-factline a{ color:var(--accent); text-decoration:none; }

/* order builder */
.csw-oline{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line-soft); font-size:13px; }
.csw-oline:first-child{ border-top:none; }
.csw-oline__q{ font-family:var(--mono); color:var(--ink-mute); }
/* tappable cart thumbnail (tap to enlarge for confirmation) */
.csw-oline__thumb{ flex:0 0 auto; width:42px; height:42px; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--bg-card-2); padding:0; cursor:zoom-in; display:flex; align-items:center; justify-content:center; }
.csw-oline__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.csw-oline__thumb--ph{ color:var(--ink-faint); font-size:18px; cursor:default; }
.csw-oline__thumb:active{ transform:scale(.94); }
.csw-ototal{ display:flex; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--display); font-size:18px; }
.csw-confirm{ width:100%; margin-top:16px; padding:14px; border-radius:var(--r-md); border:none; cursor:pointer; font-family:var(--body); font-size:14px; font-weight:700; background:var(--accent); color:var(--accent-text); }
.csw-warn{ font-size:11.5px; color:var(--warn); margin-top:10px; text-align:center; }

/* notes */
.csw-note{ padding:11px 0; border-top:1px solid var(--line-soft); font-size:13px; }
.csw-note:first-child{ border-top:none; }
.csw-note__meta{ font-size:10.5px; color:var(--ink-mute); font-family:var(--mono); margin-top:5px; display:flex; gap:10px; }

/* empty + skeleton */
.csw-empty{ padding:46px 20px; text-align:center; color:var(--ink-mute); font-size:var(--fs-body); line-height:1.55; max-width:340px; margin:0 auto; }
.csw-empty__m{ font-family:var(--display); font-size:40px; color:var(--ink-mute); margin-bottom:10px; }
.csw-skel{ border-radius:var(--r-md); background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-2) 50%, var(--bg-card) 75%); background-size:200% 100%; animation:csw-shimmer 1.4s linear infinite; }
/* .csw-spin RETIRED (audit 2026-07-12): zero emitters and the last rotation
   in the file — nothing rotates (design pass 02). csw-skel/.csw-think carry
   the loading states. */
.csw-think{ background:linear-gradient(90deg, var(--ink-mute) 0%, #fff 50%, var(--ink-mute) 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:csw-shimmer 1.8s linear infinite; }

/* confetti */
.csw-conf{ position:fixed; pointer-events:none; z-index:95; }
.csw-conf i{ position:absolute; width:9px; height:9px; border-radius:2px; animation:csw-confetti .9s var(--ease-emph-accel) forwards; }

/* ══ DESKTOP enhancement (mobile-first → split at 880px) ════════ */
@media (min-width:880px){
  .csw-topbar{ padding:14px 22px; }
  .csw-pulse{ padding:22px; display:grid; grid-template-columns:340px 1fr; grid-auto-rows:min-content; gap:16px; align-content:start; }
  .csw-hero{ grid-row:span 2; }
  .csw-gauges{ grid-template-columns:repeat(4,1fr); }
  /* inbox is a two-pane split; both always visible */
  .csw-side{ flex:0 0 360px; border-right:1px solid var(--line-soft); }
  .csw-conv{ display:flex; }                 /* always shown on desktop */
  .csw-conv__back{ display:none; }           /* no back button on desktop */
  .csw-bub{ max-width:62%; }
  /* 360 panel is COLLAPSIBLE on desktop too (info-icon toggles) so it never
     blocks the chat — base .csw-360 (max-height:0) + .open expand apply. */
}

/* mobile: conv slides over the list; list hidden when a thread is open */
@media (max-width:879px){
  .csw-inbox.has-active .csw-side{ display:none; }
  .csw-inbox.has-active .csw-conv{ display:flex; }
  .csw-bub{ max-width:76%; }
  /* give the open conversation the full screen — hide the shell top bar
     (the conversation's own bar carries back + customer + 360) */
  .csw-shell:has(.csw-inbox.has-active) .csw-topbar{ display:none; }
  /* …and the pinned "Team — Ask a teammate" row (sosInjectCsTeamRow mounts it
     as a sibling above .csw-body, OUTSIDE .csw-inbox). Without this it stayed
     stuck above the open customer conversation on mobile — the strip the
     operator saw hovering over the chat. It belongs only on the inbox list. */
  .csw-shell:has(.csw-inbox.has-active) .sos-csteam{ display:none; }
}

/* ════════════════════════════════════════════════════════════════
   People OS — HR admin dashboard (?v=hr). Minimalist + detailed,
   token-driven (no raw hex; gradient = achievement, danger/warn = problem).
   3-tier hierarchy: hero KPIs → action cards → reference cards.
   ════════════════════════════════════════════════════════════════ */
.hr-wrap{ display:flex; flex-direction:column; gap:12px; padding-bottom:40px;
  animation:csw-rise .5s var(--ease-emph) both; }

/* topbar period toggle + icon buttons */
.hr-seg{ display:flex; gap:2px; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:3px; flex:none; }
.hr-seg button{ font-size:10.5px; font-family:var(--mono); border:none; cursor:pointer;
  background:transparent; color:var(--ink-mute); padding:4px 9px; border-radius:var(--r-pill); }
.hr-seg button.on{ color:var(--accent-text); background:var(--accent); }
.hr-iconbtn{ width:34px; height:34px; flex:none; border:1px solid var(--line);
  background:transparent; color:var(--ink-dim); border-radius:var(--r-pill);
  font-size:15px; cursor:pointer; margin-left:6px; }
.hr-iconbtn:active{ transform:scale(.92); }
#hr-flag-btn{ color:var(--warn); }

/* TIER 1 — company-pulse hero strip */
.hr-hero{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1px;
  background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r-squircle);
  overflow:hidden; }
.hr-kpi{ background:var(--bg-card); border:none; text-align:left; cursor:default;
  padding:12px 14px; display:flex; flex-direction:column; gap:3px; min-width:0; }
button.hr-kpi{ cursor:pointer; transition:background .15s; }
button.hr-kpi:hover{ background:var(--bg-elev); }
.hr-kpi__v{ font-family:var(--mono); font-size:22px; font-weight:600; line-height:1;
  white-space:nowrap; }
.hr-kpi__u{ font-size:12px; color:var(--ink-mute); font-weight:400; }
.hr-kpi__l{ font-size:10px; color:var(--ink-mute); text-transform:uppercase;
  letter-spacing:.06em; display:flex; align-items:center; gap:5px; }
.hr-kpi--alert .hr-kpi__v{ color:var(--danger); }
.hr-kpi--alert{ background:color-mix(in srgb, var(--danger) 9%, var(--bg-card)); }
.hr-dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-mute); flex:none; }
.hr-dot.live{ background:var(--ok); box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);
  animation:hr-pulse 2s infinite; }
@keyframes hr-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent)} 70%{box-shadow:0 0 0 6px transparent} }

/* columns: roster anchor (left) + signal/action stack (right) */
.hr-cols{ display:flex; flex-direction:column; gap:12px; }
.hr-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
@media(min-width:860px){
  .hr-cols{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    align-items:start; }
}

/* action cards float to the top + carry an accent rail; danger = retention/integrity */
.hr-card--action{ border-left:2px solid var(--warn); }
.hr-card--danger{ border-left:2px solid var(--danger); }
.hr-pill{ font-size:10px; font-family:var(--mono); padding:2px 8px; border-radius:var(--r-pill);
  font-weight:600; }
.hr-pill--warn{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); }
.hr-pill--ok{ background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); }
.hr-sub{ font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute);
  font-family:var(--mono); margin:10px 0 4px; }
.hr-note{ font-size:11px; color:var(--ink-dim); line-height:1.5; margin-top:8px; }
.hr-note--warn{ color:var(--warn); }
.hr-note code{ font-family:var(--mono); font-size:10.5px; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent); padding:1px 4px; border-radius:4px; }

/* leaderboard rows (enriched: presence, streak, points bar, chevron) */
.hr-board .csw-chips{ margin:8px 0 6px; }
.hr-rep{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 4px; border:none; border-bottom:1px solid var(--line-soft);
  background:transparent; cursor:pointer; border-radius:8px; transition:background .14s; }
.hr-rep:last-child{ border-bottom:none; }
.hr-rep:hover{ background:var(--bg-elev); }
.hr-rep:active{ transform:scale(.99); }
.hr-rep--top .hr-rep__name{ background:var(--gemini-grad-crux); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.hr-rep__rank{ font-family:var(--mono); font-size:11px; color:var(--ink-mute);
  width:18px; text-align:center; flex:none; }
.hr-rep__meta{ flex:1; min-width:0; }
.hr-rep__name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.hr-rep__role{ font-size:10px; color:var(--ink-mute); font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.03em; }
.hr-rep__bar{ height:3px; border-radius:2px; background:var(--line-soft); margin-top:5px;
  overflow:hidden; }
.hr-rep__bar i{ display:block; height:100%; background:var(--accent); border-radius:2px; }
.hr-rep--top .hr-rep__bar i{ background:var(--gemini-grad-crux); }
.hr-rep__pts{ text-align:right; flex:none; }
.hr-rep__pts b{ font-size:15px; font-family:var(--mono); }
.hr-rep__pts span{ display:block; font-size:9px; color:var(--ink-mute); }
.hr-rep__chev{ color:var(--ink-mute); font-size:18px; flex:none; opacity:.5; }

/* targets + pool bars */
.hr-target{ margin:10px 0; }
.hr-target__top{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; margin-bottom:4px; }
.hr-target__top span{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.csw-goalbar i.is-behind{ background:var(--danger); }
.hr-amber{ font-size:9px; padding:1px 6px; border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn);
  text-transform:uppercase; letter-spacing:.06em; }

/* pay-equity strip — median payout vs a shared fair band */
.hr-equity{ margin-top:6px; display:flex; flex-direction:column; gap:9px; }
.hr-equity__row{ display:flex; align-items:center; gap:8px; }
.hr-equity__name{ font-size:11px; width:88px; flex:none; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.hr-equity__track{ position:relative; flex:1; height:7px; border-radius:4px;
  background:var(--line-soft); overflow:visible; }
.hr-equity__track i{ display:block; height:100%; border-radius:4px; background:var(--ok); }
.hr-equity__track i.is-low{ background:var(--warn); }
.hr-equity__thr{ position:absolute; top:-2px; width:2px; height:11px; background:var(--ink-mute);
  opacity:.6; border-radius:1px; }
.hr-equity__v{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute);
  width:62px; text-align:right; flex:none; }

/* flags */
.hr-flag{ display:block; width:100%; text-align:left; padding:8px 2px; border:none;
  background:transparent; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.hr-flag:last-child{ border-bottom:none; }
.hr-flag__top{ display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-bottom:2px; }
.hr-flag__top b{ font-size:12.5px; }
.hr-flag__d{ font-size:11px; color:var(--ink-dim); line-height:1.4; }
.hr-flag__tag{ font-size:9px; padding:1px 7px; border-radius:var(--r-pill); flex:none;
  text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono); }
.hr-flag__tag--risk{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
.hr-flag__tag--review{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
.hr-flag__tag--watch{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); }

/* friction list + severity + reliability chips */
.hr-fric{ padding:8px 2px; border-bottom:1px solid var(--line-soft); }
.hr-fric:last-child{ border-bottom:none; }
.hr-fric__top{ display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.hr-fric__top b{ font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.hr-sev{ font-size:8.5px; font-family:var(--mono); padding:1px 6px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.05em; flex:none; }
.hr-sev--low{ background:color-mix(in srgb,var(--ink-mute) 18%,transparent); color:var(--ink-dim); }
.hr-sev--medium{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
.hr-sev--high{ background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn); }
.hr-sev--critical{ background:color-mix(in srgb,var(--danger) 20%,transparent); color:var(--danger); }
.hr-fric__act{ display:flex; gap:6px; margin-top:6px; }
.hr-mini{ font-size:10.5px; padding:4px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:transparent; color:var(--ink-dim); cursor:pointer; }
.hr-mini:active{ transform:scale(.95); }
.hr-reliab{ display:flex; flex-wrap:wrap; gap:6px; }
.hr-reliab__d{ font-size:10.5px; padding:3px 9px; border-radius:var(--r-pill);
  font-family:var(--mono); border:1px solid var(--line); }
.hr-reliab__d b{ font-weight:600; }
.hr-reliab--excellent{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,transparent); }
.hr-reliab--good{ color:var(--ink-dim); }
.hr-reliab--watch{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%,transparent); }
.hr-reliab--poor{ color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 8%,transparent); }

/* real empty states (guided, not dev-copy) */
.hr-empty{ text-align:center; padding:22px 12px; color:var(--ink-mute); font-size:12px;
  line-height:1.5; }
.hr-empty__i{ font-size:22px; margin-bottom:6px; opacity:.5; }

/* form sheets: labelled inputs, two-up rows */
.hr-lbl{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-mute); font-family:var(--mono); margin-bottom:8px; }
.hr-lbl input, .hr-lbl select{ margin-top:4px; }
.hr-row2{ display:flex; gap:8px; }
.hr-row2 .hr-lbl{ flex:1; min-width:0; }
select.csw-search{ appearance:none; }

/* accessibility: respect reduced motion (vision-doc backlog #7,
   completed 2026-06-13). Universal sweep — every csw animation/
   transition collapses to one instant frame and the living gradients
   (pulse loops; the csw-breathe loops were deleted outright, L6
   2026-08-30) freeze at their first stop. The named
   list below the sweep pins the infinite loops explicitly so a future
   selector miss can't resurrect them. */
@media (prefers-reduced-motion:reduce){
  .csw-product-original summary::before{ transition:none; }
  .csw-shell *, .csw-shell *::before, .csw-shell *::after,
  .csw-overlay *, .csw-overlay *::before, .csw-overlay *::after,
  .csw-toasts *, .csw-lightbox *,
  .csw-emojipop, .csw-emojipop *, .csw-reactbar, .csw-reactbar *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .csw-hero::before, .csw-shift__dot, .csw-levelchip, .csw-goalbar i,
  .csw-rep__bar i,
  .csw-typing__d, .csw-recbar__dot, .csw-send, .csw-confirm,
  .csw-row, .csw-row--new, .csw-card, .csw-shell, .csw-sheet, .csw-think, .csw-skel,
  .csw-msearch, .csw-vprev, .csw-bub.csw-flash, .csw-steps i{ animation:none !important; }
  .csw-script{ scroll-behavior:auto !important; }
  /* The search-jump flash still MARKS the found message — the flat ring
     is the ::after base rule now (L6, 2026-08-30); freezing its fade
     holds the ring for the full 2s the class is on. (This outranks the
     *::after sweep above on specificity, so order is irrelevant.) */
  .csw-bub.csw-flash::after{ animation:none !important; }
}

/* ── Audit polish pass (2026-06-08) ───────────────────────────── */
/* Pin the CS workspace to the dark token set regardless of app theme —
   light mode otherwise flips --accent to dark and breaks the lime bubble
   + gradient-button text. Covers body-level overlays + toasts too.
   Ops design pass 01 (2026-07-11): the pin now CONSUMES the shared
   --eon-* ink mode (app.css) instead of carrying its own drifted hexes,
   and pins SHAPE + TYPE too — the color-only pin let the flow skin's
   --r-pill:4px / display swaps silently reshape the dark chat. */
.csw-shell, .csw-overlay, .csw-toasts {
  color-scheme: dark;
  --bg:var(--eon-bg); --bg-elev:var(--eon-bg-1); --bg-card:var(--eon-bg-2); --bg-card-2:var(--eon-bg-3);
  --line:var(--eon-line); --line-soft:var(--eon-line-soft); --line-strong:var(--eon-line-strong);
  --ink:var(--eon-ink); --ink-dim:var(--eon-ink-dim); --ink-mute:var(--eon-ink-mute); --ink-faint:var(--eon-ink-faint);
  --accent:var(--eon-accent); --accent-text:var(--eon-on-accent);
  --danger:var(--eon-danger); --warn:var(--eon-warn); --ok:var(--eon-ok);
  --blue:var(--eon-blue);
  --bub-out:var(--eon-bub-out); --bub-out-ink:var(--eon-bub-out-ink);
  --ch-wa:var(--eon-ch-wa); --ch-ig:var(--eon-ch-ig);
  /* shape + type pin (design pass 02): ONE radius scale — 6/8/10, pill only
     for true pills — and the chat's five type sizes as tokens (the thirteen
     ad-hoc fractional sizes collapse onto these). Still frozen against theme
     skins (flow's --r-pill:4px etc. never reshape the pinned-dark chat). */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:10px; --r-pill:999px;
  --fs-micro:10.5px; --fs-small:12px; --fs-body:13.5px; --fs-lg:15px; --fs-disp:21px;
  --display:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --body:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* ARCHIVO ONLY (seat-B vet A13, 2026-09-26): the desk's small-label voice
     keeps its name but speaks Archivo, the house face. Figures that tick or
     stand in columns keep a fixed width through tabular numbers (the
     "Archivo only" block below), not through a second typeface. */
  --mono:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
/* Gradient discipline — routine actions are solid lime; reserve the Gemini
   gradient for AI / achievement / live activity (the file's own rule).
   (.csw-send/.csw-confirm carry the accent at their base rules now.) */
.csw-rep__bar { background:var(--accent); }
/* 44px tap-target floor (expand hit area; glyphs stay visually small).
   L6 (2026-08-30): +Route, in-thread search, and the six composer
   controls the census missed — measured live at 360x740: send 36,
   mic 36, plus 36, macro 32, notes 30, conv-back 38 (a phone media
   rule below used to lower it; that rule is gone). Glyph sizes are set
   separately on each control and stay small. */
.csw-back, .csw-burger, .csw-conv__back, .csw-conv__360btn, .csw-x,
.csw-routebtn, .csw-conv__searchbtn,
.csw-send, .csw-mic, .csw-plus, .csw-macro, .csw-notes__btn { min-width:44px; min-height:44px; }
.csw-filter, .csw-tool, .csw-mini { min-height:40px; }
.csw-activefilter__x { width:24px; height:24px; }
/* Visible keyboard focus for switch/keyboard users — every csw layer
   (shell, sheets, lightbox, emoji picker, quick-react bar). */
.csw-shell :focus-visible, .csw-overlay :focus-visible,
.csw-lightbox :focus-visible, .csw-emojipop :focus-visible,
.csw-reactbar :focus-visible {
  outline:2px solid color-mix(in srgb, var(--g-violet) 70%, transparent); outline-offset:2px;
}
/* Operator, 2026-08-07 (live phone test): "why is there a purple mark
   around the text area" — the blanket a11y outline above landed on the
   composer TEXTAREA too (iOS marks it :focus-visible on programmatic
   focus, e.g. after a Suggest fill), doubling the inputbox's own
   focus-within border with a mystery violet box. The textarea already
   signals focus through .csw-inputbox:focus-within; keyboard users
   keep the violet ring on every other control. */
.csw-shell .csw-input:focus-visible { outline:none; }

/* ── Virtual try-on (FASHN) ────────────────────────────────────── */
.csw-tryon__prod{ display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); }
.csw-tryon__prod img{ width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--bg-card-2); }
.csw-tryon__models{ display:flex; gap:8px; flex-wrap:wrap; }
.csw-modelpick{ flex:1; min-height:44px; font-size:13px; padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim); cursor:pointer; font-family:var(--body); }
.csw-modelpick.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--ink); }
.csw-modelpick.disabled{ opacity:.45; cursor:not-allowed; }
.csw-tryon__stage{ margin:14px 0; min-height:8px; display:flex; justify-content:center; }
.csw-tryon__load{ padding:40px 0; font-size:12.5px; }
.csw-tryon__out{ max-width:100%; max-height:60vh; border-radius:var(--r-lg); border:1px solid var(--line); }

/* ── Try-on studio ─────────────────────────────────────────────── */
.csw-studio__sec{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); margin:14px 0 8px; }
.csw-studio__person{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.csw-studio__person img{ width:48px; height:48px; border-radius:10px; object-fit:cover; }
.csw-studio__drop{ margin-top:10px; border:1.5px dashed var(--line-strong); border-radius:var(--r-md); padding:16px; text-align:center; font-size:11.5px; color:var(--ink-mute); transition:all var(--dur-3); }
.csw-studio__drop.over{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--ink); }
.csw-studio__garments{ display:flex; flex-direction:column; gap:8px; }
.csw-garment{ display:flex; align-items:center; gap:10px; }
.csw-garment img{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.csw-garment__cat{ flex:1; }
.csw-studio__add{ display:flex; gap:8px; margin-top:10px; }

/* Bonded reply-quote chip inside a bubble (WhatsApp/Telegram). */
.csw-quote{ display:flex; flex-direction:column; gap:1px; border-left:3px solid color-mix(in srgb,var(--accent) 70%, white 0%); background:rgba(255,255,255,.07); border-radius:6px; padding:4px 8px; margin:0 0 5px; max-width:100%; overflow:hidden; }
.csw-bub.in .csw-quote{ border-left-color:var(--g-violet); }
.csw-quote__who{ font-size:11px; font-weight:600; color:color-mix(in srgb,var(--ink) 80%, transparent); }
.csw-quote__t{ font-size:12px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Structured quote with a photo thumbnail (WA context / IG reply_to) —
   WhatsApp layout: text column left, quoted-photo thumb on the right. */
.csw-quote--media{ flex-direction:row; align-items:center; gap:8px; }
.csw-quote__col{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.csw-quote__img{ width:38px; height:38px; border-radius:6px; object-fit:cover; flex:none; }

/* Poll refreshes must not re-play an entrance on untouched bubbles — but
   the ONE row the reconciler just inserted for a new inbound message
   (.csw-row--new) is exactly the row that MAY animate: quiet polls arm
   no-anim, so without the :not() this guard would kill the only arrival
   cue on the desk (L4, 2026-08-30). */
.csw-script.no-anim .csw-row:not(.csw-row--new){ animation:none; }
.csw-pinch{ font-size:9px; vertical-align:middle; }

/* Draft row indicator + composer emoji picker */
.csw-draftlbl{ color:var(--danger); font-weight:600; }
.csw-emoji{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:none; background:transparent; font-size:17px; line-height:1; cursor:pointer; opacity:.85; }
/* Operator, 2026-08-07: "no need for the emoji sign in the text area —
   the keypad has one, and we rarely use emojis." Touch keyboards carry
   their own emoji key, so the composer's duplicate goes on coarse
   pointers; desktop keeps it (no keypad there). Button + binding stay
   in the DOM for both, so nothing else changes. */
@media (pointer:coarse){ .csw-emoji{ display:none; } }
.csw-emoji:hover{ opacity:1; }
.csw-emojipop{ position:absolute; left:8px; bottom:54px; z-index:30; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:8px; background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:0 10px 30px rgba(0,0,0,.5); max-width:300px; animation:csw-fade var(--dur-3) both; }
.csw-emojipop__e{ width:32px; height:32px; border:none; background:transparent; font-size:19px; cursor:pointer; border-radius:8px; }
.csw-emojipop__e:hover{ background:var(--bg-card-2); }

/* Numeric unread badge (WhatsApp count) */
.csw-unread--n{ width:auto; min-width:17px; height:17px; padding:0 5px; border-radius:8.5px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--accent-text); font-family:var(--mono); }

/* Reactions: native render + quick-react bar (long-press / right-click) */
.csw-bub.has-react{ margin-bottom:12px; }
.csw-reacts{ position:absolute; bottom:-11px; right:8px; display:flex; gap:2px; }
.csw-bub.in .csw-reacts{ right:auto; left:8px; }
.csw-react{ display:inline-flex; align-items:center; gap:2px; font-size:12px; line-height:1; padding:2px 5px; border-radius:11px; background:var(--bg-elev); border:1px solid var(--line-strong); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.csw-react b{ font-size:10px; color:var(--ink-dim); font-family:var(--mono); }
.csw-reactbar{ position:fixed; z-index:40; display:flex; gap:2px; padding:5px; background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,.5); animation:csw-pop var(--dur-3) var(--ease-spring); }
.csw-reactbar__e{ width:36px; height:36px; border:none; background:transparent; font-size:21px; cursor:pointer; border-radius:50%; transition:transform var(--dur-2) var(--ease-spring); }
.csw-reactbar__e:hover{ transform:scale(1.25); background:var(--bg-card-2); }

/* Presence: another rep viewing/typing the same thread (collision avoidance) */
.csw-typing{ color:var(--accent); font-weight:600; margin-right:8px; }
.csw-typing__d{ display:inline-block; animation:csw-dot-pulse 1.2s ease-in-out infinite; }
.csw-thread--coactive .csw-thread__name::after{ content:'●'; color:var(--g-violet); font-size:8px; margin-left:6px; vertical-align:middle; opacity:.9; }

/* Edited tag + deleted placeholder (WhatsApp parity) */
.csw-edited{ font-size:9.5px; color:var(--ink-mute); font-style:italic; margin-right:5px; }
.csw-bub--deleted{ opacity:.75; }
.csw-bub__deleted{ font-style:italic; color:var(--ink-dim); }

/* Multi-image album grid (WhatsApp) */
.csw-bub--album{ padding:3px; }
.csw-album{ display:grid; gap:2px; border-radius:5px; overflow:hidden; width:340px; max-width:78vw; }
.csw-album--1{ grid-template-columns:1fr; }
.csw-album--2{ grid-template-columns:1fr 1fr; }
.csw-album--3{ grid-template-columns:1fr 1fr; }
.csw-album--3 .csw-album__c:first-child{ grid-column:1 / -1; }
.csw-album--4{ grid-template-columns:1fr 1fr; }
.csw-album__c{ position:relative; border:none; padding:0; background:#0003; cursor:pointer; aspect-ratio:1/1; overflow:hidden; }
.csw-album__c img, .csw-album__c video{ width:100%; height:100%; object-fit:cover; display:block; }
.csw-album--1 .csw-album__c{ aspect-ratio:auto; max-height:420px; }
.csw-album--1 .csw-album__c img, .csw-album--1 .csw-album__c video{ height:auto; max-height:420px; }
.csw-album__more{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; font-size:20px; font-weight:700; font-family:var(--mono); }
/* video album tile — play badge overlaid on the poster (first frame) */
.csw-album__play{ position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); pointer-events:none; }
.csw-album__play::after{ content:''; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent #fff; }
/* caption rendered ONCE beneath the whole album (WhatsApp) */
.csw-album__cap{ padding:6px 4px 0; }
/* single video bubble — poster + centred play badge until it starts */
.csw-bub__vidwrap{ position:relative; display:inline-block; line-height:0; }
.csw-bub__vidplay{ position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); pointer-events:none; transition:opacity var(--dur-3); }
.csw-bub__vidplay::after{ content:''; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; }
.csw-bub__vidwrap.playing .csw-bub__vidplay{ opacity:0; }

/* ── Payment status chip + actions (Phase 3 commerce) ───────── */
.csw-pay{ margin:8px 0; padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:var(--bg-card-2); }
.csw-pay__row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.csw-pay__chip{ font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:8px; }
.csw-pay--wait{ color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); }
.csw-pay--ok{ color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); }
.csw-pay--paid{ color:var(--ok); background:color-mix(in srgb,var(--ok) 18%,transparent); }
.csw-pay--fail{ color:var(--danger); background:color-mix(in srgb,var(--danger) 14%,transparent); }
.csw-pay--none{ color:var(--ink-mute); background:rgba(255,255,255,.05); }
.csw-pay__amt{ font-size:12px; color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.csw-pay__acts{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.csw-pay__done{ font-size:11.5px; color:var(--ok); margin-top:6px; }
.csw-paymethods{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.csw-paymethod{ padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-family:inherit; font-size:13px; cursor:pointer; transition:all .15s; }
.csw-paymethod:hover{ border-color:var(--ok); color:var(--ok); }
.csw-paymethod:disabled{ opacity:.5; cursor:default; }

/* ── Abandoned-cart recovery view (Phase 4) ─────────────────── */
.csw-abx{ display:flex; flex-direction:column; gap:8px; padding:12px; }
.csw-abrate{ font-size:13px; color:var(--ink-mute); padding:4px 2px 8px; }
.csw-abrate b{ color:var(--ink); font-size:18px; }
.csw-abrate__sub{ font-size:11px; color:var(--ink-mute); margin-left:6px; }
.csw-ab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-card-2); }
.csw-ab__name{ font-size:13.5px; color:var(--ink); font-weight:600; }
.csw-ab__val{ color:var(--ok); font-weight:600; font-size:12.5px; margin-left:4px; }
.csw-ab__meta{ font-size:11px; color:var(--ink-mute); margin-top:2px; }
.csw-ab__right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.csw-ab__badge{ font-size:10px; font-weight:600; padding:3px 8px; border-radius:7px; white-space:nowrap; }
.csw-ab__badge.ok{ color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); }
.csw-ab__badge.due{ color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); }
.csw-ab__badge.sent{ color:var(--blue); background:color-mix(in srgb,var(--blue) 14%,transparent); }
.csw-ab__badge.mut{ color:var(--ink-mute); background:rgba(255,255,255,.05); }
.csw-ab__send.done{ color:var(--accent-text); background:var(--ok); border-color:var(--ok); }

/* ── Template-message card (Zoko button/rich templates) ── */
.csw-bub--tpl{ padding:0; overflow:hidden; }
.csw-tpl{ display:flex; flex-direction:column; }
.csw-tpl__hdr{ margin:0; line-height:0; }
.csw-tpl__himg{ display:block; width:100%; max-height:200px; object-fit:cover; border-radius:5px 5px 0 0; }
.csw-bub--tpl .csw-tpl__himg{ border-radius:0; }
.csw-tpl__htext{ font-size:12px; font-weight:700; color:var(--ink); padding:9px 11px 0; }
.csw-bub.out .csw-tpl__htext{ color:var(--bub-out-ink); }
.csw-tpl__body{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; padding:9px 11px; font-size:13.5px; line-height:1.4; }
.csw-tpl__footer{ font-size:10.5px; color:var(--ink-mute); padding:0 11px 8px; }
.csw-bub.out .csw-tpl__footer{ color:color-mix(in srgb,var(--bub-out-ink) 55%,transparent); }
.csw-tpl__btns{ display:flex; flex-wrap:wrap; gap:6px; padding:0 9px 9px; border-top:1px solid rgba(255,255,255,.07); padding-top:8px; }
.csw-tpl__btn{ font-size:12px; font-weight:600; color:color-mix(in srgb, var(--accent) 88%, #fff); background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:var(--r-pill,999px); padding:5px 12px; white-space:nowrap; }
.csw-bub.out .csw-tpl__btn{ color:var(--bub-out-ink); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
/* ── Template FAMILY cards (2026-07-27) — a receipt LOOKS like a receipt ──
   In-thread card for template sends: static family header art strip (from
   /static/wa_studio — NEVER carries order data), family label, receipt
   sends get a prominent total + order line parsed from the true copy,
   then the verbatim send-time body and the Wave-2 meta row. The art box
   reserves its aspect BEFORE the lazy image decodes — no layout shift. */
.csw-bub--tplcard{ padding:0; overflow:hidden; width:min(78%, 300px); }
.csw-tplcard__art{ aspect-ratio:2.6/1; overflow:hidden; background:#0003; }
.csw-tplcard__img{ display:block; width:100%; height:100%; object-fit:cover; }
.csw-tplcard__fam{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--bub-out-ink) 62%, transparent); padding:8px 11px 0; }
.csw-tplcard__facts{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:3px 11px 0; }
.csw-tplcard__total{ font-family:var(--mono); font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--bub-out-ink); }
.csw-tplcard__ord{ font-family:var(--mono); font-size:11px; color:color-mix(in srgb, var(--bub-out-ink) 68%, transparent); }
.csw-bub--tplcard .csw-bub__txt{ padding:7px 11px 0; font-size:13px; line-height:1.42; }
.csw-bub--tplcard .csw-bub__t{ padding:0 9px 5px; }

/* Compact variant inside an Outreach preview row. */
.csw-tpl--compact{ margin-top:8px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.csw-tpl--compact .csw-tpl__himg{ max-height:96px; border-radius:9px 9px 0 0; }
.csw-tpl--compact .csw-tpl__body{ padding:7px 9px; font-size:12px; color:var(--ink-mute); }
.csw-tpl--compact .csw-tpl__btns{ padding:0 7px 7px; padding-top:6px; }
.csw-tpl--compact .csw-tpl__btn{ font-size:11px; padding:3px 9px; }

/* ── Automated-message watch (2026-06-11) — drawer destination ─── */
/* Header row for the Automated view (it's a drawer destination since
   2026-06-18, no longer a top tab) — a back chevron returns to the inbox. */
.csw-autohead{ display:flex; align-items:center; gap:8px; grid-column:1 / -1; }
.csw-autohead__back{ width:32px; height:32px; border-radius:var(--r-pill); border:1px solid var(--line); background:transparent; color:var(--ink-dim); font-size:18px; line-height:1; cursor:pointer; flex:0 0 auto; }
.csw-autohead__back:active{ transform:scale(.92); background:var(--bg-card); }
.csw-autohead__t{ font-family:var(--display); font-size:16px; color:var(--ink); }
.csw-autox{ display:flex; flex-direction:column; gap:8px; }   /* .csw-pulse already pads */
/* desktop: .csw-pulse becomes a 2-col grid — keep both blocks full-width */
.csw-autox, .csw-abfold{ grid-column:1 / -1; }
.csw-auto{ cursor:pointer; transition:border-color var(--dur-3) var(--ease-emph), background var(--dur-3) var(--ease-emph); }
.csw-auto:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:rgba(255,255,255,.05); }
.csw-auto:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.csw-seg__badge{ margin-left:6px; font-family:var(--mono); font-size:10px; font-weight:600; padding:1px 6px; border-radius:var(--r-pill); color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent); }
.csw-seg button.on .csw-seg__badge{ color:inherit; background:rgba(0,0,0,.18); }
.csw-abfold{ border:1px solid var(--line); border-radius:12px; background:var(--bg-card-2); }
.csw-abfold>summary{ cursor:pointer; padding:11px 12px; font-size:12.5px; font-weight:600; color:var(--ink-mute); list-style:none; }
.csw-abfold>summary::-webkit-details-marker{ display:none; }
.csw-abfold>summary::before{ content:'›'; display:inline-block; margin-right:8px; transition:transform var(--dur-3) var(--ease-emph); }
.csw-abfold[open]>summary{ color:var(--ink); }
.csw-abfold[open]>summary::before{ transform:rotate(90deg); }
.csw-abfold .csw-abx{ padding:0 12px 12px; }

/* ── Pinned EON thread (CS-private line to the agent, v3.0p103) ──────
   A permanently-pinned pseudo-thread at the top of the inbox + its own
   chat pane. Distinct from customer threads (gemini accent, EON mark) so
   a rep never confuses the private agent line with a customer chat. */
.csw-thread--eon{ background:linear-gradient(90deg, color-mix(in srgb, var(--g-violet) 10%, transparent), transparent); border-bottom:1px solid color-mix(in srgb, var(--g-violet) 24%, var(--line-soft)); }
.csw-thread--eon::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--g-violet), var(--g-blue)); }
.csw-thread--eon.on{ background:linear-gradient(90deg, color-mix(in srgb, var(--g-violet) 18%, transparent), transparent); }
.csw-thread--eon .csw-thread__name{ color:var(--ink); font-weight:600; letter-spacing:.04em; }
.csw-eonav{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--g-violet) 30%, var(--bg-card-2)), var(--bg-card)); border:1px solid color-mix(in srgb, var(--g-violet) 32%, transparent); }
.csw-eonav--bar{ width:34px; height:34px; }
.csw-eonpin{ color:var(--g-violet); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }

/* EON aurora wash (design pass 02, anchor 3): the violet field behind the
   pinned row + EON conversation. The canvas idles as a faint CSS wash; the
   live shader (shared aurora.js) breathes ONLY while EON streams — still
   when idle. FLAT LAW everywhere else. */
.csw-eonwash{ position:absolute; inset:0; width:100%; height:100%; opacity:.16; pointer-events:none; z-index:0;
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--g-violet) 26%, transparent), transparent 70%); }
.csw-thread--eon{ overflow:hidden; }
/* Lift the row's CONTENT above the wash — but never the wash canvas
   itself: `> *` at equal specificity, later in the file, was overriding
   .csw-eonwash's position:absolute, so the canvas joined the flex row at
   its intrinsic 300×150 and blew the pinned row into a ~230px empty
   block (operator: "huge gap at the top", 2026-07-13). */
.csw-thread--eon > *:not(.csw-eonwash){ position:relative; z-index:1; }
.csw-conv > .csw-script, .csw-conv > .csw-composer{ position:relative; z-index:1; }

/* EON conversation pane */
.csw-conv__bar--eon{ background:linear-gradient(90deg, color-mix(in srgb, var(--g-violet) 8%, transparent), transparent); }
.csw-ch--eon{ color:var(--g-violet); }
.csw-script--eon{ background:radial-gradient(140% 90% at 50% 0%, color-mix(in srgb, var(--g-violet) 5%, transparent), transparent); }

/* 2026-06-18: the EON line reads like a normal DM. The agent reply uses the
   standard incoming bubble (no heavy violet background / badge) — just a small
   subtle inline "EON" label above the text. The captured-customer context
   banner (.csw-eonctx) was replaced by an inline composer-placeholder hint. */
.csw-bub__eonlbl{ font-size:10px; color:var(--ink-mute); font-family:var(--mono); letter-spacing:.06em; margin-bottom:2px; }
.csw-bub--stream{ opacity:.96; }
.csw-eoncaret{ display:inline-block; width:7px; height:14px; margin-left:2px; vertical-align:text-bottom; background:var(--g-violet); border-radius:1px; animation:cswEonBlink 1s steps(2) infinite; }
@keyframes cswEonBlink{ 50%{ opacity:0; } }

/* EON typing = the steps mark (design pass 02): three bars stepping — the
   grow verb, scaleX from left — violet + blue. Replaces anonymous dots on
   EON surfaces; the caret above stays for mid-stream text. */
.csw-steps{ display:inline-grid; width:22px; height:22px; padding:4.5px 4px; align-content:space-between; vertical-align:middle; }
.csw-steps i{ display:block; height:2.6px; border-radius:1.3px; background:var(--g-violet); width:100%; transform-origin:left center; animation:csw-steps 1.6s var(--ease-emph) infinite; }
.csw-steps i:nth-child(2){ background:var(--g-blue); width:72%; animation-delay:.22s; }
.csw-steps i:nth-child(3){ animation-delay:.44s; }
@keyframes csw-steps{ 0%{ transform:scaleX(.18); } 34%,72%{ transform:scaleX(1); } 100%{ transform:scaleX(.18); } }
.csw-steps__lbl{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--g-violet); margin-left:9px; }

/* In-pane permission (approve/deny) card — mirrors the main chat affordance */
.csw-eonperm{ align-self:flex-start; max-width:min(86%, 340px); margin:4px 0; padding:11px 13px; border-radius:14px;
  background:color-mix(in srgb, var(--g-violet) 10%, var(--bg-card-2)); border:1px solid color-mix(in srgb, var(--g-violet) 30%, transparent); }
.csw-eonperm__t{ font-size:13.5px; color:var(--ink); margin-bottom:9px; }
.csw-eonperm__btns{ display:flex; gap:8px; }
.csw-eonperm__b{ flex:1; padding:7px 0; border-radius:10px; font-size:13px; cursor:pointer; border:1px solid var(--line); background:var(--bg-card); color:var(--ink); transition:transform var(--dur-3) var(--ease-emph); }
.csw-eonperm__b:active{ transform:scale(.97); }
.csw-eonperm__b.approve{ background:var(--accent); color:var(--accent-text); border-color:transparent; }
.csw-eonperm__b.deny{ color:var(--ink-dim); }
.csw-eonperm__done{ font-size:12px; color:var(--ink-mute); font-family:var(--mono); }

/* ── Customer Simulator (v3.0p108) ──────────────────────────────────
   The pinned EON thread's second mode. AMBER (--warn) everywhere the
   ops line is violet so the operator can never mistake the sandbox for
   the real agent line. Toggle lives in the conv bar; the strip below it
   names the mode in plain words. */
.csw-eontabs{ margin-left:auto; display:flex; gap:2px; padding:2px; border-radius:var(--r-pill);
  background:var(--bg-card-2); border:1px solid var(--line-soft); flex:0 0 auto; }
.csw-eontab{ border:none; background:transparent; color:var(--ink-mute); font-size:11.5px; font-family:var(--mono);
  letter-spacing:.04em; padding:4px 10px; border-radius:var(--r-pill); cursor:pointer;
  transition:color var(--dur-3) var(--ease-emph), background var(--dur-3) var(--ease-emph); white-space:nowrap; }
.csw-eontab.on{ background:color-mix(in srgb, var(--g-violet) 22%, transparent); color:var(--ink); }
/* B2 rig vet: a third mode joined the strip — every tab clears the 44px
   floor, and under 540px the strip compacts instead of crushing the
   conversation name to an ellipsis. */
.csw-eontab{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:540px){
  .csw-eontabs{gap:2px}
  .csw-eontab{padding:4px 8px;font-size:10px;letter-spacing:0}
}
.csw-eontab--sim.on{ background:color-mix(in srgb, var(--warn) 24%, transparent); color:var(--warn); }
.csw-conv__bar--sim{ background:linear-gradient(90deg, color-mix(in srgb, var(--warn) 9%, transparent), transparent);
  border-bottom:1px solid color-mix(in srgb, var(--warn) 35%, var(--line-soft)); }
.csw-ch--sim{ color:var(--warn); }
.csw-simstrip{ padding:5px 14px; font-size:11px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.csw-simanchor{ display:flex; align-items:center; gap:8px; padding:7px 14px; font-size:12px; color:var(--ink-dim);
  border-bottom:1px solid var(--line-soft); position:relative; }
.csw-simanchor__lab{ flex:0 0 auto; font-family:var(--mono); color:var(--ink-mute); }
.csw-simanchor__box{ position:relative; flex:1; min-width:0; }
.csw-simanchor__q{ width:100%; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg-card);
  color:var(--ink); font-size:12.5px; padding:5px 11px; outline:none; }
.csw-simanchor__q:focus{ border-color:color-mix(in srgb, var(--warn) 50%, var(--line)); }
.csw-simanchor__list{ display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.35); }
.csw-simanchor__list.show{ display:block; }
.csw-simanchor__opt{ display:block; width:100%; text-align:left; border:none; background:transparent; color:var(--ink);
  font-size:13px; padding:8px 12px; cursor:pointer; }
.csw-simanchor__opt:hover{ background:color-mix(in srgb, var(--warn) 10%, transparent); }
.csw-simanchor__none{ padding:8px 12px; font-size:12px; color:var(--ink-mute); }
.csw-simanchor__chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--warn) 14%, transparent); border:1px solid color-mix(in srgb, var(--warn) 36%, transparent);
  color:var(--ink); font-size:12.5px; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-simanchor__x{ border:none; background:transparent; color:var(--ink-mute); cursor:pointer; font-size:12px; padding:1px 3px; }
.csw-simreset{ margin-left:auto; flex:0 0 auto; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim);
  font-size:11.5px; font-family:var(--mono); letter-spacing:.04em; padding:4px 11px; border-radius:var(--r-pill); cursor:pointer; }
.csw-simreset:hover{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); }
.csw-simovn{ flex:0 0 auto; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim);
  font-size:11.5px; font-family:var(--mono); letter-spacing:.04em; padding:4px 11px; border-radius:var(--r-pill); cursor:pointer; }
.csw-simovn.is-on{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 60%, var(--line));
  background:color-mix(in srgb, var(--warn) 10%, var(--bg-card)); }
.csw-script--sim{ background:radial-gradient(140% 90% at 50% 0%, color-mix(in srgb, var(--warn) 5%, transparent), transparent); }
.csw-inputbox--sim{ border-color:color-mix(in srgb, var(--warn) 35%, var(--line)); }
.csw-bub__simtag{ display:flex; align-items:center; gap:4px; font-size:10.5px; font-family:var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:3px; }
.csw-bub--simeon{ background:color-mix(in srgb, var(--warn) 12%, var(--bg-card-2));
  border:1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.csw-bub--simeon .csw-bub__simtag{ color:var(--warn); }
.csw-bub--simcust{ border:1px dashed color-mix(in srgb, var(--ink-mute) 40%, transparent); }

/* ── Unreplied / Awaiting-reply UX (2026-06-13) ──────────────────────
   Operator ask: "the ui for unread message be different from read
   messages, there should be a tab on top to show unread or unreplied
   messages." UNREPLIED = the customer spoke last (rep reply owed) —
   the actionable state. Treatment: accent left-edge bar + bright title;
   replied threads recede. SLA escalation: amber >=30m, red >=2h. */
/* A waiting customer reads as a BRIGHT title (weight + ink), not a per-row
   accent bar — research: in dark mode convey state with shade/weight, and keep
   colored accents scarce. The left bar is reserved for a RED SLA breach (>=2h)
   only: the single urgent cue on the whole list. */
.csw-thread.unreplied .csw-thread__name{ color:var(--ink); font-weight:650; }
.csw-thread.unreplied .csw-thread__prev{ color:var(--ink-dim); }
/* SLA rails (design pass 02): every waiting thread carries a 2px inset rail —
   amber past 30 minutes, red past 2 hours (the ONLY red on the list; the
   active thread's rail is lime, full height). Time color stays secondary. */
.csw-thread--w30::after, .csw-thread--w120::after{ content:''; position:absolute; left:0; top:18%; bottom:18%; width:2px; }
.csw-thread--w30::after{ background:var(--warn); }
.csw-thread--w120::after{ background:var(--danger); }
/* Read + replied threads dim so the waiting ones carry the eye. */
.csw-thread:not(.unreplied):not(.unread):not(.on):not(.csw-thread--eon){ opacity:.72; }
.csw-thread:not(.unreplied):not(.unread):not(.on):not(.csw-thread--eon):hover{ opacity:1; }

/* Minutes-waiting chip RETIRED (audit 2026-07-12): the SLA rails
   (.csw-thread--w30/--w120) replaced it in design pass 02 and no code
   emits .csw-waitchip — the rules were dead weight. */

/* Awaiting-reply tab: oldest-wait badge (worst-case SLA at a glance). */
.csw-filter__w{ font-family:var(--mono); font-size:9.5px; font-weight:700; line-height:1; padding:2px 6px; border-radius:var(--r-pill);
  color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.csw-filter__w--amber{ color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent); }
.csw-filter__w--red{ color:var(--danger); background:color-mix(in srgb, var(--danger) 18%, transparent); }

/* ── In-thread message search (WhatsApp parity, 2026-06-13) ────────── */
.csw-conv__searchbtn{ flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; min-width:44px; min-height:44px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim); cursor:pointer;
  transition:all var(--dur-3) var(--ease-emph); }
.csw-conv__searchbtn svg{ width:16px; height:16px; }
.csw-conv__searchbtn.on{ border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.csw-msearch{ border-bottom:1px solid var(--line-soft); background:var(--bg-elev);
  padding:8px 12px; animation:csw-rise var(--dur-3) var(--ease-emph-decel) both; }
.csw-msearch__row{ display:flex; gap:8px; align-items:center; }
.csw-msearch__q{ margin-bottom:0; padding:9px 14px; font-size:13px; }
.csw-msearch__x{ flex:0 0 auto; width:32px; height:32px; min-width:44px; min-height:44px;
  border:none; background:transparent; color:var(--ink-mute); cursor:pointer; font-size:14px;
  border-radius:var(--r-pill); }
.csw-msearch__x:hover{ color:var(--ink); }
.csw-msearch__res{ max-height:240px; overflow-y:auto; margin-top:8px; display:flex;
  flex-direction:column; gap:2px; }
.csw-msearch__hint{ font-size:12px; color:var(--ink-mute); padding:10px 4px; text-align:center; }
.csw-msearch__item{ display:flex; gap:8px; align-items:baseline; width:100%; text-align:left;
  border:none; background:transparent; color:var(--ink); cursor:pointer; padding:8px 10px;
  border-radius:var(--r-md); font-family:var(--body); transition:background var(--dur-3); }
.csw-msearch__item:hover{ background:var(--bg-card-2); }
.csw-msearch__who{ flex:0 0 auto; font-family:var(--mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-mute); }
.csw-msearch__snip{ flex:1; min-width:0; font-size:12.5px; color:var(--ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.csw-msearch__ts{ flex:0 0 auto; font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
/* Flash-highlight a bubble after a search jump. L6 (2026-08-30): the
   22px halo was the file's only blurred colour glow (flat law) and
   box-shadow can't composite — ~114 repaint frames. Now the flat 2px
   ring the reduced-motion path always got, on a pseudo-element so the
   fade is opacity-only (one composited property): held ~1.2s at full
   strength, faded over the tail. cswJumpToMsg drops the class at 2s. */
@keyframes csw-flashfade { 0%,63%{ opacity:1; } 100%{ opacity:0; } }
.csw-bub.csw-flash::after{ content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 2px var(--accent); pointer-events:none;
  animation:csw-flashfade 1.9s var(--ease-emph) both; }

/* ── Rep voice notes (push-to-talk, 2026-06-13) ────────────────────── */
.csw-mic{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; color:var(--ink-mute); display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-3) var(--ease-emph); touch-action:none; -webkit-user-select:none; user-select:none; }
.csw-mic svg{ width:19px; height:19px; }
.csw-mic:hover{ color:var(--ink-dim); }
.csw-mic.rec{ background:var(--danger); color:#fff; transform:scale(1.18); }
.csw-mic:disabled{ opacity:.35; cursor:not-allowed; }
@keyframes csw-rec-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.csw-inputbox.recording .csw-input, .csw-inputbox.recording .csw-plus{ visibility:hidden; }
.csw-recbar{ position:absolute; inset:0; display:flex; align-items:center; gap:9px; padding:0 16px;
  background:var(--bg-card); border-radius:var(--r-md); z-index:2; }
.csw-inputbox{ position:relative; }
.csw-recbar__dot{ width:10px; height:10px; border-radius:50%; background:var(--danger);
  animation:csw-rec-pulse 1.1s ease-in-out infinite; }
.csw-recbar__t{ font-family:var(--mono); font-size:13px; color:var(--ink); min-width:38px; }
.csw-recbar__hint{ font-size:11.5px; color:var(--ink-mute); }
.csw-vprev{ display:flex; align-items:center; gap:9px; padding:8px 12px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:18px; background:var(--bg-card);
  animation:csw-rise var(--dur-3) var(--ease-emph-decel) both; }
.csw-vprev__mid{ flex:1; min-width:0; display:flex; align-items:center; }
.csw-vprev__wave{ display:flex; align-items:center; gap:2px; height:22px; width:100%; }
.csw-vprev__wave i{ flex:1; min-width:2px; border-radius:2px; background:color-mix(in srgb, var(--ink) 38%, transparent); }
.csw-vprev.parked .csw-vprev__wave{ display:none; }
.csw-vprev__note{ font-size:11px; color:var(--warn); line-height:1.35; }
.csw-vprev__del{ flex:0 0 auto; width:32px; height:32px; min-width:44px; min-height:44px; border:none;
  background:transparent; color:var(--ink-mute); cursor:pointer; font-size:14px; border-radius:50%; }
.csw-vprev__del:hover{ color:var(--danger); }
.csw-vprev.sending{ opacity:.6; pointer-events:none; }

/* ── CS Lifecycle metrics (Pulse sub-section, 2026-06-15) ───────────
   Tile grid matching the .mk-ads3 decision-first dark design language:
   lime/mint/amber accent figures, mono labels, grey one-line actions. */
.csw-lc{ grid-column:1 / -1; }
.csw-lc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(max-width:480px){
  .csw-lc-grid{ grid-template-columns:1fr 1fr; }
}
.csw-lc-tile{
  background:var(--bg-card-2,rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.csw-lc-tile__fig{
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.csw-lc-tile__lbl{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-mute);
}
.csw-lc-tile__act{
  font-size:11px;
  color:var(--ink-dim);
  line-height:1.3;
  margin-top:2px;
}

/* ── CSAT scoreboard compact breakdown (per-store / per-rep) ── */
.csw-csat-bd{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.csw-csat-bd__h{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); margin-bottom:8px; }
.csw-csat-row{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; }
.csw-csat-row__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-dim); }
.csw-csat-row__n{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); }
.csw-csat-row__v{ font-family:var(--mono); font-size:13px; font-weight:700; min-width:30px; text-align:right; }

/* ── Customer tester: photo attach, tool-action chips, product cards ── */
.csw-simattach{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--ink-mute); cursor:pointer; border-radius:var(--r-pill);
  transition:color var(--dur-3) var(--ease-emph), background var(--dur-3) var(--ease-emph); }
.csw-simattach:hover{ color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.csw-simstaged{ display:flex; align-items:center; gap:8px; padding:6px 10px; }
.csw-simstaged__thumb{ width:40px; height:40px; object-fit:cover; border-radius:var(--r-squircle); border:1px solid var(--line); }
.csw-simstaged__x{ border:none; background:transparent; color:var(--ink-mute); cursor:pointer; font-size:13px; }
.csw-simstaged__up{ font-size:12px; color:var(--ink-mute); font-family:var(--mono); }
.csw-bub__simimg{ display:block; max-width:200px; width:100%; border-radius:var(--r-squircle); margin-bottom:6px; border:1px solid var(--line); }

.csw-simacts{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.csw-simchip{ font-family:var(--mono); font-size:10px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--r-pill); padding:3px 9px; }
.csw-simchip.bad{ color:var(--g-magenta, #e0567f); background:color-mix(in srgb, #e0567f 12%, transparent);
  border-color:color-mix(in srgb, #e0567f 32%, transparent); }

.csw-simcards{ display:flex; gap:8px; margin-top:8px; overflow-x:auto; padding-bottom:2px; }
.csw-simcard{ flex:0 0 118px; width:118px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-squircle); overflow:hidden; background:var(--bg-card);
  transition:border-color var(--dur-3) var(--ease-emph), transform var(--dur-3) var(--ease-emph); }
.csw-simcard:hover{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); transform:translateY(-2px); }
.csw-simcard__img{ width:100%; height:118px; object-fit:cover; display:block; background:var(--bg-card-2); }
.csw-simcard__img--none{ display:flex; }
.csw-simcard__t{ font-size:11px; line-height:1.25; padding:6px 8px 2px; color:var(--ink-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.csw-simcard__p{ font-family:var(--mono); font-size:11px; color:var(--ink); padding:0 8px 7px; }

.csw-simpay{ display:inline-block; margin-top:8px; text-decoration:none; font-family:var(--mono); font-size:12px;
  font-weight:700; letter-spacing:.02em; color:var(--accent-text); background:var(--accent);
  border-radius:var(--r-pill); padding:7px 16px; transition:filter var(--dur-3) var(--ease-emph); }
.csw-simpay:hover{ filter:brightness(1.08); }

/* ── EON go-live (autopilot) control in the tester ── */
.csw-golive{ display:flex; align-items:center; gap:10px; padding:8px 14px; flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft); }
.csw-golive__pill{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:6px; }
.csw-golive__pill.on{ color:var(--accent); }
.csw-golive__btn{ margin-left:auto; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:var(--accent); color:var(--accent-text); font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; cursor:pointer; padding:6px 14px; border-radius:var(--r-pill);
  transition:filter var(--dur-3) var(--ease-emph); }
.csw-golive__btn:hover{ filter:brightness(1.08); }
.csw-golive__btn.live{ background:transparent; color:var(--g-magenta, #e0567f);
  border-color:color-mix(in srgb, #e0567f 45%, transparent); }

/* ── Rep-only delivery-estimate chip (above the composer) ── */
.csw-reply-ctx .csw-delivery{ display:inline-block; font-size:12px; padding:5px 11px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--ink-dim);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.csw-delivery--ok{ cursor:pointer; color:var(--ink); }
.csw-delivery--ok:hover{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
.csw-delivery--load{ opacity:.7; }
.csw-delivery__x{ border:none; background:transparent; color:var(--ink-mute); cursor:pointer; font-size:12px; margin-left:6px; }

/* ── TEAM lens (staff↔staff @-mention threads, folded into the ONE shell) ──
   2026-06-18: Team is a lens in the CS workspace alongside Awaiting/All/Mine.
   Threads render as DM rows in the SAME conversation pane as customer threads,
   with the sender's staff name shown above inbound bubbles. Never any customer
   PII on a team thread. */
.csw-ch--team{ color:var(--g-violet); border:1px solid color-mix(in srgb, var(--g-violet) 40%, transparent); }
.csw-thread--team .csw-thread__name{ font-weight:600; }
.csw-bub__who{ font-size:10.5px; font-weight:700; color:var(--g-violet); margin-bottom:2px; letter-spacing:.02em; }
.csw-teamnew{ background:linear-gradient(90deg, color-mix(in srgb, var(--g-violet) 8%, transparent), transparent); }
.csw-teamnew__ic{ font-size:18px; font-weight:800; color:var(--g-violet); }
.csw-team-eonctx{ font-size:11.5px; color:var(--ink-mute); padding:6px 12px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:8px; }
.csw-team-usedraft{ border:1px solid color-mix(in srgb, var(--g-violet) 40%, transparent); background:transparent; color:var(--g-violet); border-radius:var(--r-pill); padding:2px 10px; font-size:11px; cursor:pointer; }
.csw-mention__dept{ background:color-mix(in srgb, var(--g-violet) 24%, var(--bg-card-2)); color:var(--g-violet); }

/* ── Product-match chip (auto product-ID on customer photos) ─────────────
   Rendered under inbound image bubbles from body.product_match. Quiet by
   design: one compact card per identified piece; candidate mode shows up to
   three tap-to-confirm rows. States are always visible — a rep can tell
   "no match" from "didn't run". */
.csw-pm{ margin:6px 0 2px; display:flex; flex-direction:column; gap:6px; max-width:340px; }
.csw-pm--quiet{ font-size:11.5px; color:var(--ink-mute); padding:2px 4px; }
.csw-pm__card{ display:flex; align-items:center; gap:9px; padding:7px 9px;
  background:var(--bg-card-2); border:1px solid var(--line);
  border-radius:11px; }
.csw-pm__thumb{ width:38px; height:46px; border-radius:7px; object-fit:cover; flex:none;
  background:var(--bg-card-2); }
.csw-pm__thumb--none{ display:inline-block; }
.csw-pm__meta{ min-width:0; flex:1; }
.csw-pm__title{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.csw-pm__sub{ font-size:11px; color:var(--ink-dim); display:flex; gap:7px; align-items:center; }
.csw-pm__ok{ color:var(--ok); }
.csw-pm__warn{ color:var(--warn); }
.csw-pm__pct{ opacity:.65; }
.csw-pm__acts{ display:flex; flex-direction:column; gap:4px; flex:none; }
.csw-pm__acts .csw-mini{ white-space:nowrap; }
.csw-pm__which{ font-size:11px; color:var(--ink-dim); margin-bottom:-2px; }

/* Styled-in-studio chip (spec 2026-07-14) — rep-facing look intelligence
   under the product chip: render thumb + companion pieces + live stock. */
.csw-st{ margin:6px 0 2px; display:flex; flex-direction:column; gap:6px; max-width:340px; }
.csw-row > .csw-st{ flex-basis:100%; }
.csw-st__h{ font-size:10.5px; letter-spacing:.04em; color:var(--accent);
  text-transform:uppercase; padding:0 2px; }
.csw-st__look{ display:flex; gap:9px; padding:8px 9px; align-items:flex-start;
  background:var(--bg-card-2); border:1px solid var(--line);
  border-radius:11px; }
.csw-st__render{ width:76px; height:96px; border-radius:8px; object-fit:cover;
  flex:none; cursor:zoom-in; background:var(--bg-card-2); }
.csw-st__body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.csw-st__note{ font-size:11px; color:var(--ink-dim); font-style:italic;
  line-height:1.35; }
.csw-st__piece{ display:flex; align-items:center; gap:7px; }
.csw-st__pthumb{ width:28px; height:34px; border-radius:6px; object-fit:cover;
  flex:none; background:var(--bg-card-2); }
.csw-st__pmeta{ min-width:0; flex:1; }
.csw-st__pt{ font-size:12px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.csw-st__ps{ font-size:10.5px; color:var(--ink-dim); }
.csw-st--sheet{ max-width:none; }
.csw-st--sheet .csw-st__render{ width:108px; height:136px; }
.csw-st__h--quiet{ color:var(--ink-dim); }
/* order-sheet styling hints (the cart door, PR2) */
.csw-ost{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.csw-ost__row{ text-align:left; font-size:12px; padding:8px 10px;
  border:1px solid var(--line); border-radius:9px; color:var(--accent);
  background:var(--bg-card-2); cursor:pointer; }
.csw-ost__row--quiet{ color:var(--ink-dim); }

/* ── mobile header compaction (operator 2026-07-20: "the header takes up
   space ... optimized for mobile"). One row, smaller chrome; applies to
   every conv bar variant (customer / team / eon). ── */
@media (max-width: 540px){
  .csw-conv__bar{ padding:6px 8px; gap:8px; }
  .csw-conv__name{ font-size:var(--fs-md); }
  .csw-conv__sub{ margin-top:1px; gap:5px; }
  /* L6 (2026-08-30): the 38px min-* override that lowered back below the
     44 floor on the very screens reps hold is GONE — the floor list
     governs. Costs no header height: the 360 key beside it is already
     44 (its min-* beat this query's 30px all along, same as below). */
  .csw-conv__360btn{ width:30px; height:30px; font-size:12px; }
  .csw-routebtn{ height:30px; padding:0 9px; font-size:10.5px; max-width:110px; }
  .csw-conv__searchbtn{ width:30px; height:30px; }
  .csw-conv__bar [class*="ava"], .csw-conv__bar [class*="pfp"]{
    width:34px; height:34px; min-width:34px; }
}

/* Touch devices: the enter-to-send hint is meaningless (no hardware keys)
   and cost a line of height between composer and keyboard. */
@media (hover: none) and (pointer: coarse){
  .csw-hint{ display:none; }
}


/* ── Live-connection dot + optimistic photo bubbles (2026-07-24) ── */
.csw-rtdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber, #d99a2b); vertical-align: middle; margin-right: 6px;
  transition: background .3s; }
.csw-rtdot--live { background: var(--lime, #b8e34d); }
.csw-bub--local { opacity: .96; }
.csw-bub--local .csw-lsend { color: var(--ink-mute); }
.csw-bub--local .csw-lok { color: var(--lime, #b8e34d); }
.csw-bub--local .csw-lfail { color: var(--danger, #e5484d); }
.csw-lact { display: flex; gap: 8px; margin-top: 8px; }
.csw-mini--ghost { background: none; border: 1px solid var(--line); color: var(--ink-dim); }


/* ══════════════════════════════════════════════════════════════════
   CS chat — experience layer (vet PR B, 2026-07-25)
   Thread-row truth glyphs · swipe reveal · connection banner ·
   load-earlier + unread divider · "/" quick replies · paste-drop.
   ════════════════════════════════════════════════════════════════ */

/* ── thread row: type glyph + own-side delivery ticks ── */
.csw-prevglyph{ opacity:.75; }
.csw-prevtick{ display:inline-block; vertical-align:-1px; width:15px; color:var(--ink-faint); }
.csw-prevtick svg{ width:15px; height:10px; display:block; }
.csw-prevtick--read{ color:var(--accent); }

/* ── swipe reveal (WhatsApp: the action reads before it commits) ── */
.csw-thread{ position:relative; }
.csw-swipelab{
  position:absolute; top:50%; transform:translateY(-50%); right:14px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ok); pointer-events:none; z-index:0;
}
.csw-swipelab--resolve{ right:auto; left:14px; color:var(--warn); }

/* ── connection banner ── */
/* Floating status pill, OVERLAY not flow (design vet 2026-07-26, SEV-5):
   as a normal-flow first child its 40–90s show/hide cycle shoved the whole
   shell — topbar, list, thread, composer — down and up ~30px each time.
   Status may never move the page. Centered via auto margins (not a
   transform — csw-rise animates transform and would cancel it). */
.csw-conn{
  position:absolute; top:calc(var(--safe-top, 0px) + 56px); left:0; right:0;
  margin:0 auto; width:max-content; max-width:88%;
  z-index:90; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:6px 16px; text-align:center; border-radius:var(--r-pill, 999px);
  font-size:11.5px; font-weight:650; letter-spacing:.01em;
  color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, var(--bg));
  border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  animation:csw-rise var(--dur-3) var(--ease-emph-decel);
}
.csw-conn--off{
  color:var(--danger); background:color-mix(in srgb, var(--danger) 16%, var(--bg));
  border-color:color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ── load earlier + unread divider ── */
.csw-loadold{
  display:block; margin:6px auto 12px; padding:7px 16px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg-card); color:var(--ink-dim);
  font-size:12px; font-weight:700; cursor:pointer;
  transition:all var(--dur-3) var(--ease-emph);
}
.csw-loadold:active{ transform:scale(.96); }
.csw-loadold:disabled{ opacity:.6; cursor:default; }
/* Operator, 2026-08-02: "i dont like the green line below customer
   profile — takes up visible chat space." The divider stays in the DOM
   as the jump-to-unread scroll anchor (app.js scrollIntoView + the
   pagination root counter both key on it), but paints nothing and
   costs zero height. Cache eviction: no SHELL_VERSION bump in this
   diff ON PURPOSE — five parallel-session bumps raced this PR out in
   one morning (p609..p616); the sibling sessions bump the shell every
   ~15 min today, and the next one ships this CSS. */
.csw-unreadline{
  height:0; margin:0; padding:0; overflow:hidden; visibility:hidden;
}

/* ── "/" quick-reply palette ── */
.csw-slashpop{
  position:absolute; left:8px; right:8px; bottom:calc(100% + 8px);
  background:var(--bg-card-2, var(--bg-card)); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; z-index:14;
  box-shadow:0 18px 44px rgba(0,0,0,.46);
  animation:csw-rise var(--dur-3) var(--ease-emph-decel);
}
.csw-slashpop__h{
  padding:8px 14px 5px; font-size:10px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.csw-slashpop__r{
  display:flex; gap:10px; align-items:baseline; width:100%;
  padding:9px 14px; background:none; border:0; text-align:left; cursor:pointer;
  min-height:40px;
}
.csw-slashpop__r.on, .csw-slashpop__r:hover{ background:var(--bg-card); }
.csw-slashpop__k{ flex:0 0 auto; font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--accent); }
.csw-slashpop__t{ font-size:12.5px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── paste / drag-drop ── */
.csw-dropping{ outline:2px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:-6px; }
.csw-pasteprev{
  display:block; width:100%; max-height:46vh; object-fit:contain;
  border-radius:12px; background:var(--bg-card);
}
.csw-pasteerr{ margin-top:8px; font-size:12.5px; color:var(--danger); text-align:center; }

/* ── global-search fall-through section ── */
.csw-gsec{ border-top:1px solid var(--line-soft); margin-top:6px; padding-bottom:10px; }
.csw-gsec__h{
  padding:12px 16px 6px; font-size:10px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.csw-gsrow{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  width:100%; padding:10px 16px; min-height:44px;
  background:none; border:0; text-align:left; cursor:pointer;
}
.csw-gsrow:active{ background:var(--bg-card); }
.csw-gsrow__n{ font-size:13.5px; font-weight:700; color:var(--ink); }
.csw-gsrow__s, .csw-gsrow__m{
  font-size:12px; color:var(--ink-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}


/* ══════════════════════════════════════════════════════════════════
   CS chat — polish pass (vet PR D, 2026-07-25)
   Sticky date chip · bubble action sheet · swipe-down viewer dismiss ·
   designed empty states · progressive media.
   ════════════════════════════════════════════════════════════════ */

/* ── sticky date chip (CV-04) ── */
.csw-stickyday{
  /* .csw-script is a flex COLUMN: float/left/translate do nothing useful there
     and fought the layout (2026-07-25 fix). align-self centres it, sticky pins
     it to the top of the scroller as history passes underneath. */
  position:sticky; top:6px; align-self:center; flex:0 0 auto;
  z-index:3; margin:0 0 2px; pointer-events:none;
  font-size:var(--fs-micro); font-family:var(--mono);
  color:var(--ink-mute); background:color-mix(in srgb, var(--bg-card) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line-soft); padding:3px 12px; border-radius:var(--r-pill);
  opacity:0; transition:opacity var(--dur-3) var(--ease-emph);
}
.csw-stickyday.on{ opacity:1; }

/* ── bubble action sheet (CV-11) ── */
.csw-bubacts__reacts{
  display:flex; gap:6px; justify-content:space-between;
  padding:4px 2px 12px; border-bottom:1px solid var(--line-soft); margin-bottom:6px;
}
.csw-bubact{
  display:block; width:100%; min-height:46px; padding:12px 4px;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  color:var(--ink); font-size:14.5px; font-family:var(--body); text-align:left; cursor:pointer;
}
.csw-bubact:last-of-type{ border-bottom:0; }
.csw-bubact:active{ background:var(--bg-card); }
.csw-bubacts__prev{
  margin-top:6px; padding-top:10px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-mute); line-height:1.5;
}

/* ── empty states (TL-09) ── */
.csw-empty__t{ font-size:15px; font-weight:750; color:var(--ink-dim); margin-bottom:4px; }
.csw-empty__s{ font-size:13px; color:var(--ink-mute); line-height:1.55; }
.csw-empty__b{
  margin-top:14px; min-height:40px; padding:9px 18px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg-card); color:var(--ink); font-family:var(--body);
  font-size:13px; font-weight:700; cursor:pointer;
}
.csw-empty__b:active{ transform:scale(.97); }

/* ── progressive media (ME-01) ────────────────────────────────────
   Images used to pop in at their natural size once decoded, so the
   transcript jumped under the rep's thumb on a slow connection. The
   reserved box + shimmer holds the space; .loaded fades the photo in. */
.csw-bub__img, .csw-album__c img{
  background:
    linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ink) 6%, transparent) 40%, transparent 60%)
    var(--bg-card-2, var(--bg-card));
  background-size:220% 100%;
  animation:csw-shimmer 1.4s linear infinite;
  opacity:.999;
  transition:opacity var(--dur-4) var(--ease-emph-decel);
}
.csw-bub__img.loaded, .csw-album__c img.loaded{
  background:none; animation:none;
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION — the file's LAST prefers-reduced-motion block, and
   the append point for every new lamp.

   TWO traps have killed this block outright. Both shipped CI-green.

   1 · SOURCE ORDER, AND WORSE. A @media block adds NO specificity.
   `.csw-stickyday{transition:none}` inside one and
   `.csw-stickyday{transition:opacity …}` outside it are a tie, and a
   tie is settled by source order — so when the CS-desk train moved
   this block UP, above ten of the rules it exists to switch off,
   every one of those overrides went dead. Three entries are worse
   than a tie: the desk's graduation meter, holds pip and rehearsal
   lamp are declared house-scoped further down, so an unscoped
   override here loses on SPECIFICITY from any position — moving the
   block would never have fixed them. Hence every motion declaration
   below carries !important. That is what makes this block
   position-proof: it wins from anywhere, at any specificity, so a
   future move cannot silently un-suppress motion again.

   2 · THE COMMENT THAT ATE THE BLOCK. A duplicated banner left its
   second body unclosed right here; the parser swallowed prose, query
   and all as one invalid rule and shipped ZERO of these declarations
   to the CSSOM. Nothing caught it — the pins read this block as TEXT
   by rindex, and the text was all present and correct. Related: never
   let the two-character comment terminator appear inside comment
   prose (write "foo-* / bar-*" with the space), because it closes the
   comment early and feeds the next rule to the parser as garbage.
   tests/test_css_comment_integrity.py now parses for both faults.

   Keep this block BELOW the CS rules it names and ABOVE the
   floor-three switchboard banner further down: every top-level rule
   past that banner must carry the house theme attribute, and most of
   the selectors here are plain CS rules. (Do not name that banner in
   prose anywhere above it — its section boundary is found by a raw
   string search, so quoting it drags the boundary onto this block.)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .csw-conn, .csw-slashpop{ animation:none !important; }
  .csw-loadold{ transition:none !important; }

  .csw-stickyday{ transition:none !important; }
  .csw-input{ transition:none !important; }
  .csw-scrollbtm{ transition:none !important; }
  .csw-bub__img, .csw-album__c img{ animation:none !important; transition:none !important; }
  .csw-empty__b:active{ transform:none !important; }
  /* house tear (floor three's one moving part) exits instantly */
  [data-theme="house"] .csw-thread.hs-tearing { animation: none !important; display: none; }
  /* the queue ticket's tear (the fold, WS-B2) obeys the same law */
  [data-theme="house"] .csw-hticket.hs-tearing { animation: none !important; display: none; }
  [data-theme="house"] .csw-hq__ring .f { transition: none !important; }
  /* the ball's pulse (bar dot + the row's EON pip, B1) stands down too */
  .csw-ballbar__dot, .csw-eonball i { animation: none !important; }
  .csw-gradmeter i{ transition:none !important; }
  /* the bar's holds pip and the rehearsal lamp stand down too — the
     clocks keep telling the truth in text */
  .csw-tbtab__dot, .csw-rehearse i { animation: none !important; }
  /* THE STAGE (2026-08-18): the sheet's rise and the caret's turn stand
     down; the held card's ring keeps counting in text */
  .csw-stage__sheet, .csw-stage__caret { animation: none !important; transition: none !important; }
  /* THE DESK, RE-DRESSED (2026-08-29): the ten faces' slots settle in
     with the rest of the conversation; under reduced motion they simply
     ARE there. Appended HERE, in the file's one reduced-motion block —
     a third block of my own would have been the exact fault this banner
     warns about (the pins rindex to the LAST block, so a new one steals
     the read and every line above it stops being checked). */
  .crd-file, .crd-quote, .crd-receipt, .crd-draft, .crd-stock,
  .crd-askstate, .crd-confirm { animation: none !important; transition: none !important; }
  /* L6 (2026-08-30): the order-placed confetti was the ONE animation
     that escaped both guards — its wrapper is appended to document.body,
     a child of none of the sweep roots above. display:none matters:
     animation:none alone parks sixteen coloured squares at the burst
     origin for the full second until JS removes the wrapper. */
  .csw-conf, .csw-conf i { animation: none !important; display: none; }
  /* The undo toast's drain hairline holds FULL — the .csw-toasts * sweep
     would complete its 6s drain on frame one and read as "window already
     gone" to exactly the rep who asked the phone to stop moving. The
     toast itself still leaves at 6s; the bar simply never lies. */
  .csw-toast__drain { animation: none !important; }
  #csw .csw-notifications-key { transition:none !important; }
  #csw .csw-notifications-key:active { transform:none !important; }
  [data-theme="house"] #csw .csw-hlens__k { transition:none !important; }
}




/* ══════════════════════════════════════════════════════════════════
   Crew group rooms (mig 501) — a department mention is ONE room, not N DMs.
   ════════════════════════════════════════════════════════════════ */

/* room row: a small group glyph beside the title, member count in the preview */
.csw-teamgrp{
  display:inline-flex; vertical-align:-2px; margin-left:6px;
  width:14px; height:14px; color:var(--ink-faint);
}
.csw-teamgrp svg{ width:14px; height:14px; }
.csw-thread--room .csw-teamgrp{ color:var(--accent); }
.csw-roomsub{
  color:var(--ink-faint); font-weight:700;
}
.csw-roomsub::after{ content:' ·'; }

/* per-sender name colour in a room — Telegram's convention, so a wall of
   messages reads as several distinct voices rather than one. Six stops, hashed
   stably off the sender id so a person keeps their colour. */
.csw-who--c1{ color:var(--g-blue); }
.csw-who--c2{ color:var(--ok); }
.csw-who--c3{ color:var(--warn); }
.csw-who--c4{ color:var(--g-violet); }
.csw-who--c5{ color:var(--g-magenta); }
.csw-who--c6{ color:var(--whale); }


/* ══════════════════════════════════════════════════════════════════
   CS truth pack (mig 503) — who-said-what + honest photo affordances.
   ════════════════════════════════════════════════════════════════ */

/* author chip in the bubble's time row: EON wears the whale treatment
   (the colour reserved for EON intelligence app-wide); a rep wears their
   name, muted. No author = no chip — never a guess. */
.csw-author{
  display:inline-block; margin-right:6px; padding:1px 7px;
  border-radius:var(--r-pill); font-size:9.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mute); background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.csw-author--eon{
  color:var(--whale);
  background:color-mix(in srgb, var(--whale) 14%, transparent);
}

/* window-closed: the photo tool reads as OFF before a file is picked */
.csw-tool--off{ opacity:.38; }

/* My-work empty state */
.csw-emptywork{
  padding:10px 2px 4px; font-size:12.5px; line-height:1.55;
  color:var(--ink-mute);
}


/* ══════════════════════════════════════════════════════════════════
   Wave-2 design pass (2026-07-26, operator: "it has to feel like an
   app") — placement + physics fixes from the design vet. Ordered by
   the vet's register: M2 meta, M4 overflow affordance + FAB, M5
   media reservation, M6 inbox legend, §05 intel chips, §06 header
   rail, §07 voice/video, §08 automated purpose chips.
   ════════════════════════════════════════════════════════════════ */

/* M2 — outbound meta goes IN-FLOW: author chip + time + ticks need
   ~120px, the inline spacer reserves 46 — the absolute meta painted
   across the last text line ("THELMA" over the words). Media/template
   bubbles already flow; outbound text bubbles join them. Inbound keeps
   the WhatsApp corner clock (46px fits a bare time). */
.csw-bub.out .csw-bub__t{
  position:static; display:flex; gap:5px; align-items:center;
  justify-content:flex-end; margin-top:3px;
}
.csw-bub.out .csw-bub__txt::after{ content:none; }

/* M4 — every horizontally scrollable rail shows its hand: right-edge
   fade instead of a chip cut mid-word. The trailing padding lets the
   last chip clear the fade when fully scrolled. */
/* R1 (2026-08-08): .csw-conv__sub left this list — the sub now holds a
   pinned tail (window dial + tier) that must never sit in the fade;
   its scrolling half (.csw-conv__scroll) carries its own copy of this
   mask in the cross-theme block below. */
.csw-macros, .csw-filters{
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,.12));
  mask-image:linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,.12));
  padding-right:34px;
}
/* M4, turned downward (seat-B vet A5, 2026-09-26): the close tray on a
   phone. With More open and the rep's own line showing, the tray can
   outgrow the space above the message box, which then scrolls. While more
   waits below, that space's bottom edge fades; scrolled to the end it is
   sharp again. A scroll timeline drives the fade and an idle one leaves it
   at 0. Browsers without scroll timelines keep a plain scroller. (It sits
   here, not in the phone block of the desk faces: that block is flat.) */
@property --csw-ctx-fade { syntax:'<length>'; inherits:false; initial-value:0px; }
@keyframes csw-ctx-more { from { --csw-ctx-fade:28px; } 96% { --csw-ctx-fade:28px; } to { --csw-ctx-fade:0px; } }
@media (max-width:879px) {
  @supports (animation-timeline: scroll()) {
    .csw-shell #csw-conv .csw-compose-context:has(> .csw-tray:not(.collapsed)) {
      -webkit-mask-image:linear-gradient(#000 calc(100% - var(--csw-ctx-fade, 0px)), rgba(0,0,0,.12));
      mask-image:linear-gradient(#000 calc(100% - var(--csw-ctx-fade, 0px)), rgba(0,0,0,.12));
      animation:csw-ctx-more linear both; animation-timeline:scroll(self);
    }
  }
}
/* M4 — the scroll-to-bottom button rides the composer's REAL height
   (macros strip, reply row, grown textarea) instead of a fixed 84px. */
/* …and above the band stack too (floor-3 verdict, 2026-09-26): on classic,
   light and flow the key ignored the bands and sat over a folded band's
   "Tap to read". House already added the bands; every skin does now. */
.csw-scrollbtm{ bottom:calc(var(--csw-comp-h, 84px) + var(--csw-bands-h, 0px) + 12px); }

/* M5 — reserve media space before decode: an unloaded chat image holds
   a consistent box so the transcript never grows under the thumb; the
   post-load bottom re-pin in JS covers the settle. */
.csw-bub__img:not(.loaded){ min-height:280px; }
.csw-bub__vidwrap{ position:relative; min-height:180px; }
.csw-bub__viddur{
  position:absolute; right:8px; bottom:10px; z-index:2;
  font-size:10px; font-family:var(--mono); color:#fff;
  background:rgba(0,0,0,.62); border-radius:7px; padding:2px 6px;
  pointer-events:none;
}

/* M6 — the seven-word legend that makes the rail colors self-
   explanatory forever. */
.csw-legend{
  display:flex; gap:12px; padding:2px 16px 6px; font-size:10.5px;
  color:var(--ink-mute); flex:0 0 auto;
}
.csw-legend i{
  display:inline-block; width:8px; height:8px; border-radius:2px;
  margin-right:4px; vertical-align:-1px;
}
.csw-recovery-link{
  display:block; width:calc(100% - 24px); margin:8px 12px; padding:9px 12px;
  border:1px dashed var(--line); border-radius:var(--r-md);
  background:transparent; color:var(--ink-mute); font-size:12px;
  font-family:var(--body); text-align:left; cursor:pointer;
}
.csw-recovery-link b{ color:var(--accent); font-weight:650; }
.csw-firstmsg{
  font-size:8.5px; letter-spacing:.05em; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:7px; padding:1px 5px; margin-left:5px; white-space:nowrap;
}

/* §05 — EON intelligence folds to a chip line; the full board lives in
   the sheet. Violet = the AI lane (matches .csw-tool--ai). */
.csw-intel{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.csw-intel__chip{
  border:1px solid color-mix(in srgb, var(--g-violet) 40%, transparent);
  background:color-mix(in srgb, var(--g-violet) 10%, transparent);
  color:#cdbcf0; border-radius:var(--r-pill); padding:3px 10px;
  font-size:11px; font-weight:600; font-family:var(--body); cursor:pointer;
}
.csw-intel__chip--quiet{
  border-color:var(--line-soft); background:transparent; color:var(--ink-mute);
}
.csw-intel-sheet .csw-pm{ margin-top:8px; }

/* §06 — the conv header rail: ONE line, uniform chips, fade on
   overflow (was a five-row badge pile — vet M8). R1 (2026-08-08): the
   scroller moved INTO .csw-conv__scroll so the action chips (window
   dial + tier) can pin outside it — see the cross-theme block below;
   the sub itself stays a plain one-line flex. */
.csw-conv__sub{
  display:flex; flex-wrap:nowrap; align-items:center; gap:6px;
}
.csw-conv__sub > *{ flex:0 0 auto; }

/* §07 — voice: one calm row. Smaller play, transcribe shrinks to a
   ✦ chip at the row's end. */
.csw-voice__play{ width:30px; height:30px; }
/* L6 (2026-08-30): play is the one key that gates ANSWERING a voice note
   at all, and a miss on the 30px circle hits the role=slider seek bar
   and scrubs the note. The .csw-bub__copy idiom: a 44px hit box around
   the byte-identical 30px circle — touch only, the calm row survives. */
@media (hover:none){
  .csw-voice__play{ position:relative; }
  .csw-voice__play::after{ content:''; position:absolute; inset:-7px; border-radius:50%; }
}
.csw-transcribe{
  padding:3px 9px; font-size:11px; border-radius:var(--r-pill);
}

/* §08 — automated purpose chips + family health rollup. */
.csw-tplfam{ display:flex; gap:6px; padding:8px 2px; overflow-x:auto; scrollbar-width:none; }
.csw-tplfam::-webkit-scrollbar{ display:none; }
.csw-tplfam__c{
  border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim);
  border-radius:var(--r-pill); padding:5px 12px; font-size:12px; font-weight:600;
  font-family:var(--body); cursor:pointer; white-space:nowrap; flex:0 0 auto;
}
.csw-tplfam__c.on{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--ink); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.csw-tplfam__h{
  display:flex; gap:10px; align-items:baseline; padding:10px 2px 4px;
  font-size:12px; color:var(--ink-dim); font-weight:650;
}
.csw-tplfam__h .ok{ color:var(--ok); font-weight:600; font-size:11px; }
.csw-tplfam__h .bad{ color:var(--danger); font-weight:600; font-size:11px; }


/* ── Styling Desk (wave D, 2026-07-27 — propose-only) ─────────────────
   The violet chip marks a buyer with a rep-sendable stylist offer; the
   sheet shows the EXACT rendered template + the curated looks. */
.csw-styloffer{ flex:none; display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:9px; font-size:10px; font-weight:600; letter-spacing:.02em; color:#e6d9ff; background:rgba(139,92,246,.16); border:1px solid rgba(139,92,246,.45); cursor:pointer; }
.csw-styloffer:hover{ background:rgba(139,92,246,.28); }
.csw-styl-ov{ position:fixed; inset:0; z-index:240; display:grid; place-items:center; background:rgba(0,0,0,.55); }
.csw-styl-sheet{ width:min(440px, 92vw); background:var(--panel,#14161a); border:1px solid rgba(139,92,246,.4); border-radius:14px; padding:16px; display:grid; gap:10px; }
.csw-styl-h{ font-weight:700; font-size:13.5px; }
.csw-styl-body{ font-size:13px; line-height:1.45; padding:10px 12px; border-radius:10px; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2); }
.csw-styl-looks{ display:flex; gap:8px; }
.csw-styl-looks img{ width:96px; aspect-ratio:4/5; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.08); }
.csw-styl-note{ font-size:11px; opacity:.65; line-height:1.4; }
.csw-styl-actions{ display:flex; gap:8px; justify-content:flex-end; }
.csw-styl-send{ background:rgba(139,92,246,.3); border-color:rgba(139,92,246,.6); }

/* ── Message pins strip (mig 538, 2026-07-27) ─────────────────────── */
.csw-pins { display: flex; gap: 6px; overflow-x: auto; padding: 7px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(56,208,124,.06);
  scrollbar-width: none; }
.csw-pins::-webkit-scrollbar { display: none; }
.csw-pin-chip { display: inline-flex; align-items: center; gap: 7px; flex: none;
  max-width: 260px; padding: 4px 8px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid rgba(0,0,0,.1); font-size: 11.5px; }
.csw-pin-chip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csw-pin-chip__x { border: 0; background: none; cursor: pointer; font-size: 11px;
  opacity: .55; padding: 0 2px; }
.csw-pin-chip__x:hover { opacity: 1; }
/* L6 (2026-08-30): the raw green hex literal folded onto the token — the two jump
   mechanisms (search flash above, pin jump here) now mark in ONE green. */
.csw-row--flash .csw-bub { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Priority tab (mig 545) — the shift worklist that drains ───────── */
.csw-prio-head { font: 600 11px/1 var(--mono, 'Archivo', sans-serif); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute); padding: 10px 14px 6px; }
.csw-prio { border-bottom: 1px solid var(--line); padding: 10px 14px; cursor: pointer; }
.csw-prio:hover { background: var(--bg-hover, rgba(255,255,255,.03)); }
.csw-prio--claimed { opacity: .78; }
.csw-prio__row { display: flex; align-items: center; gap: 8px; }
.csw-prio__i { flex: 0 0 auto; width: 18px; text-align: center; color: var(--warn); }
.csw-prio__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.csw-prio__claim { margin-left: auto; font-size: 11px; color: var(--accent); }
.csw-prio__why { font-size: 12.5px; color: var(--ink-mute); margin: 4px 0 8px 26px; }
.csw-prio__acts { display: flex; gap: 8px; margin-left: 26px; }
.csw-prio__btn { border: 1px solid var(--line); background: none; color: var(--ink);
  border-radius: 5px; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.csw-prio__btn:hover { border-color: var(--accent); color: var(--accent); }
.csw-prio__btn--done { border-color: var(--accent); color: var(--accent); }

/* ── Wave E (2026-07-29): never-unanswered chips ─────────────────────── */
.csw-reopench{ flex:none; padding:1px 7px; border-radius:9px; font-size:10px; font-weight:600; color:#ffd9c2; background:rgba(255,122,60,.14); border:1px solid rgba(255,122,60,.4); }
.csw-fupchip{ flex:none; display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:9px; font-size:10px; font-weight:600; color:#ffe9b8; background:rgba(255,190,60,.14); border:1px solid rgba(255,190,60,.45); cursor:pointer; }
.csw-fupchip:hover{ background:rgba(255,190,60,.26); }
/* Promise-keeper (2026-08-03): "waiting on feedback · 47m" on a thread
   whose last outbound promised a follow-up nobody has sent yet. Amber
   while waiting; the danger tint once the promise is overdue (2h). */
.csw-promisechip{ flex:none; display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:9px; font-size:10px; font-weight:600; color:#ffe9b8; background:rgba(255,190,60,.14); border:1px solid rgba(255,190,60,.45); }
.csw-promisechip--late{ color:#ffc9c9; background:rgba(255,80,80,.16); border-color:rgba(255,80,80,.5); }

/* ── FAQ auto-answers (mig 568, 2026-07-31): oversight chip + banner ── */
.csw-faqchip{ flex:none; display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:9px; font-size:10px; font-weight:600; color:#d4f7c6; background:rgba(120,220,90,.12); border:1px solid rgba(120,220,90,.4); }
.csw-faqbanner{ display:flex; align-items:center; justify-content:center; gap:10px; font:500 10.5px/1.3 var(--mono); color:var(--ink-mute); background:transparent; padding:6px 12px 8px; }
.csw-faqbanner[hidden]{ display:none; }
.csw-faqbanner__dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--csw-eon-turn); margin-right:6px; vertical-align:middle; }
.csw-faqbanner__t{ flex:0 1 auto; min-width:0; }
.csw-faqbanner__btn{ flex:none; border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); background:none; color:var(--accent); border-radius:9px; font-size:11px; font-weight:600; padding:4px 10px; cursor:pointer; }
.csw-faqbanner__btn:hover{ background:color-mix(in srgb,var(--accent) 14%,transparent); }
.csw-faqbanner__x{ flex:none; border:none; background:none; color:var(--ink-mute); font-size:13px; cursor:pointer; padding:2px 6px; }
.csw-faqbanner__x:hover{ color:var(--ink); }

/* ── Held replies (2026-08-03) ───────────────────────────────────────
   WhatsApp will not let a SENT message be edited, so EON's written
   replies wait in the thread first. A held draft has to read as
   not-yet-sent at a glance: it keeps the outbound bubble's shape and
   colour (it IS the message that is about to go), but wears the dashed
   edge and the reduced opacity .csw-bub.pending already established for
   "in flight", plus the whale accent that marks EON everywhere else. */
.csw-bub--held{
  opacity:.78;
  border:1px dashed color-mix(in srgb, var(--whale) 65%, transparent);
  background:color-mix(in srgb, var(--whale) 12%, var(--bub-out));
  max-width:min(84%, 330px);
}
.csw-row--held-due .csw-bub--held{ opacity:.55; border-style:solid; }
/* a rep has tapped Send now / Discard and the call is in flight */
.csw-row--held-busy .csw-bub--held{ opacity:.5; }
/* Meta row: author chip, the edited tag, then the live countdown. In-flow
   (never the absolute corner clock) — the actions sit under it. */
.csw-held__meta{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:5px; font-size:var(--fs-micro); font-family:var(--mono);
  color:color-mix(in srgb, var(--bub-out-ink) 68%, transparent);
}
.csw-held__count{ color:var(--whale); font-weight:600; letter-spacing:.02em; }
.csw-row--held-due .csw-held__count{ color:var(--warn); }
/* Edit · Send now · Discard — one tap each, no confirms. */
.csw-held__acts{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:7px; padding-top:7px;
  border-top:1px solid color-mix(in srgb, var(--bub-out-ink) 16%, transparent);
}
.csw-held__btn{
  flex:none; border:1px solid color-mix(in srgb, var(--bub-out-ink) 28%, transparent);
  background:transparent; color:var(--bub-out-ink);
  border-radius:var(--r-pill); font-family:var(--body); font-size:11.5px;
  font-weight:600; padding:4px 11px; cursor:pointer;
  transition:background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.csw-held__btn:hover{ background:color-mix(in srgb, var(--bub-out-ink) 12%, transparent); }
.csw-held__btn:disabled{ opacity:.45; cursor:default; }
.csw-held__btn--go{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.csw-held__btn--go:hover{ background:color-mix(in srgb, var(--accent) 16%, transparent); }
.csw-held__btn--drop{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.csw-held__btn--drop:hover{ background:color-mix(in srgb, var(--danger) 14%, transparent); }
/* Reply hold sheet — the owner/admin choice list. */
.csw-holdopt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; margin-bottom:6px; padding:12px 13px;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:transparent; color:var(--ink-dim);
  font-family:var(--body); font-size:14px; text-align:left; cursor:pointer;
}
.csw-holdopt:hover{ background:var(--bg-card); }
.csw-holdopt.on{
  color:var(--ink); border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.csw-holdopt:disabled{ opacity:.5; cursor:default; }
.csw-holdopt__now{
  flex:none; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent);
}

/* B4 one-customer rail (2026-07-27) — the same human's other threads,
   named and one tap away. Sits under the conversation bar; hidden
   entirely when the customer has only this one thread. */
.csw-also{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px 12px; border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--bg-card) 70%, transparent); }
.csw-also__l{ font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mute); }
.csw-also__chip{ padding:2px 9px; border-radius:var(--r-pill); font-size:11px;
  color:var(--ink-dim); background:transparent; border:1px solid var(--line);
  cursor:pointer; }
.csw-also__chip:hover{ color:var(--ink); border-color:var(--accent); }
/* Name-source change: the old name stays visible for 24h so a rep who
   knew the thread by it isn't silently disoriented. */
.csw-waschip{ font-size:10px; font-weight:500; color:var(--ink-mute); }

/* C3 curated-first (2026-07-27) — a look the studio already shot sends in
   one tap, wherever it renders. */
.csw-sendlook{ margin-top:6px; }
.csw-tryon__curated{ margin:10px 0 4px; }
/* A mined link is offered, not asserted — quieter than a confirmed one. */
.csw-also__chip--soft{ border-style:dashed; color:var(--ink-mute); }

/* ── 2026-08-09 — a hidden strip must not paint (operator: "the green
   line in the chat … remove it so it only shows when needed"). Four
   conversation strips (also / pins / faqbanner / macros) set
   display:flex on their class — and an AUTHOR display beats the UA
   [hidden]{display:none} rule, so every one of them painted its
   padding, background and border as an EMPTY BAND on every thread
   (measured live: 13px + 15px + 15px + the 360's border hairline
   stacked under the header — the lime-tinted faqbanner is the "green
   line"). The attribute wins again, for every strip in the pane, now
   and future. Cross-theme, so it lives ABOVE the HOUSE marker. */
.csw-conv [hidden] { display: none !important; }

/* ── 2026-08-08 — the labels stop blocking the words (operator report,
   the (34) CS Workspace print: "the labels are blocking the
   awaiting-reply, etc"). Three mechanisms, one law: a floating label
   never sits on words or controls a rep is trying to read or tap.

   1) The Ask-EON door yields an open conversation. The door is an
      owner/manager surface (PIN sessions never mount it, eon_ask.js
      bows out without eon_jwt) and its fixed pill — z-index 2147483000,
      measured 111×40 at bottom-right — sat exactly on the composer's
      send button in the one-pane desk and on the conversation pane's
      bottom-right in the two-pane desk. A tap aimed at SEND opened the
      Ask sheet instead. While a thread is open the CS room already has
      EON built in (the pinned EON row, ✦ Suggest); the global door
      hides and returns the moment he steps back to the rail.

      Deliberately UNSCOPED by viewport (vet 2026-08-08 proposed moving
      this into the ≤879px block because desktop has no back button, so
      has-active never clears and the pill stays gone all session).
      Rejected: the measurement above covered the TWO-PANE desk — at
      rest the pill sits on the open conversation's composer, so
      re-showing it on desktop re-seats it on SEND, the exact operator
      report. On desktop the rail never leaves the screen, so the
      pinned EON row / queue-head key IS the door; the pill returning
      is a phone concern, and phones have the back button.

      2026-09-28 (two-hands round 1, A1-3): only the RESTING door hides.
      Hiding the whole host also hid the open panel, so Ask could not be
      used about the customer on screen at all. The conversation menu
      carries "Ask EON about this customer" (app.js #csw-menu-ask, shown
      only where Ask can answer). Ask marks its host [data-ask-open]
      while its panel is open and, opened from that menu line, while the
      panel folds back into it, so the panel shows over the desk; it marks
      it only once the desk has said its reply area waits (eon_ask.js, on
      eon-ask-covered from app.js), so no other desk ever shows the panel
      over a live SEND. The resting pill never returns over SEND. */
:root:has(.csw-inbox.has-active) #eon-ask-root:not([data-ask-open]) { display: none; }
/* The open panel remains available; its separate launcher and bot controls
   never cover the waiting reply box or its Close Ask words. */
:root:has(.csw-inbox.has-active) #eon-ask-root::part(pill),
:root:has(.csw-inbox.has-active) #eon-ask-root::part(companion-controls) { visibility: hidden; pointer-events: none; }

/* Floor-3 waiting words when the panel leaves no room for a placeholder.
   The panel ends 18px above the viewport; this 16px caption fits beneath it.
   The inactive keyboard shortcut hint gives way, with no composer reflow. */
.csw-composer[data-ask-narrow] > .csw-hint { visibility:hidden; }
.csw-composer[data-ask-narrow]::after {
  content:"Close Ask to reply"; position:absolute; bottom:0; left:14px;
  font:12px/16px var(--body); color:var(--ink-mute); white-space:nowrap; pointer-events:none;
}

/* 2) The rail keeps a landing strip. With the door mounted, the queue's
      tail could never scroll clear of the resting pill: every one of
      the 35 tickets' claim buttons and reason lines crossed the pill's
      band (measured 2026-08-08, 606px pane), and the LAST rows were
      permanently under it. 92px of tail room lets the final ticket
      clear the pill's 40px + inset. Reps (no #eon-ask-root in their
      DOM) keep today's spacing byte-identical. */
:root:has(#eon-ask-root) .csw-threads { padding-bottom: 92px; }

/* 3) Status chips live on their OWN line under the preview. Inline on
      the preview's flex line they ate the words — "SLÍMÈ": 247px of
      chips vs 221px of preview at a 606px pane, live-measured. The
      preview keeps its full line (unread count only); chips wrap
      beneath and never truncate the customer's last words again. */
.csw-thread__chips { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 6px; margin-top: 4px; min-width: 0; }

/* ── 2026-08-08 — the desk refined (R1/R4/R5, cross-theme) ─────────
   R1: the conversation header splits — the two chips a rep ACTS on
   (24h window dial + tier standing) pin to the row's end, always
   visible; the informational chips (channel, mask, source, alt name)
   keep the one-line fade scroller. A rep never hunts for "can I even
   send free text here". */
.csw-conv__sub { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden; }
.csw-conv__scroll {
  display: flex; align-items: center; gap: 6px; flex: 1 1 auto;
  min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,.12));
  mask-image: linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,.12));
  padding-right: 34px;
}
.csw-conv__scroll::-webkit-scrollbar { display: none; }
.csw-conv__scroll > * { flex: 0 0 auto; }
.csw-conv__pin { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.csw-conv__pin > * { flex: 0 0 auto; }
/* Vet 2026-08-08 (measured at 375px): the 34px fade floor starved the
   scroll half to zero and the pin escaped the header. The sub clips
   (overflow:hidden above); on phones the fade yields its floor, and the
   dial rides FIRST in the pin so any clip eats decoration (tier), never
   the action chip. */
@media (max-width: 540px) {
  .csw-conv__scroll { padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}
/* The intent chip joined a centered flex row — its old block-flow nudge
   now misaligns it (vet 1a). */
.csw-conv__scroll .csw-intentchip { margin-top: 0; }

/* R4: the book-level neglect line — the shared fact said once, not
   stamped on every relic card. */
.csw-hnote {
  margin: 0 0 10px; padding: 8px 12px; border: 1px dashed var(--warn);
  border-radius: var(--r-md); color: var(--warn);
  font-size: var(--fs-small); background: color-mix(in srgb, var(--warn) 7%, transparent);
}

/* R5: a dead composer must still hand the tap to its wrapper so the
   closed-window banner (and its Pick up button) can print on reach —
   disabled controls swallow events on some engines. */
.csw-input:disabled { pointer-events: none; }
.csw-inputbox .csw-mic:disabled, .csw-inputbox .csw-send:disabled { pointer-events: none; }

/* ── the ball + THE STAGE (EON-takes-the-chat B1 → Stage 2026-08-18, both skins) ──
   Functional safety lives above the house marker on purpose: classic is
   the fallback skin and must show who holds the thread too. The Stage
   (artifact ebede26e) is ONE in-flow slot above the composer where every
   EON proposal shows its face — a thumb stack, a name, a mono line with
   an age, at most two 44px verbs, a caret that opens IN PLACE. Nothing
   here is fixed; the composer keeps the bottom edge. */
:root{--csw-crux-yellow:#F5C400;--csw-crux-ink:#0A0A08}   /* the brand pair: yellow on warm black — ink on a CRUX key in EVERY skin (light's --accent-text is lime) */
/* EON's turn — ONE named colour (vet 2026-09-24, fault 33). The lavender
   was written by hand 14 times below (the Take over key, the "EON is
   answering" line, the ring, the dots). House law allows one accent, EON
   green, unless the operator agrees a page colour: this keeps today's value
   while he decides, so the ruling is a one-line change here. */
:root{--csw-eon-turn:#b8a4ff}
.csw-ballbar{display:flex;align-items:center;gap:10px;padding:6px 4px 8px;font-size:12px;color:var(--ink-dim)}
.csw-ballbar[hidden]{display:none}
.csw-ballbar__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--csw-eon-turn);margin-right:6px;animation:cswBallPulse 1.6s ease-in-out infinite}
@keyframes cswBallPulse{0%,100%{opacity:1}50%{opacity:.25}}
.csw-ballbar__w{flex:1;min-width:0}
.csw-ballbar__w b{color:var(--csw-eon-turn)}
.csw-ballbar__note{opacity:.7}
.csw-takeover{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:9px;background:var(--csw-eon-turn);color:var(--csw-crux-ink);font-weight:800;font-size:13px;cursor:pointer}
/* YOU ARE ANSWERING THIS CHAT (2026-09-26). The rep's own hold, drawn only
   when the server offers a way to give the chat back to EON. EON is not
   answering here, so nothing wears EON's colour: plain ink, and one quiet
   outlined key (the accent stays on the act of selling). */
.csw-ballbar--mine .csw-ballbar__w b{color:var(--ink)}
.csw-handback{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:9px;background:transparent;color:var(--ink);font:600 13px var(--body);cursor:pointer}
.csw-handback:disabled{opacity:.6;cursor:progress}
/* the ball is the composer's own state: violet edge, quiet placeholder */
.csw-composer--eon .csw-inputbox{border-color:var(--csw-eon-turn);box-shadow:0 0 0 1px color-mix(in srgb,var(--csw-eon-turn) 35%,transparent)}
.csw-composer--eon .csw-input::placeholder{color:var(--csw-eon-turn);opacity:.85}
/* the slot */
.csw-lookoffer{position:relative;border-top:1px solid var(--line);background:var(--bg-card);font-size:12.5px}
.csw-lookoffer[hidden]{display:none}
.csw-lookoffer[data-state="open"]{background:var(--bg-elev,var(--bg-card))}
.csw-stage__peek{position:absolute;left:12px;right:12px;top:-6px;height:6px;border-radius:6px 6px 0 0;background:var(--bg-card-2,var(--bg-card));border:1px solid var(--line);border-bottom:0;pointer-events:none;display:none}
.csw-lookoffer.has-queue .csw-stage__peek{display:block}
.csw-stage__row{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:64px}
.csw-stage__media{position:relative;flex:none;width:58px;height:48px;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.csw-stack{position:relative;display:block;width:58px;height:48px}
.csw-stack img,.csw-stack__lead--none{position:absolute;object-fit:cover;border-radius:6px;border:1.5px solid var(--bg-card);box-shadow:0 2px 6px rgba(0,0,0,.35);background:var(--bg-card-2,var(--bg-card))}
.csw-stack__lead{width:38px;height:48px;left:0;top:0;z-index:3}
.csw-stack__lead--none{width:38px;height:48px;left:0;top:0;z-index:3;display:block}
.csw-stack__p1{width:24px;height:30px;left:26px;top:2px;z-index:2;transform:rotate(6deg)}
.csw-stack__p2{width:24px;height:30px;left:34px;top:14px;z-index:1;transform:rotate(12deg)}
.csw-stack__more{position:absolute;right:-4px;bottom:-4px;z-index:4;font:700 9px/1 var(--mono);background:var(--ink);color:var(--bg);border-radius:999px;padding:3px 5px}
.csw-ring{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--csw-eon-turn) 0 var(--pct,0%),var(--line) var(--pct,0%) 100%);font:700 12px/1 var(--mono);color:var(--ink)}
.csw-ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg-card)}
.csw-ring span{position:relative;z-index:1}
.csw-stage__txt{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.csw-stage__h{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csw-stage__from{width:6px;height:6px;border-radius:50%;background:var(--csw-eon-turn);flex:none;display:inline-block}
.csw-stage__occ{color:var(--ink-dim);font-weight:500}
.csw-stage__caret{width:14px;height:14px;stroke:var(--ink-mute);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .25s}
.csw-lookoffer[data-state="open"] .csw-stage__caret{transform:rotate(180deg)}
.csw-stage__s{margin-top:3px;font:500 11px/1.3 var(--mono);color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.csw-stage__age.old{color:var(--warn)}
.csw-stage__more{color:var(--csw-eon-turn);font-weight:700}
.csw-stage__acts{display:flex;gap:6px;flex:none;align-items:center}
.csw-looksend{min-height:44px;padding:0 11px;border:1px solid var(--csw-crux-yellow);border-radius:9px;background:var(--csw-crux-yellow);color:var(--csw-crux-ink);font-weight:800;font-size:12.5px;cursor:pointer;white-space:nowrap}
.csw-lookskip{min-height:44px;padding:0 10px;border:1px solid var(--line-strong);border-radius:9px;background:transparent;color:var(--ink-dim);font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap}
.csw-stage__done{display:flex;align-items:center;gap:8px;min-height:64px;padding:12px;font-weight:600;font-size:12.5px;color:var(--ok)}
.csw-stage__done.muted{color:var(--ink-mute)}
.csw-stage__done svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* the sheet — grows in the slot, never over the transcript. L1
   (2026-08-30): "in the slot" is now enforced, not asserted — unfolded
   it measured ~590px against a ~578px column (the #2755 shape at the
   pane level: the transcript went to zero and the composer clipped).
   Capped on the shell's own scale and scrolls inside itself; the
   .csw-stage__peek pseudo lives on .csw-lookoffer, so it survives. */
.csw-stage__sheet{padding:0 12px 12px;border-top:1px solid var(--line-soft);
  max-height:calc(var(--app-height, 100dvh) * .46);
  overflow-y:auto;overscroll-behavior:contain}
.csw-stage__sheet[hidden]{display:none}
.csw-stage__why{display:flex;gap:8px;align-items:flex-start;padding:10px 0 8px;font:500 11px/1.4 var(--mono);color:var(--ink-mute)}
.csw-stage__why b{color:var(--ink-dim);font-weight:600}
.csw-stage__why .warn{color:var(--warn);flex:none}
.csw-stage__why .dot{width:6px;height:6px;border-radius:50%;background:var(--csw-eon-turn);flex:none;margin-top:4px}
.csw-stage__plate{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:stretch}
.csw-stage__big{display:block;width:120px;height:150px;object-fit:cover;border-radius:8px;cursor:zoom-in;background:var(--bg-card-2,var(--bg-card))}
.csw-stage__big--none{cursor:default}
.csw-stage__pieces{display:flex;flex-direction:column;gap:6px;min-width:0}
.csw-piece{display:flex;gap:8px;align-items:center;padding:4px 6px 4px 4px;border:1px solid var(--line-soft);border-radius:8px;background:var(--bg-card);cursor:pointer;text-align:left;color:inherit;font:inherit;min-height:44px}
.csw-piece img{width:34px;height:42px;object-fit:cover;border-radius:5px;flex:none;background:#fff}
.csw-piece__m{flex:1;min-width:0;display:block}
.csw-piece__t{display:block;font:600 12px/1.2 var(--body,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csw-piece__p{display:block;font:500 10.5px/1.3 var(--mono);color:var(--ink-mute);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csw-piece__stk{color:var(--ok)}
.csw-piece__stk::before{content:" · "}
.csw-piece__stk.no{color:var(--warn)}
.csw-piece__tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;flex:none}
.csw-piece__tick svg{width:11px;height:11px;stroke:var(--csw-crux-ink);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.csw-piece[aria-pressed="true"] .csw-piece__tick{background:var(--csw-crux-yellow);border-color:var(--csw-crux-yellow)}
.csw-piece[aria-pressed="true"] .csw-piece__tick svg{opacity:1}
.csw-piece[aria-pressed="false"]{opacity:.5}
.csw-piece[aria-pressed="false"] .csw-piece__t{text-decoration:line-through}
.csw-stage__alts{margin-top:10px}
.csw-stage__altl{display:block;font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
.csw-stage__altrail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.csw-stage__altrail::-webkit-scrollbar{display:none}
.csw-stage__alt{flex:none;width:64px;background:none;border:1px solid var(--line-soft);border-radius:8px;padding:3px;cursor:pointer;color:var(--ink-dim);font:500 10px/1.2 var(--mono);display:grid;gap:3px;justify-items:center;min-height:44px}
.csw-stage__alt img{width:56px;height:70px;object-fit:cover;border-radius:5px;display:block}
.csw-stage__alt.busy{opacity:.5}
.csw-stage__alt:hover{border-color:var(--csw-crux-yellow)}
.csw-stage__preview{margin-top:10px;border:1px dashed var(--line-strong);border-radius:10px;padding:8px 10px}
.csw-stage__ph{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;margin-bottom:6px;font:600 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.csw-stage__msg{white-space:pre-line;font-size:12.5px;line-height:1.4;color:var(--ink-dim)}
.csw-stage__msg b{color:var(--ink);font-weight:800}
.csw-stage__record{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font:500 10.5px/1.3 var(--mono);color:var(--ink-mute)}
.csw-stage__record b{color:var(--ink-dim);font-weight:600}
.csw-stage__sheetacts{display:flex;gap:8px;margin-top:12px}
.csw-stage__sheetacts .csw-looksend{flex:1}
@media (max-width:420px){.csw-stage__row{padding:10px 8px;gap:8px}.csw-looksend{padding:0 9px;font-size:12px}.csw-lookskip{padding:0 8px;font-size:12px}.csw-stage__media,.csw-stack{width:54px}.csw-stage__h{font-size:13px}.csw-stage__s{font-size:10.5px}}
.csw-eonball{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--csw-eon-turn);color:var(--csw-eon-turn);font:600 10px var(--mono, 'Archivo', sans-serif);padding:2px 7px;border-radius:3px}
.csw-eonball i{width:6px;height:6px;border-radius:50%;background:var(--csw-eon-turn);animation:cswBallPulse 1.6s ease-in-out infinite}
.csw-repball{display:inline-flex;border:1px solid var(--line-strong);color:var(--ink-dim);font:600 10px var(--mono, 'Archivo', sans-serif);padding:2px 7px;border-radius:3px}
/* NOTE: the ball dot + EON pip's reduced-motion stand-down lives in the
   file's main reduced-motion block ABOVE — a second such media query down
   here would steal the "last media query" slot that
   test_cs_polish_pass.test_reduced_motion_covers_the_new_surfaces reads
   via rindex. Never re-open that query here (and never spell it out in a
   comment below it either — the pin reads raw text, comments included). */

/* The tab bar's kill-switch lives OUTSIDE the house section on purpose:
   unscoped, so a bar left in the DOM by a runtime theme flip dies on
   every theme (rig vet). The house media block below the banner is the
   only thing that ever shows it. */
.csw-tabbar{display:none}

/* ══ Desk-rescue draft panel (mig 686) ═══════════════════════════
   A reply the rescue sweep drafted while the chat sat past the SLA,
   surfaced above the composer for one-tap review + send. Quiet card,
   accent left edge — an offer of help, never an alarm. */
.csw-rescue{ flex:0 0 auto; margin:8px 12px 0; padding:10px 12px;
  border:1px solid var(--line-soft); border-left:3px solid var(--accent);
  border-radius:var(--r-squircle);
  background:color-mix(in srgb, var(--accent) 6%, var(--bg));
  animation:csw-rise var(--dur-m) var(--ease-emph-decel); }
.csw-rescue__head{ font-size:11px; letter-spacing:.02em; color:var(--ink);
  opacity:.72; margin-bottom:6px; }
.csw-rescue__text{ font-size:13.5px; line-height:1.45; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; max-height:150px;
  overflow-y:auto; }
.csw-rescue__row{ display:flex; gap:8px; margin-top:9px; }
.csw-rescue__btn{ min-height:44px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line-soft); background:transparent;
  color:var(--ink); font-family:var(--body); font-size:12.5px;
  font-weight:600; cursor:pointer; }
.csw-rescue__btn--send{ background:var(--accent);
  color:var(--bg); border-color:transparent; }
.csw-rescue__btn--ghost{ opacity:.62; }
.csw-rescue__btn:disabled{ opacity:.45; cursor:default; }
.csw-rescue__fold{ display:none; }   /* only the folded band while typing shows it (phone block) */

/* The fleet you can see and push (Lane U, 2026-08-20) — Desk room roster
   of the desks online now with the shell each runs, and the owner's
   one-tap push key. Cross-skin: tokens only, no theme scoping. */
.csw-fleet{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft); }
.csw-fleet__eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-mute); font-family:var(--mono); margin-bottom:6px; }
.csw-fleet__row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:28px; font-size:13px; color:var(--ink); }
.csw-fleet__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-fleet__v{ flex:0 0 auto; font-family:var(--mono); font-size:12px; color:var(--ink-mute); }
.csw-fleet__old{ color:var(--warn); }
.csw-fleet__old .csw-fleet__v{ color:var(--warn); }
.csw-fleet__none{ color:var(--ink-mute); font-size:12.5px; }
.csw-fleet__push{ display:block; width:100%; min-height:44px; margin-top:10px; padding:0 16px;
  border-radius:var(--r-pill); border:1px solid transparent; background:var(--accent);
  color:var(--accent-text); font-family:var(--body); font-size:13px; font-weight:600; cursor:pointer; }
.csw-fleet__push:disabled{ opacity:.45; cursor:default; }

/* Lane P (2026-08-21): the response clock — quiet mono lines under the
   book's neglect note. Cross-skin on purpose: the classic board's head
   and the house rail both carry it. Tokens only; no keys, so no tap
   floor to keep. The late tint fires when a rep's median first reply
   passes 30 minutes (the desk's own stall idiom). */
.csw-clock { margin: 0 0 10px; padding: 0 14px; color: var(--ink-mute);
  font-family: var(--mono, 'Archivo', sans-serif); font-size: 11px; line-height: 1.65;
  letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.csw-clock__row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csw-clock__late { color: var(--warn); }

/* Lane C: the landing's looks-waiting note — the hnote family with the
   Stage's accent edge, so 'staged, never sent' reads as a door. */
.csw-hnote--looks{ border-left:2px solid var(--accent); padding-left:9px; }

/* CS desk Lane A (2026-08-21) — three quiet additions, cross-skin,
   tokens only, placed ABOVE the house floor-3 marker on purpose (the
   design-verdict gate guards that section; these are not in it).
   1. the priority card's "waiting Nh" chip — warm at the hour, late at
      four (the desk floor's two clocks);
   2. the Desk room's "money waiting · N" line beside the roster
      (owner only) — lit when money sits unconfirmed;
   3. the thread header's customer line under the name. */
.csw-prio__wait { flex: 0 0 auto; margin-left: 4px; padding: 1px 7px; border-radius: 9px;
  font-family: var(--mono, 'Archivo', sans-serif); font-size: 10px; font-weight: 600;
  color: var(--ink-mute); border: 1px solid var(--line); white-space: nowrap; }
.csw-prio__wait--warm { color: var(--warn); border-color: var(--warn); }
.csw-prio__wait--late { color: var(--danger); border-color: var(--danger); }
.csw-fleet__money { margin-top: 8px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .02em; color: var(--ink-mute); }
.csw-fleet__money--live { color: var(--warn); }
.csw-conv__cust { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-mute);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* LANE B (2026-08-21): "Hold it at Palms" — the chat→counter bridge
   (mig 692). The hold sheet (size + store + ONE act), the Stage card's
   code, and the Desk room's holds line. Cross-skin on purpose and placed
   ABOVE the HOUSE floor-3 marker: nothing here is scoped, so the
   switchboard's design-verdict section is untouched. Tokens only
   (--eon-*, theme-independent by design in app.css); keys carry the
   44px floor the house sheets already hold. */
.csw-holdsheet{ display:flex; flex-direction:column; gap:9px; }
.csw-holdpiece{ display:flex; align-items:center; gap:10px; padding:2px 0 4px; }
.csw-holdpiece__img{ width:44px; height:54px; border-radius:8px; object-fit:cover; flex:none;
  background:var(--eon-bg-2); }
.csw-holdpiece__t{ font-size:14px; font-weight:650; color:var(--eon-ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-holdlab{ font-family:var(--mono, 'Archivo', sans-serif); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--eon-ink-mute); margin-top:4px; }
.csw-holdpick{ display:flex; flex-wrap:wrap; gap:7px; }
.csw-holdchip{ min-height:44px; padding:7px 13px; border-radius:11px; border:1px solid var(--eon-line-soft);
  background:none; color:var(--eon-ink-dim); font-family:var(--body); font-size:12.5px; font-weight:650;
  cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; }
.csw-holdchip i{ font-style:normal; font-size:10.5px; font-weight:500; color:var(--eon-ink-mute);
  font-variant-numeric:tabular-nums; }
.csw-holdchip.on{ border-color:var(--eon-accent); color:var(--eon-ink);
  background:color-mix(in srgb, var(--eon-accent) 12%, transparent); }
.csw-holderr{ font-size:12px; line-height:1.45; color:var(--eon-danger);
  border:1px solid color-mix(in srgb, var(--eon-danger) 45%, transparent); border-radius:9px; padding:8px 10px; }
.csw-holderr[hidden]{ display:none; }
/* THE one act on the sheet */
.csw-holdact{ min-height:44px; width:100%; border:none; border-radius:12px; background:var(--eon-accent);
  color:var(--eon-on-accent); font-family:var(--body); font-size:13.5px; font-weight:800; letter-spacing:.01em;
  cursor:pointer; margin-top:4px; }
.csw-holdact:disabled{ background:var(--eon-bg-3); color:var(--eon-ink-faint); cursor:default; }
.csw-holdnote{ font-size:11px; line-height:1.5; color:var(--eon-ink-mute); }
/* the product chip's Hold key — quiet, sits with the other minis */
.csw-mini--hold{ border-color:color-mix(in srgb, var(--eon-accent) 45%, transparent); }
/* the Stage card's media slot wears the code, not a picture */
.csw-holdcode{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%;
  min-width:44px; min-height:44px; padding:0 6px; border-radius:10px; border:1px solid var(--eon-line-soft);
  background:var(--eon-bg-2); color:var(--eon-ink); font-family:var(--mono, 'Archivo', sans-serif); font-size:11.5px;
  font-weight:700; letter-spacing:.08em; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* the Desk room line */
.csw-holdroom__n{ font-family:var(--mono, 'Archivo', sans-serif); font-size:12px; letter-spacing:.02em; color:var(--eon-ink);
  font-variant-numeric:tabular-nums; margin:2px 0 8px; }
.csw-holdroom__row{ display:flex; align-items:baseline; gap:10px; padding:7px 0; border-top:1px solid var(--eon-line-soft);
  font-size:12.5px; color:var(--eon-ink-dim); }
.csw-holdroom__row > span:first-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-holdroom__row b{ color:var(--eon-ink); font-variant-numeric:tabular-nums; }
.csw-holdroom__b{ font-size:11px; color:var(--eon-ink-mute); font-variant-numeric:tabular-nums; }
.csw-holdroom__empty{ font-size:12px; color:var(--eon-ink-mute); padding:4px 0 6px; }

/* ==========================================================
   THE DESK, RE-DRESSED (2026-08-29) — the ten faces
   ----------------------------------------------------------
   Operator: "proceed with all" on the approved artifact. Ten
   faces the rep already had the DATA for and no surface to
   read it on: the customer file at the thread top, the close
   dock, the quote clock, draft receipts, the receipt card,
   stock chips, the relay's in-thread state, the buyer card's
   why, the whale row, and the voice-note chip.

   PLACEMENT LAW: every rule below is UNSCOPED and sits ABOVE
   the HOUSE floor-3 marker, so the switchboard's registered
   design-verdict section is byte-untouched by this pass
   (tests/test_desk_redressed_2026_08_29.py pins that no
   crd-* token appears after the marker).

   TAP FLOOR: every control this pass introduces carries 44px.
   The desk's shared `.csw-filter, .csw-tool, .csw-mini` rule
   stops at 40px for fourteen keys at once and raising it would
   reshape the whole composer — so the new keys carry their own
   floor and nothing that already shipped moves.

   GRACEFUL ABSENCE: every face renders NOTHING when its field
   is missing. `[hidden]` is honoured on each slot; empty chrome
   is the failure mode this pass exists to avoid.
   ========================================================== */

.crd-file[hidden], .crd-quote[hidden], .crd-receipt[hidden],
.crd-askstate[hidden], .crd-stock[hidden], .crd-draft[hidden] { display:none; }

/* ── 01 · THE CUSTOMER FILE (thread top) ────────────────── */
.crd-file{ flex:0 0 auto; padding:7px 12px 8px; border-bottom:1px solid var(--line);
  background:var(--bg-card); }
.crd-file__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.crd-chip{ display:inline-flex; align-items:baseline; gap:5px; padding:3px 9px;
  border-radius:var(--r-pill); border:1px solid var(--line); background:none;
  font-size:11.5px; line-height:1.5; color:var(--ink-dim); white-space:nowrap; }
.crd-chip b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.crd-chip__l{ font-family:var(--mono, 'Archivo', sans-serif); font-size:9px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-mute); }
/* the repeat-incident band — the one red thing at the top of a thread */
.crd-file__band{ display:flex; align-items:center; gap:8px; margin-top:7px; padding:7px 10px;
  border-radius:9px; border:1px solid var(--danger);
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  font-size:12px; line-height:1.45; color:var(--ink); }
.crd-file__band b{ font-weight:800; }

/* ── 02 · THE CLOSE DOCK (composer keys, reordered) ─────── */
/* Nothing is removed: every tool the tray had is still in it. The five
   closing keys simply lead, and the one that ends the sale reads as the
   primary. Order is a CLASSIC-cascade rule — the house floor sets its
   own five-key order and that section is untouched. */
.csw-tray .csw-tool{ order:20; }
.csw-tray .csw-tool[data-tool="hold"]{ order:1; }
.csw-tray .csw-tool[data-tool="order"]{ order:2; }
.csw-tray .csw-tool[data-tool="account"]{ order:3; }
.csw-tray .csw-tool[data-tool="studio"]{ order:4; }
.csw-tray .csw-tool[data-tool="paylink"]{ order:5; }
.csw-tray .csw-tool[data-tool="suggest"]{ order:6; }
.crd-dockkey{ min-height:44px; min-width:44px; }
/* HOLD AT STORE is the close on a desk that takes ~90% of its money at a
   counter — it wears the accent, and it is the only key here that does. */
.crd-dockkey--go{ border-color:transparent; background:var(--accent);
  color:var(--accent-text); font-weight:800; }

/* ── 03 · THE QUOTE CLOCK ───────────────────────────────── */
.crd-quote{ flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:8px 12px;
  border-top:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background:color-mix(in srgb, var(--warn) 11%, transparent);
  font-size:12.5px; color:var(--ink); }
.crd-quote__amt{ font-family:var(--mono, 'Archivo', sans-serif); font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--warn); }
.crd-quote__age{ margin-left:auto; font-family:var(--mono, 'Archivo', sans-serif); font-size:11px;
  color:var(--ink-mute); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* the same fact on a queue row — the feed keeps the ORDER, this only says why */
.crd-quotechip{ display:inline-flex; align-items:center; gap:4px; padding:1px 7px;
  border-radius:9px; border:1px solid var(--warn); color:var(--warn);
  font-family:var(--mono, 'Archivo', sans-serif); font-size:10px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── 04 · DRAFT RECEIPTS ────────────────────────────────── */
.crd-draft{ flex:0 0 auto; margin:8px 12px 0; padding:10px 12px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--g-violet, #8b7ad6) 55%, var(--line));
  background:var(--bg-card); }
.crd-draft__head{ display:flex; align-items:center; gap:8px; font-size:11px;
  letter-spacing:.02em; color:var(--ink); font-weight:700; }
.crd-draft__text{ font-size:13.5px; line-height:1.45; color:var(--ink); margin-top:7px;
  white-space:pre-wrap;
  /* L1: the bound its own predecessor holds 200 lines up
     (.csw-rescue__text caps at 150px) — this newer card dropped it.
     Latent today (writers cap at ~400 tokens), but the class pin makes
     band bounds law and this band must obey it too. 180px over 150 so
     a two-paragraph draft's tail is visibly a scroll, not a cut. */
  max-height:180px; overflow-y:auto; }
.crd-grounds{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
/* A receipt says what the draft KNEW. No grounding = no chips, never a
   chip that says "nothing" — an empty claim reads as a full one. */
.crd-ground{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
  border-radius:var(--r-pill); border:1px solid color-mix(in srgb, var(--ok, #6ee7a8) 50%, var(--line));
  font-size:11px; color:var(--ink-dim); white-space:nowrap; }
.crd-ground i{ font-style:normal; color:var(--ok, #6ee7a8); }
.crd-draft__row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.crd-btn{ min-height:44px; min-width:44px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-card); color:var(--ink);
  font-family:var(--body); font-size:13px; font-weight:700; cursor:pointer; }
.crd-btn--go{ border-color:transparent; background:var(--accent); color:var(--accent-text);
  font-weight:800; }
.crd-btn--danger{ border-color:var(--danger); color:var(--danger); }
.crd-btn--ghost{ opacity:.62; }
.crd-btn:disabled{ opacity:.45; cursor:default; }

/* ── 05 · THE RECEIPT CARD ──────────────────────────────── */
.crd-receipt{ flex:0 0 auto; margin:8px 12px 0; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg-card); }
.crd-receipt__head{ display:flex; align-items:center; gap:8px; font-size:11px;
  font-weight:700; color:var(--ink); }
.crd-receipt__state{ margin-left:auto; font-family:var(--mono, 'Archivo', sans-serif); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.crd-receipt__nums{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.crd-num__v{ font-family:var(--mono, 'Archivo', sans-serif); font-size:16px; font-weight:800;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.crd-num__l{ font-family:var(--mono, 'Archivo', sans-serif); font-size:9px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:2px; }
.crd-receipt__note{ font-size:11.5px; line-height:1.5; color:var(--ink-mute); margin-top:7px; }
.csw-creditcard .crd-receipt__note,.csw-creditcard .crd-receipt__head,.csw-creditcard .crd-num__l,.csw-creditcard .csw-card__t{ font-size:12px; }
.csw-creditcard .crd-receipt__note{ max-width:78ch; }
.csw-creditcard [data-state="attention"]:not([hidden]):not(:empty){ border-inline-start:2px solid var(--warn); padding-inline-start:9px; color:var(--ink); }
.csw-creditcard [data-state="pending"],.csw-creditcard [data-state="complete"]{ color:var(--ink); }
.csw-autohead + .crd-receipt__note{ font-size:12px; }
.crd-receipt__row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
/* A MISMATCH LOOKS DIFFERENT. The ₦112,600 refund came out of two numbers
   nobody compared; when they disagree the card must not read like the
   card that agrees. */
/* L3 (vet 2026-08-30, receipt-card-arrives-silently): the card that
   DISAGREES gets a 160ms settle — opacity + translateY, compositor
   only — so the one reading a rep must not miss does not simply
   materialise mid-glance. The agree case needs no announcement. The
   reduced-motion pin already covers .crd-receipt (animation:none in the
   file's one reduced-motion block), so under it the card just IS there,
   mismatch colour intact. */
@keyframes crd-receipt-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.crd-receipt--mismatch{ border-color:var(--danger);
  background:color-mix(in srgb, var(--danger) 9%, var(--bg-card));
  animation:crd-receipt-in 160ms var(--ease-emph-decel, ease-out) both; }
.crd-receipt--mismatch .crd-receipt__state{ color:var(--danger); }
.crd-receipt--mismatch .crd-num--paid .crd-num__v{ color:var(--danger); }
.crd-receipt--exact .crd-receipt__state{ color:var(--ok, #6ee7a8); }

/* ── 06 · STOCK CHIPS ───────────────────────────────────── */
.crd-stock{ flex:0 0 auto; padding:7px 12px 8px; border-top:1px solid var(--line);
  background:var(--bg-card); }
.crd-stock__h{ font-family:var(--mono, 'Archivo', sans-serif); font-size:9px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
/* One row, ALWAYS. A wrapping row let 27 (size x store) chips stack
   ~14 rows deep on a phone and crush the transcript to zero height
   (operator photo, 2026-08-30). Extra sizes swipe sideways — the tray
   can never grow downward again, whatever the catalogue does. */
.crd-stock__row{ display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.crd-stock__row::-webkit-scrollbar{ display:none; }
.crd-stock__chip{ min-height:44px; padding:5px 11px; border-radius:11px;
  border:1px solid var(--line); background:none; color:var(--ink-dim);
  font-family:var(--body); font-size:12px; font-weight:650; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:1px; text-align:left; flex:0 0 auto; white-space:nowrap; }
.crd-stock__chip b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }
.crd-stock__chip i{ font-style:normal; font-size:10px; font-weight:500; color:var(--ink-mute);
  font-variant-numeric:tabular-nums; }
.crd-stock__chip--oos{ border-color:color-mix(in srgb, var(--danger) 45%, transparent);
  color:var(--ink-mute); }
.crd-stock__chip--oos b{ color:var(--danger); }

/* ── 07 · THE RELAY'S IN-THREAD STATE ───────────────────── */
.crd-askstate{ flex:0 0 auto; padding:7px 12px 8px; border-top:1px solid var(--line);
  background:var(--bg-card); display:flex; flex-direction:column; gap:6px; }
.crd-ask{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); }
.crd-ask__id{ font-family:var(--mono, 'Archivo', sans-serif); font-size:11px; font-weight:700;
  color:var(--ink); letter-spacing:.04em; }
.crd-ask__t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* the statebar: four beads, lit up to where the ask has actually got */
.crd-bar{ display:flex; gap:3px; margin-left:auto; flex:0 0 auto; }
.crd-bar i{ display:block; width:16px; height:4px; border-radius:2px; background:var(--line); }
.crd-bar i.on{ background:var(--accent); }
.crd-ask--late .crd-bar i.on{ background:var(--warn); }
.crd-ask--blocked .crd-bar i.on{ background:var(--danger); }

/* ── 08 · THE BUYER CARD SAYS WHY ───────────────────────── */
.crd-why{ margin-top:5px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.crd-why__quote{ font-size:12px; line-height:1.45; color:var(--ink);
  border-left:2px solid var(--accent); padding-left:8px; }
.crd-why__cls, .crd-why__conf{ font-family:var(--mono, 'Archivo', sans-serif); font-size:9.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute);
  border:1px solid var(--line); border-radius:8px; padding:1px 6px; white-space:nowrap; }

/* ── 09 · THE WHALE ROW ─────────────────────────────────── */
/* A repeat buyer's row wears a gold edge and says HOW MANY. Absent
   order count → an ordinary row, byte-identical to before. */
.csw-thread.crd-whale{ box-shadow:inset 3px 0 0 #e8b53a; }
.crd-whalechip{ display:inline-flex; align-items:center; gap:4px; padding:1px 7px;
  border-radius:9px; border:1px solid #e8b53a; color:#e8b53a;
  font-family:var(--mono, 'Archivo', sans-serif); font-size:10px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── 10 · THE VOICE NOTE'S ONE TAP ──────────────────────── */
.crd-transcribe{ min-height:44px; margin-top:6px; display:inline-flex; align-items:center;
  gap:6px; }
.crd-transcribe--money{ border-color:var(--accent); color:var(--ink); font-weight:700; }

/* ── THE ONE DIALOG GRAMMAR, ON THE DESK ────────────────────
   coreConfirm (inventory_core.js, vet build #9) is the repo's single
   promise-based confirm — the sheet that retired window.confirm and
   window.prompt. It paints with .mk-modal / .mk-btn, whose rules live in
   marketing.css and inventory.css; index.html ships NEITHER, so the desk
   importing coreConfirm would have rendered exactly the bare unstyled
   system dialog the one-grammar rule exists to kill.

   So the desk tags its own dialogs .crd-confirm at the moment they open
   and paints THAT. Same function, same markup, same promise contract —
   only the paint is local, and no page that already uses coreConfirm can
   see these rules (nothing else in the repo adds this class). */
.crd-confirm{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center;
  justify-content:center; padding:20px; padding-bottom:calc(20px + var(--safe-bottom, 0px));
  background:rgba(0,0,0,.62); }
.crd-confirm .mk-modal-card{ width:min(420px, 100%); max-height:80vh; overflow:auto;
  padding:18px; border-radius:16px; border:1px solid var(--line); background:var(--bg-card);
  color:var(--ink); }
.crd-confirm h3{ margin:0; font-family:var(--body); font-size:16px; font-weight:800;
  line-height:1.3; color:var(--ink); }
.crd-confirm .ivo-confirm-body{ margin-top:8px; font-size:13px; line-height:1.5;
  color:var(--ink-dim); }
.crd-confirm .ivo-confirm-body p{ margin:0; }
.crd-confirm .ivo-note-input{ border-radius:10px; border:1px solid var(--line);
  background:var(--bg-elev, var(--bg-card)); color:var(--ink); font-family:var(--body);
  font-size:13px; padding:9px 11px; min-height:64px; }
.crd-confirm .mk-modal-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.crd-confirm .mk-btn{ min-height:44px; min-width:44px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-card); color:var(--ink);
  font-family:var(--body); font-size:13px; font-weight:700; cursor:pointer; }
.crd-confirm .mk-btn-primary{ border-color:transparent; background:var(--accent);
  color:var(--accent-text); font-weight:800; }
.crd-confirm .mk-btn-ghost{ opacity:.7; }
.crd-confirm .mk-btn:disabled{ opacity:.45; cursor:default; }

/* Motion: the reduced-motion suppression for every slot above lives in
   the file's ONE reduced-motion block (search "REDUCED MOTION — the
   file's LAST"), which is that block's documented append point. A second
   block here would steal the rindex the accessibility pins read. */

/* ═══ WS-B / WS-D / WS-E (2026-09-02) · the desk faces, part A ═══════
   Failure gets a face (the flap that stays, the red hollow mark), the
   Instagram open ring and the hard-stop dial, the WA · IG · PUSH · SHELL
   board strip, the Photo key's three states, the owner's ledger by
   reason and the Desks card, the New-desk band. Flat, drawn glyphs,
   house tokens only — no gradients, no shadows, no emoji. */

/* the fourth and fifth marks in the tick family */
.csw-prevtick--fail{ color:var(--danger); }
.csw-prevtick--fail svg, .csw-prevtick--ring svg{ width:12px; height:12px; }
.csw-prevtick--ring{ color:var(--ink-mute); }
.csw-tick--ring{ letter-spacing:0; opacity:1; color:var(--ink-mute); display:inline-flex; vertical-align:-2px; }
.csw-tick__ring svg, .csw-tick__fail svg{ width:12px; height:12px; display:inline-block; vertical-align:-2px; margin-right:3px; }
.csw-tick__fail{ color:var(--danger); }

/* the flap: a hinged strip under the bubble */
.csw-flap{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  max-width:min(78%, 520px); margin:2px 0 6px 12px; padding:6px 10px 6px 14px;
  font-size:11.5px; line-height:1.35; color:var(--ink);
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 32%, transparent); border-left-width:3px;
  border-radius:0 var(--r-sm) var(--r-sm) var(--r-sm); }
.csw-row.out .csw-flap{ margin-left:auto; margin-right:12px; border-radius:var(--r-sm) 0 var(--r-sm) var(--r-sm); }
.csw-flap__hinge{ position:absolute; left:-3px; top:-5px; width:3px; height:5px; background:color-mix(in srgb, var(--danger) 32%, transparent); }
.csw-flap__why{ flex:1 1 220px; min-width:0; }
.csw-flap__meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-mute); white-space:nowrap; }
.csw-flap__verb{ flex:0 0 auto; min-height:44px; padding:0 14px; font:inherit; font-weight:600; font-size:12px;
  color:var(--danger); background:transparent; border:1px solid var(--danger); border-radius:var(--r-sm); cursor:pointer; }
.csw-flap__verb:disabled{ opacity:.55; cursor:default; }
.csw-flap--done{ opacity:.5; }
.csw-flap--twin{ border-color:color-mix(in srgb, var(--ink-mute) 40%, transparent); background:color-mix(in srgb, var(--ink-mute) 8%, transparent); }
.csw-flap--twin .csw-flap__hinge{ background:color-mix(in srgb, var(--ink-mute) 40%, transparent); }

/* the dial's hard stop on Instagram */
.csw-windial--ig .csw-windial__tr{ stroke-dasharray:2 2; }
.csw-windial__stop{ fill:none; stroke:var(--danger); stroke-width:2.6; stroke-linecap:round; }
.csw-windial--igstop{ color:var(--danger); font-weight:600; }

/* the board at the head of the desk — one line, only when this phone
   needs a tap; a dot for the owner otherwise (2026-09-04: the four chips
   in system words left the fold at the operator's word) */
.csw-boardstrip{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:4px 10px; border-bottom:1px solid var(--line-soft);
  flex:0 0 auto; align-content:flex-start; /* a strip is its content's height — never the room's */
  font-family:inherit; font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--ink-mute); }
.csw-boardstrip[hidden]{ display:none; }
.csw-boarddot{ position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; flex:0 0 auto; }
.csw-boarddot::after{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--ink-mute); }
.csw-boarddot--ok::after{ background:var(--ok); }
.csw-boarddot--dim::after{ background:var(--ink-mute); opacity:.5; }
.csw-boarddot[aria-expanded="true"]::after{ box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.csw-boardline{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px 10px; min-width:0; min-height:28px; color:var(--ink); }
.csw-boardline--quiet{ color:var(--ink-mute); }
.csw-boardline--soon{ color:var(--warn); }
.csw-boardline--down{ color:var(--danger); }
.csw-boardline__act{ min-height:44px; padding:0 12px; font:inherit; font-weight:600; color:var(--ink); background:transparent;
  border:1px solid var(--ink); border-radius:var(--r-sm); cursor:pointer; }
.csw-boardline__act:disabled{ opacity:.5; cursor:default; }

/* the quiet band on a stale shell */
.csw-newdesk{ display:block; width:100%; min-height:44px; padding:0 14px; font:inherit; font-size:12.5px; text-align:left;
  color:var(--ink); background:color-mix(in srgb, var(--accent) 12%, transparent); border:0; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.csw-newdesk:disabled{ opacity:.6; cursor:default; }

/* the Photo key's states, and the sheet's cause line */
.csw-tool[data-photo-state="device"]{ border-color:color-mix(in srgb, var(--warn) 60%, transparent); }
.csw-photocause{ margin:0 0 10px; padding:8px 11px; font-size:11.5px; line-height:1.4; color:var(--ink);
  background:color-mix(in srgb, var(--warn) 10%, transparent); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius:var(--r-sm); }

/* the Desks card (owner): one state word per phone, no names */
.csw-desks{ margin-top:10px; }
.csw-desks__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; font-size:12.5px; }
.csw-desks__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-desks__st{ flex:0 0 auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); }
.csw-desks__old .csw-desks__st{ color:var(--warn); }
.csw-desks__fail .csw-desks__st{ color:var(--danger); }

/* the failure ledger by reason (owner): lamp · reason · 7d · what changed */
.csw-ledger__head, .csw-ledger__row{ display:grid; grid-template-columns:14px minmax(0,1fr) 44px 84px; align-items:center; gap:8px; min-height:30px; font-size:12.5px; }
.csw-ledger__head{ grid-template-columns:minmax(0,1fr) 44px 84px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.csw-ledger__head span:not(:first-child), .csw-ledger__n, .csw-ledger__chg{ text-align:right; }
.csw-ledger__lamp{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--ink-mute); background:transparent; }
.csw-ledger__lamp.on{ border-color:var(--danger); background:var(--danger); }
.csw-ledger__row--live .csw-ledger__why{ color:var(--ink); }
.csw-ledger__why{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-mute); }
.csw-ledger__why i{ font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); }
.csw-ledger__n{ font-family:var(--mono); }
.csw-ledger__chg{ font-family:var(--mono); color:var(--ink-mute); }
.csw-ledger__chg.up{ color:var(--danger); }
.csw-ledger__chg.down{ color:var(--ok); }
.csw-ledger__foot, .csw-ledger__none{ margin-top:8px; font-size:11.5px; color:var(--ink-mute); }

/* ═══ WS-A / WS-C (2026-09-03) · the desk faces, part B ══════════════
   The working set and the close. Above the house-floor marker on
   purpose, exactly where part A's block sits: everything here is
   functional safety on BOTH skins (a rep on Classic holds the same
   eight threads and leaves the same chats parked), and a rule written
   below the marker would repaint three themes nobody designed it for.
   Flat, house tokens only, no gradients and no shadows.

   THE 12px FLOOR. Every rule below that a rep READS carries at least
   12px on a phone — the tails, the notes, the ages, the ghost, the
   warn line and the shift bar. Mono TAGS (the "yours · 61× · Tab"
   key, the ball word) are labels on a control, not prose, and sit at
   11px with letter-spacing; the media query at the end of this block
   lifts every reading size on narrow screens where it matters most. */

/* ── B1 · the Now shelf ──
   The tiles are ONE ROW that scrolls sideways, never a wrapping block:
   the shelf costs 44px whether it holds three threads or eight, and the
   eighth is a swipe away rather than four rows down. A strip that grows
   into the room it sits over is the shape that cost the operator her
   chat list once already. The row is the only sideways scroller on this
   desk and it is deliberate — the page body never moves. */
.csw-now{ padding:8px 10px 6px; border-bottom:1px solid var(--line-soft); }
.csw-now__l{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:4px; }
.csw-now__r{ display:flex; flex-wrap:nowrap; align-items:center; gap:6px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.csw-now__r::-webkit-scrollbar{ display:none; }
.csw-now__t{ display:inline-flex; align-items:center; gap:6px; min-height:44px; box-sizing:border-box;
  padding:0 10px; flex:0 0 auto; scroll-snap-align:start;
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:transparent;
  color:var(--ink); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.csw-now__t:hover{ border-color:var(--line-strong); }
.csw-now__d{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--ink-mute); }
.csw-now__d--wa{ background:var(--ok); }
.csw-now__d--ig{ background:var(--g-violet); }
.csw-now__t b{ font-weight:600; font-size:12px; letter-spacing:.02em; }
.csw-now__a{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); }
.csw-now__b{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-mute); }
.csw-now__b--you{ color:var(--accent); font-weight:600; }
.csw-now__b--eon{ color:var(--g-violet); }
.csw-now__b--them{ color:var(--ink-mute); }

/* ── B2 · the seam ── */
.csw-seam{ display:flex; align-items:center; justify-content:center; margin:10px 0 6px; }
.csw-seam span{ padding:3px 10px; font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  color:var(--ink-mute); border:1px solid var(--line-soft); border-radius:999px;
  background:var(--bg-card); }

/* ── B3 · the parked strip and the shift bar ── */
.csw-park{ display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box;
  min-height:44px; padding:6px 8px; margin-bottom:4px; text-align:left;
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:transparent;
  color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer; }
.csw-park:hover{ border-color:var(--line-strong); }
.csw-park b{ flex:0 0 auto; font-weight:600; font-size:12px; letter-spacing:.02em; }
.csw-park__n{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-dim); font-size:12.5px; }
.csw-shiftbar{ margin-top:8px; padding:8px 10px; font-size:12.5px; line-height:1.4; color:var(--ink);
  border:1px solid var(--line-soft); border-radius:var(--r-sm); }
.csw-shiftbar.is-shut{ border-color:color-mix(in srgb, var(--warn) 45%, transparent);
  color:var(--warn); }

/* ── B4 · the rung on the header ── */
.csw-rung{ display:inline-flex; align-items:center; min-height:20px; padding:0 7px; margin-right:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:var(--r-sm); white-space:nowrap; }
.csw-rung[hidden]{ display:none; }

/* ── B5 · the ghost, and B6 · the warn line ── */
.csw-ghost{ display:flex; align-items:baseline; gap:8px; padding:4px 12px 0; min-width:0; }
.csw-ghost__t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px; color:var(--ink-mute); }
.csw-ghost__k{ flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-faint); }
.csw-reask{ padding:5px 12px 0; font-size:12px; line-height:1.35; color:var(--warn); }
.csw-remem{ display:flex; flex-wrap:wrap; gap:6px; }
.csw-remem__c{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; font-size:12px;
  color:var(--ink-dim); border:1px dashed var(--line-soft); border-radius:var(--r-sm); }
.csw-remem__c b{ color:var(--ink); font-weight:600; }

/* ── B7 · the account word, the receipt and the order sheet ── */
.csw-acct{ padding:7px 11px; font-size:12.5px; line-height:1.35; color:var(--ink-dim);
  border:1px solid var(--line-soft); border-radius:var(--r-sm); }
.csw-acct--seen{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.csw-rct{ padding:2px 0 4px; }
.csw-rct__l{ display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:13px;
  border-bottom:1px solid var(--line-soft); }
.csw-rct__q{ flex:0 0 auto; font-family:var(--mono); color:var(--ink-mute); font-size:12px; }
.csw-rct__t{ flex:1 1 auto; min-width:0; }
.csw-rct__p{ flex:0 0 auto; font-family:var(--mono); font-size:12.5px; }
.csw-rct__sum{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 0 6px; font-size:14px; font-weight:700; color:var(--ink);
  border-bottom:2px solid var(--ink); }
.csw-rct__to{ padding-top:7px; font-size:12px; color:var(--ink-mute); }
.csw-rct__to b{ color:var(--ink-dim); font-weight:600; }
.csw-ordersheet{ display:flex; flex-direction:column; gap:8px; padding-top:4px;
  /* the sheet grows in place and scrolls INSIDE itself — three choices
     must never push the sheet's own head off a phone screen */
  max-height:60vh; overflow-y:auto; overscroll-behavior:contain; }
.csw-oschoice{ display:block; width:100%; box-sizing:border-box; min-height:44px; padding:11px 12px;
  text-align:left; border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.csw-oschoice:hover{ border-color:var(--line-strong); }
.csw-oschoice b{ display:block; font-size:13.5px; font-weight:700; }
.csw-oschoice span{ display:block; margin-top:3px; font-size:12px; line-height:1.4;
  color:var(--ink-mute); }

/* THE 12px FLOOR ON A PHONE. Anything on this desk a rep READS holds
   12px or more at 480px and under. Nothing here shrinks a thing — each
   rule only ever raises. */
@media (max-width: 480px){
  .csw-now__t, .csw-now__t b, .csw-now__a, .csw-park, .csw-park__n,
  .csw-shiftbar, .csw-ghost__t, .csw-reask, .csw-remem__c,
  .csw-acct, .csw-seam span, .csw-oschoice span, .csw-rct__to{ font-size:12px; }
  .csw-rct__l, .csw-rct__p{ font-size:13px; }
}


/* Desk advance — operational words on the cards, evidence one tap away.
   The existing theme owns every colour and typeface. */
.csw-looksend:disabled{background:var(--bg-elev);border-color:var(--line);color:var(--ink-dim);cursor:default}
.csw-service-meta{display:flex;flex-direction:column;gap:4px;margin-top:8px;min-width:0;font-size:11px;line-height:1.45;text-align:left}
.csw-windowwords{display:inline-flex;align-items:baseline;gap:6px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.csw-windowwords i{width:5px;height:5px;flex:0 0 5px;border:1px solid currentColor;border-radius:50%;align-self:center}
.csw-windowwords--open i{background:var(--accent);border-color:var(--accent)}
.csw-windowwords--closing{color:var(--warn)}
.csw-windowwords--closing i{background:currentColor}
.csw-windowwords--closed{color:var(--ink-dim)}
.csw-windowwords--closed i{border-radius:50%}
.csw-windowwords--unknown{color:var(--ink-dim)}
.csw-service-meta__why{color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Service cases: existing dialog/disclosure patterns, no new house theme. */
.scase-brief{flex:0 0 auto;border-bottom:1px solid var(--line);font:12px/1.5 var(--body);color:var(--ink-dim);background:var(--bg)}
.scase-brief summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;cursor:pointer;list-style:revert}
.scase-brief summary b{color:var(--ink);font-weight:600;white-space:nowrap}.scase-brief summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scase-brief-body{padding:0 16px 12px;max-height:24vh;overflow:auto}.scase-brief-body p{margin:0 0 6px}
.scase-brief button,.scase-actions button{font:600 12px var(--body);color:var(--ink);background:var(--bg-card);border:1px solid var(--line);min-height:44px;padding:8px 12px;cursor:pointer}
.scase-scroll{padding:20px 24px;font:14px/1.55 var(--body);color:var(--ink-dim)}.scase-card{padding:18px 0;border-bottom:1px solid var(--line)}.scase-card:first-child{padding-top:0}.scase-card:last-child{border-bottom:0}
.scase-card header{display:flex;justify-content:space-between;gap:12px;align-items:center}.scase-card h3{font:600 20px/1.3 var(--display);color:var(--ink);margin:0}.scase-card header>span{font-size:12px;white-space:nowrap}.scase-next{font-weight:600;color:var(--ink);margin:12px 0}
.scase-card dl{margin:12px 0}.scase-card dl>div{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-bottom:1px solid var(--line)}.scase-card dt{flex:0 0 34%}.scase-card dd{margin:0;text-align:right;color:var(--ink);overflow-wrap:anywhere}.scase-card p{overflow-wrap:anywhere}
.scase-fee{border:1px solid var(--line);padding:0 12px;margin:16px 0}.scase-history summary,.scase-handoff-help summary{min-height:44px;padding:10px 0;cursor:pointer;color:var(--ink);font-weight:600}.scase-history,.scase-handoff-help{border-top:1px solid var(--line);margin-top:14px}.scase-history .scase-card{padding-top:14px}.scase-fee summary{min-height:44px;padding:10px 0;cursor:pointer;color:var(--ink);font-weight:600}.scase-fee p{font-size:12px}
.scase-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.scase-actions button:disabled{opacity:.45;cursor:default}.scase-actions button:focus-visible,.scase-brief summary:focus-visible,.scase-brief button:focus-visible,.scase-fee summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scase-form{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.scase-form label{display:block;color:var(--ink);font-size:12px;margin:12px 0}.scase-form :is(input,select,textarea){display:block;width:100%;box-sizing:border-box;font:14px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:10px;margin-top:6px;min-height:44px}.scase-form textarea{min-height:75px;resize:vertical}.scase-form-error{color:var(--danger);font-size:12px}.scase-note,.scase-status{font-size:12px}.scase-empty{margin:0;line-height:1.6}
@media(max-width:600px){.scase-scroll{padding:16px 20px}.scase-brief summary{padding-inline:12px}.scase-brief-body{padding-inline:12px}.scase-card dl>div{gap:10px}.scase-actions>button{flex:1 1 auto}.scase-form :is(input,select,textarea){font-size:16px}}

.csw-service-rail{flex:0 0 auto;display:flex;align-items:center;gap:4px;min-height:44px;border-bottom:1px solid var(--line);padding:0 12px;background:var(--bg);min-width:0}
.csw-service-rail button{border:0;background:transparent;color:var(--ink-dim);font:inherit;font-size:11px;min-height:44px;cursor:pointer;padding:0 8px;white-space:nowrap}
.csw-service-rail button:hover{color:var(--ink);background:var(--bg-card)}
.csw-service-rail button:focus-visible,.csw-service-refresh:focus-visible,.csw-service-link:focus-visible,.csw-engine-stage summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.csw-service-rail__progress{flex:1;min-width:0;text-align:left}
.csw-service-rail__path{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:440px}
.csw-service-rail__path>span{display:flex;align-items:center;gap:5px;color:var(--ink-dim)}
.csw-service-rail__path i{font:10px var(--mono);width:17px;height:17px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.csw-service-rail__path .current{color:var(--ink);font-weight:700}
.csw-service-rail__path .current i{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}
.csw-service-rail__path .passed i{border-color:var(--accent);color:var(--accent)}
.csw-service-rail__actions{display:flex;align-items:center;flex:0 0 auto}
.csw-service-rail__actions button+button{border-left:1px solid var(--line)}
.csw-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.csw-sheet__head h3{font:700 clamp(21px,3vw,28px)/1.1 var(--display);letter-spacing:-.025em;margin:0;max-width:20ch}
.csw-sheet__head .csw-x{flex:0 0 44px;min-width:44px;min-height:44px;margin-top:-10px}
.csw-service-sheet{font:14px/1.6 var(--body);color:var(--ink-dim)}
.csw-service-sheet p{margin:0 0 14px;overflow-wrap:anywhere}
.csw-service-sheet__lead{font:600 21px/1.35 var(--display);color:var(--ink)}
.csw-service-fact{padding:16px 0;margin:12px 0;border-block:1px solid var(--line)}
.csw-service-empty{padding:24px 0;color:var(--ink-dim)}
.csw-path-detail,.csw-receipt-trail,.csw-engine-stages{list-style:none;padding:0;margin:20px 0 0}
.csw-path-detail li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.csw-path-detail li>span{font:12px var(--mono);width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:0 0 28px}
.csw-path-detail b{color:var(--ink)}
.csw-path-detail p{margin:5px 0 0;font-size:13px}
.csw-path-detail [aria-current="step"]>span{background:var(--accent);color:var(--accent-text)}
.csw-receipt-trail__event{position:relative;padding:0 0 22px 24px;border-left:1px solid var(--line);margin-left:5px}
.csw-receipt-trail__event::before{content:'';position:absolute;left:-4px;top:7px;width:7px;height:7px;background:var(--bg-elev);border:1px solid var(--ink-dim);border-radius:50%}
.csw-receipt-trail__event--read::before,.csw-receipt-trail__event--delivered::before{background:var(--accent);border-color:var(--accent)}
.csw-receipt-trail__event--held::before{border-color:var(--warn)}
.csw-receipt-trail__event--failed::before{background:var(--danger);border-color:var(--danger)}
.csw-receipt-trail__event--accepted::before{border-style:double;border-width:3px;background:transparent}
.csw-receipt-trail__event--unknown::before{border-style:dashed;background:transparent}
.csw-receipt-trail__event>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;color:var(--ink)}
.csw-receipt-trail__event time{font:10px/1.5 var(--mono);color:var(--ink-dim)}
.csw-receipt-trail__event p{margin:6px 0;font-size:14px;color:var(--ink)}
.csw-receipt-trail__event small{font-size:12px;line-height:1.5;display:block}
.csw-engine-overlay .csw-sheet{max-width:740px}
.csw-engine-overview{border-bottom:1px solid var(--line);padding:4px 0 20px}
.csw-engine-overview__word{font:700 clamp(25px,4vw,40px)/1.08 var(--display);letter-spacing:-.035em;color:var(--ink);margin-bottom:14px;max-width:18ch}
.csw-engine-overview small{font:10px/1.6 var(--mono)}
.csw-engine-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.csw-engine-counts>div{padding:20px 12px 20px 0;min-width:0}
.csw-engine-counts b{font:500 clamp(25px,4vw,36px)/1.2 var(--mono);color:var(--ink);display:block;letter-spacing:-.04em}
.csw-engine-counts span{font-size:11px;line-height:1.45;display:block;margin-top:6px}
.csw-engine-stage{border-bottom:1px solid var(--line);position:relative}
.csw-engine-stage summary{display:flex;align-items:center;gap:14px;min-height:88px;padding:14px 0;cursor:pointer;list-style:none}
.csw-engine-stage summary::-webkit-details-marker{display:none}
.csw-engine-stage summary>span:nth-child(2){flex:1;min-width:0}
.csw-engine-stage__n{font:11px var(--mono);color:var(--ink-dim);width:24px}
.csw-engine-stage b{font:600 20px/1.2 var(--display);color:var(--ink);display:block}
.csw-engine-stage small{display:block;font-size:12px;line-height:1.5;margin-top:6px}
.csw-engine-stage em{font:10px/1.5 var(--mono);font-style:normal;max-width:95px;text-align:right;color:var(--ink-dim)}
.csw-engine-stage--live em{color:var(--accent)}
.csw-engine-stage--dark_by_design em,.csw-engine-stage--unwired em{color:var(--warn)}
.csw-engine-stage__evidence{padding:0 0 12px 38px;font-size:12px}
.csw-engine-caution{margin-top:24px!important;padding-left:12px;border-left:2px solid var(--line-strong);font-size:12px}
.csw-service-link,.csw-service-refresh{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;color:var(--ink);font:600 12px var(--body);text-decoration:none}
.csw-service-refresh{border:1px solid var(--line);background:var(--bg-card);padding:0 16px;margin-top:16px;cursor:pointer}
.csw-service-refresh:disabled{opacity:.5;cursor:wait}
@media(max-width:1100px){.csw-service-rail__path>span:not(.current){display:none}.csw-service-rail__path .current::after{content:' / 4';font:10px var(--mono);color:var(--ink-dim)}.csw-service-rail{padding-inline:6px}}
@media(prefers-reduced-motion:no-preference){.csw-path-detail li,.csw-receipt-trail__event,.csw-engine-stage{animation:csw-evidence-enter 240ms ease-out both}.csw-engine-stage:nth-child(2){animation-delay:35ms}.csw-engine-stage:nth-child(3){animation-delay:70ms}.csw-engine-stage:nth-child(4){animation-delay:105ms}.csw-engine-stage:nth-child(5){animation-delay:140ms}}
@keyframes csw-evidence-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}


/* Keep the engine reading and its close/refresh controls in view. */
.csw-engine-tools{display:flex;align-items:center;gap:6px}
.csw-engine-tools .csw-service-refresh{margin:0;font-size:10px;white-space:nowrap;padding-inline:10px}
.csw-engine-tools .csw-x{margin:0}
.csw-engine-overlay .csw-sheet__head{align-items:center}
@media(min-width:880px){
  .csw-engine-overlay .csw-sheet{max-width:900px}
  #csw-engine-reading{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 30px}
  .csw-engine-overview{grid-column:1;grid-row:1;padding-top:8px;border-bottom:0}
  .csw-engine-counts{grid-column:1;grid-row:2;grid-template-columns:1fr;border-bottom:0;align-self:start}
  .csw-engine-counts>div{padding:12px 0;border-top:1px solid var(--line)}
  .csw-engine-counts b{font-size:28px}
  .csw-engine-stages{grid-column:2;grid-row:1 / span 2;margin:0}
  .csw-engine-stage summary{min-height:80px}
  .csw-engine-caution,.csw-engine-overlay .csw-service-link{grid-column:1 / -1}
}

/* A failure explanation gets a complete line, including on a phone. */
.csw-bub.out .csw-bub__t:has(.csw-failwhy){flex-wrap:wrap;line-height:1.45}
.csw-bub.out .csw-bub__t .csw-failwhy{flex:1 0 100%;width:100%;max-width:none;white-space:normal;text-align:left;overflow-wrap:break-word}
.csw-service-meta{font-size:12px}
.csw-service-rail button{font-size:12px}

/* Shared keyboard and toast behavior, outside the House-only floor. */
.csw-360:not(.open) { visibility:hidden; }
.csw-360.open { visibility:visible; }
.csw-conv__id[role="button"] { cursor:pointer; border-radius:8px; }
.csw-conv__id:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.csw-overlay .csw-x { min-width:44px; min-height:44px; }
.csw-toast:not(.csw-toast--undo) { pointer-events:none; }
.csw-toast--undo { pointer-events:auto; }

/* Quiet contact base styles — shared by desk themes. */
.csw-contactline {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px;flex:0 0 auto;font-size:12px;border-bottom:1px solid var(--border);}
.csw-contactline[hidden] {display:none;}
.csw-contact-dialog button,#csw-contact-rules button {min-height:44px;padding:8px 12px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:4px;cursor:pointer;font:inherit;}
.csw-contact-dialog {max-width:680px;width:calc(100vw - 32px);max-height:calc(100dvh - 32px);margin:auto;inset:0;overflow:hidden;padding:0;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:8px;}
.csw-contact-dialog::backdrop {background:rgba(0,0,0,.72);}
.csw-contact-dialog[open] {display:flex;flex-direction:column;animation:csw-contact-enter 180ms cubic-bezier(.2,.75,.25,1) both;}
.csw-contact-dialog[open]::backdrop {animation:csw-contact-shade 150ms ease-out both;}
@keyframes csw-contact-enter {from {opacity:0;transform:translateY(8px);}to {opacity:1;transform:translateY(0);}}
@keyframes csw-contact-shade {from {opacity:0;}to {opacity:1;}}
.csw-contact-dialog header {display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border);}
.csw-contact-dialog h2 {margin:4px 0 0;font-size:25px;letter-spacing:-.04em;}
.csw-contact-kicker {font-size:10px;letter-spacing:.14em;}
.csw-contact-content {padding:8px 24px 24px;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.csw-contact-content section {padding-top:12px;}
.csw-contact-content h3 {font-size:16px;}
.csw-contact-content p {line-height:1.55;}
.csw-contact-lead {font-size:17px;font-weight:600;}
.csw-contact-note {font-size:12px;line-height:1.6;opacity:.8;}
.csw-contact-row {padding:16px 0;border-top:1px solid var(--border);font-size:14px;}
.csw-contact-rowhead {display:flex;justify-content:space-between;gap:16px;align-items:baseline;}
.csw-contact-rowhead span {font-size:11px;}
.csw-contact-row p {margin:6px 0;}
.csw-contact-row button {margin:0 6px 6px 0;}
.csw-contact-row blockquote {margin:12px 0;padding-left:14px;border-left:2px solid currentColor;}
.csw-contact-check {margin-top:10px;font-size:13px;}
.csw-contact-actions {display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0;}
.csw-contact-actions p {flex-basis:100%;margin:0;font-size:13px;}
.csw-contact-controls {margin-top:22px;}
.csw-contact-controls label {display:flex;align-items:center;gap:12px;min-height:44px;}
.csw-contact-controls input,.csw-contact-confirm input {width:18px;height:18px;accent-color:var(--eon-accent,var(--accent));}
.csw-contact-request-form {display:grid;gap:16px;}
.csw-contact-request-form label {display:grid;gap:8px;font-size:14px;}
.csw-contact-request-form input[type="search"],.csw-contact-request-form select {width:100%;min-height:44px;box-sizing:border-box;background:transparent;color:inherit;border:1px solid var(--border);padding:10px;font:inherit;border-radius:4px;}
.csw-contact-request-form .csw-contact-confirm {display:flex;align-items:center;gap:10px;line-height:1.5;}
.csw-contact-content table {width:100%;border-collapse:collapse;font-size:14px;}
.csw-contact-content th,.csw-contact-content td {padding:12px 0;text-align:left;border-bottom:1px solid var(--border);font-weight:400;}
.csw-contact-content td {text-align:right;font-variant-numeric:tabular-nums;}
.csw-contact-request-form option {background:var(--bg);color:var(--ink);}
.csw-contact-rule {padding:16px 0;border-bottom:1px solid var(--border);}
.csw-contact-rule summary {cursor:pointer;min-height:44px;}
.csw-contact-rule summary span {display:block;font-size:11px;margin-top:7px;}
.csw-contact-workflow {display:grid;gap:5px;padding:12px 0;font-size:12px;}
.csw-contact-workflow small {line-height:1.5;}
.csw-contact-dialog button:focus-visible,.csw-contact-rule summary:focus-visible {outline:2px solid currentColor;outline-offset:3px;}
[data-living-motion="paused"] .csw-contact-dialog,[data-living-motion="paused"] .csw-contact-dialog::backdrop {animation:none;}
@media(prefers-reduced-motion:reduce) {.csw-contact-dialog[open],.csw-contact-dialog[open]::backdrop {animation:none;}}
@media(max-width:540px) {.csw-contactline {padding:4px 10px;font-size:11px;}.csw-contact-dialog {max-height:calc(100dvh - 16px);width:calc(100vw - 16px);margin:auto 8px 8px;}.csw-contact-dialog header {padding:18px 16px;}.csw-contact-content {padding:4px 16px 20px;}.csw-contact-rowhead {flex-wrap:wrap;gap:6px;}}

/* PHONE CONVERSATION REPAIR — operator screenshots 9535–9537, 6 Sep.
   Diagnostics have a separate owner surface. A chat owns its available
   height; optional context cannot impose a minimum that hides the input.
   Both skins share this geometry because reps may keep their chosen skin. */
.csw-notifications { padding:4px 20px 24px; overflow:auto; }
.csw-notifications__intro { color:var(--ink-dim); font-size:14px; line-height:1.5; margin:0 0 20px; }
.csw-notifications .csw-boardstrip { padding:0; border:0; gap:14px; font-size:14px; line-height:1.5; }
.csw-notifications .csw-boardline { margin:0; }
.csw-boardline[hidden], .csw-notifications [hidden] { display:none!important; }
.csw-now--drawer { margin:16px 12px; padding:12px; border:1px solid var(--line); border-radius:12px; }
.csw-now--drawer .csw-now__r { max-width:100%; }
.csw-compose-context { min-height:0; }
@media(max-width:879px) {
  .csw-shell #csw-conv { min-height:0; overflow:hidden; }
  .csw-shell #csw-conv > .csw-conv__bar { flex:0 0 auto; min-height:60px; padding:6px 10px; gap:8px; }
  .csw-shell #csw-conv .csw-conv__back { display:flex; width:44px; height:44px; border:0; background:transparent; }
  .csw-shell #csw-conv .csw-conv__bar .csw-av { width:32px; height:32px; min-width:32px; }
  .csw-shell #csw-conv .csw-conv__name { font-size:17px; line-height:1.2; }
  .csw-shell #csw-conv .csw-conv__sub { margin-top:2px; min-height:16px; }
  .csw-shell #csw-conv .csw-conv__sub .csw-ch { padding:0; border:0; background:none; font-size:12px; }
  .csw-shell #csw-conv .csw-windial svg { width:16px; height:16px; }
  .csw-shell #csw-conv > :is(.csw-legacy-context,.csw-service-rail,#csw-file,#csw-remem) { display:none; }
  .csw-shell #csw-script { flex:1 1 0; min-height:0; padding:12px 10px; }
  .csw-shell #csw-conv > .csw-bands { flex:0 1 auto; max-height:min(88px,18%); padding-top:0; }
  .csw-shell #csw-conv > .csw-bands:not(:has(> :not([hidden]))) { display:none; }
  .csw-shell #csw-conv > .csw-composer { flex:0 0 auto; min-height:0; padding:6px 8px calc(6px + var(--safe-bottom)); background:var(--bg); }
  .csw-shell #csw-conv .csw-compose-context { max-height:calc(var(--app-height,100dvh) * .2); overflow-y:auto; overscroll-behavior:contain; }
  .csw-shell #csw-conv .csw-inputbox { padding:3px; gap:2px; align-items:flex-end; border-radius:24px; }
  .csw-shell #csw-input { height:40px; min-height:40px; max-height:min(120px,calc(var(--app-height,100dvh) * .22)); font-size:16px; line-height:24px; padding:8px 2px; }
  .csw-shell #csw-conv .csw-inputbox :is(.csw-plus,.csw-send,.csw-mic) { flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; align-self:flex-end; }
  .csw-shell #csw-conv .csw-inputbox .csw-send { border-radius:50%; }
  .csw-shell #csw-conv .csw-inputbox .csw-emoji,
  .csw-shell #csw-conv .csw-composer > .csw-hint { display:none; }
  .csw-shell #csw-conv .csw-winclosed { padding:4px 2px 8px; font-size:12px; line-height:1.4; }
  .csw-shell #csw-conv .csw-winclosed .csw-pickupbtn { min-height:44px; }
  .csw-shell #csw-conv .csw-window-note span { display:none; }
  /* THE CLOSE TRAY ON A PHONE (seat-B vet A5, 2026-09-26). The tray used
     to scroll inside its own 96px box, so its last row (✦ Suggest · ⋯ More)
     was cut in half right on top of the message box, and read as covered.
     One scroller now: the tray grows, and while it is open (keyboard down)
     the space above the message box may take 45% of the screen
     (both banks, More open, fit whole on a 375x812 phone). Anything
     past that scrolls inside that space, never under the box. */
  .csw-shell #csw-conv .csw-tray:not(.collapsed) { max-height:none; overflow-y:visible; }
  html:not(.csw-kb-open) .csw-shell #csw-conv .csw-compose-context:has(> .csw-tray:not(.collapsed)) { max-height:calc(var(--app-height,100dvh) * .45); }
  /* Past 45% the space scrolls, and its edge fades while more waits below:
     that fade is M4's rule, so it lives in M4's section (a mask, never
     paint: this block stays flat). */
  .csw-shell #csw-conv .csw-ballbar { padding:0 2px 5px; font-size:12px; }
  /* "You are answering this chat" is a quiet line at rest; while the rep
     types it folds away so the chat keeps its room (fault 10). */
  html.csw-kb-open .csw-shell #csw-conv .csw-ballbar--mine { display:none; }
  .csw-shell #csw-conv .csw-ballbar__note { display:none; }
  .csw-shell .csw-searchwrap { padding-block:8px; }
  .csw-shell .csw-searchbar { min-height:44px; }
  .csw-shell .csw-legend { display:none; }
  html.csw-kb-open .csw-shell #csw-conv > .csw-composer { padding-bottom:6px; }
  html.csw-kb-open .csw-shell #csw-conv .csw-compose-context { max-height:64px; }
  /* THE ROOM WHILE TYPING (vet 2026-09-24, fault 10). With the keyboard up
     the chat had 72 of 380px: the rep answered a question they could no
     longer see. Nothing is removed; each band folds to one line and a tap
     opens it again. The contact plan's quiet line folds away (the plan
     itself lives in the ⋯ menu); EON's queued reply drops its thumbnail
     and its second line; the step card is folded in its own block below. */
  html.csw-kb-open .csw-shell #csw-conv > .csw-conv__bar { min-height:52px; padding-block:4px; }
  html.csw-kb-open .csw-shell #csw-conv > #csw-contactline { display:none; }
  html.csw-kb-open .csw-shell #csw-conv .csw-stage__row { min-height:44px; padding-block:0; }
  html.csw-kb-open .csw-shell #csw-conv :is(.csw-stage__media,.csw-stage__s) { display:none; }
  /* The rescue draft's keys stay in view (fault 10). The band stack is
     capped (88px, 18% of the screen) and scrolls; a rescue draft taller
     than the cap left Send below the fold. At rest the stack makes room to
     read the whole draft; while typing it keeps its cap. Either way the
     key row rides the bottom edge of the stack, words scrolling behind. */
  .csw-shell #csw-conv > .csw-bands:has(> .csw-rescue) { max-height:min(200px,30%); }
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands:has(> .csw-rescue) { max-height:min(88px,18%); }
  .csw-shell #csw-conv > .csw-bands .csw-rescue__row { position:sticky; bottom:0; z-index:1; margin-top:3px; padding-block:6px; background:color-mix(in srgb, var(--accent) 6%, var(--bg)); }
  /* While typing the rescue draft folds to one line with no keys
     (adversary pass on #3544, 2026-09-24). Its Send posts the whole draft
     in one tap, and the capped band showed that key live just above the
     reply box with one line of the draft in view. Folded it reads "Drafted
     while this chat waited … · Tap to read"; one tap opens it (app.js adds
     csw-rescue--open) with the draft above its keys. At rest nothing folds. */
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands .csw-rescue:not(.csw-rescue--open) { display:flex; align-items:center; gap:8px; min-height:44px; padding-block:0; cursor:pointer; }
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands .csw-rescue:not(.csw-rescue--open) > :not(.csw-rescue__head,.csw-rescue__fold) { display:none; }
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands .csw-rescue:not(.csw-rescue--open) > .csw-rescue__head { flex:1; min-width:0; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands .csw-rescue:not(.csw-rescue--open) > .csw-rescue__fold { display:inline; flex:none; font-size:12px; font-weight:600; color:var(--accent); }
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands:has(> .csw-rescue:not(.csw-rescue--open)) { max-height:min(100px,27%); }   /* two one-line bands fit whole */
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands:has(> .csw-rescue.csw-rescue--open) { max-height:55%; }
  html.csw-kb-open .csw-shell #csw-conv > .csw-bands:has(.csw-lookoffer[data-state="open"]) { max-height:55%; }
}

/* SQUAD CONFIRM — Origin UI / 21st.dev scrollable dialog, fixed footer.
   A quiet branch of the existing conversation; no new banner at rest. */
.sqpay-overlay{--sqpay-accent:var(--csw-payment-action);--sqpay-ink:var(--ink);--sqpay-muted:var(--ink-dim);--sqpay-border:var(--line-strong)}
html .csw-overlay.sqpay-overlay{background:rgba(0,0,0,.48);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sqpay-overlay .csw-sheet{display:flex;flex-direction:column;gap:0;padding:0!important;width:min(560px,calc(100vw - 32px));max-width:560px;max-height:min(760px,88dvh);overflow:hidden;border:1px solid var(--sqpay-border);border-radius:20px;color:var(--sqpay-ink);background:var(--bg-elev)}
.sqpay-top{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-bottom:1px solid var(--sqpay-border);flex-shrink:0;font:600 13px var(--body)}
.sqpay-top .csw-x{position:static;min-width:44px;min-height:44px;font-size:25px}
.sqpay-scroll{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.sqpay-content{padding:26px 26px 20px}
.sqpay-kicker{display:block;font:500 12px/1.5 var(--mono);letter-spacing:.1em;color:var(--sqpay-muted)}
.sqpay-heading h2{margin:14px 0 8px;font:650 clamp(27px,5vw,43px)/1.1 var(--display,var(--body));letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sqpay-heading>p{font:14px/1.6 var(--body);color:var(--sqpay-muted);max-width:42ch;margin:0}
.sqpay-state{display:flex;gap:7px;align-items:center;margin-top:15px;font:600 12px/1.4 var(--body)}
.sqpay-heading h2.sqpay-state{gap:12px}
.sqpay-state i{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:currentColor}
.sqpay-state[data-state="confirmed"]{color:var(--csw-payment-confirmed)}
.sqpay-state[data-state="mismatched"]{color:var(--sqpay-ink)}
.sqpay-state[data-state="mismatched"] i{border-radius:1px}
.sqpay-state[data-state="unreadable"] i{height:2px;width:9px;border-radius:0}
.sqpay-state[data-state="pending"] i{background:none;border:1.5px solid currentColor;box-sizing:border-box}
.sqpay-facts{margin:25px 0 0;padding:0;border-top:1px solid var(--sqpay-border)}
.sqpay-fact{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--sqpay-border);font:12px/1.5 var(--body)}
.sqpay-fact dt{color:var(--sqpay-muted)}
.sqpay-fact dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sqpay-details{border-bottom:1px solid var(--sqpay-border)}
.sqpay-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;list-style:none;font:600 12px/1.5 var(--body)}
.sqpay-details summary::-webkit-details-marker{display:none}
.sqpay-detail-toggle{width:20px;text-align:center;font:400 19px/1 var(--body);color:var(--sqpay-muted)}
.sqpay-detail-toggle::before{content:'+'}
.sqpay-details[open] .sqpay-detail-toggle::before{content:'−'}
.sqpay-details dl{margin:0}
.sqpay-details .sqpay-fact:first-child{padding-top:0}
.sqpay-details .sqpay-fact:last-child{border-bottom:0}
.sqpay-details>p{margin:0;padding:0 0 15px;font:12px/1.6 var(--body);color:var(--sqpay-muted)}
.sqpay-reply{margin-top:24px;padding:0 0 0 16px;border-left:2px solid var(--sqpay-accent)}
.sqpay-reply p{font:400 16px/1.65 var(--body);margin:8px 0}
.sqpay-reply small{font:12px/1.5 var(--body);color:var(--sqpay-muted)}
.sqpay-footer{flex-shrink:0;border-top:1px solid var(--sqpay-border);padding:14px 22px 20px;background:var(--bg-elev)}
.sqpay-status{font:12px/1.55 var(--body);margin:0 0 12px;color:var(--sqpay-muted)}
.sqpay-actions{display:flex;gap:10px}
.sqpay-actions button{flex:1;min-height:44px;border:1px solid var(--sqpay-border);border-radius:9px;background:transparent;color:var(--sqpay-ink);font:600 12px var(--body);padding:10px;cursor:pointer}
.sqpay-actions [data-sq="draft"]:not(:disabled){background:var(--sqpay-accent);border-color:var(--sqpay-accent);color:var(--csw-payment-on-action)}
.sqpay-actions button:disabled{opacity:.55;cursor:default}
.sqpay-overlay :is(button,summary):focus-visible{outline:2px solid var(--sqpay-accent);outline-offset:3px}
.sqpay-content[aria-busy="true"]{opacity:.65;transition:opacity .12s}
.sqpay-notices{margin:0 26px 24px;padding-top:18px;border-top:1px solid var(--sqpay-border);font:12px/1.6 var(--body)}
.sqpay-notices[hidden]{display:none}
.sqpay-notices h3{font:600 14px/1.4 var(--body);margin:0 0 8px}
.sqpay-notices p{margin:8px 0;color:var(--sqpay-muted)}
.sqpay-notice-row{margin-top:16px;padding-top:12px;border-top:1px solid var(--sqpay-border)}
.sqpay-notices .sqpay-notice-ref{color:var(--sqpay-ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sqpay-notices button{min-height:44px;padding:10px 12px;border:1px solid var(--sqpay-border);border-radius:9px;background:transparent;color:var(--sqpay-ink);font:600 12px var(--body);cursor:pointer}
.sqpay-notices button:disabled{opacity:.55;cursor:default}
@media(max-width:600px){.sqpay-overlay{align-items:flex-end;padding:12px 0 0}.sqpay-overlay .csw-sheet{width:100%;max-width:none;max-height:calc(100dvh - 12px);border-radius:20px 20px 0 0;border-bottom:0;animation:csw-sheet-up var(--dur-m) var(--ease-emph-decel)}.sqpay-content{padding:20px}.sqpay-footer{padding:14px 20px max(18px,env(safe-area-inset-bottom))}.sqpay-fact{grid-template-columns:90px minmax(0,1fr);gap:12px}.sqpay-top{padding:9px 16px}.sqpay-kicker,.sqpay-details>p,.sqpay-reply small,.sqpay-status{font-size:12px}}
@media(prefers-reduced-motion:reduce){.sqpay-overlay,.sqpay-overlay .csw-sheet,.sqpay-content{animation:none!important;transition:none!important}}

/* CS preparation and evidence — shared across the existing skins. */
.csw-seven { color:var(--ink); font-family:var(--body,Archivo,sans-serif); }
.csw-seven.csw-overlay { top:var(--vv-offset-top,0px); bottom:auto; height:var(--app-height,100dvh); box-sizing:border-box; }
.csw-seven .csw-sheet { display:flex; flex-direction:column; max-height:calc(var(--app-height,100dvh) - 16px); overflow:hidden; }
.csw-seven .csw-sheet__head { flex:none; align-items:center; padding:18px 20px 12px; }
.csw-seven .csw-sheet__head h3 { margin:0; font:700 19px/1.25 var(--body); letter-spacing:-.025em; }
.csw-seven__body { padding:4px 20px 24px; min-height:0; overflow:auto; overscroll-behavior:contain; }
.csw-seven :is(button,a), .csw-seven-search button { font:600 14px/1.35 var(--body); cursor:pointer; }
.csw-seven button:not(.csw-x), .csw-seven__actions a { min-height:44px; padding:10px 14px; border:1px solid var(--line-strong,var(--line)); border-radius:12px; background:var(--bg-card); color:var(--ink); text-decoration:none; }
.csw-seven :is(button,a,summary,textarea):focus-visible, .csw-seven-search button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.csw-seven button:disabled { cursor:default; opacity:.6; }
.csw-seven.csw-overlay button.csw-seven__primary { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.csw-seven__eyebrow { font-size:12px; color:var(--ink-dim); margin:0 0 18px; }
/* The question beside the draft (vet 2026-09-24, fault 11): the review sheet
   quotes what the customer last said, and its cover lets the chat show
   through instead of hiding it behind solid black. */
html .csw-seven.csw-overlay { background:rgba(0,0,0,.45); -webkit-backdrop-filter:none; backdrop-filter:none; }
.csw-seven__asked { margin:0 0 18px; padding:2px 0 2px 12px; border-left:2px solid var(--line-strong,var(--line)); }
.csw-seven__asked .csw-seven__eyebrow { margin:0 0 4px; }
.csw-seven__asked p:last-child { margin:0; font-size:15px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.csw-seven__draft { font-size:18px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; padding:0 0 20px; }
.csw-seven__muted, .csw-seven__activity small { font-size:12px; line-height:1.55; color:var(--ink-dim); }
.csw-seven__actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.csw-seven__footer { flex:none; margin:0; padding:12px 16px 0; border-top:1px solid var(--line); background:var(--bg-elev); }
.csw-seven__chips { display:flex; gap:8px; margin-bottom:16px; }
.csw-seven__evidence { border-block:1px solid var(--line); margin:16px 0; }
.csw-seven__evidence summary { min-height:48px; padding:14px 0; cursor:pointer; font-size:14px; font-weight:600; }
.csw-seven__evidence > div { padding:0 0 14px; color:var(--ink-dim); font-size:13px; line-height:1.55; }
.csw-seven label { display:block; font-size:13px; font-weight:600; margin:16px 0; }
.csw-seven textarea { scroll-margin-block:8px; display:block; resize:vertical; width:100%; box-sizing:border-box; min-height:72px; max-height:160px; background:var(--bg-card); color:var(--ink); border:1px solid var(--line-strong,var(--line)); border-radius:12px; padding:12px; font:400 16px/1.5 var(--body); margin-top:8px; }
.csw-seven textarea[readonly] { resize:none; color:var(--ink-dim); }
.csw-seven__preview { display:grid; place-items:center; border:1px solid var(--line); background:var(--bg-card); border-radius:16px; overflow:hidden; }
.csw-seven__preview :is(img,video) { display:block; max-width:100%; width:auto; max-height:calc(var(--app-height,100dvh) * .38); object-fit:contain; }
.csw-seven .csw-seven__choice, .csw-seven-search .csw-seven__choice { display:flex; width:100%; min-height:60px; padding:12px; gap:16px; align-items:center; justify-content:space-between; text-align:left; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; }
.csw-seven__choice > span:first-child { min-width:0; }
.csw-seven__choice small { display:block; color:var(--ink-dim); font-size:12px; font-weight:400; line-height:1.45; margin-top:4px; overflow-wrap:anywhere; }
.csw-seven__tabs { display:flex; gap:6px; padding-block:8px; }
.csw-seven__tabs button { flex:1; padding-inline:10px!important; }
.csw-seven__tabs button[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.csw-seven__notice-group { border-bottom:1px solid var(--line); }
.csw-seven__notice-group > summary { display:flex; justify-content:space-between; align-items:center; min-height:54px; cursor:pointer; font-size:15px; font-weight:600; gap:12px; }
.csw-seven__notice-group > summary b { color:var(--ink-dim); font:500 12px var(--body,Archivo,sans-serif); }
.csw-seven__notice { border-top:1px solid var(--line); padding:16px 0; }
.csw-seven__notice h4 { font-size:15px; line-height:1.45; margin:8px 0 4px; overflow-wrap:anywhere; }
.csw-seven__notice p { font-size:13px; line-height:1.5; margin:4px 0; overflow-wrap:anywhere; }
.csw-seven__notice small { color:var(--ink-dim); font-size:12px; }
.csw-seven__notice.is-read h4 { font-weight:500; }
.csw-seven__empty { padding:28px 0; color:var(--ink-dim); font-size:14px; }
.csw-seven-search { margin:8px 0 16px; border-block:1px solid var(--line); }
.csw-seven__activity { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:12px; font-size:13px; line-height:1.5; }
.csw-seven__metric-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:12px 0; border-top:1px solid var(--line); font-size:12px; }
.csw-seven__metric-row strong { text-transform:capitalize; }
.csw-seven__timeline { list-style:none; margin:18px 0; padding:0; }
.csw-seven__timeline-step { display:grid; grid-template-columns:18px 1fr; gap:10px; position:relative; padding-bottom:20px; }
.csw-seven__timeline-step:not(:last-child)::before { content:''; position:absolute; width:1px; background:var(--line-strong,var(--line)); top:14px; bottom:0; left:6px; }
.csw-seven__timeline-dot { width:13px; height:13px; border:1px solid var(--ink-dim); border-radius:50%; margin-top:3px; box-sizing:border-box; }
.csw-seven__timeline-step.is-recorded .csw-seven__timeline-dot { background:var(--bg-card); border:3px solid var(--ink); }
.csw-seven__timeline-step b { display:block; color:var(--ink); font-size:13px; margin-bottom:4px; }
.csw-seven__timeline-step :is(span,small) { font-size:12px; color:var(--ink-dim); }
.csw-seven__timeline-step small { display:block; margin-top:4px; }
.csw-stage__row--prepared .csw-stage__media > img { width:100%; height:100%; object-fit:cover; border-radius:9px; }
.csw-stage__queue-count { position:absolute; right:0; bottom:0; padding:3px 5px; background:var(--ink); color:var(--bg); font:700 12px var(--body,Archivo,sans-serif); border-radius:4px; }
@media(max-width:600px) { .csw-seven .csw-sheet { border-radius:20px 20px 0 0; width:100%; max-height:calc(var(--app-height,100dvh) - 8px); } .csw-seven__body { padding-inline:16px; } .csw-seven__draft { font-size:17px; } }
@media(prefers-reduced-motion:no-preference) { .csw-seven .csw-sheet { animation:csw-seven-enter .2s ease-out; } .csw-seven button { transition:background-color .16s ease-out,transform .12s ease-out; } .csw-seven button:active:not(:disabled) { transform:translateY(1px); } }
@keyframes csw-seven-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
/* Quick replies → Library (17 Oct 2026): choose, facts, preview, then a
   deliberate use. House components above; each step eases in, and under
   Reduce Motion it only fades. */
.csw-lib__switch { margin:-4px 0 8px; }
[data-lib-pane][hidden] { display:none; }
.csw-lib__step { animation:csw-seven-enter var(--dur-m) var(--ease-emph-decel); }
.csw-lib h4 { margin:14px 0 4px; font:700 17px/1.3 var(--body); letter-spacing:-.02em; overflow-wrap:anywhere; }
.csw-lib h4:focus { outline:none; }
.csw-lib label { margin:14px 0; }
.csw-lib__label { margin:18px 0 0; font-size:13px; font-weight:600; color:var(--ink); }
.csw-lib .csw-search { display:block; width:100%; box-sizing:border-box; min-height:44px; margin:8px 0 0; border-radius:12px; font-size:16px; }
.csw-lib .csw-seven__tabs { flex-wrap:wrap; }
.csw-lib .csw-seven__choice small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.csw-lib__card { margin:12px 0 8px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--bg-card); color:var(--ink); font-size:15px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.csw-lib__card--example { color:var(--ink-dim); font-size:13px; }
.csw-lib__foot { margin:0 0 8px; font-size:12px; color:var(--ink-mute); }
.csw-lib__btn { display:inline-block; padding:1px 8px; border:1px solid var(--line); border-radius:999px; color:var(--ink-dim); }
.csw-lib__truth { margin:12px 0 0; padding-left:18px; font-size:12px; line-height:1.55; color:var(--ink-dim); }
.csw-lib button.csw-seven__primary { width:100%; background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.csw-lib [data-lib-status]:empty { display:none; }
.csw-lib [data-lib-status].is-err { color:var(--danger); }
@media(prefers-reduced-motion:reduce) { .csw-lib__step { animation:csw-fade var(--dur-4) linear; } }


/* A small recorded next step; conversation space stays primary. */
.csw-next { padding:0 16px; max-height:28%; overflow-y:auto; }
.csw-next summary.csw-next__main { display:flex; align-items:center; gap:12px; }
.csw-next__copy { min-width:0; flex:1; }
.csw-next__label { font-size:11px; letter-spacing:.07em; color:var(--ink-mute); }
.csw-next__title { display:block; color:var(--ink); font-size:15px; line-height:1.4; font-weight:600; margin:3px 0; overflow-wrap:anywhere; }
.csw-next__owner { display:block; font-size:14px; line-height:1.5; margin:0; color:var(--ink-dim); }
.csw-next button.csw-next__open { flex-shrink:0; border-radius:10px; font-size:14px; background:transparent; }
.csw-next__details>summary { font-size:13px; min-height:64px; padding:8px 0; color:var(--ink-dim); list-style:none; }
.csw-next__details>summary::-webkit-details-marker { display:none; }
.csw-next__caret { flex:none; font-size:22px; }
.csw-next__details[open] .csw-next__caret { transform:rotate(180deg); }
.csw-next__actions { display:flex; gap:8px; padding-top:6px; }
.csw-next__details .scase-brief-body { padding:0 0 12px; font-size:14px; max-height:24vh; }
.csw-next[data-state="unknown"] .csw-next__title { display:block; color:var(--ink-dim); }
.csw-seven :is(.csw-seven__muted,.csw-seven__eyebrow,.csw-seven__choice small,.csw-seven__evidence>div,.csw-seven__notice p,.csw-seven__activity,.csw-seven__timeline-step b) { font-size:14px; }
@media(max-width:879px) {
 .csw-next { padding:0 12px; }
 .csw-next__title { font-size:14px; }
 .csw-next__label { display:none; }
 .csw-next__owner { display:block; font-size:14px; }
 html.csw-kb-open .csw-next__owner { display:none; }
 /* One line while typing (vet 2026-09-24, fault 10): the full-width row is
    still the tap that opens the step, and an open step gets its room back.
    The row keeps the 44px thumb floor (floor-3 verdict, 2026-09-26): 12px
    of chat is the price, and the chat still shows six lines. */
 html.csw-kb-open .csw-next__details>summary { min-height:44px; padding:0; }
 html.csw-kb-open .csw-next__title { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 html.csw-kb-open .csw-next__caret { font-size:18px; }
 html.csw-kb-open .csw-next { padding:0 10px; max-height:45px; }
 html.csw-kb-open .csw-next:has(.csw-next__details[open]) { max-height:45%; }
}
@media(max-height:500px) and (max-width:879px) {
 .csw-next__owner { display:none; }
 .csw-next__details>summary { min-height:44px; padding:0; }
 .csw-next { padding:0 10px; max-height:48px; }
}

/* Current enquiry guidance: reuse the desk's own type and colour tokens. */
.csw-business-followups { margin-block: 14px; border-block: 1px solid var(--eon-line); }
.csw-business-followups > summary {
  min-height: 48px; display: flex; align-items: center; gap: 12px;
  padding: 12px; cursor: pointer; font: inherit; color: var(--eon-ink);
}
.csw-business-followups > summary::after { content: '+'; margin-left: auto; }
.csw-business-followups[open] > summary::after { content: '−'; }
.csw-business-followups > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.csw-business-followups > p { margin: 0; padding: 0 12px 12px; color: var(--eon-ink-mute); font-size: 13px; line-height: 1.5; }

/* EVERY LIST TAB IN SIGHT ON A WIDE SCREEN (seat-B vet A15, 2026-09-26).
   At 1280 the list column is 360px and the five tabs need about 500, so
   "Mine" was cut in half and "Recovery" sat out of sight: a mouse has no
   sideways swipe and the row hides its scrollbar. From the two-pane width
   up the tabs wrap onto a second line instead. On a phone the row keeps
   its sideways scroll and the fade at its edge, which a thumb reads.
   (House's own tab row wraps the same way in its section below.) */
@media (min-width:880px) {
  .csw-filters { flex-wrap:wrap; overflow-x:visible; row-gap:6px; padding-right:14px;
    -webkit-mask-image:none; mask-image:none; }
}

/* ARCHIVO ONLY — figures (seat-B vet A13, 2026-09-26). The desk's small
   labels were set in a monospace face (--mono and 20 literal fallbacks);
   they speak Archivo now. Where digits tick or stand in a column (times,
   waits, counts, amounts) they keep one width each, so a clock does not
   jitter and a column still lines up. */
:is(.csw-shell,.csw-overlay,.csw-toasts) :is(.csw-thread__time,.csw-bub__t,.csw-daydiv,.csw-filter__c,
  .csw-filter__w,.csw-windial,.csw-voice__t,.csw-unread--n,.csw-av__flag,.csw-ring,.csw-ring__tot,
  .csw-cstat__n,.csw-tplcard__total,.csw-tplcard__ord,.csw-seg__badge,.csw-queue__c,.csw-drawer__c,
  .csw-rep__rank,.csw-stack__more,.csw-album__more,.csw-msearch__ts,.csw-recbar__t,.csw-csat-row__n,
  .csw-csat-row__v,.csw-ledger__n,.csw-ledger__chg,.csw-engine-counts b,.csw-engine-stage__n,
  .csw-receipt-trail__event time,.csw-note__meta,.csw-oline__q,.csw-fleet__v,.csw-fleet__money,
  .csw-holdroom__n,.csw-clock,.csw-stage__s,.csw-piece__p,.crd-quote__amt,.crd-quote__age,.crd-num__v,
  .csw-hq__ring .num,.csw-hticket__wait,.csw-deskring__v,.csw-deskhold__cd,.csw-askchip__c,
  .hr-kpi__v,.hr-rep__rank,.hr-rep__pts b,.hr-equity__v) { font-variant-numeric:tabular-nums; }

/* The executive performance sheet is attached to body by cswOverlay. */
.csw-performance { padding:4px 16px 24px; color:var(--ink); font:14px/1.5 var(--body); overflow-wrap:anywhere; }
.csw-performance section { padding:20px 0; border-top:1px solid var(--line); }
.csw-performance h3 { margin:0 0 12px; font:600 20px/1.3 var(--display); }
.csw-performance h4 { margin:12px 0 6px; font:600 15px/1.4 var(--body); }
.csw-performance p { margin:8px 0; color:var(--ink-dim); }
.csw-performance [aria-busy="true"] { min-height:120px; }
.csw-performance__facts { margin:12px 0; }
.csw-performance__facts > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 16px; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.csw-performance dt { color:var(--ink-dim); }
.csw-performance dd { margin:0; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.csw-performance summary { min-height:44px; padding:12px 0; cursor:pointer; color:var(--ink); }
.csw-performance .csw-mini { min-height:44px; }
.csw-performance :is(summary,button,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.csw-performance :is(summary,button):active { opacity:.7; }
.csw-performance__person { padding:4px 0 12px; border-top:1px solid var(--line-soft); }

/* Shared workspace entry labels. Above the HOUSE-only floor section. */
#csw .csw-burger { width:auto; min-width:44px; min-height:44px; padding:8px 12px; }
#csw .csw-burger b { font:600 13px/1.3 var(--body); white-space:normal; }
#csw .csw-topright { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px 12px; min-width:0; }
#csw .csw-notifications-key { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:var(--r-squircle); cursor:pointer; }
#csw .csw-notifications-key svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#csw .csw-notifications-key { transition:transform var(--dur-2) var(--ease-emph),background var(--dur-3) var(--ease-emph); }
#csw .csw-notifications-key:active { transform:scale(.94); }
@media (hover:hover) {
  #csw .csw-notifications-key:hover { background:var(--bg-card-2); }
}
#csw .csw-burger:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
#csw .csw-notifications-key:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#csw :is(.csw-burger,.csw-notifications-key):active { opacity:.7; }
@media (max-width:879px) {
  #csw .csw-topbar { grid-template-columns:auto minmax(0,1fr) 44px; gap:4px 10px; padding:8px 12px; }
  #csw .csw-topleft { grid-column:1; grid-row:1; gap:6px; }
  #csw .csw-title { grid-column:2; grid-row:1; font-size:20px; text-align:center; }
  #csw .csw-topright { display:contents; }
  #csw .csw-notifications-key { grid-column:3; grid-row:1; }
  #csw .csw-sub { grid-column:1 / -1; grid-row:2; text-align:left; }
}

/* ==========================================================
   HOUSE floor 3 — Switchboard remap (WS-B, 2026-08-06)
   Approved mockup: EON HOUSE artifact d6ad9394, floor 3.
   HARD INVARIANT (flow convention): every rule below is scoped
   [data-theme="house"] — Classic/Light/Flow render byte-identical
   with this section present. tests/test_house_switchboard.py
   parses this section and fails on any unscoped selector.
   ========================================================== */

/* Calm row boundaries; the selected conversation keeps a fixed accent rail. */
[data-theme="house"] .csw-thread {
  position: relative;
  overflow: hidden;
  padding-top:14px; padding-bottom:14px;
}
[data-theme="house"] .csw-thread::before {
  content: '';
  position: absolute;
  top: 0; left: 10px; right: 10px;
  border-top: 1px solid var(--line-soft);
}
[data-theme="house"] .csw-thread.on { background:color-mix(in srgb,var(--accent) 7%,var(--bg)); }
[data-theme="house"] .csw-thread.on::before { top:12px; bottom:12px; left:0; right:auto; width:3px; border:0; border-radius:0 3px 3px 0; background:var(--accent); }

/* ── the wait is the loudest number in the column ── */
[data-theme="house"] .csw-thread__time.csw-time--wait {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* Operator, 2026-08-07: "reduce the size of the time in cs rep chat, is
     bigger than classic's". 17px made the wait the loudest thing on the
     row — which was the intent, and the intent was wrong: shouting a
     number is not the same as restructuring the desk around it. One step
     above classic's 10.5px micro is enough to read as the row's signal
     without dominating it. */
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
}
[data-theme="house"] .csw-thread__time.csw-time--wait.csw-time--soon { color: var(--warn); }
[data-theme="house"] .csw-thread__time.csw-time--wait.csw-time--late { color: var(--danger); }

/* ── the tear: a cleared thread leaves like a ticket off the rail ── */
[data-theme="house"] .csw-thread.hs-tearing {
  animation: hs-cs-tear 0.45s cubic-bezier(0.5, 0.1, 0.7, 0.4) forwards;
  pointer-events: none;
}
@keyframes hs-cs-tear {
  0%   { transform: none; opacity: 1; max-height: 120px; }
  60%  { transform: translateX(46px) rotate(3deg); opacity: 0; max-height: 120px; }
  100% { transform: translateX(46px) rotate(3deg); opacity: 0; max-height: 0;
         padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; }
}

/* ── the tray opens as a LABELLED PANEL; More reveals the second bank ──
   2026-08-30 — the close bank surfaces on the house look. The Close
   Dock (2026-08-29, the re-dress) put the keys that end a sale at the
   head of the classic tray — but that pass was rightly barred from
   this registered section, so THIS law still led with the 2026-08-06
   five (Suggest, Product, Pay link, Photo) and display:none'd the new
   dock behind ⋯ More. House is the default skin on every device since
   2026-08-07: the desk's best new keys — including Hold at store, the
   counter close on a brand taking ~90% of its money at counters — were
   invisible twice over, behind the ＋ (operator directive, kept) and
   then behind ⋯ More (this stale law, fixed here).
   The treatment is the switchboard's own: a patch panel's engraved
   label strip above each bank of keys. Strip one — "Close the sale" —
   sits over the money bank (Hold at store wears the accent, the only
   filled key; Send total, Account, Pay link take the money on the
   desk's real rails; ✦ Suggest keeps the AI's violet and its seat).
   ⋯ More reveals strip two — "More tools" — over everything else, so
   the reveal reads as a second labelled bank, never a spill. Photo and
   Product move one press deeper; NOTHING is removed, and the ask key
   stays behind More by its own law (never a resting key). The strips
   are flex items of the wrapped row (order 0 and 8, full basis), so
   they cost height only while the tray is open — at rest the composer
   is one clean row, exactly as directed. */
[data-theme="house"] .csw-tray .csw-tool { order: 9; }
[data-theme="house"] .csw-tray .csw-tool[data-tool="hold"]    { order: 1; }
[data-theme="house"] .csw-tray .csw-tool[data-tool="order"]   { order: 2; }
[data-theme="house"] .csw-tray .csw-tool[data-tool="account"] { order: 3; }
[data-theme="house"] .csw-tray .csw-tool[data-tool="paylink"] { order: 4; }
[data-theme="house"] .csw-tray .csw-tool[data-tool="suggest"] { order: 5; }
[data-theme="house"] .csw-tray .csw-tool--more { order: 6; }
[data-theme="house"] .csw-tray:not(.house-all) .csw-tool[data-tool]:not([data-tool="hold"]):not([data-tool="order"]):not([data-tool="account"]):not([data-tool="paylink"]):not([data-tool="suggest"]) { display: none; }
/* the bank stands level: every key on the money row carries the 44px
   floor the house sheets already hold (the shared .csw-tool rule stops
   at 40px for the whole tray; the second bank keeps it) */
[data-theme="house"] .csw-tray .csw-tool[data-tool="hold"],
[data-theme="house"] .csw-tray .csw-tool[data-tool="order"],
[data-theme="house"] .csw-tray .csw-tool[data-tool="account"],
[data-theme="house"] .csw-tray .csw-tool[data-tool="paylink"],
[data-theme="house"] .csw-tray .csw-tool[data-tool="suggest"],
[data-theme="house"] .csw-tray .csw-tool--more { min-height: 44px; min-width: 44px; }
/* the engraved strips — mono micro signage, the voice the ask sheet's
   labels already speak; uppercase by transform so a screen reader gets
   words, not spelling */
[data-theme="house"] .csw-tray::before {
  content: 'Close the sale';
  order: 0; flex-basis: 100%;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--eon-ink-mute); line-height: 1; padding-top: 2px;
}
[data-theme="house"] .csw-tray:not([data-guidance="customer"])::before { content: 'Conversation tools'; }
[data-theme="house"] .csw-tray::after {
  content: 'More tools';
  order: 8; flex-basis: 100%;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--eon-ink-mute); line-height: 1;
  border-top: 1px dashed var(--eon-line-strong); padding-top: 9px; margin-top: 2px;
}
[data-theme="house"] .csw-tray:not(.house-all)::after { display: none; }
/* ⋯ More REVEALED TEN TOOLS AND SHOWED NONE OF THEM (vet 2026-08-09).
   .csw-tray is a flex row with overflow-x:auto and BOTH scrollbars hidden,
   and the ten extra keys carry order:9 — so expanding put every one of them
   past the right edge: measured scrollWidth 1236 against clientWidth 351,
   with ⚡ Quick at x=1006 in a 375px viewport. Folded and expanded rendered
   byte-identically; the only visible change was the label. A rep tapped the
   affordance that promises more tools, saw nothing move, and concluded the
   desk was broken — while the closed-window banner told them to press ⚡
   Quick, 885px off screen. The wrap is the second chip row this file's own
   comment anticipated.

   Folded has the same disease in miniature: five keys measure 417px against
   the same 351px clip, so ⋯ More rendered 41% clipped with a DEAD CENTRE
   (elementFromPoint at its own middle returned .csw-composer). Wrapping
   BOTH states is the fix that cannot rot: no key can be clipped, none can
   be hidden, and it survives any future label or tool without arithmetic.
   The height lands only when the rep opens the tray — at rest it is behind
   the ＋, which is the operator's actual standing directive.

   ⛔ The first attempt pinned ⋯ More sticky to the right edge instead. It
   made More whole, and put its opaque box over 55% of the PHOTO key — a
   dead zone moved, not removed (caught by the design verifier; source pins
   could never see it). It also introduced a box-shadow into a file whose
   FLAT LAW says none. Wrapping needs neither. */
[data-theme="house"] .csw-tray { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
/* The [hidden]-override that used to live here is gone (2026-08-09):
   app.js removes the attribute under house instead. No rule inside
   .csw-conv may declare a [hidden] element visible — that exception
   is what the new display:none !important would have silently eaten. */

/* ── masked identity gets the mono voice ── */
[data-theme="house"] .csw-conv__name[title] { font-variant-numeric: tabular-nums; }

/* ── the fold (WS-B2, 2026-08-07): the thread-header mask is ALWAYS
      visible signage — the old name-transform masked only phone-shaped
      display names and matched ZERO live threads in a 30-day window
      (design verdict floor-3@478b6f3: INVISIBLE). ── */
[data-theme="house"] .csw-mask { font-family:var(--mono); font-size:var(--fs-micro); color:var(--ink-mute); letter-spacing:.02em; white-space:nowrap; }

/* ── the fold: queue head — count, cleared, the shift ring ── */
[data-theme="house"] .csw-hq { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:4px 14px 8px; }
/* .csw-hq__eyebrow retired 2026-08-09 with the "N to work" line —
   dead rules grade PRESENT in a manifest, so they leave with it. */
[data-theme="house"] .csw-hq__ring { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-micro); color:var(--ink-dim); }
[data-theme="house"] .csw-hq__ring svg { width:24px; height:24px; transform:rotate(-90deg); }
[data-theme="house"] .csw-hq__ring circle { fill:none; stroke-width:3.4; }
[data-theme="house"] .csw-hq__ring .b { stroke:var(--bg-card); }
[data-theme="house"] .csw-hq__ring .f { stroke:var(--accent); stroke-linecap:round; stroke-dasharray:63; stroke-dashoffset:63; transition:stroke-dashoffset .6s var(--ease-emph); }
/* A single quiet utility row. Search occupies the same space on demand. */
[data-theme="house"] .csw-queuebar { position:relative; display:flex; align-items:center; gap:6px; padding:4px 14px; min-height:52px; z-index:4; background:var(--bg); }
[data-theme="house"] .csw-queuekey { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--ink-dim); cursor:pointer; }
[data-theme="house"] .csw-queuekey svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
[data-theme="house"] .csw-queuekey:active { background:var(--bg-card); color:var(--accent); }
[data-theme="house"] .csw-queuekey:focus-visible, [data-theme="house"] .csw-shift summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
[data-theme="house"] .csw-queuebar .csw-searchwrap { position:absolute; inset:4px 14px; z-index:2; padding:0; display:flex; align-items:center; gap:4px; background:var(--bg); }
[data-theme="house"] .csw-queuebar .csw-searchwrap[hidden] { display:none; }
[data-theme="house"] .csw-queuebar .csw-searchwrap__i { left:12px; transform:translateY(-50%); }
[data-theme="house"] .csw-queuebar .csw-searchbar { min-width:0; min-height:44px; flex:1; font-size:16px; }
[data-theme="house"] .csw-queuebar .csw-searchbar:focus { outline:2px solid var(--accent); outline-offset:-2px; }
[data-theme="house"] .csw-queuebar .csw-hq { display:flex; flex:1; flex-wrap:wrap; min-width:0; align-items:center; gap:4px 8px; padding:0; }
/* A wrapped phone key's 46px target reaches 8px above its 30px face.
   Leave 4px clear of the previous line; row-gap adds nothing to one line. */
@media (max-width:879px) {
  [data-theme="house"] .csw-queuebar .csw-hq { row-gap:12px; }
}
[data-theme="house"] .csw-shift { position:static; }
[data-theme="house"] .csw-shift summary { min-height:44px; padding:0 4px; cursor:pointer; list-style:none; gap:6px; }
[data-theme="house"] .csw-shift summary::-webkit-details-marker { display:none; }
[data-theme="house"] .csw-shift summary::after { content:""; width:5px; height:5px; margin-left:2px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }
[data-theme="house"] .csw-shift[open] summary::after { transform:rotate(225deg); }
[data-theme="house"] .csw-shift summary svg { width:18px; height:18px; }
[data-theme="house"] .csw-shift summary .b { stroke:var(--ink-mute); }
[data-theme="house"] .csw-shell .csw-shift summary .num { font:600 13px var(--body); font-variant-numeric:tabular-nums; color:var(--ink); }
[data-theme="house"] .csw-hq__scope { font:400 var(--fs-small) var(--body); color:var(--ink-dim); }
[data-theme="house"] .csw-shift__detail { position:absolute; z-index:1; top:calc(100% - 2px); left:14px; right:14px; padding:14px; background:var(--bg-card); border:1px solid var(--line-strong); color:var(--ink); font:var(--fs-small)/1.5 var(--body); white-space:normal; }
[data-theme="house"] .csw-shift__detail strong { display:block; font-size:var(--fs-body); }
[data-theme="house"] .csw-shift__detail p { margin:6px 0 0; color:var(--ink-dim); }
[data-theme="house"] .csw-queuebar .csw-rehearse { margin-left:auto; padding:0; border:0; background:transparent; letter-spacing:0; font:var(--fs-small)/1.4 var(--body); text-transform:none; color:var(--ink-dim); }
[data-theme="house"] .csw-queuebar .csw-rehearse i { flex:none; animation:none; }
[data-theme="house"] .csw-hq__team {
  border:1px solid var(--line); background:transparent; color:var(--ink-mute); font-family:var(--body); font-size:var(--fs-small); font-weight:600; padding:5px 10px; border-radius:var(--r-pill);
  /* Invisible phone target; 46px keeps the +/-22px probes inside the edge. */
  @media (max-width:879px) {
    position:relative;
    &::before { content:""; position:absolute; top:50%; left:50%; width:max(100%, 46px); height:max(100%, 46px); transform:translate(-50%, -50%); pointer-events:auto; }
  }
}

/* ── the fold: the working strip — a claimed customer, held in hand ── */
[data-theme="house"] .csw-hworking { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 10%, transparent); border-radius:var(--r-md); padding:9px 13px; margin:0 0 10px; font-size:var(--fs-small); color:var(--ink-dim); cursor:pointer; }
[data-theme="house"] .csw-hworking b { color:var(--ink); font-weight:700; }
[data-theme="house"] .csw-hworking__chip { font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }

/* ── the fold: tickets — perforated top, reason line, wait, claim ── */
[data-theme="house"] .csw-hticket { position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px; margin:0 0 10px; cursor:pointer; }
[data-theme="house"] .csw-hticket::before { content:''; position:absolute; top:0; left:10px; right:10px; border-top:1px dashed var(--line-strong); }
[data-theme="house"] .csw-hticket:focus-visible, [data-theme="house"] .csw-hworking:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-theme="house"] .csw-hticket__top { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
[data-theme="house"] .csw-hticket__top b { font-weight:700; font-size:var(--fs-body); color:var(--ink); }
[data-theme="house"] .csw-hticket__ch { width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
[data-theme="house"] .csw-hticket__ch.ig { background:var(--g-violet); }
[data-theme="house"] .csw-hticket__why { display:flex; align-items:baseline; gap:6px; color:var(--ink-mute); font-size:var(--fs-small); line-height:1.35; }
[data-theme="house"] .csw-hticket__i { flex:none; width:14px; text-align:center; color:var(--ink-dim); font-family:var(--mono); }
[data-theme="house"] .csw-hticket__foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; }
/* The wait keeps the left edge; the two keys sit together on the right so
   the primary action stays where the thumb already goes. */
[data-theme="house"] .csw-hticket__foot .csw-hdone { margin-left:auto; }
/* wait sizing follows the operator's 2026-08-07 ruling on the row time:
   a signal, not a shout — one honest step above the reason line. */
[data-theme="house"] .csw-hticket__wait { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-body); font-weight:500; color:var(--ink-dim); min-height:1em; }
[data-theme="house"] .csw-hticket__wait.warm { color:var(--warn); }
[data-theme="house"] .csw-hticket__wait.hot { color:var(--danger); }
/* 44px min-height, both keys (vet 2026-08-09): the claim measured 32px —
   under the 44pt/48dp floor on the most-tapped control on the desk, and a
   miss 8px low hit the CARD, which opened the thread, stamped /seen and
   spent an LLM suggest-reply while recording no claim at all. */
[data-theme="house"] .csw-hclaim { background:var(--accent); color:var(--accent-text); font-weight:700; font-size:var(--fs-small); font-family:var(--body); min-height:44px; padding:7px 16px; border-radius:var(--r-md); border:none; }
[data-theme="house"] .csw-hclaim:active { transform:scale(.97); }
/* Done is the quiet twin of the claim: same target, no fill — clearing is
   deliberate, never the accident of a mis-aimed thumb. */
[data-theme="house"] .csw-hdone { background:transparent; color:var(--ink-mute); font-weight:600; font-size:var(--fs-small); font-family:var(--body); min-height:44px; padding:7px 14px; border-radius:var(--r-md); border:1px solid var(--line); }
[data-theme="house"] .csw-hdone:active { transform:scale(.97); }
[data-theme="house"] .csw-hdone:hover { color:var(--ink-dim); border-color:var(--line-strong); }
/* Same 44px floor as the ticket's keys — it was 36px, which broke the very
   rule this diff establishes (design verifier, 2026-08-09). A control is
   thumb-sized or it is a trap, and the strip has room. */
[data-theme="house"] .csw-hworking__done { background:transparent; color:var(--ink-mute); font-weight:600; font-size:var(--fs-small); font-family:var(--body); min-height:44px; padding:5px 14px; border-radius:var(--r-md); border:1px solid var(--line); margin-left:auto; }
[data-theme="house"] .csw-hworking__done:active { transform:scale(.97); }
[data-theme="house"] .csw-hticket.hs-tearing { animation:hs-cs-tear-ticket .45s cubic-bezier(0.5, 0.1, 0.7, 0.4) forwards; pointer-events:none; }
/* The 200px cap was set when a ticket topped out at 177px. Tags (2026-08-09)
   take a 5-chip card to 246px measured at 375px — the cap clipped the wait
   number and the claim button on the very frame the rep tapped them. 340px
   clears the tallest card and still collapses to 0 by 100%. */
@keyframes hs-cs-tear-ticket {
  0%   { transform:none; opacity:1; max-height:340px; }
  60%  { transform:translateX(46px) rotate(3deg); opacity:0; max-height:340px; }
  100% { transform:translateX(46px) rotate(3deg); opacity:0; max-height:0;
         padding-top:0; padding-bottom:0; margin-bottom:0; border-width:0; }
}

/* ── the fold: the honesty footer keeps its voice in the queue ── */
[data-theme="house"] .csw-hiddenfoot { padding:10px 14px; font-size:var(--fs-micro); color:var(--ink-mute); text-align:center; }

/* ── 2026-08-08 — the desk refined (house-scoped R2/R3/R7) ─────────
   R2: the lens row — All / Mine / Recovery become one tap; "Queue" is
   the book. Same quiet chip grammar as the department queue chips. */
/* 2026-08-09: five keys now (Priority · Needs reply · All · Mine ·
   Recovery — the operator asked for classic's two work tabs back), and
   two of them carry counts. At 375px five pills overrun the row, so it
   scrolls exactly like the classic filter row it replaced, fade and
   all. The keys are inline-flex so a count sits BESIDE the word instead
   of jammed against it. */
[data-theme="house"] .csw-hlens {
  display:flex; gap:6px; padding:7px 14px 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,.12));
  mask-image:linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,.12));
  padding-right:34px;
}
[data-theme="house"] .csw-hlens::-webkit-scrollbar { display:none; }
[data-theme="house"] .csw-hlens__k {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border:1px solid var(--line); background:transparent; color:var(--ink-mute);
  font-family:var(--body); font-size:var(--fs-micro); font-weight:600;
  padding:4px 11px; border-radius:var(--r-squircle); cursor:pointer;
  /* L6 (2026-08-30): the desk's most-tapped control measured ~26px
     rendered (25.75 at 360x740 DPR2, different-model verifier) — far
     under the 44px floor this floor's own contract states. One
     declaration, the 1212 idiom (hit area grows, the 10.5px label and
     4px/11px pad stay); the scroller above absorbs the width. The
     price, taken knowingly (verdict floor-3, PASS WITH GAPS): pills
     read chunkier (the 999px radius arcs wider) and the row grows
     ~18px, which the queue below gives up. The mockup's drawing was
     amended in the same diff — see its lens-row supersession. */
  min-height:44px;
}
[data-theme="house"] .csw-hlens__k.on {
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  color:var(--ink); background:color-mix(in srgb, var(--accent) 9%, transparent);
}
/* 2026-09-26 (seat-B vet A15): at 1280 the scrolling row cut "Mine" in
   half and hid "Recovery"; a mouse has no sideways swipe. From the
   two-pane width up the five keys wrap onto a second line, every one whole.
   Phones keep the sideways row and its fade. */
@media (min-width:880px) {
  [data-theme="house"] .csw-hlens { flex-wrap:wrap; overflow-x:visible; row-gap:6px;
    padding-right:14px; -webkit-mask-image:none; mask-image:none; }
}
/* R3: rank made visible — only the NEXT ticket's claim is armed
   (filled); every later ticket demotes to outline. The subsequent-
   sibling combinator = "every hticket after another hticket". */
[data-theme="house"] .csw-hticket ~ .csw-hticket .csw-hclaim {
  background:transparent; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

/* R7: the queue head's EON key — the rep's private line without the
   rail slot the pinned row held on their desk. */
[data-theme="house"] .csw-hq__eonkey {
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:transparent; color:var(--accent); font-family:var(--body);
  font-size:var(--fs-small); font-weight:700; padding:5px 10px;
  border-radius:var(--r-pill); cursor:pointer;
  /* Match Team's invisible target without changing the row or desktop. */
  @media (max-width:879px) {
    position:relative;
    &::before { content:""; position:absolute; top:50%; left:50%; width:max(100%, 46px); height:max(100%, 46px); transform:translate(-50%, -50%); pointer-events:auto; }
  }
}

/* reduced motion: the tear's instant-exit rule lives in the file's main
   prefers-reduced-motion block, appended there (still house-scoped)
   rather than written here.

   WHAT MAKES THAT SAFE IS NOT POSITION (corrected 2026-08-12). The line
   that stood here said the block "stays the file's LAST media query" —
   it is not, and was not: media queries follow it, and rules follow it
   for hundreds of lines. It is the last prefers-reduced-motion block,
   which is all `rindex` needs to find it, and that is a locating
   convention, not a law that wins anything. What actually makes those
   overrides win is that EVERY motion declaration inside the block
   carries !important: a @media adds no specificity, so an unscoped
   `transition:none` there loses a tie to any later rule and loses
   outright to a house-scoped one from any position. The mechanism is
   the flag, and the guard on it is
   test_relay_r5_desk_face.test_every_reduced_motion_override_actually_wins
   plus its !important census. The queue ticket's tear and the shift
   ring's sweep are appended to that same block. */


/* ── B1 (p798): the 8-chat additions — house accents only ── */
[data-theme="house"] .csw-hticket__prev{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;min-width:0}
[data-theme="house"] .csw-hticket__prev.muted{opacity:.65}
[data-theme="house"] .csw-thread--dense{min-height:64px}
[data-theme="house"] .csw-thread--dense .csw-thread__name{font-size:13.5px}
[data-theme="house"] .csw-thread--dense .csw-thread__prev{font-size:12.5px}

/* ── The graduation board (B2, artifact 2467db14 S5) ─────────────────
   House floor 3, scoped. What EON is allowed to be, per lane, read off
   the engine that already grades every draft. Tokens only — the ink
   guard forbids raw hexes, and the states must stay legible to the
   colour law: whale = EON earned it, warn = supervised/braked,
   danger = human-always. */
[data-theme="house"] .csw-gradwrap{flex:1;overflow-y:auto;padding:14px 14px 20px;
  background:var(--eon-bg-1)}
[data-theme="house"] .csw-gradhead{border:1px solid var(--eon-line-soft);border-radius:12px;
  background:var(--eon-bg-2);padding:14px 15px;margin-bottom:12px}
[data-theme="house"] .csw-gradhead__v{font-size:30px;font-weight:850;line-height:1;
  letter-spacing:-.02em;color:var(--eon-whale);font-variant-numeric:tabular-nums}
[data-theme="house"] .csw-gradhead__v span{font-size:14px;font-weight:600;color:var(--eon-ink-mute);
  margin-left:6px;letter-spacing:0}
[data-theme="house"] .csw-gradhead__l{margin-top:6px;font-size:13.5px;color:var(--eon-ink-dim)}
[data-theme="house"] .csw-gradhead__r{margin-top:4px;font-family:var(--mono);font-size:10.5px;
  color:var(--eon-ink-mute)}
[data-theme="house"] .csw-gradlanes{display:flex;flex-direction:column;gap:1px;
  background:var(--eon-line-soft);border:1px solid var(--eon-line-soft);
  border-radius:12px;overflow:hidden}
[data-theme="house"] .csw-gradrow{display:grid;grid-template-columns:1fr 64px auto;gap:10px;
  align-items:center;background:var(--eon-bg-2);padding:11px 13px;min-height:44px}
[data-theme="house"] .csw-gradrow__l{min-width:0}
[data-theme="house"] .csw-gradrow__n{font-weight:700;font-size:13.5px;color:var(--eon-ink);
  text-transform:capitalize}
[data-theme="house"] .csw-gradrow__s{font-family:var(--mono);font-size:10px;color:var(--eon-ink-mute);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="house"] .csw-gradmeter{height:5px;border-radius:3px;background:var(--eon-bg-3);
  overflow:hidden}
[data-theme="house"] .csw-gradmeter i{display:block;height:100%;background:var(--eon-whale);
  transition:width .4s ease}
[data-theme="house"] .csw-gradstate{font-family:var(--mono);font-size:9px;letter-spacing:.05em;
  text-align:right;white-space:nowrap;font-weight:700}
[data-theme="house"] .csw-gradstate--auto{color:var(--eon-whale)}
[data-theme="house"] .csw-gradstate--super{color:var(--eon-warn)}
[data-theme="house"] .csw-gradstate--braked{color:var(--eon-warn)}
[data-theme="house"] .csw-gradstate--human{color:var(--eon-danger)}
[data-theme="house"] .csw-gradrule{margin-top:12px;font-size:12px;line-height:1.55;
  color:var(--eon-ink-mute);border-top:1px solid var(--eon-line-soft);
  padding-top:11px}
[data-theme="house"] .csw-gradrule b{color:var(--eon-ink-dim);font-weight:700}

/* ── The bottom tab bar + the Desk room (B2b, artifact 2467db14) ─────
   House floor 3, scoped, tokens only (ink guard). Four rooms on the
   phone's bottom edge: Chats · Priority · EON · Desk. House furniture
   (classic keeps its own nav); at ≥880px the bar sits above the split
   panes. On phones it YIELDS while a conversation is open: the
   composer owns the bottom edge, and no fixed pill may overlap the
   send zone (paid-for law). ONE numeric badge — Priority's book count;
   Desk wears a wordless warn pip while a hold is live. Colour law:
   accent = the rep's hand (active tab, badge), warn = supervised /
   waiting states (pip, rehearsal), whale = EON only (hold lanes). */
@media (max-width:879px){
  [data-theme="house"] .csw-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;
    display:flex;align-items:stretch;gap:2px;
    padding:6px 8px calc(6px + var(--safe-bottom));
    background:color-mix(in srgb, var(--eon-bg-1) 88%, transparent);
    -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
    border-top:1px solid var(--eon-line-soft)}
  [data-theme="house"] .csw-body:has(> .csw-inbox.has-active) > .csw-tabbar{display:none}
  [data-theme="house"] .csw-tbtab{flex:1;min-height:48px;min-width:44px;display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:none;border-radius:12px;color:var(--eon-ink-mute);
    font-family:var(--body);position:relative;cursor:pointer}
  [data-theme="house"] .csw-tbtab svg{width:21px;height:21px}
  [data-theme="house"] .csw-tbtab span{font-size:10px;font-weight:700;letter-spacing:.03em}
  [data-theme="house"] .csw-tbtab.on{color:var(--eon-accent)}
  [data-theme="house"] .csw-tbtab__badge{position:absolute;top:2px;left:calc(50% + 6px);
    min-width:16px;height:16px;padding:0 4px;border-radius:999px;
    background:var(--eon-accent);color:var(--eon-bg-1);font-size:9px;font-weight:700;
    display:flex;align-items:center;justify-content:center;line-height:1}
  /* author display:flex beats the UA's [hidden]{display:none} — restate
     it or the badge can never hide (the documented green-line class) */
  [data-theme="house"] .csw-tbtab__badge[hidden]{display:none}
  [data-theme="house"] .csw-tbtab__dot{position:absolute;top:5px;left:calc(50% + 8px);
    width:7px;height:7px;border-radius:50%;background:var(--eon-warn);
    animation:hs-tbpulse 1.6s ease infinite}
  /* the rooms breathe past the bar — nothing may hide behind it */
  [data-theme="house"] .csw-side{padding-bottom:calc(64px + var(--safe-bottom))}
  [data-theme="house"] .csw-deskroom{padding-bottom:calc(72px + var(--safe-bottom))}
  [data-theme="house"] .csw-body > .csw-pulse{padding-bottom:calc(72px + var(--safe-bottom))}
}
@keyframes hs-tbpulse{0%,100%{opacity:1}50%{opacity:.25}}

/* the rehearsal chip — EON_DRY_RUN made visible (UAT wears it, prod
   never does; toggled by the /held payload, hidden by default) */
[data-theme="house"] .csw-rehearse{display:inline-flex;align-items:center;gap:6px;
  border:1px solid color-mix(in srgb, var(--eon-warn) 55%, transparent);
  color:var(--eon-warn);font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb, var(--eon-warn) 8%, transparent)}
[data-theme="house"] .csw-rehearse[hidden]{display:none}
[data-theme="house"] .csw-rehearse i{width:5px;height:5px;border-radius:50%;background:var(--eon-warn);
  font-style:normal;animation:hs-tbpulse 1.6s ease infinite}

/* the Desk room */
[data-theme="house"] .csw-deskroom{display:flex;flex-direction:column;gap:12px;padding:14px}
@media (max-width:879px){
  /* The raised Ask launcher must also clear the last row's full tap area.
     Staff without the launcher keep the existing room spacing. */
  [data-theme="house"]:has(#eon-ask-root) .csw-deskroom,
  [data-theme="house"]:has(#eon-ask-root) .csw-body > .csw-pulse{
    padding-bottom:calc(92px + var(--eon-ask-offset, 0px) + var(--safe-bottom))}
}
[data-theme="house"] .csw-deskring{display:flex;align-items:center;gap:14px}
[data-theme="house"] .csw-deskring__r svg{width:44px;height:44px}
[data-theme="house"] .csw-deskring__bx{min-width:0}
[data-theme="house"] .csw-deskring__v{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums;
  color:var(--eon-ink)}
[data-theme="house"] .csw-deskring__l{font-size:12px;color:var(--eon-ink-mute)}
[data-theme="house"] .csw-deskring .csw-rehearse{margin-left:auto}
[data-theme="house"] .csw-deskhold{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-top:1px solid var(--eon-line-soft);min-height:44px}
[data-theme="house"] .csw-deskhold:first-child{border-top:none}
[data-theme="house"] .csw-deskhold__bx{flex:1;min-width:0}
[data-theme="house"] .csw-deskhold__n{font-weight:700;font-size:13.5px;color:var(--eon-ink)}
[data-theme="house"] .csw-deskhold__lane{font-family:var(--mono);font-size:9px;letter-spacing:.05em;
  color:var(--eon-whale);border:1px solid color-mix(in srgb, var(--eon-whale) 45%, transparent);
  border-radius:999px;padding:1px 7px;margin-left:6px}
[data-theme="house"] .csw-deskhold__p{font-size:12px;color:var(--eon-ink-mute);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
[data-theme="house"] .csw-deskhold__cd{font-family:var(--mono);font-size:11px;color:var(--eon-whale);margin-top:3px}
[data-theme="house"] .csw-deskhold__open{min-height:44px;min-width:44px;
  border:1px solid color-mix(in srgb, var(--eon-accent) 50%, transparent);
  color:var(--eon-accent);font-weight:750;font-size:11.5px;padding:8px 12px;
  border-radius:10px;background:none;cursor:pointer;font-family:var(--body)}
[data-theme="house"] .csw-deskhold__dis{min-height:44px;border:1px solid var(--eon-line-soft);
  color:var(--eon-ink-mute);font-size:11.5px;padding:8px 11px;border-radius:10px;
  background:none;cursor:pointer;font-family:var(--body)}
[data-theme="house"] .csw-desklaw{font-size:11px;line-height:1.5;color:var(--eon-ink-mute);
  border-top:1px solid var(--eon-line-soft);padding-top:9px;margin-top:2px}
[data-theme="house"] .csw-deskdoor{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;
  padding:8px 2px;background:none;border:none;border-bottom:1px solid var(--eon-line-soft);
  color:var(--eon-ink-dim);font-family:var(--body);font-size:13.5px;text-align:left;
  cursor:pointer}
[data-theme="house"] .csw-deskdoor:last-child{border-bottom:none}
[data-theme="house"] .csw-deskdoor__t{font-weight:700;color:var(--eon-ink)}
[data-theme="house"] .csw-deskdoor__s{font-size:11px;color:var(--eon-ink-mute);margin-left:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
[data-theme="house"] .csw-deskdoor__a{color:var(--eon-ink-mute);font-size:17px}

/* ── THE STAGE (2026-08-18, artifact ebede26e "EON's Stage") — house accents ──
   Floor 3, scoped. The slot itself is cross-skin (above the marker: classic
   must show the staged card too). Here only what the house voice adds:
   the sign face on the name, the mono line, house tokens on every tint,
   and the sheet's rise (hs- namespaced, silenced under reduced motion in
   the file's main block). Tokens only — the ink guard forbids raw hex. */
[data-theme="house"] .csw-lookoffer{background:var(--eon-bg-2);border-top-color:var(--eon-line-soft)}
[data-theme="house"] .csw-lookoffer[data-state="open"]{background:var(--eon-bg-1)}
[data-theme="house"] .csw-stage__peek{background:var(--eon-bg-2);border-color:var(--eon-line-soft)}
[data-theme="house"] .csw-stage__h{font-family:var(--sign,var(--body));font-weight:800;letter-spacing:.005em}
[data-theme="house"] .csw-stage__s,[data-theme="house"] .csw-stage__why,[data-theme="house"] .csw-stage__record,[data-theme="house"] .csw-stage__ph,[data-theme="house"] .csw-stage__altl,[data-theme="house"] .csw-piece__p{font-family:var(--mono)}
[data-theme="house"] .csw-stage__from,[data-theme="house"] .csw-stage__why .dot,[data-theme="house"] .csw-faqbanner__dot{background:var(--eon-whale)}
[data-theme="house"] .csw-stage__more{color:var(--eon-whale)}
[data-theme="house"] .csw-stage__age.old,[data-theme="house"] .csw-stage__why .warn,[data-theme="house"] .csw-piece__stk.no{color:var(--eon-warn)}
[data-theme="house"] .csw-stage__done,[data-theme="house"] .csw-piece__stk{color:var(--eon-ok)}
[data-theme="house"] .csw-stage__done.muted{color:var(--eon-ink-mute)}
[data-theme="house"] .csw-lookskip{border-color:var(--eon-line-strong);color:var(--eon-ink-dim)}
[data-theme="house"] .csw-piece{border-color:var(--eon-line-soft);background:var(--eon-bg-2)}
[data-theme="house"] .csw-stage__preview{border-color:var(--eon-line-strong)}
[data-theme="house"] .csw-stage__alt{border-color:var(--eon-line-soft);color:var(--eon-ink-dim)}
[data-theme="house"] .csw-ring{background:conic-gradient(var(--eon-whale) 0 var(--pct,0%),var(--eon-line) var(--pct,0%) 100%)}
[data-theme="house"] .csw-ring::after{background:var(--eon-bg-2)}
[data-theme="house"] .csw-composer--eon .csw-inputbox{border-color:var(--eon-whale);box-shadow:none}
[data-theme="house"] .csw-composer--eon .csw-input::placeholder{color:var(--eon-whale)}
[data-theme="house"] .csw-ballbar__w b,[data-theme="house"] .csw-stage__why b{color:var(--eon-ink-dim)}
[data-theme="house"] .csw-lookoffer[data-state="open"] .csw-stage__sheet{animation:hs-stagerise .22s cubic-bezier(.05,.7,.1,1)}
@keyframes hs-stagerise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── THE RELAY · the desk face (PR-R5) ──────────────────────────────
   The "Ask a department" sheet and the "Your asks" chips. Both mount
   only while EON_RELAY is armed, so with the lane dark not one of these
   selectors has anything to match — and with it armed the sheet is a
   form a thumb can drive: every control is 44px, the picker wraps
   (never a sideways scroll — a key off the right edge is a key that
   does not exist), and there is exactly ONE act on the screen, in the
   act colour.

   Colour law, unchanged: lime is the act, mint is measured, amber is
   attention, red is stuck, whale is EON. A state chip is the only place
   colour appears on a chip — the byline stays quiet ink, because a list
   where everything is coloured is a list where nothing is.

   NO MOTION IS INTRODUCED HERE. The clocks tell the truth in text, so
   this floor's reduced-motion block gains no new lamp to switch off.

   Scoped to the house skin like every rule past the banner above (the
   switchboard suite rejects an unscoped selector here). House is the
   default skin for every device since 2026-08-07; a rep who has
   explicitly chosen classic gets the sheet's native controls inside the
   sheet chrome classic already styles. */

[data-theme="house"] .csw-asksheet{display:flex;flex-direction:column;gap:9px}
[data-theme="house"] .csw-askhint{font-size:11.5px;line-height:1.5;color:var(--eon-ink-mute);
  border-left:2px solid var(--eon-line-soft);padding-left:9px}
[data-theme="house"] .csw-asklab{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--eon-ink-mute);margin-top:4px}
[data-theme="house"] .csw-askopt{color:var(--eon-ink-faint);letter-spacing:.06em;margin-left:5px}
[data-theme="house"] .csw-deptpick{display:flex;flex-wrap:wrap;gap:7px}
[data-theme="house"] .csw-deptchip,
[data-theme="house"] .csw-storechip{min-height:44px;padding:9px 13px;border-radius:11px;
  border:1px solid var(--eon-line-soft);background:none;color:var(--eon-ink-dim);
  font-family:var(--body);font-size:12.5px;font-weight:650;cursor:pointer}
[data-theme="house"] .csw-deptchip.on,
[data-theme="house"] .csw-storechip.on{border-color:var(--eon-accent);color:var(--eon-ink);
  background:color-mix(in srgb, var(--eon-accent) 12%, transparent)}
[data-theme="house"] .csw-askin,
[data-theme="house"] .csw-askta{width:100%;min-height:44px;padding:11px 12px;border-radius:11px;
  border:1px solid var(--eon-line-soft);background:var(--eon-bg-2);color:var(--eon-ink);
  font-family:var(--body);font-size:14px;line-height:1.45}
[data-theme="house"] .csw-askta{resize:vertical}
[data-theme="house"] .csw-askin::placeholder,
[data-theme="house"] .csw-askta::placeholder{color:var(--eon-ink-faint)}
[data-theme="house"] .csw-askerr{font-size:12px;line-height:1.45;color:var(--eon-danger);
  border:1px solid color-mix(in srgb, var(--eon-danger) 45%, transparent);
  border-radius:9px;padding:8px 10px}
[data-theme="house"] .csw-askerr[hidden]{display:none}
/* THE one act on the sheet, and the one act on the card */
[data-theme="house"] .csw-askact{min-height:44px;width:100%;border:none;border-radius:12px;
  background:var(--eon-accent);color:var(--eon-on-accent);font-family:var(--body);
  font-size:13.5px;font-weight:800;letter-spacing:.01em;cursor:pointer;margin-top:4px}
[data-theme="house"] .csw-askact:disabled{background:var(--eon-bg-3);color:var(--eon-ink-faint);
  cursor:default}
[data-theme="house"] .csw-asklaw{font-size:11px;line-height:1.5;color:var(--eon-ink-mute)}

/* the return chips — what you raised, and what you owe */
[data-theme="house"] .csw-asklist{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
[data-theme="house"] .csw-askchip{border-top:1px solid var(--eon-line-soft);padding:9px 0;
  min-height:44px}
[data-theme="house"] .csw-asklist .csw-askchip:first-child{border-top:none}
[data-theme="house"] .csw-askchip__h{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
[data-theme="house"] .csw-askchip__id{font-family:var(--mono);font-size:11px;
  font-variant-numeric:tabular-nums;color:var(--eon-ink)}
[data-theme="house"] .csw-askchip__k{font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--eon-line-soft);border-radius:999px;
  padding:1px 7px;color:var(--eon-ink-mute)}
[data-theme="house"] .csw-askchip--live .csw-askchip__k{color:var(--eon-ok);
  border-color:color-mix(in srgb, var(--eon-ok) 45%, transparent)}
[data-theme="house"] .csw-askchip--late .csw-askchip__k{color:var(--eon-warn);
  border-color:color-mix(in srgb, var(--eon-warn) 45%, transparent)}
[data-theme="house"] .csw-askchip--blocked .csw-askchip__k{color:var(--eon-danger);
  border-color:color-mix(in srgb, var(--eon-danger) 45%, transparent)}
/* closed reads NEUTRAL — the mockup colours the ack (the live state
   the rep can act on) and leaves the closed chip quiet; a list where
   everything is coloured is a list where nothing is (design card
   floor-3 R5, the one graded gap — repaired in the same diff). */
[data-theme="house"] .csw-askchip--done .csw-askchip__k{color:var(--eon-ink-dim)}
[data-theme="house"] .csw-askchip__d{font-size:11px;color:var(--eon-ink-mute)}
[data-theme="house"] .csw-askchip__c{font-family:var(--mono);font-size:10.5px;
  color:var(--eon-ink-mute);margin-left:auto}
[data-theme="house"] .csw-askchip--late .csw-askchip__c{color:var(--eon-warn)}
[data-theme="house"] .csw-askchip__t{font-size:13.5px;font-weight:700;color:var(--eon-ink);
  margin-top:3px;line-height:1.35}
[data-theme="house"] .csw-askchip--done .csw-askchip__t{color:var(--eon-ink-dim)}
[data-theme="house"] .csw-askchip__m{font-size:11.5px;color:var(--eon-ink-mute);margin-top:2px}
[data-theme="house"] .csw-askempty{font-size:11.5px;color:var(--eon-ink-mute);padding:7px 0}

/* THE ASK KEY'S OWN TAP FLOOR. Every control this floor introduces
   carries 44px — the dept chips, the store chips, the inputs, the act —
   and the one key that OPENS it was 40px, because it borrows the
   composer's shared .csw-tool rule (`.csw-filter, .csw-tool, .csw-mini
   { min-height:40px }`) which fourteen other keys sit on. Raising that
   rule would reshape the whole tray for a floor that owns one key, so
   the key carries a modifier of its own and nothing else moves. */
[data-theme="house"] .csw-tool--ask{ min-height:44px; min-width:44px; }

/* Desk advance: the service path belongs to the registered desk floor. */
[data-theme="house"] .csw-service-rail{border-bottom-color:var(--line-strong)}
[data-theme="house"] .csw-service-rail__path{font-family:var(--display)}

/* Phone desk, operator 2026-09-06: restore the original operational
   green and Archivo voice inside CS only. Identity, conversation, draft.
   The original tokens are from app.css before the cyan palette change. */
[data-theme="house"] .csw-shell,
[data-theme="house"] .csw-overlay {
  --fs-micro:12px;
  --eon-accent:var(--csw-brand-accent); --eon-on-accent:var(--csw-brand-on-accent);
  --eon-bub-out:var(--csw-brand-out); --eon-bub-out-ink:var(--csw-brand-out-ink);
  --eon-whale:var(--eon-accent); --eon-blue:var(--eon-ink-dim);
  --eon-ok:var(--eon-accent); --eon-ch-wa:var(--eon-ink-mute); --eon-ch-ig:var(--eon-ink-mute);
  --accent:var(--eon-accent); --accent-soft:color-mix(in srgb,var(--eon-accent) 8%,transparent);
  --whale:var(--eon-accent); --ok:var(--eon-accent);
  --g-violet:var(--eon-accent); --g-blue:var(--eon-ink-mute); --g-magenta:var(--eon-ink-mute);
  background:var(--eon-bg);
}
[data-theme="house"] .csw-shell .csw-conv { background:var(--eon-bg); }
[data-theme="house"] .csw-legacy-context { display:none; }
[data-theme="house"] .csw-shell .csw-service-rail { display:flex; }
[data-theme="house"] .csw-shell .csw-av { background:var(--eon-bg-3)!important; color:var(--eon-ink-dim); border:1px solid var(--eon-line); box-shadow:none; }
[data-theme="house"] .csw-shell .csw-av__ring { display:none; }
[data-theme="house"] .csw-shell .csw-conv__bar .csw-av__pres { display:none; }
[data-theme="house"] .csw-conv__bar { position:relative; padding:12px 16px; gap:10px; min-height:76px; background:var(--eon-bg); border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
[data-theme="house"] .csw-conv__bar .csw-av { width:36px; height:36px; min-width:36px; font-size:12px; border-radius:12px; }
[data-theme="house"] .csw-conv__back { width:44px; height:44px; border:0; border-radius:12px; background:transparent; }
[data-theme="house"] .csw-conv__back svg { width:22px; height:22px; }
[data-theme="house"] .csw-conv__name { font-size:18px; font-weight:650; letter-spacing:-.025em; line-height:1.25; }
[data-theme="house"] .csw-conv__sub { margin-top:4px; gap:8px; min-height:18px; }
[data-theme="house"] .csw-conv__scroll { flex:0 1 auto; padding:0; mask-image:none; -webkit-mask-image:none; }
[data-theme="house"] .csw-conv__sub .csw-ch { display:inline; padding:0; border:0; margin:0; background:transparent; color:var(--eon-ink-mute); font:11px var(--body); text-transform:none; letter-spacing:0; }
[data-theme="house"] .csw-conv__pin { flex:0 0 auto; }
[data-theme="house"] .csw-conv__sub .csw-windial { font-size:10px; color:var(--eon-ink-dim); letter-spacing:0; gap:4px; }
[data-theme="house"] .csw-conv__sub .csw-windial svg { width:14px; height:14px; }
[data-theme="house"] .csw-conv__sub .csw-windial--closed { color:var(--eon-ink-mute); }
[data-theme="house"] .csw-conv__sub .csw-rtdot { margin-right:3px; width:4px; height:4px; background:var(--eon-ink-mute); }
[data-theme="house"] .csw-conv-menu { position:relative; flex:0 0 44px; }
[data-theme="house"] .csw-conv-menu summary { display:flex; align-items:center; justify-content:center; list-style:none; width:44px; height:44px; border-radius:12px; color:var(--eon-ink); cursor:pointer; }
[data-theme="house"] .csw-conv-menu summary::-webkit-details-marker { display:none; }
[data-theme="house"] .csw-conv-menu summary svg { width:23px; height:23px; fill:currentColor; }
[data-theme="house"] .csw-conv-menu[open] summary { background:var(--eon-bg-3); }
[data-theme="house"] .csw-conv-menu__items { position:absolute; z-index:15; right:0; top:50px; width:240px; padding:6px; background:var(--eon-bg-1); border:1px solid var(--eon-line-strong); border-radius:14px; box-shadow:none; }
[data-theme="house"] .csw-conv-menu__items button { display:flex; align-items:center; gap:10px; width:100%; max-width:none; min-height:48px; height:auto; padding:12px; border:0; border-radius:8px; background:transparent; color:var(--eon-ink); font:13px var(--body); text-align:left; white-space:normal; }
[data-theme="house"] .csw-conv-menu__items button:hover { background:var(--eon-bg-3); }
[data-theme="house"] .csw-conv-menu__items button svg { width:18px; height:18px; flex:none; }
[data-theme="house"] .csw-conv-menu summary:focus-visible,
[data-theme="house"] .csw-conv-menu__items button:focus-visible { outline:2px solid var(--eon-accent); outline-offset:-2px; }
[data-theme="house"] .csw-service-rail { padding:0 16px; gap:8px; background:var(--eon-bg); border-bottom:1px solid var(--eon-line-soft); }
[data-theme="house"] .csw-service-rail__actions button+button { border-left:0; }
[data-theme="house"] .csw-service-rail__path i { background:none!important; color:var(--eon-ink-mute)!important; border:0; width:auto; font-size:10px; }
[data-theme="house"] .csw-service-rail__path .current { color:var(--eon-ink-dim); font-weight:500; }
[data-theme="house"] .csw-service-rail__path .current::before { content:none; color:var(--eon-ink-mute); font:11px var(--body); margin-right:6px; }
[data-theme="house"] .csw-service-rail__progress { padding-left:0; }
[data-theme="house"] .csw-service-rail__actions button { font-size:11px; padding-inline:6px; color:var(--eon-ink-mute); }
[data-theme="house"] .csw-script { padding-inline:16px; }
[data-theme="house"] .csw-row .csw-bub { font-size:16px; line-height:1.5; max-width:min(88%,680px); border-radius:14px; padding:11px 13px; }
[data-theme="house"] .csw-row.out .csw-bub:not(.csw-bub--held):not(.failed) { background:var(--eon-bub-out); color:var(--eon-bub-out-ink); }
[data-theme="house"] .csw-row.out:has(.csw-flap) .csw-failwhy { display:none; }
[data-theme="house"] .csw-row.out:has(.csw-flap) { flex-direction:column; align-items:flex-end; }
[data-theme="house"] .csw-row.out .csw-flap { background:transparent; color:var(--eon-ink-dim); border-color:var(--eon-line); padding:8px 12px; margin-right:0; max-width:88%; }
[data-theme="house"] .csw-shell .csw-bub.failed { border-color:var(--eon-line); background:var(--eon-bg-2); }
[data-theme="house"] .csw-shell .csw-author--eon { color:var(--eon-ink-dim); background:transparent; border-color:var(--eon-line); }
[data-theme="house"] .csw-shell .csw-bub--held { border-color:var(--eon-line-strong); background:var(--eon-bg-2); color:var(--eon-ink); opacity:1; }
[data-theme="house"] .csw-shell .csw-row--held-busy .csw-bub--held { opacity:.55; }
[data-theme="house"] .csw-shell .csw-held__btn { min-height:44px; border-radius:10px; color:var(--eon-ink-dim); border-color:var(--eon-line); }
[data-theme="house"] .csw-shell .csw-held__count { color:var(--eon-ink-mute); font-weight:400; }
[data-theme="house"] .csw-shell .csw-stage__row { min-height:60px; gap:10px; padding:8px 16px; }
[data-theme="house"] .csw-shell .csw-stage__from { background:var(--eon-accent); width:4px; height:4px; }
[data-theme="house"] .csw-shell .csw-stage__media { width:44px; min-width:44px; min-height:44px; }
[data-theme="house"] .csw-shell .csw-stage__txt { min-height:44px; }
[data-theme="house"] .csw-shell .csw-cust__draft { background:transparent; color:var(--eon-ink-dim); border:1px solid var(--eon-line); }
[data-theme="house"] .csw-shell .csw-draftmark { flex:none; color:var(--eon-ink-dim); }
[data-theme="house"] .csw-shell .csw-hticket__prev .csw-draftlbl { display:none; }
[data-theme="house"] .csw-shell .csw-row.out .csw-author { color:var(--eon-ink-dim); }
[data-theme="house"] .csw-shell .csw-stage__media .csw-ring { width:34px; height:34px; font-size:9px; color:var(--eon-ink-dim); background:var(--eon-line); }
[data-theme="house"] .csw-shell .csw-stage__media .csw-ring::after { inset:1px; }
[data-theme="house"] .csw-shell .csw-stage__h { font-size:12px; font-weight:650; }
[data-theme="house"] .csw-shell .csw-stage__occ { display:none; }
[data-theme="house"] .csw-shell .csw-looksend { background:var(--eon-accent); color:var(--eon-on-accent); border-color:var(--eon-accent); }
[data-theme="house"] .csw-shell .csw-looksend:disabled { background:transparent; color:var(--eon-ink-mute); border-color:var(--eon-line); }
[data-theme="house"] .csw-conv:has(.csw-input:not(:placeholder-shown)) .csw-looksend { background:transparent; color:var(--eon-ink-dim); border-color:var(--eon-line); }
[data-theme="house"] .csw-conv .csw-scrollbtm { bottom:calc(var(--csw-comp-h,84px) + var(--csw-bands-h,0px) + 12px); right:16px; background:var(--eon-bg-2); border-color:var(--eon-line-strong); box-shadow:none; }
[data-theme="house"] .csw-composer { background:var(--eon-bg); backdrop-filter:none; -webkit-backdrop-filter:none; padding:10px 14px calc(10px + var(--safe-bottom)); border-top:1px solid var(--eon-line-soft); }
[data-theme="house"] .csw-inputbox { background:var(--eon-bg-2); border:1px solid var(--eon-line); border-radius:18px; padding:7px; gap:5px; box-shadow:none; }
[data-theme="house"] .csw-input { font-family:var(--body); font-size:16px; line-height:1.5; padding:8px 2px; text-align:left; }
[data-theme="house"] .csw-inputbox .csw-send { width:44px; height:44px; min-width:44px; min-height:44px; background:var(--eon-accent); color:var(--eon-on-accent); border-radius:14px; box-shadow:none; }
[data-theme="house"] .csw-inputbox .csw-send:disabled { background:var(--eon-bg-3); color:var(--eon-ink-faint); opacity:1; }
[data-theme="house"] .csw-inputbox .csw-mic,
[data-theme="house"] .csw-inputbox .csw-emoji,
[data-theme="house"] .csw-inputbox .csw-plus { min-width:44px; min-height:44px; color:var(--eon-ink-mute); background:transparent; }
[data-theme="house"] .csw-winclosed { color:var(--eon-ink-dim); background:transparent; border:0; border-radius:0; padding:0 2px 10px; margin-bottom:0; font-size:12px; line-height:1.45; }
[data-theme="house"] .csw-winclosed .csw-pickupbtn { min-height:44px; border:1px solid var(--eon-line-strong); border-radius:10px; background:transparent; color:var(--eon-ink); padding:8px 12px; font:600 12px var(--body); }
[data-theme="house"] .csw-winclosed:has(.csw-window-note) { display:flex; align-items:center; justify-content:space-between; gap:12px; }
[data-theme="house"] .csw-window-note { display:flex; flex-direction:column; gap:3px; }
[data-theme="house"] .csw-window-note strong { font-size:12px; font-weight:600; color:var(--eon-ink); }
[data-theme="house"] .csw-window-note span { font-size:11px; color:var(--eon-ink-mute); }
[data-theme="house"] .csw-engine-state--live { color:var(--eon-accent); }
/* Private-mobile resit: metadata must be readable at phone scale. Keep
   Archivo and the original green/neutral tokens; distinguish state by shape. */
[data-theme="house"] .csw-shell :is(.csw-bub__t,.csw-author,.csw-ch,.csw-windial,
  .csw-day,.csw-daydiv,.csw-stickyday,.csw-hint,.csw-held__count,.csw-held__by,.csw-held__btn,.csw-flap,.csw-flap__meta,
  .csw-stage__sub,.csw-stage__s,.csw-stage__hint,.csw-ring,.csw-window-note span,
  .csw-360sec__h,.csw-chip,.csw-notes__h,.csw-notes__hd,.csw-pay__chip,.csw-cust-empty,
  .csw-thread__time,.csw-thread-window,.csw-service-rail__actions button) { font-size:12px; }
[data-theme="house"] .csw-shell :is(.csw-now__l,.csw-now__b,.csw-hq__ring .num,
  .csw-hlens__k,.csw-filter__c,.csw-filter__w,.csw-legend span,.csw-tbtab span) { font-size:12px; }
[data-theme="house"] .csw-service-rail__path :is(span,i) { font-size:12px; }
[data-theme="house"] .csw-service-rail__path .current::before { font-size:12px; }
[data-theme="house"] .csw-overlay :is(.csw-receipt-trail time,.csw-receipt-trail small,
  .csw-engine-stage__tag,.csw-engine-evidence,.csw-service-fact,.csw-engine-overview small,
  .csw-engine-counts span,.csw-engine-stage__n,.csw-engine-stage em,.csw-service-refresh) { font-size:12px; }
[data-theme="house"] .csw-shell .csw-stage__media .csw-ring { font-size:12px; }
[data-theme="house"] :is(.csw-360,.csw-overlay) button { min-width:44px; min-height:44px; }
/* Operator 6 Sep: motion should make a state change legible. One brief
   entrance, tactile presses, and the existing warning color at expiry. */
[data-theme="house"] .csw-conv__sub .csw-windial--soon { color:var(--warn); }
[data-theme="house"] .csw-conv__sub .csw-windial--closed .csw-windial__tr { stroke-dasharray:2 3; }
[data-theme="house"] .csw-conv-menu[open] .csw-conv-menu__items { transform-origin:top right; animation:hs-csw-context-enter .18s ease-out; }
[data-theme="house"] .csw-360.open .csw-360__in { animation:hs-csw-context-enter .22s ease-out; }
[data-theme="house"] .csw-winclosed:not([hidden]) { animation:hs-csw-context-enter .2s ease-out; }
[data-theme="house"] .csw-inputbox { transition:border-color .18s ease-out,background-color .18s ease-out; }
[data-theme="house"] .csw-inputbox:focus-within { border-color:color-mix(in srgb,var(--eon-accent) 45%,var(--eon-line)); }
[data-theme="house"] .csw-composer:has(.csw-winclosed:not([hidden])) .csw-inputbox { border-color:color-mix(in srgb,var(--warn) 40%,var(--eon-line)); }
[data-theme="house"] :is(.csw-inputbox button,.csw-conv-menu summary,.csw-conv-menu__items button,.csw-held__btn) { transition:transform .12s ease-out,background-color .16s ease-out; }
[data-theme="house"] :is(.csw-inputbox button,.csw-conv-menu summary,.csw-conv-menu__items button,.csw-held__btn):active:not(:disabled) { transform:translateY(1px); }
@keyframes hs-csw-context-enter { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@media(max-width:600px) {
  [data-theme="house"] .csw-conv__bar { padding:10px 10px 4px; gap:8px; min-height:70px; }
  [data-theme="house"] .csw-conv__bar .csw-av { width:32px; height:36px; min-width:32px; }
  [data-theme="house"] .csw-conv__name { font-size:18px; }
  [data-theme="house"] .csw-service-rail { padding-inline:16px; }
  [data-theme="house"] .csw-service-rail__path .current::before { content:'Service'; }
  [data-theme="house"] .csw-service-rail__actions [data-service="receipts"] { display:none; }
  [data-theme="house"] .csw-composer > .csw-hint { display:none; }
  [data-theme="house"] .csw-inputbox .csw-emoji { display:none; }
  [data-theme="house"] .csw-shell .csw-bands { max-height:24%; }
  [data-theme="house"].csw-kb-open .csw-service-rail { display:none; }
  [data-theme="house"].csw-kb-open .csw-bands { max-height:58px; }
  [data-theme="house"].csw-kb-open .csw-stage__row { min-height:48px; padding-block:2px; }
  [data-theme="house"].csw-kb-open .csw-stage__media { display:none; }
  [data-theme="house"].csw-kb-open .csw-input { max-height:min(120px,24dvh); }
}
@media(max-width:600px) and (max-height:560px) {
  [data-theme="house"] .csw-conv__bar { min-height:56px; padding-block:4px; }
  [data-theme="house"] .csw-shell .csw-service-rail { display:none; }
  [data-theme="house"] .csw-shell .csw-bands { max-height:58px; }
  [data-theme="house"] .csw-shell .csw-stage__row { min-height:48px; padding-block:2px; }
  [data-theme="house"] .csw-shell .csw-stage__media { display:none; }
  [data-theme="house"] .csw-input { max-height:96px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-theme="house"] .csw-conv-menu__items { animation:none; }
  [data-theme="house"] .csw-conv-menu[open] .csw-conv-menu__items,
  [data-theme="house"] .csw-360.open .csw-360__in,
  [data-theme="house"] .csw-winclosed:not([hidden]) { animation:none; }
  [data-theme="house"] :is(.csw-inputbox,.csw-inputbox button,.csw-conv-menu summary,.csw-conv-menu__items button,.csw-held__btn) { transition:none; }
  [data-theme="house"] :is(.csw-inputbox button,.csw-conv-menu summary,.csw-conv-menu__items button,.csw-held__btn):active:not(:disabled) { transform:none; }
}

/* HOUSE floor 3 — WhatsApp pocket, chosen Design A. Independent verdict required. */
[data-theme="house"] .csw-contactline {border-color:var(--eon-line-soft);color:var(--eon-ink-mute);}
[data-theme="house"] .csw-contact-dialog {background:var(--eon-bg);color:var(--eon-ink);border-color:var(--eon-line-soft);font-family:var(--sans);}
[data-theme="house"] .csw-contact-request-form option {background:var(--eon-bg);color:var(--eon-ink);}
[data-theme="house"] .csw-contact-dialog header,[data-theme="house"] .csw-contact-row,[data-theme="house"] .csw-contact-rule {border-color:var(--eon-line-soft);}
[data-theme="house"] .csw-contact-kicker {color:var(--eon-ink-mute);}

/* Room navigation: reading order, selection and keyboard focus. */
[data-theme="house"] #csw .csw-tbtab.on > span:last-child { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
@media (min-width:880px) {
  [data-theme="house"] #csw .csw-body { flex-direction:column; }
  [data-theme="house"] #csw .csw-tabbar { display:flex; flex-shrink:0; gap:8px; padding:6px 20px; border-bottom:1px solid var(--eon-line); background:var(--eon-bg-1); }
  [data-theme="house"] #csw .csw-tbtab { display:flex; position:relative; align-items:center; justify-content:center; gap:10px; min-width:112px; min-height:48px; padding:10px 18px; border:0; border-radius:var(--r-squircle); background:transparent; color:var(--eon-ink-dim); font:600 12px/1.4 var(--body); }
  [data-theme="house"] #csw .csw-tbtab svg { width:20px; height:20px; flex:none; }
  [data-theme="house"] #csw .csw-tbtab.on { color:var(--eon-accent); background:var(--eon-bg-2); }
  [data-theme="house"] #csw .csw-tbtab__badge { position:absolute; top:4px; right:6px; font:12px var(--mono); font-variant-numeric:tabular-nums; }
  [data-theme="house"] #csw .csw-tbtab__dot { width:6px; height:6px; border-radius:50%; background:var(--eon-warn); }
  [data-theme="house"] #csw .csw-tbtab [hidden] { display:none; }
}
[data-theme="house"] #csw .csw-tbtab:focus-visible { outline:2px solid var(--eon-accent); outline-offset:-3px; }

/* House idle guidance; queue states and existing room navigation stay intact. */
[data-theme="house"] #csw .csw-orientation { margin:auto; width:min(100%,560px); padding:32px; color:var(--eon-ink); }
[data-theme="house"] #csw .csw-orientation > small { font:12px/1.5 var(--mono); letter-spacing:.08em; color:var(--eon-ink-dim); }
[data-theme="house"] #csw .csw-orientation h2 { font:600 clamp(24px,2.8vw,36px)/1.15 var(--body); letter-spacing:-.035em; margin:18px 0 14px; }
[data-theme="house"] #csw .csw-orientation p { font:16px/1.6 var(--body); color:var(--eon-ink-dim); max-width:38ch; margin:0 0 28px; }
[data-theme="house"] #csw .csw-orientation__paths { border-top:1px solid var(--eon-line); }
[data-theme="house"] #csw .csw-orientation__paths button { display:grid; grid-template-columns:1fr auto; gap:4px 16px; text-align:left; width:100%; min-height:72px; padding:14px 0; background:transparent; border:0; border-bottom:1px solid var(--eon-line); color:var(--eon-ink); font:600 16px/1.3 var(--body); transition:opacity var(--dur-1); }
[data-theme="house"] #csw .csw-orientation__paths small { grid-column:1; font:400 13px/1.5 var(--body); color:var(--eon-ink-dim); }
[data-theme="house"] #csw .csw-orientation__paths b { grid-column:2; grid-row:1 / 3; align-self:center; color:var(--eon-ink-dim); font-weight:400; }
[data-theme="house"] #csw .csw-orientation__desk { display:flex; align-items:center; gap:20px; min-height:44px; margin-top:18px; padding:8px 0; border:0; background:transparent; color:var(--eon-ink); font:600 14px/1.4 var(--body); transition:opacity var(--dur-1); }
@media (min-width:880px) {
  [data-theme="house"] #csw .csw-conv:has(> .csw-orientation) { overflow-y:auto; }
}
@media (max-width:879px) {
  [data-theme="house"] #csw .csw-orientation { display:none; }
}
[data-theme="house"] #csw .csw-orientation button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
[data-theme="house"] #csw .csw-orientation button:active { opacity:.7; }

/* Part 07 lens feedback; inherited header and orientation stay unchanged. */
[data-theme="house"] #csw .csw-hlens__k { transition:background var(--dur-3) var(--ease-emph),border-color var(--dur-3) var(--ease-emph); }
[data-theme="house"] #csw .csw-hlens__k:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
@media (hover:hover) {
  [data-theme="house"] #csw .csw-hlens__k:not(.on):hover { background:var(--bg-card-2); color:var(--ink); }
}