/* JM Reply — modern product skin */
:root {
  --canvas: #edf3ef;
  --surface: rgba(255,255,255,.78);
  --surface-2: #ffffff;
  --surface-3: #e7eee9;
  --ink: #142019;
  --soft: #3e5045;
  --muted: #718078;
  --faint: #9aa8a0;
  --line: rgba(24,54,38,.09);
  --line-strong: rgba(24,54,38,.16);
  --lime: #31dc7c;
  --lime-ink: #052513;
  --green: #21bd6a;
  --blue: #5b7cfa;
  --violet: #8a6df1;
  --amber: #f0a641;
  --red: #ef5b67;
  --solid: #0c1711;
  --on-solid: #f5fff8;
  --shadow: 0 18px 55px rgba(42,74,53,.1);
  --scroll-track: rgba(24,54,38,.045);
  --scroll-thumb: rgba(33,189,106,.32);
  --scroll-thumb-hover: rgba(33,189,106,.58);
}

[data-theme="dark"] {
  --canvas: #08100c;
  --surface: rgba(17,29,22,.78);
  --surface-2: #14221a;
  --surface-3: #1b2b21;
  --ink: #f1f8f3;
  --soft: #c5d2c9;
  --muted: #8fa097;
  --faint: #607168;
  --line: rgba(210,239,221,.08);
  --line-strong: rgba(210,239,221,.14);
  --lime: #39e786;
  --lime-ink: #052412;
  --green: #39e786;
  --blue: #718dff;
  --violet: #a185ff;
  --amber: #f4b350;
  --red: #ff6a78;
  --solid: #08110c;
  --on-solid: #f4fff7;
  --shadow: 0 24px 70px rgba(0,0,0,.32);
  --scroll-track: rgba(210,239,221,.035);
  --scroll-thumb: rgba(57,231,134,.28);
  --scroll-thumb-hover: rgba(57,231,134,.54);
}

/* A single accent token set drives every branded surface. Neutral and semantic
   colors (errors/warnings) stay independent so the interface remains clear. */
