/* ═══════════════════════════════════════════════════════
   Conduyt · Team Chat
   ═══════════════════════════════════════════════════════ */
*{box-sizing:border-box}
:root{
  --ink:#2E3B5B;--ink-2:#545D7D;--ink-3:#7C86A5;--ink-4:#9AA3BA;
  --page:#F4F6FA;--card:#fff;--card-2:#F7F9FC;--card-3:#EEF1F7;
  --line:#E3E8F0;--line-2:rgba(46,59,91,.07);
  --navy:#0C1225;--navy-2:#141B30;--navy-3:#1D2640;
  --b-teal:#22F5A4;--b-cyan:#43DFF6;--b-violet:#956EFA;--b-amber:#FFC848;--b-rose:#FD4B6C;
  --teal:#0E8F5E;--cyan:#1A8BAB;--violet:#5A3BC0;--amber:#8A6400;--rose:#C4384F;
  --shadow:0 1px 2px rgba(46,59,91,.05),0 4px 16px -10px rgba(46,59,91,.4);
}
[data-theme="dark"]{
  --ink:#EAEEF7;--ink-2:#AEB7CC;--ink-3:#8A93A8;--ink-4:#646D82;
  --page:#080C16;--card:#111827;--card-2:#0D1320;--card-3:#1A2130;
  --line:#242B3B;--line-2:rgba(255,255,255,.06);
  --teal:#3FD98E;--cyan:#66C6F5;--violet:#B79BFF;--amber:#F2B45A;--rose:#FD8BA4;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.8);
}
body{margin:0;background:var(--page);color:var(--ink);font-family:'Geist',system-ui,sans-serif;padding:24px 30px 70px}
svg{width:14px;height:14px;flex:none}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.eb{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
h1{font-family:'Sora',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.02em;margin:4px 0 0}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.seg button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border:0;background:transparent;color:var(--ink-3);padding:6px 12px;border-radius:7px;cursor:pointer}
.seg button.on{background:linear-gradient(100deg,#22F5A4,#43DFF6 55%,#956EFA);color:#08211A}
.lede{font-size:13px;color:var(--ink-2);line-height:1.6;max-width:96ch;margin:14px 0 26px}
.lede b{color:var(--ink)}
.lede code{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--card-3);padding:1.5px 5px;border-radius:5px}
.shead{display:flex;align-items:baseline;gap:11px;margin:0 0 6px}
.shead .num{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--violet);background:rgba(149,110,250,.13);padding:3px 8px;border-radius:6px}
.shead h2{font-family:'Sora',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0}
.sd{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:0 0 16px;max-width:92ch}
.sd b{color:var(--ink)}
.sd code{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--card-3);padding:1.5px 5px;border-radius:5px}
.sec{margin-bottom:40px}

