/*
 * Rendert Boss UI — Buzz-inspired control-room skin.
 * Visual language adapted from block/buzz desktop at 4ab4f786 (Apache-2.0).
 * See ../BUZZ_UI_ATTRIBUTION.md and /assets/buzz-ui/APACHE-2.0.txt.
 */

:root {
  color-scheme: dark;
  --radius: 0.625rem;
  --shell-top: #4a4616;
  --shell-bottom: #0a1423;
  --content: #1a1a1a;
  --content-raised: #202020;
  --content-soft: #242424;
  --sidebar: #242331;
  --sidebar-deep: #1d1c29;
  --overlay: #363a4f;
  --overlay-2: #494d64;
  --border: #494d64;
  --border-soft: rgba(110, 115, 141, 0.34);
  --text: #cad3f5;
  --text-strong: #eef1ff;
  --muted: #a5adcb;
  --subtle: #8087a2;
  --mauve: #c6a0f6;
  --mauve-ink: #24273a;
  --blue: #8aadf4;
  --teal: #8bd5ca;
  --green: #a6da95;
  --yellow: #eed49f;
  --peach: #f5a97f;
  --red: #ed8796;
  --lavender: #b7bdf8;
  --shadow-lg: 0 22px 72px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.22);
  --rail-width: 4.25rem;
  --sidebar-width: 16.25rem;
  --chrome-height: 3.35rem;
  --motion-fast: 140ms;
  --motion: 220ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
html { background: #0a1423; }
body {
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, var(--shell-top) 0%, #252b2e 42%, var(--shell-bottom) 100%);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.48; }
button, input, textarea, select { outline: none; }
::selection { color: var(--mauve-ink); background: var(--mauve); }

/* Full-app Buzz-style painted gradient. */
.shell-gradient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 8%, rgba(238, 212, 159, 0.12), transparent 25%),
    radial-gradient(circle at 82% 95%, rgba(138, 173, 244, 0.08), transparent 30%),
    linear-gradient(180deg, var(--shell-top), var(--shell-bottom));
}

.app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr);
  gap: 0;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

/* ----- community rail ----- */
.community-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.35rem 0.55rem;
  color: var(--text);
  user-select: none;
}

.brand-mark {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 212, 159, 0.28);
  border-radius: 0.95rem;
  background: linear-gradient(145deg, rgba(238, 212, 159, 0.96), rgba(198, 160, 246, 0.86));
  color: #1e2030;
  font-weight: 900;
  letter-spacing: -0.08em;
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.24);
}
.brand-mark span { transform: translateX(-0.05em); }
.rail-divider { width: 1.65rem; height: 1px; margin: 0.2rem 0; background: rgba(202, 211, 245, 0.16); }

.feature-dock {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
.feature-dock-btn,
.rail-action {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  color: rgba(202, 211, 245, 0.74);
  background: transparent;
  transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.feature-dock-btn:hover,
.rail-action:hover { background: rgba(202, 211, 245, 0.1); color: var(--text-strong); }
.feature-dock-btn:active,
.rail-action:active { transform: scale(0.96); }
.feature-dock-btn.active {
  color: #1e2030;
  background: var(--mauve);
  box-shadow: 0 8px 20px rgba(198, 160, 246, 0.18);
}
.feature-dock-btn svg,
.rail-action svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.9; }
.rail-asset { width:1.45rem; height:1.45rem; object-fit:contain; opacity:.76; filter:brightness(1.25) saturate(.55); transition:opacity var(--motion-fast), filter var(--motion-fast), transform var(--motion-fast); }
.feature-dock-btn:hover .rail-asset { opacity:1; filter:brightness(1.65) saturate(.8); transform:scale(1.04); }
.feature-dock-btn.active .rail-asset { opacity:1; filter:brightness(.28) saturate(.7); }
.rail-agent-asset { width:1.62rem; height:1.62rem; }
.feature-dock-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feature-badge {
  position: absolute;
  right: -0.15rem;
  top: -0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  display: grid;
  place-items: center;
  border: 2px solid #25261f;
  border-radius: 999px;
  color: #271d22;
  background: var(--red);
  font-size: 0.59rem;
  line-height: 1;
  font-weight: 800;
}
.rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.rail-status-dot { width: 0.52rem; height: 0.52rem; border-radius: 999px; background: var(--subtle); box-shadow: 0 0 0 3px rgba(128, 135, 162, 0.13); }
.rail-status-dot.connected { background: var(--green); box-shadow: 0 0 0 3px rgba(166, 218, 149, 0.12); }

/* ----- project sidebar ----- */
.project-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 1rem);
  overflow: hidden;
  color: var(--text);
  padding: 0.3rem 0.55rem 0.4rem 0.25rem;
}
.project-sidebar-head {
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.55rem 0.7rem;
}
.project-avatar {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: rgba(202, 211, 245, 0.12);
  border: 1px solid rgba(202, 211, 245, 0.12);
  color: var(--text-strong);
  font-size: 0.78rem;
  font-weight: 800;
}
.project-title { min-width: 0; flex: 1; }
.project-title strong { display: block; color: var(--text-strong); font-size: 0.94rem; letter-spacing: -0.015em; }
.project-title span { display: block; margin-top: 0.1rem; color: rgba(202, 211, 245, 0.56); font-size: 0.71rem; }
.logout {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: rgba(202, 211, 245, 0.55);
}
.logout:hover { background: rgba(202, 211, 245, 0.1); color: var(--text); }
.logout svg { width: 0.95rem; height: 0.95rem; }
.sidebar-scroll { min-height: 0; overflow: auto; padding: 0 0.4rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(202,211,245,.18) transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(202,211,245,.18); border-radius: 999px; }