[data-accent="ocean"] { --lime:#3478f6; --green:#2563eb; --lime-ink:#061a3a; }
[data-accent="violet"] { --lime:#8b5cf6; --green:#7c3aed; --lime-ink:#1d0b3c; }
[data-accent="rose"] { --lime:#ec4899; --green:#db2777; --lime-ink:#39091f; }
[data-accent="coral"] { --lime:#f9734d; --green:#e85a2a; --lime-ink:#381006; }
[data-accent="cyan"] { --lime:#18b8ce; --green:#0891b2; --lime-ink:#04272e; }
[data-theme="dark"][data-accent="ocean"] { --lime:#6ea8fe; --green:#6ea8fe; --lime-ink:#071a35; }
[data-theme="dark"][data-accent="violet"] { --lime:#a78bfa; --green:#a78bfa; --lime-ink:#1b1038; }
[data-theme="dark"][data-accent="rose"] { --lime:#f472b6; --green:#f472b6; --lime-ink:#35091f; }
[data-theme="dark"][data-accent="coral"] { --lime:#fb8b5b; --green:#fb8b5b; --lime-ink:#351106; }
[data-theme="dark"][data-accent="cyan"] { --lime:#43d8e8; --green:#43d8e8; --lime-ink:#05262d; }

[data-accent]:not([data-accent="emerald"]) {
  --canvas:color-mix(in srgb,#f4f7f6 96%,var(--green));
  --surface:color-mix(in srgb,rgba(255,255,255,.8) 96%,var(--green));
  --surface-2:color-mix(in srgb,#fff 97%,var(--green));
  --surface-3:color-mix(in srgb,#e9edef 94%,var(--green));
  --ink:#172022;
  --soft:#445054;
  --muted:#737e82;
  --faint:#9ba5a8;
  --line:color-mix(in srgb,var(--green) 9%,transparent);
  --line-strong:color-mix(in srgb,var(--green) 17%,transparent);
  --solid:color-mix(in srgb,#0a1012 93%,var(--green));
  --shadow:0 18px 55px color-mix(in srgb,var(--green) 8%,transparent);
  --scroll-track:color-mix(in srgb,var(--green) 4%,transparent);
  --scroll-thumb:color-mix(in srgb,var(--green) 32%,transparent);
  --scroll-thumb-hover:color-mix(in srgb,var(--green) 58%,transparent);
}
[data-theme="dark"][data-accent]:not([data-accent="emerald"]) {
  --canvas:color-mix(in srgb,#070c0f 94%,var(--green));
  --surface:color-mix(in srgb,rgba(15,23,27,.82) 94%,var(--green));
  --surface-2:color-mix(in srgb,#111b20 94%,var(--green));
  --surface-3:color-mix(in srgb,#19252b 93%,var(--green));
  --ink:#f2f7f8;
  --soft:#c8d0d3;
  --muted:#919da1;
  --faint:#627076;
  --line:color-mix(in srgb,var(--green) 9%,transparent);
  --line-strong:color-mix(in srgb,var(--green) 16%,transparent);
  --solid:color-mix(in srgb,#070c0f 93%,var(--green));
  --on-solid:#f5fbfc;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --scroll-track:color-mix(in srgb,var(--green) 3.5%,transparent);
  --scroll-thumb:color-mix(in srgb,var(--green) 28%,transparent);
  --scroll-thumb-hover:color-mix(in srgb,var(--green) 54%,transparent);
}

* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-track { background:var(--scroll-track); border-radius:999px; }
*::-webkit-scrollbar-thumb { min-height:42px; border:3px solid transparent; border-radius:999px; background:var(--scroll-thumb); background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--scroll-thumb-hover); background-clip:padding-box; }
*::-webkit-scrollbar-button { display:none!important; width:0!important; height:0!important; background:transparent!important; -webkit-appearance:none; }
*::-webkit-scrollbar-corner { background:transparent; }
.queue-list,.feed-list,.blocked-list,.modal,.login-page { overscroll-behavior:contain; scrollbar-color:var(--scroll-thumb) transparent; scrollbar-gutter:stable; }
.queue-list,.feed-list,.blocked-list { padding-right:5px; }

body {
  background:
    radial-gradient(circle at 8% -5%, color-mix(in srgb,var(--green) 13%,transparent), transparent 30%),
    radial-gradient(circle at 93% 6%, color-mix(in srgb,var(--violet) 10%,transparent), transparent 25%),
    var(--canvas);
}

body::before {
  opacity: .16;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom,#000,transparent 72%);
}

.ui-icon {
  width: 1.15em;
  height: 1.15em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Theme icons are mutually exclusive. Keep these rules after .ui-icon so its
   generic display value can never make both icons visible. */
.theme-sun,.theme-moon { position:relative; z-index:1; width:20px; height:20px; transform-origin:center; stroke-width:1.85; }
[data-theme="light"] .theme-sun { display:block; animation:themeIconIn .42s cubic-bezier(.22,1,.36,1); }
[data-theme="light"] .theme-moon { display:none; }
[data-theme="dark"] .theme-sun { display:none; }
[data-theme="dark"] .theme-moon { display:block; animation:themeIconIn .42s cubic-bezier(.22,1,.36,1); }
#themeBtn,#loginThemeBtn {
  isolation:isolate;
  overflow:hidden;
  color:var(--green);
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 88%,var(--green)),var(--surface));
  border-color:color-mix(in srgb,var(--green) 25%,var(--line));
}
#themeBtn { position:relative; }
#loginThemeBtn { position:fixed; }
#themeBtn::before,#loginThemeBtn::before {
  position:absolute;
  inset:5px;
  z-index:0;
  content:"";
  border-radius:50%;
  background:radial-gradient(circle,currentColor 0,transparent 68%);
  opacity:.12;
  transform:scale(.7);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease;
}
#themeBtn:hover::before,#loginThemeBtn:hover::before { opacity:.2; transform:scale(1.35); }
@keyframes themeIconIn {
  from { opacity:0; transform:rotate(-70deg) scale(.5); }
  to { opacity:1; transform:rotate(0) scale(1); }
}
::view-transition-old(root) { animation:themeFadeOut .2s ease both; }
::view-transition-new(root) { animation:themeFadeIn .38s cubic-bezier(.22,1,.36,1) both; }
@keyframes themeFadeOut { to { opacity:0; transform:scale(.985); } }
@keyframes themeFadeIn { from { opacity:0; transform:scale(1.012); } }

.app-shell {
  grid-template-rows: 76px minmax(0,1fr);
  padding: 0 14px 14px;
}

.command-bar {
  grid-template-columns: minmax(230px,1fr) auto minmax(320px,1fr);
  border: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow: 0 10px 30px color-mix(in srgb,var(--green) 22%,transparent);
}

.brand-name strong { font-size: 15px; letter-spacing: -.025em; }
.brand-name small { margin-top: 4px; font-family: var(--sans); font-size: 10px; letter-spacing: .02em; text-transform: none; }
.system-identity {
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow: 0 7px 25px rgba(0,0,0,.05);
  backdrop-filter: blur(18px);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
.system-code { display: none; }
.system-line { width: 18px; background: var(--line-strong); }
.system-identity b { font-weight: 650; }

.command-actions { gap: 8px; }
.tool-button,.icon-button,.avatar-button {
  height: 38px;
  border-color: var(--line);
  background: color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow: 0 7px 24px rgba(0,0,0,.05);
  backdrop-filter: blur(18px);
  transition: transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.tool-button {
  gap: 8px;
  padding: 0 13px;
  border-radius: 11px;
  color: var(--soft);
  font-size: 10px;
}
.tool-button .ui-icon { color: var(--green); font-size: 15px; }
.icon-button,.avatar-button { width: 38px; border-radius: 11px; }
.icon-button { font-size: 15px; }
.avatar-button {
  border: 0;
  background: linear-gradient(145deg,var(--green),color-mix(in srgb,var(--green) 58%,#fff));
  color: var(--lime-ink);
  box-shadow: 0 8px 25px color-mix(in srgb,var(--green) 28%,transparent);
}
.tool-button:hover,.icon-button:hover,.avatar-button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb,var(--green) 45%,var(--line));
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.sync-button:hover .ui-icon { transform: rotate(100deg); }
.sync-button .ui-icon { transition: transform .35s ease; }
.tool-button>b { border-color: var(--canvas); }
.session-menu { top:47px; width:282px; padding:8px; overflow:hidden; border-radius:18px; backdrop-filter:blur(24px); }
.session-menu .session-profile { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border:0; }
.session-avatar { width:36px; height:36px; display:grid!important; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--green) 14%,var(--surface-3)); color:var(--green); }
.session-avatar .ui-icon { width:17px; height:17px; }
.session-profile-copy { min-width:0; }
.session-profile-copy small { display:block; color:var(--muted); font-size:10px; }
.session-menu .session-profile-copy b { margin-top:3px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.session-online { width:7px; height:7px; border-radius:50%; background:var(--faint); box-shadow:0 0 0 4px color-mix(in srgb,var(--faint) 11%,transparent); }
.session-online.ready { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 11%,transparent); }
.session-online.starting,.session-online.qr { background:var(--amber); box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 11%,transparent); }
.session-online.disconnected { background:var(--red); box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 11%,transparent); }
.appearance-picker { margin:0; padding:12px 10px 15px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.appearance-picker legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.appearance-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.session-menu .appearance-heading>span { color:var(--muted); font-family:var(--sans); font-size:10px; font-weight:650; letter-spacing:0; text-transform:none; }
.appearance-heading output { padding:4px 7px; border-radius:999px; background:color-mix(in srgb,var(--green) 11%,transparent); color:var(--green); font-family:var(--mono); font-size:9px; font-weight:700; }
.accent-grid { display:grid; grid-template-columns:repeat(6,1fr); align-items:center; gap:7px; }
.session-menu .accent-swatch {
  position:relative;
  width:32px;
  height:32px;
  min-width:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.session-menu .accent-swatch:hover { transform:translateY(-2px) scale(1.04); background:color-mix(in srgb,var(--swatch) 9%,transparent); }
.session-menu .accent-swatch.active { border-color:color-mix(in srgb,var(--swatch) 68%,#fff); box-shadow:0 0 0 3px color-mix(in srgb,var(--swatch) 17%,transparent); }
.accent-swatch>i { width:20px; height:20px; border:2px solid color-mix(in srgb,var(--swatch) 68%,#fff); border-radius:50%; background:var(--swatch); box-shadow:0 3px 9px color-mix(in srgb,var(--swatch) 24%,transparent); transition:transform .18s ease; }
.accent-swatch:hover>i { transform:scale(.88); }
.session-menu .accent-swatch>span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.accent-swatch>.ui-icon { position:absolute; width:12px; height:12px; color:var(--lime-ink); opacity:0; transform:scale(.55); transition:opacity .18s ease,transform .18s ease; }
.accent-swatch.active>.ui-icon { opacity:1; transform:scale(1); }
.accent-swatch[data-accent-option="emerald"] { --swatch:#39e786; }
.accent-swatch[data-accent-option="ocean"] { --swatch:#6ea8fe; }
.accent-swatch[data-accent-option="violet"] { --swatch:#a78bfa; }
.accent-swatch[data-accent-option="rose"] { --swatch:#f472b6; }
.accent-swatch[data-accent-option="coral"] { --swatch:#fb8b5b; }
.accent-swatch[data-accent-option="cyan"] { --swatch:#43d8e8; }
.session-menu .session-actions { display:grid; gap:3px; padding:7px 2px 1px; border:0; }
.session-menu .session-action { height:40px; display:flex; align-items:center; gap:10px; padding:0 10px; border-radius:10px; color:var(--soft); font-size:11px; font-weight:650; }
.session-menu .session-action .ui-icon { width:15px; height:15px; color:var(--muted); }
.session-menu .session-action>span { color:inherit; font-family:var(--sans); font-size:inherit; text-transform:none; }
.session-menu .session-action:hover { background:var(--surface-3); }
.session-menu .session-action.session-danger { margin:0; color:var(--red); }
.session-menu .session-action.session-danger .ui-icon { color:var(--red); }
.session-menu .session-action.session-danger:hover { background:color-mix(in srgb,var(--red) 9%,transparent); }

.cockpit {
  grid-template-columns: minmax(330px,390px) minmax(0,1fr);
  grid-template-rows: minmax(230px,.42fr) minmax(290px,.58fr);
  gap: 13px;
}

.cockpit-pane {
  border-color: var(--line);
  border-radius: 22px;
  background: color-mix(in srgb,var(--surface) 91%,transparent);
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);
  backdrop-filter: blur(22px);
  animation: panelEnter .32s cubic-bezier(.22,1,.36,1) both;
}
.control-pane {
  container: control-panel / inline-size;
  grid-column: 1;
  grid-row: 1 / 3;
  grid-template-rows: auto auto auto minmax(120px,1fr);
  gap: 13px;
  padding: 22px;
  border-radius: 22px;
}
.queue-panel {
  grid-column: 2;
  grid-row: 1;
  padding: 22px 24px;
  border-radius: 22px;
  animation-delay: .04s;
}
.feed-panel {
  grid-column: 2;
  grid-row: 2;
  padding: 22px 24px;
  border-radius: 22px;
  animation-delay: .08s;
}
@keyframes panelEnter {
  from { opacity: .82; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.heading-cluster { min-width: 0; display: flex; align-items: center; gap: 12px; }
.heading-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb,var(--green) 14%,transparent);
  color: var(--green);
  font-size: 19px;
}
.heading-icon.blue { background: color-mix(in srgb,var(--blue) 14%,transparent); color: var(--blue); }
.heading-icon.violet { background: color-mix(in srgb,var(--violet) 14%,transparent); color: var(--violet); }
.pane-heading h1,.pane-heading h2 { font-size: clamp(22px,1.65vw,28px); letter-spacing: -.04em; }
.eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: none;
}
.live-marker {
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb,var(--green) 10%,transparent);
  color: var(--green);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
}
.live-marker i { animation: softPulse 1.8s ease-in-out infinite; }
@keyframes softPulse { 50% { opacity:.4; box-shadow:0 0 0 7px color-mix(in srgb,var(--green) 7%,transparent); } }
.pane-note { margin: 8px 0 12px; font-size: 11px; }

.connection-console {
  min-height: 146px;
  grid-template-columns: 72px minmax(0,1fr);
  padding: 17px;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 0,color-mix(in srgb,var(--green) 28%,transparent),transparent 46%),
    linear-gradient(145deg,color-mix(in srgb,#081012 72%,var(--green)),#080d0f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 14px 35px rgba(0,0,0,.18);
}
.connection-console::after {
  right: -45px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-color: color-mix(in srgb,var(--green) 18%,transparent);
}
.signal-radar { width: 66px; height: 66px; color: var(--green); }
.signal-radar>span { border-color: color-mix(in srgb,var(--green) 28%,transparent); opacity:.62; }
body[data-bot-status="starting"] .signal-radar>span,body[data-bot-status="qr"] .signal-radar>span { animation: radar 2.6s ease-out infinite; }
body[data-bot-status="starting"] .signal-radar>span:nth-child(2),body[data-bot-status="qr"] .signal-radar>span:nth-child(2) { animation-delay: .45s; }
.signal-radar>.ui-icon { width: 23px; height: 23px; stroke-width: 1.6; }
.signal-radar .status-dot { position:absolute; right:2px; top:6px; }
@keyframes radar {
  0%,35% { transform:scale(.76); opacity:.85; }
  85%,100% { transform:scale(1.13); opacity:.08; }
}
.connection-copy small { font-family:var(--sans); font-size:9px; letter-spacing:.03em; }
.connection-copy h2 { font-size:27px; letter-spacing:-.04em; }
.connection-copy p { font-size:11px; }
.connection-facts { margin-top:12px; padding-top:10px; }
.connection-facts dt { font-family:var(--sans); font-size:8px; letter-spacing:.03em; }
.connection-facts dd { font-size:10px; }
.qr-reopen {
  border:0;
  border-radius:8px;
  background:color-mix(in srgb,var(--green) 16%,transparent);
  color:var(--green);
  font-family:var(--sans);
  font-weight:700;
  transition:transform .18s ease,background .18s ease;
}
.qr-reopen:hover { transform:translateY(-1px); background:color-mix(in srgb,var(--green) 24%,transparent); }

.micro-heading { align-items:center; margin-bottom:10px; }
.micro-heading span { display:flex; align-items:center; gap:7px; font-family:var(--sans); font-size:10px; text-transform:none; }
.micro-heading span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 10%,transparent); }
.micro-heading b { font-size:12px; letter-spacing:-.01em; }
.mode-grid { gap:8px; overflow:visible; border:0; border-radius:0; }
.mode-card {
  position:relative;
  min-height:86px;
  grid-template-columns:32px minmax(0,1fr);
  grid-template-rows:1fr auto;
  gap:8px 10px;
  overflow:hidden;
  padding:12px;
  border:1px solid var(--line)!important;
  border-radius:15px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 66%,transparent),color-mix(in srgb,var(--surface) 72%,transparent));
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.mode-card::after { position:absolute; width:70px; height:70px; right:-36px; bottom:-42px; border:1px solid color-mix(in srgb,var(--green) 13%,transparent); border-radius:50%; content:""; opacity:0; transform:scale(.75); transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1); }
.mode-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--green) 32%,var(--line))!important; }
.mode-card.active {
  border-color:color-mix(in srgb,var(--green) 44%,transparent)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--green) 22%,var(--surface-2)),color-mix(in srgb,var(--green) 8%,var(--surface-2)));
  color:var(--ink);
  box-shadow:0 8px 22px color-mix(in srgb,var(--green) 10%,transparent);
}
.mode-card.active::after { opacity:1; transform:scale(1); }
.mode-symbol {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface-3) 72%,transparent);
  color:var(--muted);
  font-size:15px;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.mode-symbol .ui-icon { width:17px; height:17px; stroke-width:1.7; }
.mode-card:hover .mode-symbol { transform:scale(1.04); }
.mode-card.active .mode-symbol { border-color:transparent; background:var(--green); color:var(--lime-ink); box-shadow:0 7px 18px color-mix(in srgb,var(--green) 22%,transparent); }
.mode-copy { align-self:center; }
.mode-copy b,.mode-copy small { overflow:visible; text-overflow:clip; white-space:normal; }
.mode-copy b { font-size:12px; line-height:1.15; letter-spacing:-.01em; }
.mode-copy small { margin-top:4px; font-size:10px; line-height:1.25; }
.mode-card.active .mode-copy small { color:var(--muted); }
.mode-control { grid-column:2; width:max-content; gap:6px; padding:4px 7px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-family:var(--sans); font-size:8px; font-weight:700; }
.mode-control i { width:5px; height:5px; }
.mode-card.active .mode-control { color:var(--green); }
.mode-card.active .mode-control i { border-color:var(--green); background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent); }
.activity-editor {
  grid-template-columns:1fr;
  gap:7px;
  margin-top:10px;
  padding:10px;
  border:1px solid color-mix(in srgb,var(--green) 24%,var(--line));
  border-radius:13px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--green) 8%,var(--surface-2)),color-mix(in srgb,var(--surface-2) 64%,transparent));
  animation:itemEnter .22s cubic-bezier(.22,1,.36,1) both;
}
.activity-editor label { color:var(--soft); font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:0; text-transform:none; }
.activity-editor>div { gap:7px; }
.activity-editor input {
  height:38px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--ink);
  font-size:11px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.activity-editor input:focus { border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 10%,transparent); }
.activity-editor button { height:38px; padding:0 14px; border-radius:9px; background:var(--green); color:var(--lime-ink); font-size:10px; font-weight:800; }

.metrics {
  gap:8px;
  overflow:visible;
  border:0;
  border-radius:0;
}
.metric {
  overflow:hidden;
  padding:12px;
  border:1px solid var(--line)!important;
  border-radius:15px;
  background:color-mix(in srgb,var(--surface-2) 48%,transparent);
  transition:transform .2s ease,border-color .2s ease;
}
.metric:hover { transform:translateY(-2px); border-color:var(--line-strong)!important; }
.metric-icon {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--green) 11%,transparent);
  color:var(--green);
  font-size:12px;
}
.metric:nth-child(2) .metric-icon { background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue); }
.metric:nth-child(4) .metric-icon { background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); }
.metric small { font-size:10px; }
.metric strong { font-family:var(--sans); font-size:clamp(26px,2.1vw,36px); font-weight:720; letter-spacing:-.06em; }
.metric p { font-family:var(--sans); font-size:8px; letter-spacing:.02em; }
.metric.queue-metric .metric-icon { background:color-mix(in srgb,var(--green) 11%,transparent); color:var(--green); }
.metric.queue-metric.is-active {
  border-color:color-mix(in srgb,var(--green) 36%,var(--line))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--green) 18%,var(--surface-2)),color-mix(in srgb,var(--green) 5%,var(--surface-2)));
  box-shadow:0 10px 26px color-mix(in srgb,var(--green) 10%,transparent);
}
.metric.error-metric.has-errors { border-color:color-mix(in srgb,var(--red) 25%,var(--line))!important; }

