/* ══════════════════════════════════════════════════════════════════
   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: 24px;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes csw-breathe   { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
@keyframes csw-shimmer   { from{background-position:200% 0} to{background-position:-200% 0} }
@keyframes csw-skeleton  { 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-spin      { to{transform:rotate(360deg)} }
@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);
  padding-top:var(--safe-top); padding-bottom:var(--safe-bottom);
  animation:csw-rise var(--dur-m) var(--ease-emph-decel);
}
/* 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). */
.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:sticky; top:0; z-index:5;
}
.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{ font-family:var(--display); font-size:18px; 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; }
.csw-shift__dot{ width:8px; height:8px; border-radius:50%; background:var(--gemini-grad); background-size:200% 200%; animation:csw-breathe 5s var(--ease-emph) infinite alternate; }
.csw-shift--gap .csw-shift__dot{ background:var(--warn); animation:csw-dot-pulse 1.6s ease-in-out infinite; }

.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; }
.csw-hero::before{ content:''; position:absolute; inset:0; opacity:.10; background:var(--gemini-grad-crux); background-size:300% 300%; animation:csw-breathe 8s var(--ease-emph) infinite alternate; 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:#fff; padding:3px 10px; border-radius:var(--r-pill); background:var(--gemini-grad); background-size:200% 200%; animation:csw-breathe 7s var(--ease-emph) infinite alternate; }
.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(--gemini-grad-crux); background-size:200% 100%; animation:csw-breathe 6s var(--ease-emph) infinite alternate; 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 ══════════════════════════════════════════════════════ */
.csw-inbox{ 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:12px; 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:12px; 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); height:34px; padding:0 12px; cursor:pointer; font-size:11.5px; font-weight:600; font-family:var(--body); white-space:nowrap; max-width:96px; 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:13.5px; 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:3px; background:var(--gemini-grad); }
.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:14px; 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:10.5px; 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:12.5px; 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:#25d366; } .csw-av__pres--ig{ background:#e1306c; }
/* 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:#25d366; 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(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); background:color-mix(in srgb, var(--danger) 12%, transparent); }
/* 24h window — conversation-bar pill */
.csw-winbar{ flex:0 0 auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-mute); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 9px; }
.csw-winbar--soon{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent); }
.csw-winbar--closed{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); background:color-mix(in srgb, var(--danger) 12%, transparent); animation:csw-dot-pulse 1.8s ease-in-out infinite; }
/* 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 */
.csw-360__acts{ display:flex; gap:8px; }
.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); }