.sidebar-section { margin-top: 0.85rem; }
.sidebar-section:first-child { margin-top: 0.15rem; }
.section-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.65rem;
  padding: 0 0.5rem;
  color: rgba(202, 211, 245, 0.48);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-wrap { position: relative; margin: 0 0.15rem; }
.search-wrap svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 0.9rem; height: 0.9rem; color: rgba(202, 211, 245, 0.48); pointer-events: none; }
.search {
  width: 100%;
  min-width: 0;
  height: 2.25rem;
  padding: 0 0.75rem 0 2.05rem;
  border: 1px solid rgba(202, 211, 245, 0.12);
  border-radius: 0.72rem;
  background: rgba(24, 25, 38, 0.34);
  color: var(--text);
  font-size: 0.78rem;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.search::placeholder { color: rgba(202, 211, 245, 0.38); }
.search:focus { border-color: rgba(198, 160, 246, 0.6); background: rgba(24, 25, 38, 0.55); box-shadow: 0 0 0 3px rgba(198, 160, 246, 0.1); }

.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.2rem; padding: 0.18rem; border-radius: 0.72rem; background: rgba(24, 25, 38, 0.34); border: 1px solid rgba(202,211,245,.08); }
.filter-btn {
  min-width: 0;
  height: 1.85rem;
  border: 0;
  border-radius: 0.56rem;
  background: transparent;
  color: rgba(202, 211, 245, 0.52);
  font-size: 0.67rem;
  font-weight: 650;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.filter-btn:hover { color: var(--text); background: rgba(202, 211, 245, 0.07); }
.filter-btn.active { color: var(--text-strong); background: rgba(202, 211, 245, 0.12); box-shadow: inset 0 0 0 1px rgba(202,211,245,.05); }

.status-card,
.cc-card,
.sidebar-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(202, 211, 245, 0.1);
  border-radius: 0.85rem;
  background: rgba(24, 25, 38, 0.3);
}
.status-card { padding: 0.75rem; }
.status-row { display: flex; align-items: center; gap: 0.55rem; }
.status-row + .status-row { margin-top: 0.52rem; }
.status-label { color: rgba(202, 211, 245, 0.46); font-size: 0.67rem; min-width: 3.2rem; }
.status-value { min-width: 0; color: var(--text); font-size: 0.73rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  color: rgba(202, 211, 245, 0.72);
  font-size: 0.69rem;
}
.pill.live i,
.live-indicator { width: 0.43rem; height: 0.43rem; border-radius: 999px; background: var(--subtle); }
.pill.live.connected i { background: var(--green); box-shadow: 0 0 0 3px rgba(166,218,149,.09); }
.pill.live.connecting i { background: var(--yellow); }
.pill.live.disconnected i { background: var(--red); }

.focus-mini {
  padding: 0.7rem 0.75rem;
  border-radius: 0.85rem;
  background: linear-gradient(145deg, rgba(198, 160, 246, 0.13), rgba(138, 173, 244, 0.07));
  border: 1px solid rgba(198, 160, 246, 0.22);
}
.focus-mini .eyebrow { color: rgba(198,160,246,.82); }
.focus-mini-title { margin-top: 0.22rem; color: var(--text-strong); font-size: 0.79rem; font-weight: 700; }
.focus-mini-meta { margin-top: 0.18rem; color: rgba(202,211,245,.48); font-size: 0.67rem; }