.count-chip {
  padding:7px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 13%,transparent);
  color:var(--blue);
  font-family:var(--sans);
  font-size:10px;
}
.link-button {
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  font-family:var(--sans);
  text-transform:none;
  transition:.18s ease;
}
.link-button:hover { border-color:color-mix(in srgb,var(--red) 30%,var(--line)); background:color-mix(in srgb,var(--red) 8%,transparent); }
.queue-item {
  margin-top:8px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 62%,transparent),color-mix(in srgb,var(--surface-2) 34%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 4%,transparent);
  contain:layout paint;
}
.queue-item.is-new { animation:itemEnter .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes itemEnter { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }
.mini-avatar {
  border:0;
  background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 20%,var(--surface-3)),color-mix(in srgb,var(--violet) 16%,var(--surface-3)));
  color:var(--blue);
}
.cancel-button,.block-button {
  display:grid;
  place-items:center;
  border:0;
  background:var(--surface-3);
}
.cancel-button .ui-icon,.block-button .ui-icon { width:12px; height:12px; }
.queue-time { padding:3px 4px 3px 10px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface-3) 58%,transparent); }
.queue-countdown { min-width:52px; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; line-height:1; }
.progress-track { height:4px; border-radius:99px; }
.progress-bar { position:relative; overflow:hidden; border-radius:99px; transition:width 1s linear,background-color .25s ease; }
.queue-copy { display:grid; min-width:0; }
.queue-person .queue-message {
  max-width:min(720px,62vw);
  overflow:visible;
  color:var(--soft);
  font-size:12px;
  line-height:1.45;
  text-overflow:clip;
  white-space:normal;
}
.queue-attachment {
  width:max-content;
  max-width:min(240px,100%)!important;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin-top:8px!important;
  padding:5px 9px 5px 5px;
  overflow:visible!important;
  border:1px solid color-mix(in srgb,var(--green) 18%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--green) 6%,var(--surface-3));
  white-space:normal!important;
}
.queue-media-thumb,.queue-media-icon { width:32px; height:32px; border-radius:7px; }
.queue-media-thumb { display:block; object-fit:cover; }
.queue-media-icon { display:grid!important; place-items:center; background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green); }
.queue-media-icon .ui-icon { width:16px; height:16px; }
.queue-media-copy { display:grid!important; min-width:0; margin:0!important; overflow:visible!important; white-space:normal!important; }
.queue-media-copy b { font-size:12px; }
.queue-media-copy small { margin-top:2px; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }

.feed-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:8px;
}
.feed-item {
  min-width:0;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--surface-2) 43%,transparent);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.feed-item.is-new { animation:itemEnter .35s cubic-bezier(.22,1,.36,1) both; }
