/* ============================================================================
   THE DOCK — the war room's own material, not a lookalike.
   Same tokens, same Manrope, same glass: low alpha, high blur, bright rim. It
   is the same room, so it must not feel like a different product.
   ========================================================================== */
.zdock{
  --z-bg:oklch(0.145 0.020 288); --z-surf:oklch(0.20 0.022 288);
  --z-line:oklch(1 0 0/.14); --z-ink:oklch(0.985 0.003 288);
  --z-dim:oklch(0.845 0.010 288); --z-faint:oklch(0.690 0.016 288);
  --z-gold:oklch(0.880 0.095 80); --z-off:oklch(0.820 0.085 180);
  --z-me:oklch(0.720 0.135 288);
  --z-pane:oklch(0.30 0.022 288/.24); --z-pane-line:oklch(1 0 0/.16);
  --z-bub:oklch(0.42 0.020 288/.20); --z-bub-line:oklch(1 0 0/.15);
  --z-bub-me:oklch(0.58 0.150 290/.34); --z-bub-me-line:oklch(0.88 0.12 290/.42);
  position:fixed;right:20px;bottom:20px;z-index:9000;
  font-family:Manrope,system-ui,-apple-system,sans-serif;font-weight:400;
}
.zdock [hidden]{display:none!important}   /* an explicit display: beats the attribute */

.zd-pill{
  display:flex;align-items:center;gap:9px;padding:12px 19px;border-radius:999px;cursor:pointer;
  background:var(--z-pane);border:1px solid var(--z-pane-line);color:var(--z-ink);
  font:600 13.5px/1 Manrope,system-ui,sans-serif;letter-spacing:-.01em;
  -webkit-backdrop-filter:blur(44px) saturate(180%);backdrop-filter:blur(44px) saturate(180%);
  box-shadow:0 18px 44px oklch(0.05 0.02 288/.5), inset 0 1px 0 oklch(1 0 0/.22);
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s;
}
.zd-pill:hover{transform:translateY(-2px);border-color:oklch(1 0 0/.3)}
.zdock.on .zd-pill{display:none}
.zd-ico{width:7px;height:7px;border-radius:50%;background:var(--z-off);
  box-shadow:0 0 9px var(--z-off);animation:zdp 2.4s ease-in-out infinite}
@keyframes zdp{0%,100%{opacity:1}50%{opacity:.4}}
.zd-badge{background:oklch(0.820 0.090 18);color:oklch(0.16 0.02 288);border-radius:999px;
  padding:1px 8px;font-size:11px;font-weight:700}

.zd-panel{
  position:relative;
  width:min(392px,calc(100vw - 32px));height:min(580px,calc(100vh - 96px));
  display:flex;flex-direction:column;border-radius:26px;
  /* hidden first as the fallback; clip wins where supported and never scrolls */
  overflow:hidden;overflow:clip;
  background:oklch(0.145 0.020 288);border:1px solid var(--z-pane-line);
  -webkit-backdrop-filter:blur(44px) saturate(180%);backdrop-filter:blur(44px) saturate(180%);
  box-shadow:0 30px 70px oklch(0.05 0.02 288/.55), inset 0 1px 0 oklch(1 0 0/.24);
}
.zd-head{display:flex;align-items:center;gap:10px;padding:15px 17px;
  border-bottom:1px solid oklch(1 0 0/.09)}
.zd-title{flex:1;font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--z-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zd-head button,.zd-head a{background:none;border:0;color:var(--z-faint);cursor:pointer;
  font-size:14px;padding:4px 6px;text-decoration:none;border-radius:9px;line-height:1}
.zd-head button:hover,.zd-head a:hover{color:var(--z-ink);background:oklch(1 0 0/.10)}

.zd-ctx{padding:9px 17px;font-size:11.5px;color:var(--z-gold);
  background:oklch(0.880 0.095 80/.09);border-bottom:1px solid oklch(1 0 0/.07);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}

.zd-list{flex:1;overflow-y:auto;padding:10px}
.zd-here{margin:3px 5px 12px;padding:10px 13px;border-radius:14px;font-size:12px;
  color:var(--z-gold);background:oklch(0.880 0.095 80/.10);
  border:1px solid oklch(0.880 0.095 80/.24)}
.zd-sec{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--z-faint);
  margin:14px 7px 6px;font-weight:600}