.command-center { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.42rem; }
.cc-card {
  min-height: 4.3rem;
  padding: 0.62rem 0.65rem;
  text-align: left;
  color: var(--text);
  transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
}
button.cc-card { cursor: pointer; }
.cc-card:hover { transform: translateY(-1px); background: rgba(54,58,79,.46); border-color: rgba(202,211,245,.18); }
.cc-card.focus { grid-column: 1 / -1; min-height: 4.85rem; border-color: rgba(198,160,246,.22); background: rgba(198,160,246,.08); }
.cc-card.has-attention { border-color: rgba(237, 135, 150, 0.32); background: rgba(237,135,150,.07); }
.cc-label { display: flex; align-items: center; gap: 0.35rem; color: rgba(202,211,245,.46); font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cc-value { margin-top: 0.2rem; color: var(--text-strong); font-size: 1rem; font-weight: 760; letter-spacing: -0.025em; }
.cc-card.focus .cc-value { font-size: 0.83rem; line-height: 1.28; }
.cc-detail { margin-top: 0.13rem; color: rgba(202,211,245,.48); font-size: 0.64rem; line-height: 1.3; }
.cc-open-command { width: 100%; margin-top: 0.45rem; }

.btn,
.tool-btn,
.chat-send,
.continue-all-fab {
  border: 1px solid rgba(202,211,245,.13);
  border-radius: 0.7rem;
  background: rgba(54,58,79,.42);
  color: var(--text);
  font-size: 0.73rem;
  font-weight: 650;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), color var(--motion-fast);
}
.btn:hover,
.tool-btn:hover,
.continue-all-fab:hover { background: rgba(73,77,100,.66); border-color: rgba(202,211,245,.2); }
.btn:active,
.tool-btn:active,
.continue-all-fab:active { transform: scale(.985); }
.btn { min-height: 2.15rem; padding: 0.42rem 0.72rem; }
.btn.primary { color: var(--mauve-ink); background: var(--mauve); border-color: var(--mauve); }
.btn.primary:hover { background: #d1b0f8; }
.btn.blue { color: #182036; background: var(--blue); border-color: var(--blue); }
.btn.green { color: #172119; background: var(--green); border-color: var(--green); }
.btn.red { color: #29181d; background: var(--red); border-color: var(--red); }

/* ----- inset main content ----- */
.content-wrap {
  min-width: 0;
  height: calc(100dvh - 1rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--content);
  box-shadow: -1px 0 0 rgba(202,211,245,.08), var(--shadow-lg);
}
.topbar {
  position: relative;
  z-index: 12;
  min-height: var(--chrome-height);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.85rem 0.55rem 1rem;
  border-bottom: 1px solid rgba(202,211,245,.075);
  background: rgba(26,26,26,.94);
  backdrop-filter: blur(18px);
}
.content-title { min-width: 0; display: flex; align-items: center; gap: 0.65rem; }
.content-title-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: .55rem; color: var(--mauve); background: rgba(198,160,246,.1); }
.content-title-icon svg { width: 1rem; height: 1rem; }
.content-title-copy strong { display: block; font-size: 0.84rem; color: var(--text-strong); }
.content-title-copy span { display: block; margin-top: 0.05rem; font-size: 0.66rem; color: rgba(202,211,245,.46); }
.toolbar { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
.tool-btn { min-height: 2rem; padding: 0.35rem 0.62rem; background: transparent; border-color: transparent; color: rgba(202,211,245,.6); }
.tool-btn:hover { color: var(--text); background: rgba(202,211,245,.07); }
.hud { display: flex; align-items: center; gap: 0.65rem; }
.hud .pill { padding: 0.25rem 0.45rem; background: rgba(202,211,245,.05); border: 1px solid rgba(202,211,245,.07); }

.workspace { min-height: 0; flex: 1; position: relative; overflow: hidden; }
.map-shell { position: absolute; inset: 0; overflow: hidden; background: #181818; }
.map-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(202,211,245,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202,211,245,.024) 1px, transparent 1px),
    radial-gradient(circle at 52% 18%, rgba(198,160,246,.05), transparent 28%);
  background-size: 32px 32px, 32px 32px, auto;
}
.world-svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.world-svg.dragging { cursor: grabbing; }

.map-help {
  position: absolute;
  left: 0.8rem;
  bottom: 0.7rem;
  z-index: 8;
  max-width: min(38rem, calc(100% - 12rem));
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(202,211,245,.09);
  border-radius: 0.58rem;
  color: rgba(202,211,245,.42);
  background: rgba(24,24,24,.68);
  backdrop-filter: blur(10px);
  font-size: 0.62rem;
}
.zoom-readout { position: absolute; right: 0.75rem; bottom: 0.78rem; z-index: 8; color: rgba(202,211,245,.44); font-size: .65rem; }
.legend { position: absolute; left: .8rem; top: .75rem; z-index: 8; display: flex; align-items: center; gap: .65rem; padding: .38rem .52rem; border-radius: .58rem; border: 1px solid rgba(202,211,245,.08); background: rgba(24,24,24,.64); backdrop-filter: blur(10px); color: rgba(202,211,245,.54); font-size: .62rem; }
.legend span { display:flex; align-items:center; gap:.28rem; }
.legend .dot { width:.42rem; height:.42rem; border-radius:999px; }
.minimap { position:absolute; right:.75rem; top:.75rem; z-index:8; width: 10.5rem; height: 6.4rem; overflow:hidden; border:1px solid rgba(202,211,245,.11); border-radius:.78rem; background:rgba(24,24,24,.72); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); }
.minimap svg { width:100%; height:100%; display:block; }
.director-tip { position:absolute; left:50%; top:.75rem; z-index:7; transform:translateX(-50%); padding:.28rem .52rem; border-radius:999px; background:rgba(198,160,246,.1); border:1px solid rgba(198,160,246,.16); color:rgba(198,160,246,.8); font-size:.59rem; font-weight:800; letter-spacing:.08em; }

/* Graph styling: new Buzz/Catppuccin palette, no legacy neon-game skin. */
.world-box { fill: rgba(36,39,58,.34); stroke: rgba(73,77,100,.54); stroke-width: 2; rx: 28; vector-effect: non-scaling-stroke; }
.world-region:hover .world-box { fill: rgba(54,58,79,.4); stroke: rgba(128,135,162,.72); }
.world-title { fill: rgba(202,211,245,.54); font-size: 16px; font-weight: 800; letter-spacing: 1.1px; }
.world-summary { fill: rgba(165,173,203,.56); font-size: 11px; }
.world-link, .system-link, .relation-link { fill:none; stroke: rgba(128,135,162,.3); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity var(--motion), stroke var(--motion); }
.world-link { stroke-width: 3; stroke: rgba(128,135,162,.25); }
.system-link.active-flow, .world-link.active-flow, .relation-link.active-flow { stroke: rgba(139,213,202,.76); stroke-dasharray: 8 8; animation: flowdash .9s linear infinite; }
.node { cursor: pointer; outline: none; }
.node .node-body { fill: #242424; stroke: rgba(128,135,162,.62); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill var(--motion-fast), stroke var(--motion-fast), filter var(--motion-fast); }
.node.system .node-body { fill: #252733; stroke: rgba(138,173,244,.58); }
.node.capability .node-body { fill: #202421; stroke: rgba(166,218,149,.48); }
.node.boss .node-body { fill: #292126; stroke: rgba(237,135,150,.72); }
.node:hover .node-body { fill: #30303a; stroke: var(--text); }
.node.selected .node-body { stroke: var(--mauve); stroke-width: 4; filter: drop-shadow(0 0 9px rgba(198,160,246,.3)); }
.node.focused .node-body { stroke: var(--yellow); filter: drop-shadow(0 0 10px rgba(238,212,159,.25)); }
.node.claimed-mine .node-body { stroke: var(--green); }
.node.claimed-other .node-body { stroke: var(--peach); }
.node.dim { opacity: .16; }
.node.highlight .node-body { stroke: var(--blue); stroke-width: 4; }
.node text { fill: var(--text); font-size: 11px; font-weight: 700; pointer-events:none; }
.node .sub { fill: rgba(165,173,203,.62); font-size: 8px; font-weight: 600; }
.node .badge { font-size: 8px; font-weight: 700; }
.boss-ring { fill:none; stroke:rgba(237,135,150,.32); stroke-width:5; stroke-dasharray:9 7; vector-effect:non-scaling-stroke; }
.focus-line { fill:none; stroke:rgba(238,212,159,.7); stroke-width:2; stroke-dasharray:6 7; vector-effect:non-scaling-stroke; }
.energy-orb { fill:var(--teal); stroke:#e8fff9; stroke-width:2; filter:drop-shadow(0 0 8px rgba(139,213,202,.5)); pointer-events:none; }
.avatar-body { fill:var(--yellow); stroke:#fff4cf; stroke-width:2; }
.avatar-head { fill:var(--peach); stroke:#fff0dd; stroke-width:2; }
.avatar-label { fill:var(--yellow); font-size:9px; font-weight:900; }
.presence-avatar .presence-ring { fill:#1a1a1a; stroke:var(--green); stroke-width:3; vector-effect:non-scaling-stroke; }
.presence-avatar text { fill:#d8f3d0; font-size:9px; font-weight:800; paint-order:stroke; stroke:#171918; stroke-width:3; }
.presence-avatar.me .presence-ring { stroke:var(--mauve); }
.activity-ring { fill:none; stroke:var(--teal); stroke-width:3; stroke-dasharray:7 6; animation:flowdash .8s linear infinite; vector-effect:non-scaling-stroke; pointer-events:none; }
@keyframes flowdash { to { stroke-dashoffset:-20; } }

/* ----- auxiliary panel ----- */
.side {
  position: absolute;
  z-index: 30;
  top: 0.65rem;
  right: 0.65rem;
  bottom: 0.65rem;
  width: min(23rem, calc(100% - 2rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(202,211,245,.12);
  border-radius: 1rem;
  background: rgba(31,31,34,.94);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(22px);
  transform: translateX(calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--motion) cubic-bezier(.22,1,.36,1), opacity var(--motion);
}
.side.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.side-head { min-height: 3.4rem; display:flex; align-items:center; gap:.68rem; padding:.65rem .7rem .65rem .85rem; border-bottom:1px solid rgba(202,211,245,.08); }
.side-head-icon { width:2rem; height:2rem; display:grid; place-items:center; border-radius:.62rem; background:rgba(198,160,246,.1); color:var(--mauve); font-size:.9rem; }
.side-head-copy { min-width:0; flex:1; }
.side-head-title { color:var(--text-strong); font-size:.8rem; font-weight:750; }
.side-head-sub { margin-top:.05rem; color:rgba(202,211,245,.44); font-size:.64rem; }
.side-close { width:2rem; height:2rem; border:0; border-radius:.6rem; background:transparent; color:rgba(202,211,245,.5); font-size:1.15rem; }
.side-close:hover { background:rgba(202,211,245,.08); color:var(--text); }
.side-inner { min-height:0; overflow:auto; padding:.8rem; scrollbar-width:thin; scrollbar-color:rgba(202,211,245,.16) transparent; }
.feature-panel[hidden] { display:none !important; }
.card { padding:.85rem; border:1px solid rgba(202,211,245,.09); border-radius:.9rem; background:rgba(36,36,36,.62); }
.card + .card { margin-top:.65rem; }
.eyebrow { color:rgba(202,211,245,.44); font-size:.63rem; font-weight:750; letter-spacing:.045em; text-transform:uppercase; }
.node-title { margin:.2rem 0 0; color:var(--text-strong); font-size:1.05rem; line-height:1.25; letter-spacing:-.02em; }
.node-sub { margin-top:.14rem; color:rgba(202,211,245,.48); font-size:.68rem; }
.tag-row { display:flex; flex-wrap:wrap; gap:.28rem; margin-top:.55rem; }
.tag { padding:.16rem .4rem; border-radius:999px; background:rgba(202,211,245,.07); color:rgba(202,211,245,.54); font-size:.58rem; font-weight:700; text-transform:uppercase; }
.tag.active { background:rgba(238,212,159,.12); color:var(--yellow); }
.summary { margin:.7rem 0 0; color:rgba(202,211,245,.68); font-size:.74rem; line-height:1.52; }
.section-title { margin-top:1rem; margin-bottom:.35rem; color:rgba(202,211,245,.46); font-size:.63rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.note,
.chat-input,
select {
  width:100%;
  border:1px solid rgba(202,211,245,.11);
  border-radius:.7rem;
  background:rgba(24,24,24,.72);
  color:var(--text);
}
.note { min-height:4.4rem; resize:vertical; padding:.6rem .65rem; font-size:.72rem; line-height:1.45; }
.note::placeholder, .chat-input::placeholder { color:rgba(202,211,245,.32); }
.note:focus, .chat-input:focus, select:focus { border-color:rgba(198,160,246,.55); box-shadow:0 0 0 3px rgba(198,160,246,.08); }
.actions { display:flex; flex-wrap:wrap; gap:.38rem; margin-top:.48rem; }
.claim-status { padding:.55rem .6rem; border-radius:.65rem; background:rgba(202,211,245,.05); color:rgba(202,211,245,.68); font-size:.7rem; }
.claim-status.mine { background:rgba(166,218,149,.08); color:var(--green); }
.claim-status.other { background:rgba(245,169,127,.08); color:var(--peach); }
.claim-warning { margin-top:.4rem; padding:.48rem .55rem; border-radius:.62rem; border:1px solid rgba(245,169,127,.18); background:rgba(245,169,127,.07); color:var(--peach); font-size:.66rem; line-height:1.4; }
.list, .conditions, .party { display:flex; flex-direction:column; gap:.3rem; }
.list-item, .condition, .party-row, .command-item, .event { border-radius:.68rem; background:rgba(202,211,245,.04); border:1px solid rgba(202,211,245,.06); }
.list-item { padding:.5rem .58rem; color:rgba(202,211,245,.68); font-size:.69rem; }
.list-item strong { color:var(--text); }
.owner { color:var(--blue); }
.condition { padding:.52rem .58rem; color:rgba(202,211,245,.64); font-size:.69rem; }
.condition.done { color:var(--green); background:rgba(166,218,149,.06); }
.empty { padding:.8rem; color:rgba(202,211,245,.36); font-size:.69rem; text-align:center; }
.hp { height:.35rem; overflow:hidden; border-radius:999px; background:rgba(202,211,245,.08); }
.hp > div { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--red),var(--yellow),var(--green)); }
.technical-details { margin-top:.7rem; border-top:1px solid rgba(202,211,245,.07); padding-top:.55rem; }
.technical-details summary { cursor:pointer; color:rgba(202,211,245,.5); font-size:.68rem; }
.technical-body { padding-top:.2rem; }
.focus-banner { padding:.72rem; border-radius:.8rem; border:1px solid rgba(198,160,246,.14); background:rgba(198,160,246,.06); }
.focus-banner .label { color:var(--text-strong); font-size:.8rem; font-weight:700; }
.focus-banner .meta { margin-top:.2rem; color:rgba(202,211,245,.45); font-size:.65rem; }
.note-text { margin-top:.45rem; color:rgba(202,211,245,.67); font-size:.7rem; line-height:1.46; }
.party-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.55rem; align-items:center; padding:.55rem .58rem; cursor:pointer; }
.party-row:hover { background:rgba(202,211,245,.07); }
.party-dot { width:.48rem; height:.48rem; border-radius:999px; background:var(--subtle); }
.party-dot.online { background:var(--green); }
.party-dot.blocked { background:var(--red); }
.party-dot.waiting { background:var(--yellow); }
.party-name { color:var(--text); font-size:.71rem; font-weight:650; }
.party-meta { margin-top:.1rem; color:rgba(202,211,245,.39); font-size:.61rem; }
.party-role { color:rgba(202,211,245,.42); font-size:.58rem; font-weight:700; text-transform:uppercase; }
.event { padding:.55rem .6rem; }
.event.live { border-color:rgba(139,213,202,.18); background:rgba(139,213,202,.05); }
.event .meta { color:rgba(202,211,245,.38); font-size:.59rem; text-transform:uppercase; }
.event .txt { margin-top:.18rem; color:rgba(202,211,245,.68); font-size:.68rem; line-height:1.42; }

.command-section + .command-section { margin-top:.9rem; }
.command-section-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.38rem; }
.command-section-title { color:rgba(202,211,245,.46); font-size:.63rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.command-count { min-width:1.35rem; height:1.35rem; display:grid; place-items:center; padding:0 .3rem; border-radius:999px; background:rgba(202,211,245,.07); color:rgba(202,211,245,.58); font-size:.61rem; font-weight:750; }
.command-list { display:flex; flex-direction:column; gap:.3rem; }
.command-item { padding:.55rem .6rem; cursor:pointer; transition:background var(--motion-fast), border-color var(--motion-fast); }
.command-item:hover { background:rgba(202,211,245,.07); border-color:rgba(202,211,245,.12); }
.command-item.danger { border-color:rgba(237,135,150,.18); background:rgba(237,135,150,.05); }
.command-item.warn { border-color:rgba(245,169,127,.15); }
.command-item.good { border-color:rgba(166,218,149,.14); }
.command-item-title { color:var(--text); font-size:.7rem; font-weight:650; }
.command-item-meta { margin-top:.14rem; color:rgba(202,211,245,.42); font-size:.61rem; line-height:1.35; }
.command-empty { padding:.7rem; border:1px dashed rgba(202,211,245,.09); border-radius:.7rem; color:rgba(202,211,245,.35); font-size:.67rem; text-align:center; }

/* ----- live chat: Buzz-message-panel treatment ----- */
.live-chat-shell {
  position: fixed;
  z-index: 55;
  right: 1.2rem;
  bottom: 1.2rem;
  width: min(27rem, calc(100vw - 2rem));
  height: min(38rem, calc(100dvh - 2.4rem));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(202,211,245,.13);
  border-radius:1rem;
  background:rgba(29,29,32,.96);
  box-shadow:0 28px 90px rgba(0,0,0,.5);
  backdrop-filter:blur(24px);
  transition:height var(--motion), transform var(--motion), opacity var(--motion);
}
.live-chat-shell.hidden { display:none; }
.live-chat-shell.minimized { height:3.55rem; }
.live-chat-shell.minimized .live-chat-threadbar,
.live-chat-shell.minimized .live-chat-messages,
.live-chat-shell.minimized .live-chat-compose { display:none; }
.live-chat-header { min-height:3.55rem; display:flex; align-items:center; gap:.65rem; padding:.6rem .65rem .6rem .72rem; border-bottom:1px solid rgba(202,211,245,.08); }
.live-chat-avatar { width:2rem; height:2rem; display:grid; place-items:center; border-radius:.7rem; background:rgba(198,160,246,.13); color:var(--mauve); font-size:.72rem; font-weight:800; }
.live-chat-heading { min-width:0; flex:1; }
.live-chat-title-row { display:flex; align-items:center; gap:.4rem; }
.live-chat-title { color:var(--text-strong); font-size:.77rem; font-weight:720; }
.live-chat-subtitle { margin-top:.06rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(202,211,245,.38); font-size:.61rem; }
.lane-status-pill { padding:.12rem .32rem; border-radius:999px; font-size:.52rem; font-weight:800; letter-spacing:.04em; }
.lane-status-pill.online { color:var(--green); background:rgba(166,218,149,.08); }
.lane-status-pill.blocked { color:var(--red); background:rgba(237,135,150,.08); }
.lane-status-pill.waiting { color:var(--yellow); background:rgba(238,212,159,.08); }
.live-chat-controls { display:flex; gap:.12rem; }
.live-chat-control { width:1.8rem; height:1.8rem; border:0; border-radius:.52rem; background:transparent; color:rgba(202,211,245,.44); }
.live-chat-control:hover { background:rgba(202,211,245,.07); color:var(--text); }
.live-chat-threadbar { display:flex; gap:.3rem; overflow:auto; padding:.45rem .55rem; border-bottom:1px solid rgba(202,211,245,.06); scrollbar-width:none; }
.live-chat-threadbar::-webkit-scrollbar { display:none; }
.chat-thread-chip { flex:0 0 auto; min-height:1.7rem; padding:.22rem .48rem; border:0; border-radius:999px; background:transparent; color:rgba(202,211,245,.45); font-size:.62rem; transition:background var(--motion-fast),color var(--motion-fast); }
.chat-thread-chip:hover { background:rgba(202,211,245,.06); color:var(--text); }
.chat-thread-chip.active { background:rgba(198,160,246,.12); color:var(--mauve); }
.chat-thread-chip.status-blocked:not(.active) { color:var(--red); }
.chat-thread-chip.status-online:not(.active) { color:rgba(166,218,149,.82); }
.live-chat-messages { min-height:0; flex:1; overflow:auto; padding:.75rem .72rem; scrollbar-width:thin; scrollbar-color:rgba(202,211,245,.15) transparent; }
.msg-row { display:flex; align-items:flex-start; gap:.5rem; padding:.35rem 0; }
.msg-row.mine { justify-content:flex-end; }
.msg-avatar { width:1.75rem; height:1.75rem; display:grid; place-items:center; flex:0 0 auto; border-radius:.6rem; background:rgba(202,211,245,.08); color:rgba(202,211,245,.62); font-size:.58rem; font-weight:800; }
.msg-stack { max-width:82%; min-width:0; }
.msg-row.mine .msg-stack { display:flex; flex-direction:column; align-items:flex-end; }
.msg-author { margin:0 0 .16rem .1rem; color:rgba(202,211,245,.43); font-size:.58rem; font-weight:650; }
.msg-bubble { padding:.48rem .58rem; border-radius:.78rem; background:rgba(202,211,245,.07); color:rgba(238,241,255,.82); font-size:.7rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.msg-row.mine .msg-bubble { background:rgba(198,160,246,.14); color:var(--text-strong); }
.msg-meta { margin-top:.18rem; color:rgba(202,211,245,.31); font-size:.55rem; }
.msg-kind { margin-right:.2rem; color:rgba(202,211,245,.45); font-weight:750; }
.live-chat-compose { padding:.55rem; border-top:1px solid rgba(202,211,245,.07); background:rgba(24,24,24,.56); }
.compose-meta { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:.35rem; margin-bottom:.35rem; }
.compose-meta select { height:1.8rem; padding:0 .45rem; font-size:.61rem; }
.compose-row { display:flex; align-items:flex-end; gap:.35rem; }
.chat-input { min-height:2.55rem; max-height:8rem; flex:1; resize:none; padding:.55rem .62rem; font-size:.69rem; line-height:1.42; }
.chat-send { width:2.45rem; height:2.45rem; border-radius:.72rem; border-color:var(--mauve); background:var(--mauve); color:var(--mauve-ink); font-size:.9rem; }
.continue-all-fab { min-height:2.45rem; padding:0 .55rem; color:rgba(202,211,245,.63); font-size:.61rem; }

/* Agent dock adopts Buzz's avatar rail language. */
.agent-dock { display:flex; flex-direction:column; align-items:center; gap:.28rem; margin-top:.15rem; max-height:34vh; overflow:auto; scrollbar-width:none; }
.agent-dock::-webkit-scrollbar { display:none; }
.agent-dock-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:.08rem; width:2.75rem; }
.agent-dock-button { position:relative; width:2.45rem; height:2.45rem; flex:0 0 auto; padding:0; border:1px solid rgba(202,211,245,.12); border-radius:.8rem; background:rgba(24,25,38,.45); color:var(--text); overflow:hidden; transition:transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast); }
.agent-dock-button:hover { transform:translateY(-1px); background:rgba(54,58,79,.62); border-color:rgba(202,211,245,.2); }
.agent-dock-button.active { border-color:rgba(198,160,246,.58); box-shadow:0 0 0 2px rgba(198,160,246,.1); }
.agent-dock-button.team { background:rgba(198,160,246,.1); color:var(--mauve); }
.agent-dock img { width:100%; height:100%; object-fit:cover; }
.agent-dock .agent-initials { display:grid; place-items:center; width:100%; height:100%; font-size:.65rem; font-weight:800; }
.agent-status-dot { position:absolute; left:.2rem; bottom:.2rem; width:.43rem; height:.43rem; border:1.5px solid #202118; border-radius:999px; background:var(--subtle); }
.agent-status-dot.online { background:var(--green); }
.agent-status-dot.blocked { background:var(--red); }
.agent-status-dot.waiting { background:var(--yellow); }
.agent-status-label { display:none; }
.agent-dock .agent-unread { position:absolute; top:-.12rem; right:-.12rem; min-width:.95rem; height:.95rem; padding:0 .2rem; display:grid; place-items:center; border:2px solid #29291f; border-radius:999px; background:var(--red); color:#271d22; font-size:.5rem; font-weight:900; }

/* Buzz powder-edge utility, using copied upstream nine-slice assets. */
.buzz-textured {
  --texture:url('/assets/buzz-ui/shared/card-texture-dark-compact.png');
  border:0 solid transparent;
  border-image-source:var(--texture);
  border-image-slice:136 fill;
  border-image-width:68px;
  border-image-outset:24px;
  border-image-repeat:repeat;
}

/* ----- login / join surface ----- */
.login-body { min-height:100dvh; overflow:auto; display:grid; place-items:center; padding:2rem; }
.login-shell { position:relative; z-index:1; width:min(100%, 31rem); }
.login-card { position:relative; width:100%; padding:2.3rem 2.35rem 2.15rem; border:1px solid rgba(202,211,245,.13); border-radius:1.45rem; background:rgba(26,26,26,.9); box-shadow:0 30px 90px rgba(0,0,0,.38); backdrop-filter:blur(18px); }
.login-card::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:.42; background:url('/assets/buzz-ui/shared/card-texture-dark-compact.png') center/100% 100% no-repeat; pointer-events:none; }
.login-brand { display:flex; align-items:center; gap:.9rem; margin-bottom:1.65rem; }
.login-brand-mark { width:3rem; height:3rem; flex:0 0 auto; display:grid; place-items:center; border-radius:1rem; background:linear-gradient(145deg,rgba(238,212,159,.96),rgba(198,160,246,.88)); box-shadow:0 12px 34px rgba(0,0,0,.2); }
.login-brand-mark img { width:2rem; height:2rem; filter:brightness(.28) saturate(.5); }
.login-brand-copy strong { display:block; color:var(--text-strong); font-size:1.05rem; letter-spacing:-.02em; }
.login-brand-copy span { display:block; margin-top:.12rem; color:var(--subtle); font-size:.72rem; }
.login-kicker { margin-bottom:.45rem; color:var(--mauve); font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.login-title { margin:0; color:var(--text-strong); font-size:1.78rem; line-height:1.08; letter-spacing:-.045em; }
.login-copy { margin:.65rem 0 1.45rem; color:var(--muted); font-size:.82rem; line-height:1.55; }
.login-form { display:grid; gap:.85rem; }
.login-field { display:grid; gap:.34rem; }
.login-field > span { color:rgba(202,211,245,.68); font-size:.68rem; font-weight:650; }
.login-field input, .login-field select { width:100%; min-height:2.75rem; border:1px solid rgba(202,211,245,.14); border-radius:.78rem; padding:.68rem .82rem; background:rgba(24,25,38,.72); color:var(--text-strong); transition:border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast); }
.login-field input::placeholder { color:rgba(165,173,203,.45); }
.login-field input:focus, .login-field select:focus { border-color:rgba(198,160,246,.62); background:rgba(36,39,58,.88); box-shadow:0 0 0 3px rgba(198,160,246,.09); }
.login-submit { min-height:2.85rem; margin-top:.25rem; border:0; border-radius:.82rem; background:var(--mauve); color:var(--mauve-ink); font-weight:800; box-shadow:0 10px 28px rgba(198,160,246,.16); transition:transform var(--motion-fast), filter var(--motion-fast); }
.login-submit:hover { filter:brightness(1.06); transform:translateY(-1px); }
.login-error { padding:.72rem .82rem; border:1px solid rgba(237,135,150,.35); border-radius:.78rem; background:rgba(237,135,150,.08); color:#f3a6b1; font-size:.75rem; }
.login-foot { margin-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:rgba(165,173,203,.48); font-size:.62rem; }
.login-live { display:inline-flex; align-items:center; gap:.38rem; }
.login-live::before { content:""; width:.42rem; height:.42rem; border-radius:999px; background:var(--green); box-shadow:0 0 0 3px rgba(166,218,149,.08); }

/* Actionable Director workspace. */
.command-section-copy { margin-top:.12rem; color:rgba(165,173,203,.48); font-size:.61rem; line-height:1.35; }
.inbox-filters { display:flex; gap:.3rem; margin:.15rem 0 .48rem; overflow:auto; }
.inbox-filters button { flex:0 0 auto; min-height:1.8rem; padding:.2rem .55rem; border:1px solid rgba(202,211,245,.08); border-radius:.55rem; background:rgba(202,211,245,.035); color:rgba(202,211,245,.58); font-size:.61rem; }
.inbox-filters button:hover { background:rgba(202,211,245,.07); color:var(--text); }
.inbox-filters button.active { border-color:rgba(198,160,246,.38); background:rgba(198,160,246,.12); color:var(--mauve); }
.command-item.request-row { width:100%; text-align:left; color:inherit; cursor:pointer; }
.command-item.request-row.selected { border-color:rgba(198,160,246,.38); background:rgba(198,160,246,.08); }
.director-detail { margin-top:.55rem; padding:.7rem; border:1px solid rgba(202,211,245,.09); border-radius:.8rem; background:rgba(24,25,38,.46); }
.director-detail-head, .agent-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.65rem; }
.director-detail-title, .agent-detail-name { margin-top:.12rem; color:var(--text-strong); font-size:.86rem; font-weight:760; line-height:1.25; }
.director-detail-meta, .agent-detail-meta { margin-top:.2rem; color:rgba(165,173,203,.48); font-size:.61rem; }
.director-detail-body { margin:.65rem 0; padding:.58rem .62rem; border-radius:.62rem; background:rgba(202,211,245,.035); color:rgba(202,211,245,.78); font-size:.72rem; line-height:1.5; white-space:pre-wrap; }
.status-chip { display:inline-flex; align-items:center; min-height:1.45rem; padding:0 .45rem; border:1px solid rgba(202,211,245,.1); border-radius:999px; color:var(--muted); font-size:.55rem; font-weight:800; letter-spacing:.04em; }
.status-chip.open { border-color:rgba(237,135,150,.26); color:var(--red); background:rgba(237,135,150,.07); }
.status-chip.acknowledged { border-color:rgba(238,212,159,.28); color:var(--yellow); background:rgba(238,212,159,.07); }
.status-chip.resolved { border-color:rgba(166,218,149,.28); color:var(--green); background:rgba(166,218,149,.07); }
.compact-input { width:100%; min-height:2.15rem; margin-top:.42rem; padding:.48rem .58rem; border:1px solid rgba(202,211,245,.1); border-radius:.62rem; background:rgba(24,25,38,.56); color:var(--text); font-size:.7rem; }
.compact-input:focus, .launch-form select:focus { border-color:rgba(198,160,246,.48); box-shadow:0 0 0 2px rgba(198,160,246,.07); }
.compact-note { min-height:4.5rem; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.launch-form { padding:.58rem; border:1px solid rgba(202,211,245,.08); border-radius:.75rem; background:rgba(24,25,38,.34); }
.launch-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.launch-form select { width:100%; min-height:2.15rem; padding:.4rem .5rem; border:1px solid rgba(202,211,245,.1); border-radius:.62rem; background:rgba(24,25,38,.62); color:var(--text); font-size:.68rem; }
.launch-list { margin-top:.5rem; }
.launch-row { grid-template-columns:auto minmax(0,1fr) auto !important; }
.mini-action { align-self:center; padding:.25rem .45rem; border:1px solid rgba(237,135,150,.2); border-radius:.48rem; background:rgba(237,135,150,.06); color:var(--red); font-size:.57rem; }
.agent-detail { margin-top:.7rem; padding-top:.7rem; border-top:1px solid rgba(202,211,245,.08); }
.agent-detail-section { display:grid; gap:.28rem; margin-top:.65rem; color:rgba(202,211,245,.68); font-size:.68rem; }
.agent-detail-section strong { color:rgba(202,211,245,.43); font-size:.58rem; text-transform:uppercase; letter-spacing:.04em; }
.agent-detail-section span { display:block; line-height:1.45; }
.agent-link { width:100%; padding:.42rem .48rem; border:1px solid rgba(202,211,245,.07); border-radius:.55rem; background:rgba(202,211,245,.035); color:var(--text); text-align:left; font-size:.66rem; }
.agent-link:hover { background:rgba(202,211,245,.07); }
.party-row { width:100%; border:1px solid rgba(202,211,245,.06); color:inherit; text-align:left; }
.party-row.selected { border-color:rgba(198,160,246,.34); background:rgba(198,160,246,.07); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

@media (max-width: 1180px) {
  :root { --sidebar-width: 14.25rem; }
  .command-center { grid-template-columns:1fr; }
  .cc-card.focus { grid-column:auto; }
  .hud .pill:not(.live) { display:none; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: var(--rail-width) minmax(0,1fr); padding-right:.4rem; }
  .project-sidebar { display:none; }
  .content-wrap { height:calc(100dvh - .8rem); }
  .legend { display:none; }
  .map-help { max-width:70vw; }
}

@media (max-width: 620px) {
  :root { --rail-width: 3.55rem; }
  .app { padding:.3rem .3rem .3rem 0; }
  .community-rail { padding:.35rem .2rem; }
  .feature-dock-btn, .rail-action { width:2.35rem; height:2.35rem; border-radius:.72rem; }
  .brand-mark { width:2.25rem; height:2.25rem; border-radius:.78rem; }
  .content-wrap { height:calc(100dvh - .6rem); border-radius:.8rem; }
  .topbar { min-height:3rem; padding:.42rem .55rem; }
  .content-title-copy span, .toolbar .tool-btn:first-child, .hud { display:none; }
  .minimap { width:8rem; height:5rem; }
  .map-help { display:none; }
  .side { top:.4rem; right:.4rem; bottom:.4rem; width:calc(100% - .8rem); }
  .live-chat-shell { right:.45rem; bottom:.45rem; width:calc(100vw - .9rem); height:calc(100dvh - .9rem); }
  .compose-meta { grid-template-columns:6.4rem minmax(0,1fr); }
}