/* ── Conversation pane ─────────────────────────────────────── */
.csw-conv{ flex:1; min-width:0; display:none; flex-direction:column; 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:16px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csw-conv__phone{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); margin-top:1px; }
.csw-conv__sub{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:11px; 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{ border-bottom:1px solid var(--line-soft); 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; }
.csw-360.open{ max-height:560px; }
.csw-360__in{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.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; }

/* 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; }
.csw-row{ display:flex; margin-top:6px; animation:csw-bubble-in var(--dur-m) var(--ease-spring) both; }
.csw-row.grouped{ margin-top:1px; }   /* consecutive same-sender = tight */
.csw-row.in{ justify-content:flex-start; } .csw-row.out{ justify-content:flex-end; }
.csw-bub{ max-width:min(78%, 300px); padding:6px 9px 5px; border-radius:14px; font-size:14.5px; line-height:1.4; position:relative; overflow-wrap:anywhere; min-width:0; }
.csw-bub.in{ background:var(--bg-card-2); border-top-left-radius:5px; }
.csw-bub.out{ background:#12503a; color:#f3fff8; border-top-right-radius:5px; }
.csw-row.grouped .csw-bub.in{ border-top-left-radius:14px; }
.csw-row.grouped .csw-bub.out{ border-top-right-radius:14px; }
/* Bubble tails — a small CSS notch on the bottom-outside corner (WhatsApp).
   Pure pseudo-element triangle, color-matched to the bubble; only the FIRST
   bubble of a run carries a tail (grouped runs stay flush). No glyphs. */
.csw-bub::after{ content:''; position:absolute; bottom:0; width:9px; height:13px; pointer-events:none; }
.csw-bub.in::after{ left:-6px; background:var(--bg-card-2); clip-path:polygon(100% 0, 100% 100%, 0 100%); border-bottom-left-radius:3px; }
.csw-bub.out::after{ right:-6px; background:#12503a; clip-path:polygon(0 0, 100% 100%, 0 100%); border-bottom-right-radius:3px; }
/* grouped + media/template bubbles drop the tail (only the run's first plain
   bubble keeps it, matching WhatsApp's single-tail-per-cluster look). */
.csw-row.grouped .csw-bub::after,
.csw-bub.has-img::after, .csw-bub.csw-bub--album::after, .csw-bub.csw-bub--tpl::after,
.csw-bub.csw-bub--deleted::after, .csw-bub.csw-bub__sticker::after,
.csw-bub:has(.csw-voice)::after, .csw-bub:has(.csw-bub__video)::after{ display:none; }
/* day divider */
.csw-daydiv{ align-self:center; font-size:10.5px; 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; }

/* Toasts (replace native alert) */
.csw-toasts{ position:fixed; left:0; right:0; bottom:calc(16px + var(--safe-bottom)); z-index:80; 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; }
.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:210px; max-height:360px; border-radius:11px; 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:10px; color:var(--ink-mute); font-family:var(--mono); line-height:1; white-space:nowrap; }
.csw-bub.out .csw-bub__t{ color:rgba(243,255,248,.62); }
/* 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: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: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:11px; 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:#f3fff8; }
.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:rgba(234,255,242,.62); }
/* No-image variant → tighter text-only card. */
.csw-unfurl--noimg .csw-unfurl__imgwrap{ display:none; }
/* 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); }

/* ── 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); }
/* 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%; 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__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; } }

/* ── Extra media bubbles ── */
.csw-bub__video{ display:block; max-width:240px; width:100%; border-radius:14px; 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:11px; 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; }
.csw-scrollbtm{ position:absolute; right:14px; bottom:84px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg-elev); color:var(--ink); font-size:18px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.45); z-index:5; animation:csw-fade var(--dur-3) both; }
.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. */
.csw-inputbox{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--bg-card); border-radius:24px; padding:6px 8px; transition:border-color var(--dur-3); }
.csw-inputbox:focus-within{ border-color: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); }
.csw-plus.on{ transform:rotate(45deg); 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:12px; 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. */
.csw-input{ flex:1; min-width:0; display:block; resize:none; height:34px; min-height:34px; max-height:150px; padding:7px 6px; border:none; background:transparent; color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.3; }
@media (min-width:880px){ .csw-input{ font-size:14px; } }
.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 ════════════════════════ */
.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; }
@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; }
.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; }
.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; }

/* 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(--gemini-grad-crux); background-size:200% 200%; color:#08210b; box-shadow:0 6px 22px -8px color-mix(in srgb, var(--g-violet) 60%, transparent); }
.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:13px; }
.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-skeleton 1.4s linear infinite; }
.csw-spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--g-violet); animation:csw-spin .8s linear infinite; }
.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
   (csw-breathe / pulse loops) 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-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-winbar--closed, .csw-waitchip--red,
  .csw-typing__d, .csw-recbar__dot, .csw-send, .csw-confirm,
  .csw-row, .csw-card, .csw-shell, .csw-sheet, .csw-think, .csw-skel,
  .csw-msearch, .csw-vprev, .csw-bub.csw-flash{ animation:none !important; }
  .csw-script{ scroll-behavior:auto !important; }
  /* The search-jump flash still needs to MARK the found message —
     a static ring instead of the animated glow. */
  .csw-bub.csw-flash{ box-shadow:0 0 0 2px var(--accent); }
}