.zd-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;
  border:0;color:var(--z-dim);padding:10px 13px;border-radius:12px;cursor:pointer;
  font:500 13.5px/1.4 Manrope,system-ui,sans-serif}
.zd-row:hover{background:oklch(1 0 0/.08);color:var(--z-ink)}
.zd-dot{width:6px;height:6px;border-radius:50%;background:var(--z-off);flex:none;
  box-shadow:0 0 8px var(--z-off)}

.zd-thread{flex:1;overflow-y:auto;padding:14px 15px}

/* ---------- the room's own bubbles ----------
   A run of messages from one speaker shares one avatar, and the corner nearest that avatar is
   clipped so the run points back at who said it. Your own sit on the right, because which side a
   line is on should answer "who said this" before you read a word. */
.zd-grp{display:flex;gap:10px;margin-bottom:16px}
.zd-av{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:oklch(0.18 0.02 70);margin-top:1px;position:relative;
  overflow:hidden}
.zd-av .zd-avp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit}
.zd-av.human{background:var(--z-me);color:var(--z-ink)}
.zd-av.officer{background:var(--z-gold)}
.zd-av.system{background:var(--z-faint)}
.zd-gb{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.zd-gh{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.zd-nm{font-weight:600;font-size:12.5px;color:var(--z-ink)}
.zd-nm.officer{color:var(--z-gold)}
.zd-tm{color:var(--z-faint);font-size:10.5px;font-variant-numeric:tabular-nums}
.zd-m{background:var(--z-bub);border:1px solid var(--z-bub-line);border-radius:14px;
  padding:9px 13px 8px;font-size:13.5px;line-height:1.6;color:var(--z-ink);
  max-width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal}
.zd-grp .zd-m:first-of-type{border-top-left-radius:4px}
.zd-grp.mine{flex-direction:row-reverse}
.zd-grp.mine .zd-gb{align-items:flex-end}
.zd-grp.mine .zd-gh{flex-direction:row-reverse}
.zd-grp.mine .zd-m{background:var(--z-bub-me);border-color:var(--z-bub-me-line)}
.zd-grp.mine .zd-m:first-of-type{border-top-left-radius:14px;border-top-right-radius:4px}
.zd-grp.system .zd-m{background:none;border:0;padding:0;color:var(--z-dim)}
.zd-empty{color:var(--z-faint);font-size:12.5px;text-align:center;margin-top:26px}

/* the chevron: quiet until wanted, always reachable by thumb */
.zd-m{position:relative}
.zd-chev{position:absolute;top:2px;right:4px;background:none;border:0;cursor:pointer;
  color:var(--z-faint);font-size:14px;line-height:1;padding:2px 5px;opacity:0;
  transition:opacity .12s;border-radius:7px}
.zd-m:hover .zd-chev{opacity:.8}
.zd-chev:hover{opacity:1;color:var(--z-ink);background:oklch(1 0 0/.10)}
@media(hover:none){.zd-chev{opacity:.5}}   /* a phone cannot hover, so it stays visible */
.zd-menu{position:fixed;z-index:9999;border-radius:14px;padding:5px;min-width:132px;
  background:oklch(0.20 0.022 288/.98);border:1px solid var(--z-pane-line);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 16px 44px oklch(0.05 0.02 288/.55)}
.zd-menu button{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--z-ink);padding:9px 12px;border-radius:9px;cursor:pointer;
  font:500 13px/1 Manrope,system-ui,sans-serif}
.zd-menu button:hover{background:oklch(1 0 0/.10)}
:root[data-theme="light"] .zd-menu{background:oklch(1 0 0/.98)}
:root[data-theme="light"] .zd-menu button:hover{background:oklch(0.30 0.02 288/.07)}

/* what a reply is answering, and getting back to it */
.zd-qt{display:block;border-left:2px solid var(--z-me);background:oklch(1 0 0/.06);
  border-radius:8px;padding:5px 9px;margin:0 0 6px;cursor:pointer;font-size:11.5px;line-height:1.4}
.zd-qt:hover{background:oklch(1 0 0/.11)}
.zd-qa{display:block;font-weight:600;color:var(--z-me)}
.zd-qx{display:block;color:var(--z-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes zdflash{0%,100%{background:var(--z-bub)}30%{background:oklch(0.72 0.135 288/.30)}}
.zd-m.flash{animation:zdflash 1.1s ease}

.zd-rbar{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12px;
  color:var(--z-faint);border-top:1px solid oklch(1 0 0/.09)}
.zd-rbar b{color:var(--z-ink)}
.zd-rx{margin-left:auto;background:none;border:0;color:var(--z-faint);cursor:pointer;font-size:12px}
.zd-rx:hover{color:var(--z-ink)}

.zd-jump{position:absolute;right:18px;bottom:78px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--z-pane-line);background:var(--z-surf);color:var(--z-ink);cursor:pointer;
  font-size:16px;line-height:1;display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 18px oklch(0.05 0.02 288/.45);z-index:3}
.zd-jump.on{display:flex}
.zd-jump:hover{border-color:oklch(1 0 0/.32)}
:root[data-theme="light"] .zd-jump{background:oklch(1 0 0/.95);
  box-shadow:0 6px 18px oklch(0.30 0.02 288/.18)}
.zd-panel{position:relative}
.zd-compose{display:flex;gap:9px;padding:13px;border-top:1px solid oklch(1 0 0/.09)}
.zd-input{flex:1;resize:none;background:oklch(1 0 0/.10);border:1px solid var(--z-pane-line);
  border-radius:15px;color:var(--z-ink);padding:11px 14px;
  font:13.5px/1.5 Manrope,system-ui,sans-serif;outline:none;max-height:112px}
.zd-input::placeholder{color:var(--z-faint)}
.zd-input:focus{border-color:oklch(0.72 0.135 288/.65)}
.zd-send{border:0;border-radius:15px;cursor:pointer;padding:0 17px;
  font:600 13px/1 Manrope,system-ui,sans-serif;
  background:linear-gradient(150deg,oklch(0.82 0.145 292),oklch(0.68 0.150 288));
  color:oklch(0.99 0.01 292)}
.zd-send:hover{opacity:.92}

@media(max-width:860px){.zdock{right:13px;bottom:13px}
 .zd-panel{width:calc(100vw - 26px);height:min(72vh,calc(100vh - 112px));border-radius:22px}}


/* ---------------------------------------------------------------------------
   LIGHT GROUND
   The war room is always dark, so the glass above is right there. On a light
   company page the same glass goes to fog - the officer names all but vanished.
   Same material, inverted: a light pane, a dark rim, ink that holds its weight.
   --------------------------------------------------------------------------- */
:root[data-theme="light"] .zdock{
  --z-ink:oklch(0.22 0.015 288); --z-dim:oklch(0.42 0.012 288);
  --z-faint:oklch(0.56 0.012 288);
  --z-gold:oklch(0.58 0.115 68); --z-off:oklch(0.62 0.095 180);
  --z-pane:oklch(1 0 0/.80); --z-pane-line:oklch(0.30 0.02 288/.16);
  --z-bub:oklch(0.30 0.02 288/.055); --z-bub-line:oklch(0.30 0.02 288/.11);
  --z-bub-me:oklch(0.72 0.135 288/.20); --z-bub-me-line:oklch(0.55 0.13 288/.34);
}
:root[data-theme="light"] .zd-pill,
:root[data-theme="light"] .zd-panel{
  box-shadow:0 20px 50px oklch(0.30 0.02 288/.16), inset 0 1px 0 oklch(1 0 0/.9);
}
:root[data-theme="light"] .zd-head,
:root[data-theme="light"] .zd-compose,
:root[data-theme="light"] .zd-ctx{border-color:oklch(0.30 0.02 288/.10)}
:root[data-theme="light"] .zd-row:hover{background:oklch(0.30 0.02 288/.06)}
:root[data-theme="light"] .zd-av.officer{color:oklch(0.20 0.02 70)}
:root[data-theme="light"] .zd-nm{color:var(--z-ink)}
:root[data-theme="light"] .zd-input{background:oklch(1 0 0/.75)}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .zdock{
    --z-ink:oklch(0.22 0.015 288); --z-dim:oklch(0.42 0.012 288);
    --z-faint:oklch(0.56 0.012 288);
    --z-gold:oklch(0.58 0.115 68); --z-off:oklch(0.62 0.095 180);
    --z-pane:oklch(1 0 0/.80); --z-pane-line:oklch(0.30 0.02 288/.16);
    --z-bub:oklch(0.30 0.02 288/.055); --z-bub-line:oklch(0.30 0.02 288/.11);
    --z-bub-me:oklch(0.72 0.135 288/.20); --z-bub-me-line:oklch(0.55 0.13 288/.34);
  }
  :root:not([data-theme="dark"]) .zd-pill,
  :root:not([data-theme="dark"]) .zd-panel{
    box-shadow:0 20px 50px oklch(0.30 0.02 288/.16), inset 0 1px 0 oklch(1 0 0/.9);
  }
}
/* the war room and SAP set no data-theme and are dark: they keep the dark glass above */


/* ---------------------------------------------------------------------------
   THE LIT SPACE
   The war room's character is not the glass, it is what is behind it: five
   coloured pools, blurred hard, breathing slowly. The dock is the same room, so
   it carries the same light rather than borrowing whatever page it lands on.
   --------------------------------------------------------------------------- */
.zd-panel::before{
  content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(30% 34% at 14% 16%, oklch(0.66 0.170 196) 0%, transparent 64%),
    radial-gradient(28% 32% at 78% 12%, oklch(0.60 0.190 300) 0%, transparent 66%),
    radial-gradient(34% 36% at 88% 74%, oklch(0.62 0.185 18)  0%, transparent 68%),
    radial-gradient(30% 30% at 30% 88%, oklch(0.68 0.150 82)  0%, transparent 66%),
    radial-gradient(26% 28% at 54% 46%, oklch(0.58 0.150 268) 0%, transparent 70%),
    linear-gradient(168deg, oklch(0.30 0.070 292), oklch(0.14 0.030 288) 72%);
  filter:blur(44px) saturate(126%);
  transform:scale(1.06);
  animation:zdbreathe 34s ease-in-out infinite alternate;
}
/* dimmed the same way the room is, so white type holds over any colour beneath it */
.zd-panel::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, oklch(0.12 0.02 288/.30), oklch(0.10 0.02 288/.52));
}
@keyframes zdbreathe{
  from{transform:scale(1.04) translate3d(-1%,-1%,0)}
  to{transform:scale(1.10) translate3d(1%,1.5%,0)}
}
@media (prefers-reduced-motion:reduce){ .zd-panel::before{animation:none} }
/* everything real sits above the light */
.zd-head,.zd-ctx,.zd-list,.zd-thread,.zd-compose,.zd-jump{position:relative;z-index:1}