/* ── app frame ── */
.app{display:grid;grid-template-columns:176px 206px minmax(0,1fr) 240px;grid-template-rows:minmax(0,1fr);
  height:660px;max-width:1180px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
/* below ~1180 the right rail is the first thing to go — the conversation and
   the channel list are both load-bearing, the rail is reference */
@media(max-width:1180px){.app{grid-template-columns:176px 206px minmax(0,1fr)}.app .rail3{display:none}}
@media(max-width:860px){.app{grid-template-columns:206px minmax(0,1fr)}.app .appnav{display:none}}

/* ── the product's existing navy nav, for context only ── */
.appnav{background:var(--navy);display:flex;flex-direction:column;min-width:0;min-height:0;padding:11px 9px;gap:1px;overflow:hidden}
/* the real wordmark asset, not a hand-typed approximation */
.appnav .logo{padding:3px 6px 11px}
.appnav .org{display:flex;align-items:center;gap:7px;padding:7px 8px;margin-bottom:9px;border-radius:9px;
  background:rgba(255,255,255,.07);font-size:11.5px;color:rgba(255,255,255,.8);font-weight:600}
.appnav .org .dot{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#22F5A4,#956EFA);flex:none}
.appnav .grp{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);font-weight:700;padding:10px 7px 4px}
.appnav .it{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:8px;font-size:11.5px;
  color:rgba(255,255,255,.66);min-width:0}
.appnav .it .ic{width:13px;height:13px;opacity:.75;flex:none}
.appnav .it.on{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.appnav .it.on .ic{opacity:1;color:var(--b-teal)}
.appnav .it .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appnav .fade{margin-top:auto;flex:none;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.28);padding:8px 7px 2px;font-weight:700}

/* ── channel rail ── */
.rail{background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
.rhead{padding:12px 11px 9px;display:flex;align-items:center;gap:8px}
.rhead b{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;letter-spacing:-.018em;flex:1;color:var(--ink)}
.rhead .nw{width:27px;height:27px;border-radius:9px;background:linear-gradient(135deg,#22F5A4,#43DFF6 55%,#956EFA);
  display:grid;place-items:center;cursor:pointer;color:#08211A;box-shadow:0 4px 12px -5px rgba(67,223,246,.7)}
.rsrch{margin:0 11px 8px;display:flex;align-items:center;gap:7px;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:12px;color:var(--ink-4)}
.rsrch svg{color:var(--ink-4)}
.rscroll{flex:1 1 0;min-height:0;overflow-y:auto;padding:0 7px 12px}
.rgrp{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:11px 7px 5px}
.rgrp .n{margin-left:auto;opacity:.7}
.ch{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:pointer;color:var(--ink-2);
  font-size:12.5px;min-width:0;position:relative}
.ch:hover{background:var(--card-3);color:var(--ink)}
/* tinted active row, exactly as Reports does it — no gradient bar */
.ch.on{background:rgba(149,110,250,.11);color:var(--violet);font-weight:600}
.ch .hash{font-size:13px;flex:none;width:15px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.ch .hash svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ch.on .hash{color:var(--violet)}
.ch .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a count, like Reports — the rose unread pill is reserved for genuine unreads */
.ch .ct{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;color:var(--ink-3);flex:none;margin-left:auto}
.ch.on .ct{color:var(--violet)}
.ch .ct.unread{background:var(--b-rose);color:#fff;padding:2px 6px;border-radius:99px;font-size:9px}
/* auto channels are written by the CRM — marked by the glyph, not a slab of colour */
.ch.auto .hash{color:var(--teal)}
.ch.auto.on .hash{color:var(--violet)}
.ch .av{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;position:relative}
.ch .av .pr{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--card)}
.pr.on{background:var(--b-teal)}.pr.call{background:var(--b-amber)}.pr.off{background:#5C6580}
.rfoot{padding:10px 11px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-3)}
.rfoot .me{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#22F5A4,#43DFF6);color:#07231A;display:grid;place-items:center;font-size:9px;font-weight:700}
.rfoot b{color:var(--ink);font-weight:600}

/* avatars */
.g1{background:linear-gradient(135deg,#22F5A4,#43DFF6);color:#07231A}
.g2{background:linear-gradient(135deg,#43DFF6,#956EFA);color:#fff}
.g3{background:linear-gradient(135deg,#956EFA,#FD88C0);color:#fff}
.g4{background:linear-gradient(135deg,#FD88C0,#22F5A4);color:#2A1020}
.g5{background:linear-gradient(135deg,#22F5A4,#956EFA);color:#fff}

/* ── conversation ── */
.conv{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;container-type:inline-size;
  /* app is LIGHT → chat is dark */
  --ink:#EAEEF7;--ink-2:#B3BCD0;--ink-3:#A3ADC2;--ink-4:#8C96AC;
  --card:#161E2E;--card-2:#101725;--card-3:#212B42;
  --line:#2B3450;--line-2:rgba(255,255,255,.08);
  --teal:#3FD98E;--cyan:#66C6F5;--violet:#B79BFF;--amber:#F2B45A;--rose:#FD8BA4;
  background:#0B1020;color:var(--ink)}
/* app is DARK → chat is light */
[data-theme="dark"] .clip .play{background:var(--navy);color:var(--b-teal)}
[data-theme="dark"] .conv{
  --ink:#2E3B5B;--ink-2:#545D7D;--ink-3:#7C86A5;--ink-4:#9AA3BA;
  --card:#fff;--card-2:#F7F9FC;--card-3:#EEF1F7;
  --line:#E3E8F0;--line-2:rgba(46,59,91,.07);
  --teal:#0E8F5E;--cyan:#1A8BAB;--violet:#5A3BC0;--amber:#8A6400;--rose:#C4384F;
  background:#F2F5FA}
/* ── WALLPAPER ─────────────────────────────────────────────────────────
   A doodle tile in the product's own vocabulary — phones, deals, trophies,
   funnels — rather than WhatsApp's generic set. Applied as a MASK, so one
   asset tints itself per theme instead of shipping a light and a dark PNG.

   Opacity is the whole design decision here: a wallpaper that competes with
   message text is worse than no wallpaper, and chat is read all day. It sits
   at .05 on light and .07 on dark, which is visible on an empty stretch and
   disappears the moment text is over it. */
.conv::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(700px 320px at 88% -8%, rgba(149,110,250,.20), transparent 70%),
    radial-gradient(620px 300px at 4% 104%, rgba(34,245,164,.15), transparent 70%),
    radial-gradient(500px 240px at 46% 50%, rgba(67,223,246,.09), transparent 72%)}
[data-theme="dark"] .conv::before{background:
    radial-gradient(700px 320px at 88% -8%, rgba(149,110,250,.11), transparent 70%),
    radial-gradient(620px 300px at 4% 104%, rgba(34,245,164,.11), transparent 70%),
    radial-gradient(500px 240px at 46% 50%, rgba(67,223,246,.06), transparent 72%)}
/* the doodles now carry the brand ramp instead of flat ink, and they are
   properly visible — the pattern is the fun, so it has to actually read */
/* bright ramp on the dark room, deeper ramp on the light one */
.conv::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(125deg,#22F5A4,#43DFF6 34%,#8FD6FF 58%,#C4A6FF 78%,#FFA8D8);
  opacity:.46;
  -webkit-mask:url(chat-doodles.png) repeat 0 0/560px auto;
          mask:url(chat-doodles.png) repeat 0 0/560px auto}
[data-theme="dark"] .conv::after{
  background-image:linear-gradient(125deg,#0E8F5E,#1A8BAB 38%,#5A3BC0 72%,#C4388A);opacity:.38}
.conv>*{position:relative;z-index:1}

/* Message surfaces go opaque over it. Reading a call transcript through a
   bicycle doodle is the failure mode of every patterned chat background. */

.crm{background:color-mix(in srgb,var(--card-2) 94%,transparent)}
.chead{flex:none;display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-2);min-width:0;background:var(--card)}
.chead .t{min-width:0;flex:1}
.chead .t b{display:block;font-family:'Sora',sans-serif;font-size:14.5px;font-weight:600;letter-spacing:-.014em}
.chead .t small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .hact{display:flex;gap:5px;flex:none}
.ib{width:28px;height:28px;border-radius:7px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.ib:hover{background:var(--card-3);color:var(--ink)}
.faces{display:flex;flex:none}
@container (max-width:560px){.faces{display:none}}
.conv{container-type:inline-size}
.faces .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:700;margin-left:-6px;box-shadow:0 0 0 2px var(--card)}
.faces .av:first-child{margin-left:0}

/* min-height:0 is what makes this a scroll container at all — without it the
   flex default (auto) lets it grow forever and the composer leaves the frame */
.msgs{flex:1 1 0;min-height:0;overflow-y:auto;padding:14px 16px;min-width:0}
.daysep{display:flex;align-items:center;gap:11px;margin:14px 0 12px}
.daysep::before,.daysep::after{content:'';flex:1;height:1px;background:var(--line-2)}
.daysep span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;background:var(--card);padding:4px 11px;border-radius:99px;
  box-shadow:0 1px 2px rgba(46,59,91,.06)}

.daysep::before,.daysep::after{opacity:.6}

.m{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;padding:5px 0;position:relative}
.m .av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:700}
.m.cont{padding-top:1px}
.m.cont .av{visibility:hidden;height:0}
/* solid ground over the pattern — and generous radius, because this is the one
   surface in the CRM that is allowed to feel casual */
.m .bub{background:var(--card);border-radius:4px 14px 14px 14px;padding:8px 12px 9px;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 14px -10px rgba(0,0,0,.5);
  display:inline-block;max-width:100%;min-width:0}

.m.cont .bub{border-radius:14px}
.m .who{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.m .who b{font-size:12.5px;font-weight:600;letter-spacing:-.008em}
.m .who .tm{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3)}
.m .who .role{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-3);background:var(--card-3);padding:2px 6px;border-radius:4px}
.m .bd{font-size:12.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.m .bd b{color:var(--ink);font-weight:600}
.mention{color:var(--violet);background:rgba(149,110,250,.12);padding:1px 5px;border-radius:4px;font-weight:600}
.mention.rec{color:var(--cyan);background:rgba(67,223,246,.15)}

/* reactions */
.rx{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;padding-left:2px}
.rx span{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:3px 9px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--ink-2);
  font-weight:600;transition:transform .12s,border-color .12s}
.rx span:hover{transform:translateY(-1px) scale(1.04);border-color:var(--ink-4)}
.rx span.mine{border-color:var(--b-violet);background:rgba(149,110,250,.14);color:var(--violet)}
/* the count is the social signal — make it legible */
.rx span::first-letter{font-size:14px}
.rx .add{color:var(--ink-4);padding:2px 7px}

/* ── the CRM-native message bodies ── */
.crm{margin-top:7px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card-2);max-width:100%}
.crm .ch-top{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--line-2);background:var(--card)}
.crm .ch-top .k{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.crm .ch-top .live{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.crm .ch-top .live i{width:5px;height:5px;border-radius:50%;background:var(--b-teal)}
.crm .bdy{padding:11px}
.crm .r1{display:flex;align-items:baseline;gap:9px}
.crm .r1 .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm .r1 .amt{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.crm .r2{display:flex;align-items:center;gap:7px;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.crm .r2 .age{margin-left:auto;color:var(--ink-3)}
/* the same gradient bar as the deal cards — one language across the product */
.trk{position:relative;height:5px;margin-top:8px;border-radius:99px;background:var(--card-3);overflow:hidden}
.trk .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:calc(var(--pn) * 1%);
  background-image:linear-gradient(90deg,#22F5A4 0%,#43DFF6 48%,#956EFA 100%);
  background-size:calc(10000% / var(--pn)) 100%;background-repeat:no-repeat}
.trk .ticks{position:absolute;inset:0;display:flex}
.trk .ticks i{flex:1;border-right:1.5px solid var(--card-2)}
.trk .ticks i:last-child{border-right:0}
.crm .acts{display:flex;gap:6px;padding:9px 11px;border-top:1px solid var(--line-2);background:var(--card);flex-wrap:wrap}
.crm .acts button{flex:1 1 auto;min-width:0;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 9px;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.crm .acts button:hover{border-color:var(--ink-4);color:var(--ink)}
.crm .acts button.pri{border:0;background:var(--navy);color:#fff}
/* the primary sits opposite the room it is in */
.crm .acts button.pri{background:#E8ECF5;color:#0A0E18}
[data-theme="dark"] .crm .acts button.pri{background:var(--navy);color:#fff}

/* call clip */
.clip{display:flex;align-items:center;gap:10px;padding:11px}
.clip .play{width:32px;height:32px;border-radius:50%;background:#E8ECF5;color:#0B1020;display:grid;place-items:center;cursor:pointer;flex:none}
.clip .wv{flex:1;display:flex;align-items:center;gap:2px;height:26px;min-width:0}
.clip .wv i{flex:1;background:var(--b-cyan);opacity:.45;border-radius:1px;min-width:2px}
.clip .wv i.on{opacity:1}
.clip .tm{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);flex:none;font-weight:600}
.quote{padding:0 11px 11px;font-size:12px;color:var(--ink-2);line-height:1.5;font-style:italic}
.quote b{font-style:normal}

/* win celebration */
.win{position:relative;margin-top:8px;border-radius:15px;padding:15px 17px;max-width:100%;overflow:hidden;
  background:linear-gradient(112deg,#0C1225,#17284A 48%,#2A1E52);
  box-shadow:0 10px 34px -14px rgba(34,245,164,.55),0 0 0 1px rgba(34,245,164,.28)}
/* the ramp as a lit edge across the top */
.win::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#22F5A4,#43DFF6 48%,#956EFA)}
.win .wt{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:#22F5A4;position:relative}
.win .wt svg{width:13px;height:13px}
.win h4{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.026em;margin:8px 0 5px;
  position:relative;color:#fff;line-height:1.15}
.win h4 .amt{background:linear-gradient(100deg,#22F5A4,#43DFF6 60%,#B79BFF);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.win p{margin:0;font-size:12.5px;color:rgba(255,255,255,.66);position:relative}
.win p b{color:#fff;font-weight:600}
.win .who-av{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;
  font-size:7.5px;font-weight:700;vertical-align:-5px;margin-right:5px}
/* Fires ONCE on arrival, then settles. A chat log persists — if the burst looped,
   scrolling #wins would leave twenty cards in permanent motion: a battery drain and
   a vestibular hazard. Historical cards render static; click one here to replay. */
.win .conf{position:absolute;top:-12px;width:5px;height:11px;border-radius:1px;opacity:0;
  animation:fall 3.2s linear 1 both}
@keyframes fall{0%{transform:translateY(-14px) rotate(0);opacity:0}
  12%{opacity:.95}85%{opacity:.85}100%{transform:translateY(150px) rotate(340deg);opacity:0}}

/* handoff */
.hand{border-color:rgba(255,200,72,.45);background:rgba(255,200,72,.08)}
.hand .ch-top .k{color:var(--amber)}
.hand .acts button.yes{border:0;background:var(--amber);color:#2A1D00;font-weight:700}

/* system line */
.sys{display:inline-flex;align-items:center;gap:8px;margin:5px 0 5px 39px;padding:6px 11px;font-size:11.5px;
  color:var(--ink-3);background:var(--card);border-radius:99px;box-shadow:0 1px 2px rgba(0,0,0,.18)}

.sys svg{color:var(--ink-4)}
.sys b{color:var(--ink-2);font-weight:600}

/* typing */
.typing{display:inline-flex;align-items:center;gap:8px;margin:4px 0 0 55px;padding:6px 12px;font-size:11.5px;
  color:var(--ink-3);background:var(--card);border-radius:99px;box-shadow:0 1px 2px rgba(46,59,91,.06)}

.typing .dots{display:inline-flex;gap:3px}
.typing .dots i{width:4px;height:4px;border-radius:50%;background:var(--ink-4);animation:tp 1.3s ease-in-out infinite}
.typing .dots i:nth-child(2){animation-delay:.2s}.typing .dots i:nth-child(3){animation-delay:.4s}
@keyframes tp{50%{opacity:.25;transform:translateY(-2px)}}

/* composer */
.comp{flex:none;border-top:1px solid var(--line-2);padding:11px 16px 13px;background:var(--card)}

.cbox{border:1px solid var(--line);border-radius:11px;background:var(--card);overflow:hidden}
.cbox:focus-within{border-color:var(--b-violet);box-shadow:0 0 0 3px rgba(149,110,250,.12)}
.cbox .inp{padding:10px 12px;font-size:13px;color:var(--ink-3);min-height:38px}
.ctools{display:flex;align-items:center;gap:3px;padding:7px 9px;border-top:1px solid var(--line-2);background:var(--card-2)}
.ctools .sp{flex:1}
.ctools .send{width:30px;height:30px;border-radius:8px;border:0;background:linear-gradient(100deg,#22F5A4,#43DFF6 55%,#956EFA);color:#08211A;display:grid;place-items:center;cursor:pointer}
.slash{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--violet);background:rgba(149,110,250,.12);padding:4px 8px;border-radius:6px;cursor:pointer}

/* slash menu */
.smenu{position:absolute;left:16px;right:16px;bottom:100%;margin-bottom:6px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;box-shadow:0 -8px 30px -12px rgba(46,59,91,.4);padding:5px;z-index:10;max-width:340px}
.smenu .si{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:12.5px;cursor:pointer}
.smenu .si:hover,.smenu .si.on{background:var(--card-3)}
.smenu .si .cmd{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--violet);flex:none}
.smenu .si small{margin-left:auto;font-size:11px;color:var(--ink-3)}
.comp{position:relative}

/* ── right rail ── */
.rail3{border-left:1px solid var(--line-2);background:var(--card-2);display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
.r3s{padding:13px 14px;border-bottom:1px solid var(--line-2)}
.r3s .h{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.r3s .h .n{margin-left:auto;color:var(--ink-4)}
.pin{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:var(--card);border:1px solid var(--line-2);margin-bottom:5px;cursor:pointer;min-width:0}
.pin:hover{border-color:var(--b-violet)}
.pin .t{flex:1;min-width:0}
.pin .t b{display:block;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin .t small{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-3);margin-top:1px}
.pin .amt{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--ink-2);flex:none}
.mem{display:flex;align-items:center;gap:8px;padding:5px 0;min-width:0}
.mem .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;position:relative;flex:none}
.mem .av .pr{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--card-2)}
.mem .t{flex:1;min-width:0}
.mem .t b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* presence the CRM actually knows — "on a call with Acme", not "active" */
.mem .t small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem .t small.busy{color:var(--amber);font-weight:600}
.mem .t small.live{color:var(--teal);font-weight:600}

.rules{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;max-width:1040px}
.rules .k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);font-weight:700;margin-bottom:11px}
.rules h4{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
.rules ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:9px}
.rules li{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.rules li b{color:var(--ink)}
.rules code{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--card-3);padding:1.5px 5px;border-radius:5px;color:var(--ink)}

/* scope table */
.scope{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1040px}
.scol{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.scol .sh{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--line-2)}
.scol .sh b{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.scol .sh .tag{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:99px}
.scol.in .sh .tag{background:rgba(34,245,164,.15);color:var(--teal)}
.scol.out .sh .tag{background:var(--card-3);color:var(--ink-3)}
.scol ul{margin:0;padding:8px 0;list-style:none;display:block}
.scol li{display:flex;gap:10px;padding:9px 15px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.scol li+li{border-top:1px solid var(--line-2)}
.scol li svg{margin-top:2px}
.scol.in li svg{color:var(--teal)}
.scol.out li svg{color:var(--ink-4)}
.scol li b{color:var(--ink)}


/* ── channel identity ─────────────────────────────────────────────
   A column of identical grey hashes is unscannable. Each channel owns a
   hue, so people navigate by colour before they read a word. */
.ch .hash{font-weight:700}
.ch[data-c="wins"] .hash{color:#0E8F5E}
.ch[data-c="new-leads"] .hash{color:#1A8BAB}
.ch[data-c="needs-a-hand"] .hash{color:#B87A0A}
.ch[data-c="floor"] .hash{color:#5A3BC0}
.ch[data-c="closers"] .hash{color:#C4384F}
.ch[data-c="random"] .hash{color:#7C86A5}
[data-theme="dark"] .ch[data-c="wins"] .hash{color:#3FD98E}
[data-theme="dark"] .ch[data-c="new-leads"] .hash{color:#66C6F5}
[data-theme="dark"] .ch[data-c="needs-a-hand"] .hash{color:#F2B45A}
[data-theme="dark"] .ch[data-c="floor"] .hash{color:#B79BFF}
[data-theme="dark"] .ch[data-c="closers"] .hash{color:#FD8BA4}

/* today-on-the-floor gets some pride */
.r3s .streak{border-radius:11px;padding:11px 12px;background:linear-gradient(110deg,#0C1225,#1D2640);color:#fff;margin-bottom:6px}
.r3s .streak .l{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}
.r3s .streak .v{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.022em;margin-top:4px;
  background:linear-gradient(100deg,#22F5A4,#43DFF6 60%,#B79BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.r3s .streak .s{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px}


/* ── celebration variants ─────────────────────────────────────────
   Each owns a distinct MOTION, not just a palette: won falls, milestone
   bursts outward, birthday rises. Motion is the fastest read at a glance. */
.win .burst{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:15px}
.win{cursor:pointer}

/* milestone — a team or personal record */
.win.milestone{box-shadow:0 10px 34px -14px rgba(149,110,250,.6),0 0 0 1px rgba(149,110,250,.32);
  background:linear-gradient(112deg,#150E2E,#241A4D 48%,#3A1C46)}
.win.milestone::after{background:linear-gradient(90deg,#956EFA,#C4A6FF 48%,#FD88C0)}
.win.milestone .wt{color:#C4A6FF}
.win.milestone h4 .amt{background:linear-gradient(100deg,#C4A6FF,#FD88C0 70%,#FFC848);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.win.milestone .ray{position:absolute;left:calc(50% - 2px);top:46px;width:4px;height:15px;border-radius:2px;
  opacity:0;animation:ray 1.7s cubic-bezier(.16,.84,.3,1) 1 both}
@keyframes ray{
  0%{transform:rotate(var(--a)) translateY(-6px) scale(.35);opacity:0}
  16%{opacity:1}
  100%{transform:rotate(var(--a)) translateY(-150px) scale(1);opacity:0}}

/* birthday — balloons rise, they do not fall */
.win.bday{box-shadow:0 10px 34px -14px rgba(253,136,192,.58),0 0 0 1px rgba(253,136,192,.3);
  background:linear-gradient(112deg,#2A1226,#3D1A38 48%,#43261C)}
.win.bday::after{background:linear-gradient(90deg,#FD88C0,#FFC848 52%,#43DFF6)}
.win.bday .wt{color:#FD88C0}
.win.bday h4 .amt{background:linear-gradient(100deg,#FFC848,#FD88C0 65%,#C4A6FF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.win.bday .bal{position:absolute;bottom:-30px;width:15px;height:19px;border-radius:50% 50% 46% 46%;
  opacity:0;animation:rise 4.4s cubic-bezier(.42,.06,.5,1) 1 both}
.win.bday .bal::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:13px;
  background:rgba(255,255,255,.34)}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) rotate(0);opacity:0}
  14%{opacity:.94}
  82%{opacity:.8}
  100%{transform:translateY(-210px) translateX(var(--dx)) rotate(var(--rz));opacity:0}}

/* one switch kills all three — the card still reads by label, headline and colour */
@media (prefers-reduced-motion:reduce){
  .win .conf,.win .ray,.win .bal{animation:none;display:none}
  .win{cursor:default}
}

/* ── send-with-effect picker ──────────────────────────────────────
   Deliberate, never default. Auto cards bring their own effect; this is for
   the human moments the CRM cannot detect. */
.comp{position:relative}
.fxmenu{position:absolute;left:12px;bottom:calc(100% + 8px);width:210px;z-index:30;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:5px;
  box-shadow:0 18px 44px -14px rgba(28,35,64,.4)}
[data-theme="dark"] .fxmenu{box-shadow:0 20px 50px -14px rgba(0,0,0,.85)}
.fxh{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);font-weight:700;padding:7px 8px 6px}
.fxi{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:12.5px}
.fxi:hover{background:var(--card-3)}
.fxi b{font-weight:600;color:var(--ink)}
.fxi small{margin-left:auto;font-size:10.5px;color:var(--ink-4)}
.fxi.on{background:rgba(149,110,250,.12)}
.fxi.on b{color:var(--violet)}
.fxi.off{border-top:1px solid var(--line-2);margin-top:3px;border-radius:0 0 7px 7px}
.fxi .sw{width:15px;height:15px;border-radius:4px;flex:none}
.sw.confetti{background:linear-gradient(135deg,#22F5A4,#43DFF6 50%,#956EFA)}
.sw.rays{background:linear-gradient(135deg,#C4A6FF,#FD88C0 60%,#FFC848)}
.sw.balloons{background:linear-gradient(135deg,#FD88C0,#FFC848 55%,#43DFF6)}
.sw.none{background:var(--card-3);border:1px dashed var(--line)}
/* armed state is on BOTH the trigger and Send — a rep must never fire confetti
   into a support thread because they forgot an effect was still loaded */
.ib.fx.armed{color:var(--violet);background:rgba(149,110,250,.14)}
.send.armed{box-shadow:0 0 0 2px rgba(149,110,250,.5)}

/* ── three more celebrations ──────────────────────────────────────
   Every one is CRM-DETECTABLE — hire date, first close, call counts. Nothing
   here needs a human to remember it, which is the whole argument against
   running this in Slack. Motion stays unique per type: rings expand for
   tenure, streamers sweep in for an arrival, streaks shoot up for a record. */

/* work anniversary — rings, like growth rings */
.win.anniv{box-shadow:0 10px 34px -14px rgba(255,200,72,.5),0 0 0 1px rgba(255,200,72,.3);
  background:linear-gradient(112deg,#24190C,#3A2A12 48%,#123026)}
.win.anniv::after{background:linear-gradient(90deg,#FFC848,#22F5A4 55%,#43DFF6)}
.win.anniv .wt{color:#FFC848}
.win.anniv h4 .amt{background:linear-gradient(100deg,#FFC848,#22F5A4 70%,#43DFF6);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.win.anniv .ring{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;border:2px solid;opacity:0;animation:ripple 2.8s cubic-bezier(.22,.7,.3,1) 1 both}
@keyframes ripple{0%{transform:scale(.18);opacity:0}14%{opacity:.62}100%{transform:scale(7.5);opacity:0}}

/* welcome aboard — streamers sweep in from the edges */
.win.welcome{box-shadow:0 10px 34px -14px rgba(67,223,246,.55),0 0 0 1px rgba(67,223,246,.3);
  background:linear-gradient(112deg,#08202C,#10304A 48%,#12324A)}
.win.welcome::after{background:linear-gradient(90deg,#43DFF6,#22F5A4 52%,#956EFA)}
.win.welcome .wt{color:#43DFF6}
.win.welcome h4 .amt{background:linear-gradient(100deg,#43DFF6,#22F5A4 65%,#C4A6FF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.win.welcome .strm{position:absolute;height:3px;border-radius:2px;opacity:0;
  animation:sweep 2.5s cubic-bezier(.15,.78,.25,1) 1 both}
@keyframes sweep{0%{transform:translateX(var(--from)) scaleX(.25);opacity:0}
  20%{opacity:.92}100%{transform:translateX(var(--to)) scaleX(1);opacity:0}}

/* personal best — streaks shoot upward */
.win.record{box-shadow:0 10px 34px -14px rgba(253,75,108,.5),0 0 0 1px rgba(253,136,160,.3);
  background:linear-gradient(112deg,#2A0E18,#42182A 48%,#3E2412)}
.win.record::after{background:linear-gradient(90deg,#FD4B6C,#FD88C0 50%,#FFC848)}
.win.record .wt{color:#FD8BA4}
.win.record h4 .amt{background:linear-gradient(100deg,#FD8BA4,#FFC848 70%,#22F5A4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.win.record .strk{position:absolute;bottom:-22px;width:3px;border-radius:2px;opacity:0;
  animation:shoot 2s cubic-bezier(.3,.9,.25,1) 1 both}
@keyframes shoot{0%{transform:translateY(0) scaleY(.35);opacity:0}
  18%{opacity:1}100%{transform:translateY(-215px) scaleY(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .win .ring,.win .strm,.win .strk{animation:none;display:none}
}

/* ── needs a hand ─────────────────────────────────────────────────
   Same family, opposite intent. No confetti: a rep stuck on a deal is not a
   celebration, and dressing it like one teaches the floor to scroll past it.
   Amber, not rose — rose means something FAILED; this is still winnable.
   The beacon pulses three times and stops. An unanswered ask should keep a
   steady edge, not thrash forever. */
.win.help{box-shadow:0 10px 30px -14px rgba(255,200,72,.42),0 0 0 1px rgba(255,200,72,.34);
  background:linear-gradient(112deg,#221A0A,#33280F 52%,#2A1F14);cursor:default}
.win.help::after{background:linear-gradient(90deg,#FFC848,#F2B45A 60%,#FD88C0)}
.win.help .wt{color:#FFC848}
.win.help h4 .amt{background:linear-gradient(100deg,#FFC848,#FD88C0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.win.help .beacon{position:absolute;left:19px;top:17px;width:13px;height:13px;border-radius:50%;
  border:2px solid #FFC848;opacity:0;animation:ping 1.9s ease-out 3 both}
@keyframes ping{0%{transform:scale(.5);opacity:.85}100%{transform:scale(4.2);opacity:0}}
/* the ask itself, quoted — so a helper knows what they are walking into */
.win.help .why{margin:9px 0 0;padding:9px 11px;border-radius:8px;position:relative;
  background:rgba(255,255,255,.05);border-left:2px solid rgba(255,200,72,.55);
  font-size:12px;color:rgba(255,255,255,.78);font-style:italic;line-height:1.5}
.win .hact{display:flex;gap:7px;margin-top:11px;position:relative;flex-wrap:wrap}
.win .hb{flex:none;display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;
  border-radius:9px;padding:9px 14px;font:600 12.5px 'Geist';line-height:1;
  cursor:pointer;background:#FFC848;color:#2A1F04}
.win .hb svg{width:13px;height:13px;flex:none}
.win .hb.ghost{background:transparent;color:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.2)}
.win .hb.ghost:hover{color:#fff;border-color:rgba(255,255,255,.4)}
/* claimed — the card must resolve in scrollback, not sit asking forever */
.win.help.claimed{box-shadow:0 10px 30px -16px rgba(34,245,164,.4),0 0 0 1px rgba(34,245,164,.26)}
.win.help.claimed::after{background:linear-gradient(90deg,#22F5A4,#43DFF6)}
.win.help.claimed .wt{color:#22F5A4}
.win.help.claimed .beacon,.win.help.claimed .hact{display:none}
.win.help .got{display:none;align-items:center;gap:8px;margin-top:11px;position:relative;
  font-size:12.5px;color:#22F5A4;font-weight:600}
.win.help .got svg{width:14px;height:14px}
.win.help.claimed .got{display:flex}
@media (prefers-reduced-motion:reduce){.win.help .beacon{animation:none;display:none}}



/* ── PANIC ─────────────────────────────────────────────────────────
   The one card that LOOPS. Every other burst here fires once and settles,
   because a persistent log full of moving history is a battery drain and a
   vestibular hazard. An unanswered alarm is the opposite case: it is not
   history, it is a live state, and it stops being true the moment someone
   takes it. So the siren runs until claimed — and claiming is what silences it.
   Rose is correct here in a way it is NOT for .help: help means stuck but
   winnable, panic means going wrong right now. */
.win.panic{border-color:rgba(230,70,90,.55);background:
  radial-gradient(120% 140% at 12% 0,rgba(230,70,90,.16),transparent 60%),var(--card-2);
  animation:panicPulse 1.15s ease-in-out infinite}
@keyframes panicPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(230,70,90,.42),0 0 22px -6px rgba(230,70,90,.5)}
  50%    {box-shadow:0 0 0 5px rgba(230,70,90,0),0 0 34px -4px rgba(230,70,90,.8)}}
.win.panic .wt{color:#E6465A}
[data-theme="dark"] .win.panic .wt{color:#FF7C8E}
.win.panic h4 .amt{color:#E6465A}
[data-theme="dark"] .win.panic h4 .amt{color:#FF7C8E}

/* sweeping beams, the way a real light behaves — two opposed lobes on one rotor */
.win.panic .burst{overflow:hidden}
.win.panic .bm{position:absolute;top:0;bottom:0;left:0;width:46%;
  background:linear-gradient(90deg,rgba(230,70,90,0),rgba(230,70,90,.34) 50%,rgba(230,70,90,0));
  animation:panicSweep 1.9s cubic-bezier(.45,0,.55,1) infinite alternate}
.win.panic .bm.b2{display:none}
@keyframes panicSweep{from{transform:translateX(-46%)}to{transform:translateX(264%)}}
.win.panic .glow{position:absolute;inset:0;
  background:radial-gradient(60% 90% at 50% 50%,rgba(230,70,90,.18),transparent 70%);
  animation:panicPulse 1.15s ease-in-out infinite}

/* claimed = alarm answered. Everything stops and the card goes quiet. */
.win.panic.claimed{animation:none;border-color:rgba(46,159,110,.5);background:var(--card-2)}
.win.panic.claimed .burst{display:none}
.win.panic.claimed .wt{color:var(--b-teal)}
.win.panic.claimed .hact{display:none}
.win.panic.claimed .pinged{display:none}

/* call first — a panic is a "talk now", not a "type back" */
.win .hb.now{background:#E6465A;color:#fff;border-color:transparent}
.win .hb.now:hover{background:#D03A4D}
[data-theme="dark"] .win .hb.now{background:#FF5E72;color:#23070C}
.win.panic .hb.claim{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.win.panic .hb.claim:hover{border-color:rgba(255,255,255,.55)}

/* who was actually woken up. A panic that only posts to a channel can be missed,
   so the card states the page it sent. */
.pinged{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;
  border-top:1px dashed rgba(230,70,90,.3);font-size:11px;color:var(--ink-3)}
.pinged svg{width:12px;height:12px;flex:none;color:#E6465A;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pinged b{color:var(--ink-2);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .win.panic,.win.panic .bm,.win.panic .glow{animation:none}
  .win.panic{box-shadow:0 0 0 2px rgba(230,70,90,.55)}
}

/* the client's siren — filled outline on a 32 grid, so it takes no stroke */
.wt svg.siren-ic{width:15px;height:15px;stroke:none;flex:none}
.wt svg.siren-ic path{fill:currentColor}