/* ── 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. */
.csw-shell, .csw-overlay, .csw-toasts {
  color-scheme: dark;
  --bg:#0b0b0d; --bg-elev:#131316; --bg-card:#16161a; --bg-card-2:#1d1d22;
  --line:#26262d; --line-soft:#1c1c22; --line-strong:#3a3a44;
  --ink:#f4f4ee; --ink-dim:#c0c0b6; --ink-mute:#8b8b85; --ink-faint:#56564f;
  --accent:#d4ff3a; --accent-text:#0b0b0d;
  --danger:#ff4747; --warn:#ffb347; --ok:#4dd6a0;
}
/* 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 { background:var(--accent); color:var(--accent-text); }
.csw-rep__bar { background:var(--accent); }
/* 44px tap-target floor (expand hit area; glyphs stay visually small). */
.csw-back, .csw-burger, .csw-conv__back, .csw-conv__360btn, .csw-x { 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;
}

/* ── 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; }

/* Poll refreshes shouldn't re-play the entrance animation on every bubble. */
.csw-script.no-anim .csw-row{ 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; }
.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:12px; overflow:hidden; width:230px; max-width:72vw; }
.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:300px; }
.csw-album--1 .csw-album__c img, .csw-album--1 .csw-album__c video{ height:auto; max-height:300px; }
.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,rgba(255,255,255,.03)); }
.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:#F2A24C; background:rgba(242,162,76,.14); }
.csw-pay--ok{ color:#56E39F; background:rgba(86,227,159,.14); }
.csw-pay--paid{ color:#56E39F; background:rgba(86,227,159,.18); }
.csw-pay--fail{ color:#FF6B6B; background:rgba(255,107,107,.14); }
.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:#56E39F; 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:#56E39F; color:#56E39F; }
.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,rgba(255,255,255,.03)); }
.csw-ab__name{ font-size:13.5px; color:var(--ink); font-weight:600; }
.csw-ab__val{ color:#56E39F; 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:#56E39F; background:rgba(86,227,159,.14); }
.csw-ab__badge.due{ color:#F2A24C; background:rgba(242,162,76,.14); }
.csw-ab__badge.sent{ color:#7AA6FF; background:rgba(122,166,255,.14); }
.csw-ab__badge.mut{ color:var(--ink-mute); background:rgba(255,255,255,.05); }
.csw-ab__send.done{ color:#0A0A0C; background:#56E39F; border-color:#56E39F; }

/* ── 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:11px 11px 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:#f3fff8; }
.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:rgba(234,255,242,.55); }
.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:#eafff2; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
/* 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:#F2A24C; background:rgba(242,162,76,.16); }
.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,rgba(255,255,255,.03)); }
.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:3px; background:var(--gemini-grad); opacity:.9; }
.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 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; } }

/* 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); }
.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-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); }
.csw-thread--w120::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--danger); }
.csw-thread--w120 .csw-thread__name{ color: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 beside the unread dot. */
.csw-waitchip{ flex:0 0 auto; font-family:var(--mono); font-size:10px; font-weight:700; line-height:1; padding:3px 7px; border-radius:var(--r-pill);
  color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.csw-waitchip--amber{ color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); border-color:color-mix(in srgb, var(--warn) 32%, transparent); }
.csw-waitchip--red{ color:var(--danger); background:color-mix(in srgb, var(--danger) 16%, transparent); border-color:color-mix(in srgb, var(--danger) 36%, transparent); animation:csw-dot-pulse 1.6s ease-in-out infinite; }

/* 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. */
@keyframes csw-flash { 0%,55%{ box-shadow:0 0 0 2px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
  100%{ box-shadow:0 0 0 0 transparent; } }
.csw-bub.csw-flash{ animation:csw-flash 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:24px; 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-soft, #1a1a1a); }
.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); }