.feed-item:hover { transform:translateY(-2px); border-color:var(--line-strong); background:color-mix(in srgb,var(--surface-2) 70%,transparent); }
.feed-item.has-media { grid-column:1/-1; }
.feed-item.has-media .feed-attachment { max-width:560px; }
.feed-icon {
  width:34px;
  height:34px;
  border:0;
  border-radius:11px;
  font-size:15px;
}
.feed-icon .ui-icon { width:15px; height:15px; }
.feed-icon.incoming { background:color-mix(in srgb,var(--blue) 12%,transparent); }
.feed-icon.ai_reply { background:color-mix(in srgb,var(--green) 12%,transparent); }
.feed-icon.system { background:color-mix(in srgb,var(--violet) 12%,transparent); color:var(--violet); }
.feed-name-row b { font-size:11px; }
.event-tag { border:0; background:var(--surface-3); font-family:var(--sans); }
.feed-content p { font-size:10px; }
.feed-attachment {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:5px;
  border:1px solid color-mix(in srgb,var(--green) 16%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--green) 5%,var(--surface-3));
}
.feed-media-thumb,.feed-media-mark { width:34px; height:34px; border-radius:7px; }
.feed-media-thumb { display:block; object-fit:cover; }
.feed-media-mark { display:grid; place-items:center; background:color-mix(in srgb,var(--green) 13%,transparent); color:var(--green); }
.feed-media-mark .ui-icon { width:16px; height:16px; }
.feed-media-copy { display:grid; min-width:0; }
.feed-media-copy b { color:var(--soft); font-size:12px; }
.feed-media-copy small { margin-top:3px; overflow:visible; color:var(--muted); font-size:10px; line-height:1.45; text-overflow:clip; white-space:normal; }
.feed-attachment.failed { border-color:color-mix(in srgb,var(--red) 28%,var(--line)); }
.feed-attachment.failed .feed-media-mark { background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); }
.empty-state {
  position:relative;
  min-height:100%;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--green) 7%,transparent),transparent 25%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 34%,transparent),transparent);
  animation:emptyReveal .35s ease both;
}
.empty-state::before { position:absolute; top:50%; left:50%; width:200px; height:200px; content:""; border:1px solid color-mix(in srgb,var(--green) 8%,transparent); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); }
.empty-state>* { position:relative; z-index:1; }
.empty-mark {
  width:50px;
  height:50px;
  border:0;
  background:linear-gradient(145deg,color-mix(in srgb,var(--green) 17%,transparent),color-mix(in srgb,var(--green) 6%,transparent));
  color:var(--green);
  font-size:21px;
  box-shadow:0 10px 28px color-mix(in srgb,var(--green) 9%,transparent);
}
@keyframes emptyReveal { from{opacity:0} to{opacity:1} }
.empty-state b { font-size:12px; }
.empty-state p { font-size:11px; }

.modal {
  max-height:min(86dvh,760px);
  overflow:auto;
  border-color:var(--line);
  border-radius:22px;
  background:color-mix(in srgb,var(--surface-2) 94%,transparent);
  backdrop-filter:blur(28px);
  animation:modalEnter .25s cubic-bezier(.22,1,.36,1);
}
@keyframes modalEnter { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:none} }
.modal-close { display:grid; place-items:center; border:0; background:var(--surface-3); }
.modal-close { padding:0; line-height:0; }
.modal-close .ui-icon { width:15px; height:15px; margin:auto; }
.event-detail-media { display:grid; gap:11px; margin:14px 0; }
.event-detail-media[hidden] { display:none; }
.event-media-image { width:100%; max-height:48dvh; display:block; object-fit:contain; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.event-media-audio { display:none; }
.event-audio-player {
  position:relative;
  display:grid;
  gap:15px;
  overflow:hidden;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--green) 24%,var(--line));
  border-radius:17px;
  background:
    radial-gradient(circle at 90% 0,color-mix(in srgb,var(--green) 17%,transparent),transparent 45%),
    linear-gradient(145deg,color-mix(in srgb,var(--green) 8%,var(--surface-3)),color-mix(in srgb,var(--surface) 90%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent);
}
.event-audio-player::after { position:absolute; right:-42px; top:-54px; width:130px; height:130px; content:""; border:1px solid color-mix(in srgb,var(--green) 13%,transparent); border-radius:50%; pointer-events:none; }
.event-audio-heading { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.event-audio-identity { min-width:0; display:flex; align-items:center; gap:10px; }
.event-audio-identity>i { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green); }
.event-audio-identity>i .ui-icon { width:17px; height:17px; }
.event-audio-identity>span { min-width:0; display:grid; }
.event-audio-identity b { font-size:12px; }
.event-audio-identity small { margin-top:3px; color:var(--muted); font-size:9px; }
.event-audio-speed { position:relative; z-index:2; min-width:39px; height:29px; padding:0 9px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface-2) 80%,transparent); color:var(--soft); cursor:pointer; font-family:var(--sans); font-size:10px; font-weight:750; }
.event-audio-speed:hover { border-color:color-mix(in srgb,var(--green) 38%,var(--line)); color:var(--green); }
.event-audio-waveform { height:20px; display:flex; align-items:center; gap:4px; padding:0 4px; color:var(--green); }
.event-audio-waveform i { width:3px; height:var(--bar-height); display:block; border-radius:999px; background:currentColor; opacity:.38; transform-origin:center; }
.event-audio-player.is-playing .event-audio-waveform i { animation:audioBar .85s ease-in-out infinite alternate; }
.event-audio-player.is-playing .event-audio-waveform i:nth-child(3n+2) { animation-delay:-.3s; }
.event-audio-player.is-playing .event-audio-waveform i:nth-child(3n) { animation-delay:-.55s; }
@keyframes audioBar { to { opacity:.9; transform:scaleY(.62); } }
.event-audio-controls { display:grid; grid-template-columns:42px minmax(0,1fr) 34px; align-items:center; gap:12px; }
.event-audio-toggle,.event-audio-mute { display:grid; place-items:center; padding:0; border:0; cursor:pointer; }
.event-audio-toggle { width:42px; height:42px; border-radius:14px; background:var(--green); color:var(--lime-ink); box-shadow:0 9px 24px color-mix(in srgb,var(--green) 23%,transparent); transition:transform .18s ease,box-shadow .18s ease; }
.event-audio-toggle:hover { transform:translateY(-1px) scale(1.02); box-shadow:0 12px 28px color-mix(in srgb,var(--green) 30%,transparent); }
.event-audio-toggle .ui-icon { width:20px; height:20px; stroke-width:1.8; }
.event-audio-timeline { min-width:0; display:grid; gap:5px; }
.event-audio-progress { width:100%; height:18px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; appearance:none; }
.event-audio-progress::-webkit-slider-runnable-track { height:4px; border-radius:999px; background:linear-gradient(90deg,var(--green) var(--audio-progress),var(--surface-3) var(--audio-progress)); }
.event-audio-progress::-webkit-slider-thumb { width:13px; height:13px; margin-top:-4.5px; border:3px solid var(--surface); border-radius:50%; background:var(--green); box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 20%,transparent); appearance:none; }
.event-audio-progress::-moz-range-track { height:4px; border-radius:999px; background:var(--surface-3); }
.event-audio-progress::-moz-range-progress { height:4px; border-radius:999px; background:var(--green); }
.event-audio-progress::-moz-range-thumb { width:9px; height:9px; border:3px solid var(--surface); border-radius:50%; background:var(--green); }
.event-audio-progress:focus-visible { outline:2px solid color-mix(in srgb,var(--green) 65%,transparent); outline-offset:4px; border-radius:999px; }
.event-audio-times { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:8px; }
.event-audio-times time:first-child { color:var(--soft); }
.event-audio-mute { width:34px; height:34px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--surface-2) 72%,transparent); color:var(--muted); }
.event-audio-mute:hover,.event-audio-mute.is-muted { border-color:color-mix(in srgb,var(--green) 35%,var(--line)); color:var(--green); }
.event-audio-mute .ui-icon { width:16px; height:16px; }
.event-audio-error { margin:0; padding:8px 10px; border-radius:9px; background:color-mix(in srgb,var(--red) 10%,transparent); color:var(--red); font-size:9px; }
.event-audio-error[hidden] { display:none; }
.event-media-status { display:grid; grid-template-columns:35px minmax(0,1fr); align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--green) 5%,var(--surface)); }
.event-media-status>span:first-child { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--green) 13%,transparent); color:var(--green); }
.event-media-status .ui-icon { width:17px; height:17px; }
.event-media-status>span:last-child { display:grid; min-width:0; }
.event-media-status b { font-size:12px; }
.event-media-status small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.5; }
.qr-box { border:0; border-radius:18px; box-shadow:0 15px 45px rgba(0,0,0,.14); }
.toast { border:0; border-radius:13px; backdrop-filter:blur(20px); }