/* the pill gets a hint of the same colour, so the two read as one object */
.zd-pill{position:relative;overflow:hidden;overflow:clip}
.zd-pill::before{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(40% 60% at 12% 20%, oklch(0.66 0.170 196) 0%, transparent 70%),
    radial-gradient(44% 60% at 86% 76%, oklch(0.62 0.185 18) 0%, transparent 72%),
    radial-gradient(40% 60% at 52% 40%, oklch(0.60 0.190 300) 0%, transparent 74%);
  filter:blur(16px) saturate(130%);
}
.zd-pill > *{position:relative;z-index:1}

/* on a light page the room still glows, just gently, so the panel never goes muddy */
:root[data-theme="light"] .zd-panel{background:oklch(0.985 0.004 288)}
:root[data-theme="light"] .zd-panel::before{filter:blur(48px) saturate(105%);opacity:.30}
:root[data-theme="light"] .zd-panel::after{
  background:linear-gradient(180deg, oklch(1 0 0/.66), oklch(1 0 0/.80));
}
:root[data-theme="light"] .zd-pill::before{opacity:.34}


/* three dots while an officer thinks - the difference between "working" and "broken" */
.zd-dots{display:flex;align-items:center;gap:5px;padding:13px 15px}
.zd-dots i{width:6px;height:6px;border-radius:50%;background:var(--z-gold);display:block;
  animation:zdtype 1.25s ease-in-out infinite}
.zd-dots i:nth-child(2){animation-delay:.16s}
.zd-dots i:nth-child(3){animation-delay:.32s}
@keyframes zdtype{0%,80%,100%{opacity:.28;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.zd-dots i{animation:none;opacity:.6}}