.login-layout {
  border:0;
  border-radius:28px;
  background:color-mix(in srgb,var(--surface) 91%,transparent);
  backdrop-filter:blur(24px);
}
.login-story {
  background:
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--green) 28%,transparent),transparent 32%),
    linear-gradient(145deg,color-mix(in srgb,#080e11 70%,var(--green)),#080d0f);
}
.login-theme-toggle { display:grid; place-items:center; border:1px solid; border-radius:14px; font-size:18px; box-shadow:0 10px 28px rgba(0,0,0,.12); transition:transform .2s ease,box-shadow .2s ease,background .25s ease,color .25s ease; }
.login-theme-toggle:hover { transform:translateY(-2px) rotate(3deg); box-shadow:0 12px 30px rgba(0,0,0,.16); }
.login-submit { background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 58%,#fff)); color:var(--lime-ink); border:0; box-shadow:0 12px 30px color-mix(in srgb,var(--green) 22%,transparent); }
.feed-list>.empty-state:only-child { grid-column:1/-1; width:100%; }
.backup-actions .ui-icon { width:16px; height:16px; }
.restore-icon { transform:rotate(180deg); }

@media (min-width: 1500px) {
  .app-shell { grid-template-rows:86px minmax(0,1fr); padding:0 18px 18px; }
  .brand-mark { width:48px; height:48px; border-radius:16px; }
  .brand-name strong { font-size:18px; }
  .brand-name small { font-size:11px; }
  .system-identity { padding:11px 17px; font-size:12px; }
  .tool-button,.icon-button,.avatar-button { height:44px; }
  .tool-button { padding:0 16px; font-size:11px; }
  .icon-button,.avatar-button { width:44px; }
  .cockpit { grid-template-columns:minmax(420px,470px) minmax(0,1fr); grid-template-rows:minmax(270px,.42fr) minmax(330px,.58fr); gap:16px; }
  .control-pane { gap:16px; padding:28px; }
  .queue-panel,.feed-panel { padding:28px 30px; }
  .heading-cluster { gap:14px; }
  .heading-icon { width:48px; height:48px; border-radius:15px; font-size:23px; }
  .pane-heading h1,.pane-heading h2 { font-size:34px; }
  .eyebrow { margin-bottom:5px; font-size:10px; }
  .live-marker { padding:7px 11px; font-size:8px; }
  .pane-note { margin:10px 0 16px; font-size:11px; }
  .connection-console { min-height:180px; grid-template-columns:88px minmax(0,1fr); padding:21px; }
  .signal-radar { width:80px; height:80px; }
  .signal-radar>.ui-icon { width:29px; height:29px; }
  .connection-copy small { font-size:10px; }
  .connection-copy h2 { font-size:34px; }
  .connection-copy p { font-size:11px; }
  .connection-facts dt { font-size:9px; }
  .connection-facts dd { font-size:11px; }
  .qr-reopen { padding:8px 11px; font-size:10px; }
  .micro-heading span { font-size:10px; }
  .micro-heading b { font-size:12px; }
  .mode-grid { gap:9px; }
  .mode-card { min-height:104px; grid-template-columns:38px minmax(0,1fr); padding:14px; }
  .mode-symbol { width:38px; height:38px; font-size:17px; }
  .mode-symbol .ui-icon { width:20px; height:20px; }
  .mode-copy b { font-size:13px; }
  .mode-copy small { font-size:10px; }
  .mode-control { font-size:9px; }
  .metrics { gap:10px; }
  .metric { padding:15px; }
  .metric-icon { width:31px; height:31px; font-size:15px; }
  .metric small { font-size:10px; }
  .metric strong { font-size:44px; }
  .metric p { font-size:9px; }
  .count-chip { padding:8px 12px; font-size:10px; }
  .empty-mark { width:60px; height:60px; font-size:25px; }
  .empty-state b { font-size:14px; }
  .empty-state p { max-width:340px; font-size:10px; }
  .feed-list { gap:10px; }
  .feed-item { padding:13px; }
  .feed-icon { width:40px; height:40px; }
  .feed-icon .ui-icon { width:18px; height:18px; }
  .feed-name-row b { font-size:11px; }
  .feed-content p { font-size:10px; }
  .event-tag,.feed-side time { font-size:9px; }
  .queue-item { padding:16px; }
  .queue-person b { font-size:12px; }
  .queue-person span { font-size:10px; }
  .queue-person .queue-message { font-size:12px; }
  .queue-media-copy b,.feed-media-copy b { font-size:12px; }
  .queue-media-copy small,.feed-media-copy small { font-size:10px; }
  .mini-avatar { width:42px; height:42px; font-size:9px; }
  .queue-countdown { font-size:18px; }
  .modal { width:min(540px,calc(100% - 32px)); padding:42px; }
  .modal-close { top:16px; right:16px; width:38px; height:38px; }
  .modal-close .ui-icon { width:18px; height:18px; }
  .modal-kicker { font-size:9px; }
  .modal h2 { font-size:32px; }
  .modal>p { font-size:12px; }
  .primary-button,.secondary-button,.danger-button { min-height:48px; font-size:11px; }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .cockpit { grid-template-columns:340px minmax(0,1fr); }
  .feed-list { grid-template-columns:1fr; }
  .tool-button span { display:none; }
  .tool-button { width:38px; padding:0; justify-content:center; }
}

@media (max-width: 860px) {
  .app-shell { grid-template-rows:66px minmax(0,1fr) 70px; padding:0 10px max(8px,env(safe-area-inset-bottom)); }
  .command-bar { grid-template-columns:1fr auto; }
  .tool-button,.icon-button,.avatar-button { width:42px; min-width:42px; height:42px; padding:0; justify-content:center; }
  .tool-button .ui-icon,.icon-button .ui-icon,.avatar-button .ui-icon { width:20px; height:20px; flex:0 0 20px; font-size:20px; }
  .theme-sun,.theme-moon { width:21px!important; height:21px!important; }
  .cockpit { display:block; }
  .cockpit-pane { position:absolute; inset:0; display:none; border-radius:20px; }
  body[data-mobile-view="control"] .control-pane,
  body[data-mobile-view="queue"] .queue-panel,
  body[data-mobile-view="activity"] .feed-panel { display:grid; }
  .control-pane { grid-template-rows:auto auto auto minmax(110px,1fr); padding:16px; }
  .queue-panel,.feed-panel { padding:18px; }
  .feed-list { grid-template-columns:1fr; }
  .mobile-dock {
    gap:4px;
    margin-top:7px;
    padding:5px;
    border:1px solid var(--line);
    border-radius:17px;
    background:color-mix(in srgb,var(--surface) 93%,transparent);
    box-shadow:0 10px 30px rgba(0,0,0,.13);
    backdrop-filter:blur(20px);
  }
  .mobile-tab {
    grid-auto-flow:column;
    align-items:center;
    gap:7px;
    border-radius:12px;
    color:var(--muted);
  }
  .mobile-tab .ui-icon { width:17px; height:17px; }
  .mobile-tab.active {
    background:linear-gradient(145deg,var(--green),color-mix(in srgb,var(--green) 58%,#fff));
    color:var(--lime-ink);
    box-shadow:0 8px 22px color-mix(in srgb,var(--green) 20%,transparent);
  }
  .mobile-tab i { top:5px; left:calc(50% + 30px); background:var(--red); color:#fff; }
}

@media (max-width: 540px) {
  .brand-mark { width:40px; height:40px; flex:0 0 40px; }
  .command-actions { gap:5px; }
  /* Respaldo es una acción de recuperación crítica. La hoja base lo ocultaba
     por posición en pantallas pequeñas; el ID evita que futuros cambios de
     orden vuelvan a esconder otra herramienta por accidente. */
  #backupBtn { display:flex!important; }
  .tool-button,.icon-button,.avatar-button { width:40px; min-width:40px; height:40px; }
  .tool-button .ui-icon,.icon-button .ui-icon,.avatar-button .ui-icon { width:19px; height:19px; flex:0 0 19px; font-size:19px; }
  .theme-sun,.theme-moon { width:21px!important; height:21px!important; }
  .session-menu { position:fixed; top:59px; right:10px; width:min(282px,calc(100vw - 20px)); }
  .heading-icon { width:36px; height:36px; }
  .heading-icon .ui-icon { width:20px; height:20px; }
  .connection-console { min-height:136px; grid-template-columns:60px minmax(0,1fr); }
  .mode-grid { gap:5px; }
  .mode-card { min-height:82px; grid-template-columns:30px minmax(0,1fr); padding:9px 7px; gap:6px 7px; }
  .mode-symbol { width:30px; height:30px; }
  .mode-symbol .ui-icon { width:17px; height:17px; }
  .mode-copy small { display:block; }
  .mode-control { padding:3px 6px; }
  .metric { padding:9px; }
  .metric-icon { width:23px; height:23px; }
  .metric-icon .ui-icon { width:15px; height:15px; }
  .metric strong { font-size:27px; }
  .modal { padding:30px 22px; }
  .modal-close { top:11px; right:11px; width:34px; height:34px; }
  .queue-top { align-items:stretch; flex-direction:column; }
  .queue-person { align-items:flex-start; width:100%; }
  .queue-person .queue-message { max-width:none; }
  .queue-time { align-self:flex-end; }
  .queue-attachment { max-width:100%!important; }
}

@media (max-width: 360px) {
  .app-shell { padding-inline:7px; }
  .command-bar { grid-template-columns:minmax(0,1fr) auto; }
  .brand-name { min-width:0; }
  .brand-name strong { font-size:13px; }
  #blockedBtn { display:none; }
  .tool-button,.icon-button,.avatar-button { width:38px; min-width:38px; height:38px; }
  .tool-button .ui-icon,.icon-button .ui-icon,.avatar-button .ui-icon { width:18px; height:18px; flex-basis:18px; }
}

@media (max-height: 700px) and (min-width: 861px) {
  .app-shell { grid-template-rows:66px minmax(0,1fr); }
  .control-pane,.queue-panel,.feed-panel { padding:14px 16px; }
  .connection-console { min-height:124px; }
  .mode-card { min-height:60px; }
}

@media (prefers-reduced-motion: reduce) {
  .cockpit-pane,.signal-radar>span,.live-marker i,.feed-item,.queue-item,.empty-mark,.modal { animation:none!important; }
  .mode-card,.mode-card::after { transition:none!important; }
  .activity-editor { animation:none!important; }
  .theme-sun,.theme-moon,::view-transition-old(root),::view-transition-new(root) { animation:none!important; }
}

/* Operations center */
.diagnostics-button.has-diagnostic-error { border-color:color-mix(in srgb,var(--red) 34%,var(--line)); }
.diagnostics-button.has-diagnostic-error>.ui-icon { color:var(--red); }
.diagnostics-modal {
  width:min(1180px,calc(100% - 28px));
  height:min(84dvh,780px);
  max-height:none;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:16px;
  padding:26px;
  overflow:hidden;
}
.diagnostics-modal[open] { display:grid; }
.diagnostics-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-right:38px; }
.diagnostics-header h2 { margin:0; font-size:30px; }
.diagnostics-header p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.diagnostics-header-actions { display:flex; align-items:center; gap:8px; }
.health-pill { height:38px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--muted); font-size:11px; white-space:nowrap; }
.health-pill>i { width:8px; height:8px; border-radius:50%; background:var(--faint); }
.health-pill.ok { color:var(--green); border-color:color-mix(in srgb,var(--green) 24%,var(--line)); }
.health-pill.ok>i { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 11%,transparent); }
.health-pill.warning { color:var(--amber); border-color:color-mix(in srgb,var(--amber) 25%,var(--line)); }
.health-pill.warning>i { background:var(--amber); }
.health-pill.error { color:var(--red); border-color:color-mix(in srgb,var(--red) 28%,var(--line)); }
.health-pill.error>i { background:var(--red); box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 10%,transparent); }
.diagnostics-refresh { min-height:38px; gap:8px; border-radius:11px; font-size:11px; }
.diagnostics-refresh .ui-icon { width:15px; height:15px; }
.diagnostics-refresh.is-loading .ui-icon { animation:diagnosticsSpin .8s linear infinite; }
@keyframes diagnosticsSpin { to { transform:rotate(360deg); } }
.diagnostic-checks { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.diagnostic-check { min-width:0; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--surface) 88%,transparent); }
.diagnostic-check>div { display:flex; align-items:center; gap:7px; }
.check-dot { width:7px; height:7px; border-radius:50%; background:var(--faint); }
.diagnostic-check.ok .check-dot { background:var(--green); }
.diagnostic-check.warning .check-dot { background:var(--amber); }
.diagnostic-check.error .check-dot { background:var(--red); }
.diagnostic-check small { overflow:hidden; color:var(--muted); font-size:10px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.diagnostic-check>b { display:block; margin-top:9px; overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.diagnostic-check>p { margin:4px 0 0; overflow:hidden; color:var(--faint); font-family:var(--mono); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.diagnostics-body { min-height:0; display:grid; grid-template-columns:minmax(350px,.85fr) minmax(430px,1.15fr); gap:12px; }
.diagnostics-section { min-height:0; display:grid; padding:16px; border:1px solid var(--line); border-radius:17px; background:color-mix(in srgb,var(--surface) 80%,transparent); }
.issues-section { grid-template-rows:auto minmax(0,1fr) auto; }
.console-section { grid-template-rows:auto auto minmax(0,1fr) auto; }
.diagnostics-section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.diagnostics-section-heading span { color:var(--green); font-family:var(--mono); font-size:9px; text-transform:uppercase; }
.diagnostics-section-heading h3 { margin:3px 0 0; font-size:16px; }
.diagnostics-section-heading>small { color:var(--faint); font-family:var(--mono); font-size:9px; white-space:nowrap; }
.diagnostics-section-heading .link-button { padding:7px 9px; border:1px solid var(--line); border-radius:9px; }
.diagnostics-log-actions { display:flex; align-items:center; gap:6px; }
.diagnostics-log-actions .link-button { display:inline-flex; align-items:center; gap:6px; min-height:32px; }
.diagnostics-log-actions .ui-icon { width:13px; height:13px; }
.diagnostics-clear-logs:hover { border-color:color-mix(in srgb,var(--red) 46%,var(--line)); color:var(--red); }
.diagnostic-issues { min-height:0; overflow:auto; display:grid; align-content:start; gap:8px; padding-right:4px; }
.diagnostic-issue { padding:13px; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:12px; background:var(--surface-2); }
.diagnostic-issue.error { border-left-color:var(--red); }
.issue-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.issue-area,.issue-severity { font-family:var(--mono); font-size:9px; text-transform:uppercase; }
.issue-area { color:var(--muted); }
.issue-severity { color:var(--amber); }
.diagnostic-issue.error .issue-severity { color:var(--red); }
.diagnostic-issue>b { display:block; font-size:13px; }
.diagnostic-issue>p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.issue-solution { display:grid; grid-template-columns:22px 1fr; gap:8px; margin-top:10px; padding:9px; border-radius:9px; background:color-mix(in srgb,var(--green) 7%,var(--surface-3)); }
.issue-solution>.ui-icon { width:15px; height:15px; margin-top:2px; color:var(--green); }
.issue-solution small,.issue-solution strong { display:block; }
.issue-solution small { margin-bottom:3px; color:var(--green); font-family:var(--mono); font-size:8px; text-transform:uppercase; }
.issue-solution strong { color:var(--soft); font-size:10px; font-weight:600; line-height:1.45; }
.issue-action { margin-top:9px; padding:7px 9px; border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); border-radius:8px; background:transparent; color:var(--green); cursor:pointer; font-size:10px; font-weight:700; }
.diagnostic-clear { display:grid; grid-template-columns:36px 1fr; align-items:center; gap:11px; padding:16px; border:1px solid color-mix(in srgb,var(--green) 22%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--green) 7%,transparent); }
.diagnostic-clear>.ui-icon { width:22px; height:22px; color:var(--green); }
.diagnostic-clear b { font-size:13px; }
.diagnostic-clear p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.recovery-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.recovery-actions>button { min-width:0; min-height:48px; justify-content:flex-start; gap:9px; padding:8px 10px; border-radius:11px; text-align:left; }
.recovery-actions .ui-icon { width:17px; height:17px; flex:0 0 17px; color:var(--green); }
.recovery-actions span,.recovery-actions b,.recovery-actions small { display:block; min-width:0; }
.recovery-actions b { font-size:10px; }
.recovery-actions small { margin-top:3px; overflow:hidden; color:var(--faint); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.console-toolbar { display:flex; align-items:center; gap:4px; margin-bottom:8px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.console-toolbar button { padding:6px 9px; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; font-size:9px; }
.console-toolbar button.active { background:var(--surface-3); color:var(--ink); }
.console-toolbar>span { display:flex; align-items:center; gap:6px; margin-left:auto; padding-right:6px; color:var(--muted); font-family:var(--mono); font-size:8px; text-transform:uppercase; }
.console-toolbar>span i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 9%,transparent); }
.diagnostic-console { min-height:0; overflow:auto; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,#050809 82%,var(--green)); color:#dbe7e0; font-family:var(--mono); scrollbar-gutter:stable; }
.console-row { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; padding:9px 11px; border-top:1px solid rgba(255,255,255,.055); }
.console-row:first-child { border-top:0; }
.console-row.is-historical { opacity:.62; }
.console-row.is-historical:hover { opacity:.86; }
.console-meta { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; color:#718078; font-size:9px; }
.console-meta time { white-space:nowrap; }
.console-level { padding:2px 4px; border-radius:4px; background:rgba(255,255,255,.06); text-transform:uppercase; }
.console-history { color:#89958e; font-size:7px; letter-spacing:.05em; text-transform:uppercase; }
.console-row.warn .console-level { color:#f4b350; }
.console-row.error .console-level { color:#ff6a78; }
.console-copy { min-width:0; }
.console-copy b { display:block; overflow:hidden; color:#e9f2ed; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.console-copy p { margin:3px 0 0; overflow:hidden; color:#91a198; font-size:9px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.console-empty { min-height:180px; display:grid; place-content:center; justify-items:center; gap:10px; color:#718078; font-size:10px; }
.console-empty .ui-icon { width:24px; height:24px; }
.console-notes { display:grid; gap:4px; margin-top:8px; }
.console-privacy,.console-policy { display:flex; align-items:flex-start; gap:7px; margin:0; color:var(--faint); font-size:9px; line-height:1.35; }
.console-privacy .ui-icon,.console-policy .ui-icon { width:12px; height:12px; flex:0 0 12px; margin-top:1px; }

@media (max-width: 860px) {
  .diagnostics-modal { width:calc(100% - 12px); height:calc(100dvh - 12px); padding:18px 14px 14px; gap:12px; border-radius:18px; overflow:auto; }
  .diagnostics-header { align-items:flex-start; padding-right:34px; }
  .diagnostics-header h2 { font-size:25px; }
  .diagnostics-header p { max-width:300px; }
  .diagnostics-header-actions { align-items:flex-end; flex-direction:column; }
  .diagnostics-refresh span { display:none; }
  .diagnostics-refresh { width:38px; padding:0; }
  .diagnostic-checks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .diagnostic-check:last-child { grid-column:1/-1; }
  .diagnostics-body { display:grid; grid-template-columns:1fr; overflow:visible; }
  .diagnostics-section { min-height:360px; }
  .console-section { min-height:440px; }
}

@media (max-width: 480px) {
  .diagnostics-header { display:grid; }
  .diagnostics-header-actions { align-items:center; flex-direction:row; }
  .health-pill { height:34px; }
  .diagnostic-checks { grid-template-columns:1fr 1fr; }
  .diagnostic-check { padding:11px; }
  .recovery-actions { grid-template-columns:1fr; }
  .console-row { grid-template-columns:84px minmax(0,1fr); }
  .diagnostics-section-heading .link-button span { display:none; }
}

/* Desktop workspace organizer */
.layout-control { position:relative; display:flex; }
.layout-button[aria-expanded="true"] { border-color:color-mix(in srgb,var(--green) 52%,var(--line)); background:color-mix(in srgb,var(--green) 10%,var(--surface)); color:var(--ink); }
.layout-menu {
  position:absolute;
  z-index:48;
  top:calc(100% + 9px);
  right:0;
  width:360px;
  padding:12px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:color-mix(in srgb,var(--surface-2) 96%,transparent);
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent);
  backdrop-filter:blur(28px);
  transform-origin:top right;
  animation:layoutMenuEnter .2s cubic-bezier(.22,1,.36,1) both;
}
.layout-menu[hidden] { display:none; }
@keyframes layoutMenuEnter { from { opacity:0; transform:translateY(-7px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.layout-menu-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 4px 10px; }
.layout-menu-header div { min-width:0; }
.layout-menu-header small,.layout-menu-header b { display:block; }
.layout-menu-header small { margin-bottom:3px; color:var(--muted); font-size:11px; }
.layout-menu-header b { font-size:15px; letter-spacing:-.02em; }
.layout-menu-header>button { padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:650; }
.layout-menu-header>button:hover { border-color:color-mix(in srgb,var(--green) 42%,var(--line)); color:var(--green); }
.layout-help { margin:0 4px 11px; color:var(--muted); font-size:11px; line-height:1.45; }
.layout-presets { display:flex; flex-wrap:wrap; gap:6px; padding:0 4px 12px; border-bottom:1px solid var(--line); }
.layout-presets button { min-height:31px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:650; transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease; }
.layout-presets button:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--green) 42%,var(--line)); color:var(--ink); }
.layout-presets button.active { border-color:color-mix(in srgb,var(--green) 50%,transparent); background:color-mix(in srgb,var(--green) 13%,transparent); color:var(--green); }
.layout-panel-list { display:grid; gap:7px; padding:12px 3px; }
.layout-panel-item { min-width:0; display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:57px; padding:7px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--surface) 70%,transparent); transition:opacity .18s ease,border-color .18s ease,background .18s ease,transform .18s ease; }
.layout-panel-item:hover { border-color:color-mix(in srgb,var(--green) 30%,var(--line)); }
.layout-panel-item.is-hidden { opacity:.58; background:transparent; }
.layout-panel-item.is-dragging { opacity:.4; transform:scale(.98); }
.layout-panel-item.is-drop-target { border-color:var(--green); background:color-mix(in srgb,var(--green) 9%,var(--surface)); transform:translateY(2px); }
.layout-grip { width:20px; height:32px; display:grid; place-items:center; color:var(--faint); cursor:grab; }
.layout-grip:active { cursor:grabbing; }
.layout-grip .ui-icon { width:17px; height:17px; }
.layout-panel-toggle { min-width:0; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:9px; padding:0; border:0; background:transparent; color:var(--ink); cursor:pointer; text-align:left; }
.layout-panel-toggle>.ui-icon { width:30px; height:30px; padding:7px; border-radius:9px; background:color-mix(in srgb,var(--green) 11%,var(--surface-3)); color:var(--green); }
.layout-panel-item.is-hidden .layout-panel-toggle>.ui-icon { background:var(--surface-3); color:var(--muted); }
.layout-panel-toggle span,.layout-panel-toggle b,.layout-panel-toggle small { display:block; min-width:0; }
.layout-panel-toggle b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.layout-panel-toggle small { margin-top:3px; color:var(--muted); font-size:10px; }
.layout-order-buttons { display:flex; gap:3px; }
.layout-order-buttons button { width:29px; height:29px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.layout-order-buttons button:hover:not(:disabled) { border-color:color-mix(in srgb,var(--green) 38%,var(--line)); background:color-mix(in srgb,var(--green) 8%,transparent); color:var(--green); }
.layout-order-buttons button:disabled { opacity:.25; cursor:not-allowed; }
.layout-order-buttons .ui-icon { width:13px; height:13px; }
.layout-menu-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 5px 3px; border-top:1px solid var(--line); }
.layout-menu-footer span { color:var(--soft); font-size:11px; font-weight:650; }
.layout-menu-footer small { color:var(--faint); font-size:9px; }
.pane-heading-actions { flex:0 0 auto; display:flex; align-items:center; gap:7px; }
.pane-focus { width:31px; height:31px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface-2) 82%,transparent); color:var(--muted); cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease; }
.pane-focus:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--green) 42%,var(--line)); color:var(--green); }
.pane-focus.active { border-color:color-mix(in srgb,var(--green) 45%,transparent); background:color-mix(in srgb,var(--green) 12%,transparent); color:var(--green); }
.pane-focus .ui-icon { width:14px; height:14px; }

@media (min-width: 861px) {
  .cockpit[data-layout-count] .control-pane,
  .cockpit[data-layout-count] .queue-panel,
  .cockpit[data-layout-count] .feed-panel { grid-column:auto; grid-row:auto; }
  .cockpit[data-layout-count] .desktop-hidden { display:none!important; }
  .cockpit[data-layout-count="1"] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .cockpit[data-layout-count="1"]>.cockpit-pane:not(.desktop-hidden) { grid-column:1; grid-row:1; }
  .cockpit[data-layout-count="2"] { grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr); grid-template-rows:minmax(0,1fr); }
  .cockpit[data-layout-count="2"]>[data-layout-slot="primary"] { grid-column:1; grid-row:1; }
  .cockpit[data-layout-count="2"]>[data-layout-slot="secondary-top"] { grid-column:2; grid-row:1; }
  .cockpit[data-layout-count="3"] { grid-template-columns:clamp(390px,27vw,520px) minmax(0,1fr); grid-template-rows:minmax(230px,.42fr) minmax(290px,.58fr); }

  /* Control keeps the familiar sidebar. A conversation view promoted to
     primary gets the large canvas while the other modules stack beside it. */
  .cockpit[data-layout-count="3"][data-primary-panel="control"]>[data-layout-slot="primary"] { grid-column:1; grid-row:1 / 3; }
  .cockpit[data-layout-count="3"][data-primary-panel="control"]>[data-layout-slot="secondary-top"] { grid-column:2; grid-row:1; }
  .cockpit[data-layout-count="3"][data-primary-panel="control"]>[data-layout-slot="secondary-bottom"] { grid-column:2; grid-row:2; }
  .cockpit[data-layout-count="3"]:not([data-primary-panel="control"])>[data-layout-slot="primary"] { grid-column:2; grid-row:1 / 3; }
  .cockpit[data-layout-count="3"]:not([data-primary-panel="control"])>[data-layout-slot="secondary-top"] { grid-column:1; grid-row:1; }
  .cockpit[data-layout-count="3"]:not([data-primary-panel="control"])>[data-layout-slot="secondary-bottom"] { grid-column:1; grid-row:2; }
  .cockpit[data-layout-count="3"][data-control-slot="secondary-top"] { grid-template-rows:minmax(390px,1fr) minmax(230px,1fr); }
  .cockpit[data-layout-count="3"][data-control-slot="secondary-bottom"] { grid-template-rows:minmax(230px,1fr) minmax(390px,1fr); }
  .cockpit[data-layout-count="3"][data-activity-editor-slot="secondary-top"] { grid-template-rows:minmax(390px,.7fr) minmax(170px,.3fr); }
  .cockpit[data-layout-count="3"][data-activity-editor-slot="secondary-bottom"] { grid-template-rows:minmax(170px,.3fr) minmax(390px,.7fr); }

  /* A stacked Control panel cannot reuse the tall sidebar proportions. */
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) {
    position:relative;
    grid-template-rows:auto minmax(118px,1.12fr) auto minmax(78px,.88fr);
    gap:9px;
    padding:16px;
  }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .heading-icon { width:38px; height:38px; border-radius:12px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .pane-heading h1 { font-size:25px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .connection-console {
    min-height:0;
    height:100%;
    grid-template-columns:40px minmax(145px,1.4fr) minmax(105px,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:0 10px;
    padding:12px 14px;
  }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .signal-radar { width:40px; height:40px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .signal-radar>.ui-icon { width:18px; height:18px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .connection-copy h2 { margin:3px 0; font-size:20px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .connection-facts {
    grid-column:3;
    grid-row:1;
    align-self:center;
    margin:0;
    padding:0 0 0 10px;
    border-top:0;
    border-left:1px solid color-mix(in srgb,var(--on-solid) 12%,transparent);
  }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .connection-facts div+div { padding-left:7px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .micro-heading { margin-bottom:6px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-grid { gap:6px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-card {
    min-height:52px;
    grid-template-columns:28px minmax(0,1fr);
    grid-template-rows:1fr auto;
    gap:5px 7px;
    padding:8px;
    border-radius:12px;
  }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-symbol { width:28px; height:28px; border-radius:8px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-symbol .ui-icon { width:15px; height:15px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-copy b { font-size:10px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-copy small { display:none; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-control { gap:4px; padding:3px 5px; font-size:7px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .activity-editor {
    position:relative;
    z-index:2;
    margin:8px 0 0;
    padding:12px;
    border-color:color-mix(in srgb,var(--green) 38%,var(--line));
    background:color-mix(in srgb,var(--surface-2) 96%,transparent);
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);
  }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metrics {
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);
    gap:6px;
  }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metric {
    min-height:0;
    grid-template-columns:20px minmax(0,1fr);
    grid-template-rows:1fr auto;
    gap:3px 4px;
    padding:5px;
    border-radius:12px;
  }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metric-icon { width:20px; height:20px; border-radius:6px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metric-icon .ui-icon { width:12px; height:12px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metric small { grid-column:1/-1; grid-row:2; overflow:hidden; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metric strong { min-width:0; grid-column:2; grid-row:1; align-self:center; justify-self:end; font-size:21px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metric p { display:none; }

  /* Narrow stacked conversation panels use one readable stream. */
  .cockpit[data-layout-count="3"] .feed-panel:not(.layout-primary) .feed-list { grid-template-columns:minmax(0,1fr); }
  .cockpit[data-layout-count="3"] .cockpit-pane:not(.layout-primary) .pane-heading h1,
  .cockpit[data-layout-count="3"] .cockpit-pane:not(.layout-primary) .pane-heading h2 { font-size:clamp(22px,1.8vw,28px); }
  .cockpit[data-layout-count="3"] .cockpit-pane:not(.layout-primary) .heading-icon { flex-basis:auto; }

  .cockpit[data-layout-count="1"] .feed-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cockpit[data-layout-count="1"] .control-pane .metrics { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }

  .feed-content,.feed-attachment,.feed-media-copy { min-width:0; max-width:100%; }
  .feed-media-copy small { overflow-wrap:anywhere; }
}

@media (min-width: 861px) and (max-width: 1250px) {
  .cockpit[data-layout-count="3"] { grid-template-columns:minmax(350px,41vw) minmax(0,1fr); }
  .cockpit[data-layout-count="2"] .feed-list,
  .cockpit[data-layout-count="3"] .feed-list { grid-template-columns:minmax(0,1fr); }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(50px,1fr)); }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .metric strong { font-size:23px; }
}

@media (min-width: 861px) and (max-height: 760px) {
  .cockpit[data-layout-count="3"][data-control-slot="secondary-top"] { grid-template-rows:minmax(345px,1fr) minmax(190px,1fr); }
  .cockpit[data-layout-count="3"][data-control-slot="secondary-bottom"] { grid-template-rows:minmax(190px,1fr) minmax(345px,1fr); }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) { grid-template-rows:auto minmax(92px,1fr) auto minmax(70px,.82fr); gap:6px; padding:12px 14px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .pane-heading h1 { font-size:22px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .connection-console { padding:9px 11px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-card { min-height:54px; padding:6px; }
  .cockpit[data-layout-count="3"] .control-pane:not(.layout-primary) .mode-copy small { display:none; }
  .cockpit[data-layout-count="3"][data-activity-editor-slot="secondary-top"] { grid-template-rows:minmax(430px,.72fr) minmax(174px,.28fr); }
  .cockpit[data-layout-count="3"][data-activity-editor-slot="secondary-bottom"] { grid-template-rows:minmax(174px,.28fr) minmax(430px,.72fr); }
}

/* The workspace can make Control narrow independently from the viewport.
   Its contents therefore respond to the panel itself, not only to the screen. */
@container control-panel (max-width: 560px) {
  #controlPane .connection-console {
    min-height:118px;
    height:auto;
    grid-template-columns:42px minmax(0,1fr);
    grid-template-rows:minmax(50px,1fr) auto;
    gap:8px 12px;
    padding:12px 14px;
  }
  #controlPane .signal-radar {
    grid-column:1;
    grid-row:1;
    width:42px;
    height:42px;
  }
  #controlPane .connection-copy {
    min-width:0;
    grid-column:2;
    grid-row:1;
  }
  #controlPane .connection-console:has(.qr-reopen:not([hidden])) .connection-copy { padding-right:92px; }
  #controlPane .connection-copy h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #controlPane .qr-reopen {
    top:12px;
    right:12px;
    max-width:94px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #controlPane .connection-facts {
    width:100%;
    min-width:0;
    grid-column:1 / -1;
    grid-row:2;
    grid-template-columns:minmax(0,1.25fr) minmax(54px,.7fr) minmax(72px,.9fr);
    align-self:end;
    margin:0;
    padding:8px 0 0;
    border-top:1px solid color-mix(in srgb,var(--on-solid) 12%,transparent);
    border-left:0;
  }
  #controlPane .connection-facts div { min-width:0; }
  #controlPane .connection-facts div+div { padding-left:8px; }
  #controlPane .connection-facts dt { font-size:7px; }
  #controlPane .connection-facts dd { max-width:100%; font-size:9px; }
  #controlPane .mode-grid,#controlPane .metrics { min-width:0; }
  #controlPane .mode-card { min-width:0; }
  #controlPane .mode-copy { min-width:0; }
  #controlPane .mode-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (max-width: 860px) {
  .layout-control,.pane-focus { display:none!important; }
}

@media (max-width: 360px) {
  #controlPane .mode-card {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    justify-items:center;
    gap:4px;
    padding:7px 4px;
    text-align:center;
  }
  #controlPane .mode-symbol { grid-column:1; grid-row:1; }
  #controlPane .mode-copy { width:100%; grid-column:1; grid-row:2; }
  #controlPane .mode-copy b { font-size:9px; }
  #controlPane .mode-copy small { display:none; }
  #controlPane .mode-control { max-width:100%; grid-column:1; grid-row:3; justify-self:center; }
}

@media (prefers-reduced-motion: reduce) {
  .layout-menu { animation:none!important; }
  .layout-panel-item,.layout-presets button,.pane-focus { transition:none!important; }
  .event-audio-waveform i { animation:none!important; }
}