@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
  --cyan: #00eeff;
  --cyan-dim: rgba(0, 238, 255, 0.15);
  --cyan-glow: rgba(0, 238, 255, 0.5);
  --cyan-bright: #80f6ff;

  --dark-bg: #030c17;
  --panel-bg: #07111d;
  --panel-bg2: #0b1a27;
  --panel-border: #132030;
  --panel-border2: #1a3048;

  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.4);
  --alert-yellow: #ffd600;

  --state-working: #00ff9d;
  --state-idle: #ff5555;

  --skin: #ffcda2;
  --wood: #6b4c3a;
  --wood-dark: #3d291d;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  background: var(--dark-bg);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  overflow: hidden; user-select: none;
  height: 100vh;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: var(--panel-border2); border-radius: 2px; }

.blink { animation: blinker 1.5s linear infinite; }
.blink-slow { animation: blinker 2.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0.1; } }

/* ========================================
   OUTER SHELL
======================================== */
.mc-shell {
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--dark-bg);
  /* Subtle dot grid like image */
  background-image:
    radial-gradient(circle, rgba(0,238,255,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* ========================================
   TOP BAR — matches reference image exactly
======================================== */
.mc-topbar {
  height: 52px;
  background: rgba(3, 12, 23, 0.95);
  border-bottom: 1px solid var(--panel-border);
  display: flex; align-items: center;
  padding: 0 18px; gap: 0;
  flex-shrink: 0;
}

.tb-brand {
  display: flex; align-items: center; gap: 8px;
  min-width: 340px;
}
.tb-gear {
  color: var(--cyan); font-size: 1.3rem;
  text-shadow: 0 0 12px var(--cyan-glow);
  animation: blinker 3s linear infinite;
}
.tb-title {
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 400;
  color: var(--text-muted); letter-spacing: 0.01em;
}
.tb-title strong { color: var(--cyan); font-weight: 800; }
.tb-sep { color: var(--panel-border2); margin: 0 6px; font-size: 1.1rem; }
.tb-view-label {
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 400;
  color: rgba(255,255,255,0.6);
}

.tb-tabs {
  display: flex; align-items: center; gap: 0; height: 100%;
  flex-grow: 1; justify-content: center; border-left: 1px solid var(--panel-border); border-right: 1px solid var(--panel-border);
}
.mc-tab {
  height: 100%; padding: 0 24px;
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer; transition: all 0.15s; text-transform: uppercase;
}
.mc-tab:hover { color: rgba(255,255,255,0.8); }
.mc-tab.active {
  color: var(--cyan); border-bottom-color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
}

.tb-right {
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  color: var(--text-muted); min-width: 340px; justify-content: flex-end;
}
.tb-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00e676; box-shadow: 0 0 8px #00e676;
  animation: blinker 2s ease-in-out infinite;
}
.tb-sys { font-size: 0.72rem; color: var(--text-muted); font-family: 'Inter', sans-serif; }
.tb-status-ok { color: #00e676; }
.tb-divider { width: 1px; height: 20px; background: var(--panel-border2); }
.tb-clock { color: var(--text-main); font-size: 0.82rem; }
.tb-utc { color: var(--text-muted); font-size: 0.7rem; }
.tb-icon {
  position: relative; font-size: 1rem; color: var(--cyan); cursor: pointer;
}
.tb-icon[data-badge]::after {
  content: attr(data-badge); position: absolute; top: -5px; right: -7px;
  background: var(--cyan); color: #000; font-size: 0.5rem; font-weight: 800;
  width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: 'Inter', sans-serif;
}
.tb-icon:nth-child(2)[data-badge]::after { background: #b366ff; color: #fff; }

/* ========================================
   BODY
======================================== */
.mc-body {
  display: flex; flex-grow: 1; overflow: hidden;
}

/* Far left icon nav */
.mc-icon-nav {
  width: 46px; background: rgba(0,0,0,0.4);
  border-right: 1px solid var(--panel-border);
  display: flex; flex-direction: column;
  align-items: center; padding: 16px 0; gap: 20px;
  flex-shrink: 0;
}
.in-item {
  color: var(--text-muted); font-size: 1rem; cursor: pointer;
  transition: 0.15s; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.in-item:hover { color: #fff; }
.in-item.active {
  color: var(--cyan); background: var(--cyan-dim);
  text-shadow: 0 0 10px var(--cyan-glow);
}
.nav-bottom { margin-top: auto !important; }

/* Views */
.mc-view {
  display: flex; flex-grow: 1; overflow: hidden;
}

/* ========================================================================
   TACTICAL VIEW
   Premium polish — scoped entirely to #view-tactical / .tac-* / .tl-*
   Class names preserved so main.js render functions keep working unchanged.
======================================================================== */

#view-tactical {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(0,238,255,0.05) 0%, transparent 45%),
    linear-gradient(180deg, #04121e 0%, #030b15 55%, #02080f 100%);
  padding: 12px 14px; gap: 10px;
}

/* ======= LEFT: MODULE UPLINK sidebar ======= */
.tac-sidebar {
  width: 244px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(15,28,48,0.9) 0%, rgba(8,16,30,0.85) 100%);
  border: 1px solid rgba(0,238,255,0.18);
  border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,238,255,0.04);
}
.tac-sb-header {
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700;
  color: #7EE8FF; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(0,238,255,0.12);
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
.tac-sb-title {
  font-size: 0.7rem; font-weight: 700;
  color: #7EE8FF; letter-spacing: 0.14em;
}
.tac-sb-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem; font-weight: 500;
  color: rgba(234, 246, 255, 0.42);
  letter-spacing: 0.04em;
  text-transform: none;
}
.tac-sb-list {
  flex-grow: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 6px;
}
.tac-sb-list::-webkit-scrollbar { width: 3px; }
.tac-sb-list::-webkit-scrollbar-thumb { background: rgba(0,238,255,0.25); border-radius: 2px; }

/* Module cards */
.tac-module-item {
  position: relative;
  padding: 11px 12px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: flex; align-items: center; gap: 10px;
  background: rgba(18, 32, 54, 0.35);
}
.tac-module-item::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 2px; border-radius: 0 2px 2px 0;
  background: transparent; transition: background 0.2s, box-shadow 0.2s;
}
.tac-module-item:hover {
  background: rgba(0,238,255,0.05);
  border-color: rgba(0,238,255,0.12);
}
.tac-module-item.active {
  background: linear-gradient(135deg, rgba(0,238,255,0.16) 0%, rgba(0,238,255,0.03) 100%);
  border-color: rgba(0,238,255,0.42);
  box-shadow: 0 0 14px rgba(0,238,255,0.15), inset 0 0 18px rgba(0,238,255,0.04);
}
.tac-module-item.active::before {
  background: #4FD8FF;
  box-shadow: 0 0 6px #4FD8FF;
}

.tmi-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(0,238,255,0.2);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.98rem;
  background: rgba(0,0,0,0.4);
}
.tac-module-item.active .tmi-icon {
  border-color: rgba(0,238,255,0.6);
  background: rgba(0,238,255,0.12);
  box-shadow: 0 0 10px rgba(0,238,255,0.25);
}

.tmi-body { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmi-name {
  font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 700;
  color: #EAF6FF; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tac-module-item.active .tmi-name { color: #fff; }

.tmi-status {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600;
  color: rgba(255,255,255,0.35); letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 4px;
}
.tmi-status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 4px currentColor;
  flex-shrink: 0;
}
/* Semantic status colors — safe to add new variants for future modules */
.tmi-status--green  { color: #4FE08A; }
.tmi-status--cyan   { color: #4FD8FF; }
.tmi-status--amber  { color: #FFD170; }
.tmi-status--muted  { color: #7A95B4; }
.tmi-status--red    { color: #FF6B6B; }

.tmi-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.tmi-num  { font-size: 0.62rem; color: rgba(255,255,255,0.32); letter-spacing: 0.06em; }
.tac-module-item.active .tmi-num { color: #7EE8FF; }
.tmi-ping { font-size: 0.58rem; color: rgba(255,255,255,0.45); }

/* ======= MAIN CONTENT AREA (center + right + logs) ======= */
.tac-content-area {
  flex-grow: 1; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(15,28,48,0.55) 0%, rgba(10,20,36,0.55) 100%);
  border: 1px solid rgba(0,238,255,0.18);
  border-radius: 12px;
}

.tac-top-section {
  flex-grow: 1; display: flex; min-height: 0; overflow: hidden;
}

/* ====== Center: JARVIS CORE readout ====== */
.tac-main-col {
  flex: 1.3; padding: 26px 30px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid rgba(0,238,255,0.1);
}

.tac-badge-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  flex-wrap: wrap;
}
.tac-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; font-weight: 700;
  color: #7EE8FF;
  border: 1px solid rgba(0,238,255,0.45);
  background: rgba(0,238,255,0.1);
  padding: 3px 9px; border-radius: 4px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 10px rgba(0,238,255,0.12);
}
.tac-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem;
  color: rgba(255,255,255,0.42); letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 8px;
}
.tac-meta + .tac-meta::before {
  content: '·'; color: rgba(255,255,255,0.2); margin-right: 4px;
}

.tac-big-title {
  font-family: 'Chakra Petch', sans-serif; font-size: 2.8rem; font-weight: 700;
  margin: 0 0 2px 0; color: #fff; letter-spacing: 0.05em; line-height: 1;
  text-shadow: 0 0 22px rgba(0,238,255,0.28);
}
.tac-sub-title {
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  color: #7EE8FF; margin-bottom: 22px; opacity: 0.88;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,238,255,0.08);
}

/* Stat cards 2x2 */
.tac-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px;
}
.tac-stat-card {
  background: rgba(10, 20, 36, 0.55);
  border: 1px solid rgba(0,238,255,0.14);
  border-radius: 10px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tac-stat-card:hover {
  border-color: rgba(0,238,255,0.38);
  box-shadow: 0 0 14px rgba(0,238,255,0.1);
}
.tac-stat-card::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, #4FD8FF, transparent);
  opacity: 0.45;
}

.tsc-icon {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid rgba(0,238,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: radial-gradient(circle at 35% 30%, rgba(0,238,255,0.14), rgba(0,0,0,0.4) 70%);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0,238,255,0.08);
}
.tsc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tsc-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 600;
  color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.1em;
}
.tsc-value {
  font-family: 'Chakra Petch', sans-serif; font-size: 1.45rem; font-weight: 700;
  color: #EAF6FF; line-height: 1;
}
.tsc-value.highlight {
  color: #7EE8FF;
  text-shadow: 0 0 14px rgba(0,238,255,0.5);
}
.tsc-bar {
  width: 100%; max-width: 120px;
  height: 4px; border-radius: 2px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(0,238,255,0.12);
  margin-top: 7px; overflow: hidden;
}
.tsc-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #4FD8FF, #7EE8FF);
  box-shadow: 0 0 8px rgba(0,238,255,0.5);
}

/* Active Directive block */
.tac-directive {
  background: linear-gradient(180deg, rgba(15,28,48,0.5), rgba(10,20,36,0.5));
  border: 1px solid rgba(0,238,255,0.2);
  border-left: 3px solid #4FD8FF;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: inset 0 0 30px rgba(0,238,255,0.04);
}
.tac-dir-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.tac-dir-label {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
  color: #7EE8FF; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tac-dir-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 800; padding: 3px 9px;
  border-radius: 4px; letter-spacing: 0.1em;
  color: #FFD170;
  background: rgba(255, 209, 112, 0.12);
  border: 1px solid rgba(255, 209, 112, 0.45);
  box-shadow: 0 0 10px rgba(255, 209, 112, 0.18);
}
.tac-dir-name {
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700;
  color: #EAF6FF; margin-bottom: 8px; letter-spacing: 0.02em;
}
.tac-dir-desc {
  font-family: 'Inter', sans-serif; font-size: 0.82rem;
  color: rgba(255,255,255,0.55); line-height: 1.55;
}

/* ====== Right: RADAR column ====== */
.tac-radar-col {
  flex: 0 0 320px; padding: 22px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, rgba(10,20,36,0.25), rgba(10,20,36,0.55));
  overflow-y: auto;
}
.tac-radar-col::-webkit-scrollbar { width: 3px; }
.tac-radar-col::-webkit-scrollbar-thumb { background: rgba(0,238,255,0.18); border-radius: 2px; }
.tac-radar-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  color: rgba(255,255,255,0.45); letter-spacing: 0.14em; text-transform: uppercase;
}
.tac-radar-titlebox {
  display: flex; flex-direction: column; gap: 2px;
}
.tac-radar-titlebox .trh-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem; font-weight: 500;
  color: rgba(234, 246, 255, 0.42);
  letter-spacing: 0.04em; text-transform: none;
}
.tac-radar-header .trh-title {
  color: #7EE8FF; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.tac-radar-header .trh-title::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #4FD8FF; box-shadow: 0 0 6px #4FD8FF;
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.tac-radar-header .trh-count {
  font-weight: 700; color: #4FD8FF;
}

.tac-radar-box {
  width: 270px; height: 270px; position: relative;
  border: 1px solid rgba(0,238,255,0.28);
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(0,238,255,0.05) 0%, rgba(0,238,255,0.01) 70%, transparent 100%);
  box-shadow: 0 0 24px rgba(0,238,255,0.1), inset 0 0 30px rgba(0,238,255,0.04);
  overflow: hidden;
}
.radar-corner {
  position: absolute; width: 18px; height: 18px;
  border-color: #4FD8FF; border-style: solid; opacity: 0.9;
}
.radar-corner.tl { top: 6px;    left: 6px;   border-width: 2px 0 0 2px; border-radius: 2px 0 0 0; }
.radar-corner.tr { top: 6px;    right: 6px;  border-width: 2px 2px 0 0; border-radius: 0 2px 0 0; }
.radar-corner.bl { bottom: 6px; left: 6px;   border-width: 0 0 2px 2px; border-radius: 0 0 0 2px; }
.radar-corner.br { bottom: 6px; right: 6px;  border-width: 0 2px 2px 0; border-radius: 0 0 2px 0; }

.radar-ring {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(0,238,255,0.22);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.radar-ring.r1 { width: 84px;  height: 84px;  border-style: solid; border-color: rgba(0,238,255,0.18); }
.radar-ring.r2 { width: 164px; height: 164px; }
.radar-ring.r3 { width: 236px; height: 236px; border-color: rgba(0,238,255,0.14); }

.radar-cross {
  position: absolute; background: rgba(0,238,255,0.16);
}
.radar-cross.v { width: 1px; height: 100%; top: 0; left: 50%; }
.radar-cross.h { height: 1px; width: 100%; top: 50%; left: 0; }

.radar-scan {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 1.5px;
  background: linear-gradient(90deg, rgba(0,238,255,0.85), transparent);
  transform-origin: left center;
  animation: radar-sweep 4.5s linear infinite;
  box-shadow: 0 0 8px rgba(0,238,255,0.5);
}
@keyframes radar-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.radar-blip {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #7EE8FF; transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #4FD8FF, 0 0 2px #fff;
}

/* Reusable HUD readout chip (replaces the two decorative data-blocks) */
.radar-readout {
  position: absolute;
  display: flex; flex-direction: column; gap: 3px; padding: 7px 9px;
  background: rgba(5, 14, 26, 0.82);
  border: 1px solid rgba(0,238,255,0.25);
  border-radius: 6px;
  backdrop-filter: blur(2px);
  min-width: 78px;
}
.rro-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-family: 'JetBrains Mono', monospace; }
.rro-label { font-size: 0.52rem; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; }
.rro-value { font-size: 0.62rem; color: #7EE8FF; font-weight: 700; letter-spacing: 0.05em; }

/* ====== LOGS BAR (bottom of content area) ====== */
.tac-logs-bar {
  height: 180px; flex-shrink: 0;
  border-top: 1px solid rgba(0,238,255,0.14);
  background: linear-gradient(180deg, rgba(8,16,30,0.7), rgba(4,10,20,0.7));
  display: flex; flex-direction: column;
}
.tac-logs-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid rgba(0,238,255,0.08);
  flex-shrink: 0;
}
.tac-logs-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700;
  color: rgba(255,255,255,0.55); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tac-logs-icon { color: #4FD8FF; font-size: 0.85rem; }
.tac-logs-btn {
  background: rgba(0,238,255,0.06);
  border: 1px solid rgba(0,238,255,0.3);
  color: #7EE8FF; font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 700; padding: 5px 12px;
  border-radius: 6px; cursor: pointer;
  letter-spacing: 0.1em;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tac-logs-btn:hover {
  border-color: #4FD8FF; color: #fff;
  box-shadow: 0 0 10px rgba(0,238,255,0.25);
}
.tac-logs-body {
  flex-grow: 1; overflow-y: auto; padding: 6px 20px;
  display: flex; flex-direction: column;
}
.tac-logs-body::-webkit-scrollbar { width: 3px; }
.tac-logs-body::-webkit-scrollbar-thumb { background: rgba(0,238,255,0.18); border-radius: 2px; }

.tac-log-row {
  display: flex; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  position: relative;
}
.tac-log-row:nth-child(even) { background: rgba(255,255,255,0.015); }
.tac-log-row.is-new {
  animation: tac-log-enter 0.45s ease-out;
}
.tac-log-row.is-new::before {
  content: ''; position: absolute; left: -12px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 1px;
  background: #4FD8FF; box-shadow: 0 0 6px #4FD8FF;
}
@keyframes tac-log-enter {
  0%   { opacity: 0; transform: translateX(-6px); background: rgba(0,238,255,0.08); }
  60%  { background: rgba(0,238,255,0.08); }
  100% { opacity: 1; transform: translateX(0); background: transparent; }
}

.tl-dot { color: #4FD8FF; margin-right: 10px; font-size: 0.5rem; flex-shrink: 0; }
.tl-time { color: rgba(255,255,255,0.35); min-width: 72px; flex-shrink: 0; }
.tl-tag {
  min-width: 78px; font-weight: 700;
  color: #7EE8FF; flex-shrink: 0;
  letter-spacing: 0.04em;
}
.tl-tag--core { color: #7EE8FF; }
.tl-tag--net  { color: #FFD170; }
.tl-tag--sys  { color: #4FE08A; }
.tl-tag--mem  { color: #C17AFF; }
.tl-msg { color: rgba(255,255,255,0.78); }

/* ========================================================================
   TACTICAL — premium polish pass
   Mini-metrics strip, directive meta/phase/actions, radar contact card,
   log filter tabs + auto-scroll toggle, active module breathe.
   All selectors scoped to .tac-* / .tdp-* / .trc-* / .tlf-* / .tlc-*.
======================================================================== */

/* ---------- mini-metrics strip (secondary KPIs above stats) ---------- */
.tac-metrics-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.tac-metric-card {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 20, 36, 0.72), rgba(6, 14, 24, 0.72));
  border: 1px solid rgba(0,238,255,0.14);
  border-radius: 9px;
  padding: 9px 12px 10px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tac-metric-card:hover { border-color: rgba(0,238,255,0.3); box-shadow: 0 0 10px rgba(0,238,255,0.1); }
.tmc-top { display: flex; align-items: center; justify-content: space-between; }
.tmc-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; font-weight: 700;
  color: rgba(255,255,255,0.42); letter-spacing: 0.12em; text-transform: uppercase;
}
.tmc-trend {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  color: rgba(255,255,255,0.35);
}
.tmc-value {
  font-family: 'Chakra Petch', sans-serif; font-size: 1.15rem; font-weight: 700;
  color: #EAF6FF; line-height: 1; letter-spacing: 0.02em;
}
.tmc-spark {
  height: 3px; border-radius: 2px; margin-top: 2px;
  background: rgba(0,0,0,0.45); overflow: hidden; position: relative;
}
.tmc-spark > span {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: currentColor; opacity: 0.85; border-radius: 2px;
  animation: tac-spark-drift 5.5s ease-in-out infinite;
}
/* per-tone accent */
.tac-metric-card.tmc-tone--cyan  { color: #4FD8FF; }
.tac-metric-card.tmc-tone--green { color: #4FE08A; }
.tac-metric-card.tmc-tone--amber { color: #FFD170; }
.tac-metric-card.tmc-tone--muted { color: #7A95B4; }
.tac-metric-card.tmc-tone--cyan  .tmc-trend,
.tac-metric-card.tmc-tone--green .tmc-trend,
.tac-metric-card.tmc-tone--amber .tmc-trend { color: currentColor; }
@keyframes tac-spark-drift {
  0%   { left: -40%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

/* ---------- directive: meta row + phase track + actions ---------- */
.tac-dir-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 12px 0 10px;
  padding: 10px 12px;
  background: rgba(3, 10, 18, 0.45);
  border: 1px solid rgba(0,238,255,0.08);
  border-radius: 8px;
}
.tac-dir-meta-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tdm-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; font-weight: 700;
  color: rgba(255,255,255,0.36); letter-spacing: 0.12em; text-transform: uppercase;
}
.tdm-value {
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700;
  color: #EAF6FF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tdm-value--high     { color: #FF8A7A; }
.tdm-value--medium   { color: #FFD170; }
.tdm-value--low      { color: #7EE8FF; }
.tdm-value--accent   { color: #7EE8FF; text-shadow: 0 0 8px rgba(0,238,255,0.35); }

.tac-dir-phase {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.tdp-step {
  flex: 1;
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.1em; text-align: center;
  padding: 5px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.02);
  transition: all 0.2s;
}
.tdp-step.done {
  color: #4FE08A; border-color: rgba(79, 224, 138, 0.35);
  background: rgba(79, 224, 138, 0.08);
}
.tdp-step.active {
  color: #7EE8FF; border-color: rgba(0,238,255,0.55);
  background: rgba(0,238,255,0.12);
  box-shadow: 0 0 12px rgba(0,238,255,0.25);
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.tdp-sep {
  width: 12px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  flex: 0 0 12px;
}

.tac-dir-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tac-dir-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.1em;
  color: #7EE8FF;
  background: rgba(0,238,255,0.06);
  border: 1px solid rgba(0,238,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.tac-dir-btn:hover {
  background: rgba(0,238,255,0.14);
  border-color: #4FD8FF;
  color: #fff;
  box-shadow: 0 0 12px rgba(0,238,255,0.25);
}
.tac-dir-btn--primary {
  background: linear-gradient(90deg, rgba(79,216,255,0.85), rgba(126,232,255,0.85));
  color: #04121e; border-color: transparent;
  box-shadow: 0 0 14px rgba(0,238,255,0.35);
}
.tac-dir-btn--primary:hover {
  background: linear-gradient(90deg, #4FD8FF, #7EE8FF);
  color: #020812;
  box-shadow: 0 0 18px rgba(0,238,255,0.55);
}

/* ---------- radar tracked-contact card ---------- */
.tac-radar-contact {
  width: 270px;
  background: linear-gradient(180deg, rgba(10, 20, 36, 0.7), rgba(6, 14, 24, 0.7));
  border: 1px solid rgba(0,238,255,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: inset 0 0 20px rgba(0,238,255,0.03);
}
.trc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px; border-bottom: 1px solid rgba(0,238,255,0.08);
}
.trc-title {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  color: rgba(255,255,255,0.5); letter-spacing: 0.14em; text-transform: uppercase;
}
.trc-id {
  font-family: 'Chakra Petch', sans-serif; font-size: 0.95rem; font-weight: 700;
  color: #7EE8FF; letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(0,238,255,0.35);
}
.trc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
}
.trc-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
}
.trc-label { font-size: 0.56rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; text-transform: uppercase; }
.trc-value { font-size: 0.7rem; color: #EAF6FF; font-weight: 700; }

/* ---------- logs header: filter tabs + auto-scroll toggle ---------- */
.tac-logs-filters { display: flex; gap: 4px; flex: 1; justify-content: center; }
.tlf-tab {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.tlf-tab:hover { color: rgba(255,255,255,0.7); border-color: rgba(0,238,255,0.25); }
.tlf-tab.active {
  color: #7EE8FF;
  background: rgba(0,238,255,0.1);
  border-color: rgba(0,238,255,0.5);
  box-shadow: 0 0 8px rgba(0,238,255,0.15);
}

.tac-logs-controls { display: flex; align-items: center; gap: 8px; }
.tlc-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.1em;
  color: #4FE08A;
  background: rgba(79, 224, 138, 0.08);
  border: 1px solid rgba(79, 224, 138, 0.35);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.tlc-toggle .tlc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4FE08A; box-shadow: 0 0 6px #4FE08A;
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.tlc-toggle.paused {
  color: #FFD170;
  background: rgba(255, 209, 112, 0.08);
  border-color: rgba(255, 209, 112, 0.35);
}
.tlc-toggle.paused .tlc-dot { background: #FFD170; box-shadow: 0 0 6px #FFD170; animation: none; }

.tac-log-empty {
  padding: 12px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  color: rgba(255,255,255,0.3); letter-spacing: 0.1em;
}

/* ---------- active module breathe (very subtle) ---------- */
.tac-module-item.active {
  animation: tac-active-breathe 3.6s ease-in-out infinite;
}
@keyframes tac-active-breathe {
  0%, 100% { box-shadow: 0 0 14px rgba(0,238,255,0.15), inset 0 0 18px rgba(0,238,255,0.04); }
  50%      { box-shadow: 0 0 22px rgba(0,238,255,0.3),  inset 0 0 24px rgba(0,238,255,0.08); }
}

/* Radar tinted by module context (prepared hook; currently uses default) */
#view-tactical .tac-radar-col { position: relative; }

/* ========================================================================
   TACTICAL — SIGNATURE WIDGETS (per-module identity)
   Shell common to all. Each variant styles its inner children.
======================================================================== */

.tac-signature { margin-bottom: 14px; }
.tac-signature-card {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,238,255,0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(12, 24, 42, 0.75), rgba(6, 14, 24, 0.75));
  border: 1px solid rgba(0,238,255,0.22);
  border-radius: 12px;
  padding: 12px 14px 14px;
  box-shadow: 0 0 16px rgba(0,238,255,0.08), inset 0 0 30px rgba(0,238,255,0.03);
  overflow: hidden;
}
.tac-signature-card::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, #4FD8FF, transparent);
  opacity: 0.55;
}
.sig-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sig-title {
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700;
  color: #7EE8FF; letter-spacing: 0.16em; text-transform: uppercase;
}
.sig-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.1em; padding: 3px 8px; border-radius: 4px;
  border: 1px solid; background: rgba(0,0,0,0.3);
}
.sig-chip--cyan   { color: #7EE8FF; border-color: rgba(0,238,255,0.4);   background: rgba(0,238,255,0.1); }
.sig-chip--green  { color: #4FE08A; border-color: rgba(79,224,138,0.4);  background: rgba(79,224,138,0.1); }
.sig-chip--amber  { color: #FFD170; border-color: rgba(255,209,112,0.4); background: rgba(255,209,112,0.1); }
.sig-chip--violet { color: #C17AFF; border-color: rgba(193,122,255,0.4); background: rgba(193,122,255,0.1); }

.sig-tone--cyan  { background: linear-gradient(90deg, #4FD8FF, #7EE8FF); box-shadow: 0 0 6px rgba(0,238,255,0.4); }
.sig-tone--green { background: linear-gradient(90deg, #4FE08A, #8EF3B0); box-shadow: 0 0 6px rgba(79,224,138,0.4); }
.sig-tone--amber { background: linear-gradient(90deg, #FFD170, #FFE4A8); box-shadow: 0 0 6px rgba(255,209,112,0.4); }

/* ---------- A. JARVIS CORE: integrity ring + vitals ---------- */
.sig-core-body { display: flex; align-items: center; gap: 18px; }
.sig-ring {
  position: relative;
  width: 90px; height: 90px; flex-shrink: 0;
  border-radius: 50%;
  background:
    conic-gradient(#4FD8FF calc(var(--pct, 100) * 1%), rgba(255,255,255,0.06) 0);
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 10px rgba(0,238,255,0.3));
  animation: sig-ring-breathe 4.4s ease-in-out infinite;
}
.sig-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(0,238,255,0.3);
  animation: sig-ring-spin 18s linear infinite;
}
.sig-ring::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(0,238,255,0.1), rgba(2,6,12,0.9) 80%);
}
.sig-ring-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sig-ring-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.5rem; font-weight: 700;
  color: rgba(255,255,255,0.45); letter-spacing: 0.14em;
}
.sig-ring-value {
  font-family: 'Chakra Petch', sans-serif; font-size: 1.45rem; font-weight: 700;
  color: #7EE8FF; line-height: 1;
  text-shadow: 0 0 10px rgba(0,238,255,0.45);
}
.sig-ring-value span { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-left: 1px; }
@keyframes sig-ring-breathe {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0,238,255,0.3)); }
  50%      { filter: drop-shadow(0 0 18px rgba(0,238,255,0.55)); }
}
@keyframes sig-ring-spin {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.sig-core-rows { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sig-core-row-top { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; }
.sig-core-row-label { font-size: 0.56rem; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; text-transform: uppercase; }
.sig-core-row-value { font-size: 0.7rem; color: #EAF6FF; font-weight: 700; letter-spacing: 0.02em; }
.sig-core-row-bar  { height: 3px; background: rgba(0,0,0,0.4); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.sig-core-row-fill { display: block; height: 100%; border-radius: 2px; transition: width 0.4s ease; }

/* ---------- B. COMMUNICATIONS: channel list ---------- */
.sig-channels { display: flex; flex-direction: column; gap: 4px; }
.sig-channel {
  display: grid;
  grid-template-columns: 56px 80px 1fr 84px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(0,238,255,0.08);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  transition: background 0.2s, border-color 0.2s;
}
.sig-channel.is-live { border-color: rgba(0,238,255,0.22); }
.sig-channel.is-standby { opacity: 0.5; }
.sig-ch-name { font-size: 0.68rem; font-weight: 700; color: #EAF6FF; letter-spacing: 0.05em; }
.sig-ch-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sig-ch-bar  { width: 4px; background: rgba(255,255,255,0.12); border-radius: 1px; }
.sig-ch-bar:nth-child(1) { height: 4px; }
.sig-ch-bar:nth-child(2) { height: 7px; }
.sig-ch-bar:nth-child(3) { height: 10px; }
.sig-ch-bar:nth-child(4) { height: 12px; }
.sig-ch-bar:nth-child(5) { height: 14px; }
.sig-ch-bar.on {
  background: #4FD8FF;
  box-shadow: 0 0 4px rgba(0,238,255,0.5);
  animation: sig-ch-pulse 2.2s ease-in-out infinite;
}
.sig-ch-bar.on:nth-child(2) { animation-delay: 0.2s; }
.sig-ch-bar.on:nth-child(3) { animation-delay: 0.4s; }
.sig-ch-bar.on:nth-child(4) { animation-delay: 0.6s; }
.sig-ch-bar.on:nth-child(5) { animation-delay: 0.8s; }
@keyframes sig-ch-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; box-shadow: 0 0 7px rgba(0,238,255,0.75); }
}
.sig-ch-freq { font-size: 0.62rem; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
.sig-ch-enc {
  font-size: 0.54rem; font-weight: 700; letter-spacing: 0.08em;
  color: #4FE08A; padding: 2px 6px;
  background: rgba(79,224,138,0.08); border: 1px solid rgba(79,224,138,0.28);
  border-radius: 3px; text-align: center;
}
.sig-channel.is-standby .sig-ch-enc { color: rgba(255,255,255,0.3); background: transparent; border-color: rgba(255,255,255,0.08); }

/* ---------- C. OBSERVATORY: scan horizon ---------- */
.sig-scan {
  position: relative;
  height: 70px;
  border: 1px solid rgba(0,238,255,0.14);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(5,14,26,0.4), rgba(2,6,12,0.4));
  overflow: hidden;
}
.sig-scan-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent calc(10% - 1px),
      rgba(0,238,255,0.1) calc(10% - 1px), rgba(0,238,255,0.1) 10%),
    linear-gradient(180deg, transparent 48%, rgba(0,238,255,0.15) 50%, transparent 52%);
}
.sig-scan-sweep {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, #7EE8FF, transparent);
  box-shadow: 0 0 8px rgba(0,238,255,0.6);
  animation: sig-scan-sweep 5s linear infinite;
}
@keyframes sig-scan-sweep {
  0%   { left: -2%; opacity: 1; }
  90%  { left: 102%; opacity: 1; }
  91%  { opacity: 0; }
  100% { left: -2%; opacity: 0; }
}
.sig-scan-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #4FD8FF;
  box-shadow: 0 0 8px #4FD8FF, 0 0 2px #fff;
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.sig-scan-marker.sig-mark--watch  { background: #FFD170; box-shadow: 0 0 8px #FFD170, 0 0 2px #fff; }
.sig-scan-marker.sig-mark--alert  { background: #FF8A7A; box-shadow: 0 0 8px #FF8A7A, 0 0 2px #fff; }
.sig-scan-axis {
  position: absolute; bottom: 3px; left: 0; right: 0;
  display: flex; justify-content: space-between; padding: 0 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.48rem;
  color: rgba(255,255,255,0.3); letter-spacing: 0.06em;
}
.sig-scan-meta {
  display: flex; gap: 18px; margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
  color: rgba(255,255,255,0.65); letter-spacing: 0.04em;
}
.sig-scan-meta em { color: rgba(255,255,255,0.38); font-style: normal; margin-right: 6px; }

/* ---------- D. LABORATORY: job pipeline ---------- */
.sig-pipeline {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0 8px;
}
.sig-job {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 0 0 auto;
}
.sig-job-node {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  transition: all 0.2s;
  position: relative;
}
.sig-job-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.sig-job-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.4);
}
.sig-pipe-link {
  height: 2px; flex: 1;
  background: rgba(255,255,255,0.1); border-radius: 1px;
  align-self: flex-start;
  margin-top: 12px; /* align with the 26px node center */
}

.sig-job--done .sig-job-node { border-color: rgba(79,224,138,0.6); background: rgba(79,224,138,0.12); box-shadow: 0 0 8px rgba(79,224,138,0.25); }
.sig-job--done .sig-job-dot  { background: #4FE08A; box-shadow: 0 0 6px #4FE08A; }
.sig-job--done .sig-job-label { color: #4FE08A; }
.sig-job--done + .sig-pipe-link { background: rgba(79,224,138,0.5); box-shadow: 0 0 4px rgba(79,224,138,0.35); }

.sig-job--running .sig-job-node {
  border-color: #7EE8FF; background: rgba(0,238,255,0.15);
  box-shadow: 0 0 12px rgba(0,238,255,0.4);
  animation: sig-job-ring 1.8s ease-in-out infinite;
}
.sig-job--running .sig-job-dot  { background: #7EE8FF; box-shadow: 0 0 8px #4FD8FF; }
.sig-job--running .sig-job-label { color: #7EE8FF; }
@keyframes sig-job-ring {
  0%, 100% { box-shadow: 0 0 12px rgba(0,238,255,0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 18px rgba(0,238,255,0.7); transform: scale(1.08); }
}

.sig-job--queued .sig-job-label { color: rgba(255,255,255,0.28); }
.sig-job--failed .sig-job-node { border-color: rgba(255,138,122,0.6); }
.sig-job--failed .sig-job-dot  { background: #FF8A7A; }
.sig-job--failed .sig-job-label { color: #FF8A7A; }

/* ---------- E. ENGINES: output bars + thermometer ---------- */
.sig-eng-body { display: flex; gap: 14px; align-items: stretch; }
.sig-output { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sig-output-bars {
  position: relative;
  height: 70px;
  display: flex; align-items: flex-end; gap: 3px;
  padding: 0 2px;
  border: 1px solid rgba(0,238,255,0.12);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(5,14,26,0.4), rgba(2,6,12,0.4));
}
.sig-output-bar {
  flex: 1;
  height: var(--h, 50%);
  background: linear-gradient(180deg, #FFD170, rgba(255,209,112,0.35));
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 4px rgba(255,209,112,0.25);
  animation: sig-eng-bar 3.2s ease-in-out infinite;
}
.sig-output-bar:nth-child(2)  { animation-delay: 0.1s; }
.sig-output-bar:nth-child(3)  { animation-delay: 0.2s; }
.sig-output-bar:nth-child(4)  { animation-delay: 0.3s; }
.sig-output-bar:nth-child(5)  { animation-delay: 0.4s; }
.sig-output-bar:nth-child(6)  { animation-delay: 0.5s; }
.sig-output-bar:nth-child(7)  { animation-delay: 0.6s; }
.sig-output-bar:nth-child(8)  { animation-delay: 0.7s; }
.sig-output-bar:nth-child(9)  { animation-delay: 0.8s; }
.sig-output-bar:nth-child(10) { animation-delay: 0.9s; }
.sig-output-bar:nth-child(11) { animation-delay: 1.0s; }
.sig-output-bar:nth-child(12) { animation-delay: 1.1s; }
@keyframes sig-eng-bar {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
.sig-output-target {
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: #FFD170; opacity: 0.7;
  box-shadow: 0 0 4px #FFD170;
}
.sig-output-target::after {
  content: 'TARGET'; position: absolute; right: 4px; top: -11px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.44rem;
  color: #FFD170; font-weight: 700; letter-spacing: 0.1em;
  padding: 1px 4px; background: rgba(2,6,12,0.85); border-radius: 2px;
}
.sig-output-axis {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 0.5rem;
  color: rgba(255,255,255,0.3); letter-spacing: 0.05em;
}

.sig-thermo {
  width: 44px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sig-thermo-col {
  width: 14px; height: 70px;
  border-radius: 7px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,209,112,0.25);
  position: relative; overflow: hidden;
}
.sig-thermo-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #FFD170, #FF8A7A);
  box-shadow: 0 0 6px rgba(255,209,112,0.4);
  border-radius: 0 0 7px 7px;
  transition: height 0.4s ease;
}
.sig-thermo-val {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700;
  color: #FFD170; letter-spacing: 0.04em;
}

/* ========================================================================
   TACTICAL — CONTACT CARD (extended with status / confidence / updated)
======================================================================== */
.trc-head-left { display: flex; flex-direction: column; gap: 3px; }
.trc-status {
  font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.1em; color: #7EE8FF;
}
.trc-status--tracking  { color: #7EE8FF; }
.trc-status--locked    { color: #4FE08A; }
.trc-status--scanning  { color: #FFD170; }
.trc-status--monitored { color: #C17AFF; }
.trc-status--idle      { color: rgba(255,255,255,0.35); }

.trc-confidence {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px; margin-top: 4px;
  border-top: 1px solid rgba(0,238,255,0.08);
}
.trc-conf-top {
  display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace;
}
.trc-conf-bar {
  height: 4px; background: rgba(0,0,0,0.5);
  border-radius: 2px; overflow: hidden;
  border: 1px solid rgba(0,238,255,0.1);
}
.trc-conf-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #4FD8FF, #7EE8FF);
  box-shadow: 0 0 6px rgba(0,238,255,0.4);
  transition: width 0.4s ease;
}
.trc-footer {
  display: flex; justify-content: flex-end;
  font-family: 'JetBrains Mono', monospace; font-size: 0.54rem;
  color: rgba(255,255,255,0.35); letter-spacing: 0.08em;
}

/* ========================================================================
   TACTICAL — section divider (separates directive from deep telemetry)
======================================================================== */
.tac-section-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.3); text-transform: uppercase;
}
.tac-section-divider::before,
.tac-section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,238,255,0.22), transparent);
}
.tac-section-divider span { flex-shrink: 0; }


/* =========================================
   LIVE OPS — SIDEBAR WRAPPER (new name to avoid conflicts)
========================================= */
.liveops-sidebar-wrap {
  width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: #111a24; border-right: 1px solid #1a2a3a;
}

/* Keep all original LiveOps CSS classes below untouched */

/* LEFT SIDEBAR */
.ds-header { padding: 15px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: bold; color: #fff; text-transform: uppercase; }
.sidebar-filters { padding: 0 15px 15px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid #1a2a3a; }
.search-box { display: flex; align-items: center; background: rgba(0,0,0,0.3); border: 1px solid #2a3a4a; padding: 6px 10px; border-radius: 2px; gap: 8px; }
.search-box input { background: transparent; border: none; color: #fff; font-family: 'Inter', sans-serif; font-size: 0.75rem; width: 100%; outline: none; }
.search-icon { font-size: 0.7rem; color: var(--text-muted); }
.filter-tabs { display: flex; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #666; font-weight: bold; }
.f-tab.active { color: #fff; }

.agent-roster { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; }
.agent-card {
  display: flex; align-items: center; padding: 10px 15px; gap: 10px;
  border-bottom: 1px solid #1a2a3a; cursor: pointer; transition: background 0.2s;
  background: #152230; margin: 0 10px 5px; border-radius: 4px; border: 1px solid transparent;
}
.agent-card:hover { background: #1c2d3e; }
.agent-card.active { border-color: rgba(0,238,255,0.4); box-shadow: inset 0 0 15px rgba(0,238,255,0.1); }

.roster-avatar-box {
  width: 38px; height: 38px; background: #25384e; border-radius: 4px; border: 2px solid #364d67;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden; position: relative;
}
.roster-avatar-head { width: 14px; height: 14px; background: var(--skin); border: 1px solid #000; border-radius: 2px; position: absolute; bottom: 12px; }
.roster-avatar-body { width: 22px; height: 12px; border: 1px solid #000; border-bottom: none; border-radius: 4px 4px 0 0; position: absolute; bottom: -1px; }

.ac-details { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
.ac-name-row { display: flex; justify-content: space-between; align-items: center; }
.ac-name { font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; color: #eee; }
.ac-icon-state { font-size: 0.75rem; color: var(--text-muted); }
.ac-state-row { display: flex; justify-content: space-between; align-items: center; }
.ac-state { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: bold; }
.ac-state.working { color: var(--state-working); }
.ac-state.idle { color: var(--state-idle); }
.prog-bar { width: 50px; height: 4px; background: rgba(0,0,0,0.5); border-radius: 2px; overflow: hidden; }
.prog-fill { height: 100%; background: var(--state-working); }

.liveops-main-col { display: flex; flex-direction: column; gap: 15px; flex-grow: 1; padding: 15px; overflow: hidden; }

.liveops-map {
  flex-grow: 1; background: #2f3b4c; border: 1px solid #1a2a3a; border-radius: 4px;
  position: relative; overflow: hidden; padding: 15px;
}
.panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.map-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(rgba(26,42,58,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(26,42,58,0.3) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}

.map-layout {
  position: relative; z-index: 2; width: 100%; height: 100%;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 15px;
}
.map-col { display: flex; flex-direction: column; gap: 15px; }
.room {
  background: #394c63; border: 3px solid #1c2b3b; border-radius: 4px;
  position: relative; overflow: hidden;
}
.room-large { flex: 1.5; }
.room-small { flex: 1; min-height: 90px; }

.r-title {
  position: absolute; top: 6px; left: 8px; background: #fff; color: #000;
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: bold;
  padding: 2px 6px; border-radius: 2px; z-index: 5; box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.room-large .r-title { background: #eee; }
.room-jarvis .r-title { background: #00eeff; }

.r-status-indicator {
  position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--state-idle); border: 2px solid #222; box-shadow: 0 0 5px var(--state-idle); z-index: 5;
}
.room.working .r-status-indicator { background: var(--state-working); box-shadow: 0 0 5px var(--state-working); }

.r-game-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.desk-prop {
  position: absolute; bottom: 20px; height: 26px; border-radius: 2px;
  background: var(--wood); border: 2px solid var(--wood-dark);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.1); z-index: 15;
}
.center-desk { width: 70%; left: 15%; }
.white-desk { width: 70%; left: 15%; background: #eee; border-color: #999; }

.monitor-prop {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 28px; height: 20px;
  background: #222; border: 2px solid #000; border-radius: 2px; z-index: 16;
}
.monitor-prop::before { content:''; position:absolute; top:2px; left:2px; width:20px; height:12px; background:#00eeff; opacity:0.6; }
.monitor-prop.wide { width: 38px; }
.monitor-prop.wide::before { width: 30px; }

.book-prop { position: absolute; bottom: 26px; right: 10px; width: 14px; height: 10px; background: #fff; border: 1px solid #000; z-index: 16; }
.pen-prop { position: absolute; bottom: 26px; right: 26px; width: 2px; height: 8px; background: #000; z-index: 16; transform: rotate(45deg); }
.plant-prop { position: absolute; width: 14px; height: 20px; z-index: 10; }
.plant-prop::before { content:''; position:absolute; bottom:0; left:3px; width:8px; height:6px; background:#c25936; border:1px solid #000; }
.plant-prop::after { content:''; position:absolute; bottom:6px; left:0; width:14px; height:14px; background:#2d8a4e; border-radius:50%; border:1px solid #000; }
.flower-prop { position: absolute; bottom: 26px; right: 5px; width: 10px; height: 12px; background: #f0f; border-radius: 5px; border: 1px solid #000; z-index: 16; }
.easel-prop { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 20px; height: 15px; background: #eee; border: 1px solid #000; }
.easel-prop::after { content:''; position:absolute; top:5px; left:5px; width:5px; height:5px; border-radius:50%; background:red; box-shadow: 5px 0 0 blue; }
.dj-deck { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 34px; height: 12px; background: #333; border: 1px solid #000; }
.dj-deck::before { content:''; position:absolute; top:2px; left:4px; width:8px; height:8px; border-radius:50%; background:#111; }
.dj-deck::after { content:''; position:absolute; top:2px; right:4px; width:8px; height:8px; border-radius:50%; background:#111; }
.speaker { position: absolute; bottom: 0px; width: 16px; height: 30px; background: #222; border: 2px solid #000; border-radius: 2px; z-index: 15; }
.speaker::before { content:''; position:absolute; top:4px; left:3px; width:6px; height:6px; border-radius:50%; background:#111; border:1px solid #444; }
.speaker::after { content:''; position:absolute; bottom:4px; left:2px; width:8px; height:8px; border-radius:50%; background:#111; border:1px solid #444; }
.globe-prop { position: absolute; bottom: 26px; right: 10px; width: 14px; height: 14px; border-radius: 50%; background: #3399ff; border: 2px solid #000; z-index: 16; box-shadow: inset -2px -2px 0 rgba(0,0,0,0.3); }
.telescope { position: absolute; bottom: 26px; right: 5px; width: 14px; height: 8px; background: #777; border: 1px solid #000; transform: rotate(-30deg); z-index: 16; }

.conf-table { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 50px; background: var(--wood); border: 4px solid var(--wood-dark); border-radius: 40px; }
.whiteboard { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 60px; height: 30px; background: #fff; border: 2px solid #888; }
.water-cooler { position: absolute; width: 14px; height: 26px; }
.water-cooler::before { content:''; position:absolute; bottom:0; width:14px; height:12px; background:#ddd; border:1px solid #000; }
.water-cooler::after { content:''; position:absolute; top:0; left:2px; width:10px; height:14px; background:cyan; border:1px solid #000; border-radius:2px 2px 0 0; opacity:0.8; }
.server-rack { position: absolute; width: 22px; height: 50px; background: #111; border: 2px solid #333; z-index: 5; }
.server-rack::before { content:''; position:absolute; top:5px; left:5px; width:4px; height:4px; background:#00ff9d; box-shadow: 0 8px 0 #00eeff, 0 16px 0 #00eeff, 0 32px 0 #ff3366; animation: blinker 2s infinite; }
.kitchen-counter { position: absolute; bottom: 10px; left: 10%; width: 80%; height: 25px; background: #e0e0e0; border: 3px solid #999; z-index: 5; }
.fridge { position: absolute; left: 15%; bottom: 35px; width: 26px; height: 50px; background: #fff; border: 2px solid #888; border-radius: 2px; }
.microwave { position: absolute; right: 20%; bottom: 35px; width: 24px; height: 14px; background: #333; border: 2px solid #666; border-radius: 2px; }
.punching-bag { position: absolute; top: 20px; right: 30px; width: 14px; height: 30px; background: #ff3333; border: 2px solid #000; border-radius: 4px; }
.weight-bench { position: absolute; bottom: 20px; left: 30px; width: 40px; height: 16px; background: #222; border: 1px solid #000; }

.game-character { position: absolute; width: 34px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; z-index: 10; }
.char-head { width: 20px; height: 20px; background: var(--skin); border-radius: 2px; border: 2px solid #000; position: relative; z-index: 2; box-shadow: inset -2px -2px 0 rgba(0,0,0,0.1); margin-bottom: -2px; }
.char-body { width: 24px; height: 16px; background: #ff00ff; border-radius: 3px 3px 0 0; border: 2px solid #000; border-bottom: none; position: relative; z-index: 1; }
.char-hair { position: absolute; top: 0px; left: 5px; width: 24px; height: 8px; background: transparent; border: 2px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; z-index: 3; }
.glasses::after { content:''; position:absolute; top:5px; left:1px; width:14px; height:5px; border: 2px solid #000; border-radius: 2px; }
.headphones::after { content:''; position:absolute; top:-4px; left:-3px; width:22px; height:12px; border: 2px solid #222; border-bottom: none; border-radius: 8px 8px 0 0; }
.beard { background: #b17e5a; }
.beard::after { content:''; position:absolute; bottom:0; left:0; width:16px; height:6px; background:#555; }
.vr-headset::after { content:''; position:absolute; top:4px; left:0px; width:16px; height:8px; background:#fff; border: 2px solid #000; }
.cyan-glasses { position:absolute; top:4px; left:1px; width:14px; height:6px; background: rgba(0,238,255,0.5); border: 1px solid #00eeff; box-shadow: 0 0 5px #00eeff; }

.agent-avatar-sim { left: 50%; bottom: 25px; transform: translateX(-50%); cursor: pointer; transition: transform 0.2s; }
.agent-avatar-sim:hover { transform: translateX(-50%) scale(1.1); z-index: 20; }
.agent-avatar-sim.active .char-body { box-shadow: inset 0 0 0 2px #fff; border-color: #fff; }
.agent-avatar-sim.active .char-head { border-color: #fff; }

.global-jarvis {
  z-index: 50; transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translate(-100px, -100px); pointer-events: none;
}

.speech-bubble {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  background: #fff; color: #000; padding: 4px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; white-space: nowrap;
  opacity: 0; transition: opacity 0.3s; font-weight: bold; z-index: 100;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5); border: 2px solid #000;
}
.speech-bubble.visible { opacity: 1; top: -35px; pointer-events: auto; }
.speech-bubble::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0; border-style: solid; border-color: #000 transparent transparent transparent; }
.speech-bubble::before { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); border-width: 4px 4px 0; border-style: solid; border-color: #fff transparent transparent transparent; z-index: 2; }

.liveops-bottom-bar {
  height: 90px; background: #111a24; border: 1px solid #1a2a3a; border-radius: 4px;
  display: flex; align-items: center; padding: 15px 25px; gap: 20px;
}
.liveops-bottom-bar.active-detail { background: #162432; border-color: #243c52; }
.empty-detail { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 0.75rem; text-align: center; width: 100%; }

.bd-avatar { width: 56px; height: 56px; background: #25384e; border-radius: 4px; border: 2px solid #364d67; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; position: relative; overflow: hidden; }
.bd-head { width: 22px; height: 22px; background: var(--skin); border: 2px solid #000; border-radius: 2px; position: absolute; bottom: 20px; }
.bd-body { width: 34px; height: 20px; border: 2px solid #000; border-bottom: none; border-radius: 6px 6px 0 0; position: absolute; bottom: -2px; }

.bd-info { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; }
.bd-name { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: #fff; }
.bd-task { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #aaa; }

.bd-stats { display: flex; align-items: center; gap: 20px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; }
.bd-stats-item { display: flex; align-items: center; gap: 8px; }
.bd-stats-val { font-family: 'Chakra Petch', sans-serif; font-weight: bold; font-size: 0.8rem; color: #fff; }
.bd-stats-val.green { color: var(--state-working); }
.bd-stats-val.red { color: var(--state-idle); }

.cyan-btn-sm { background: rgba(0,238,255,0.1); border: 1px solid var(--cyan); color: #fff; padding: 10px 20px; font-family: 'Chakra Petch', sans-serif; font-size: 0.75rem; font-weight: bold; cursor: pointer; transition: background 0.2s; border-radius: 2px; }
.cyan-btn-sm:hover:not(:disabled) { background: rgba(0,238,255,0.25); box-shadow: 0 0 15px var(--cyan-glow); }
.cyan-btn-sm:disabled { border-color: #3a4a5a; color: #666; background: transparent; cursor: not-allowed; }

/* =====================================================
   TEAM OVERVIEW / LIVE OPS  (lo-* namespace)
===================================================== */

#view-liveops { display: flex; width: 100%; height: 100%; overflow: hidden; }
#view-liveops.lo-v2 { position: relative; }
#view-liveops.lo-v2 #lo-react-root { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- SIDEBAR SHELL ---- */
.lo-sidebar {
  width: 220px; flex-shrink: 0;
  background: #060f1a;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Header */
.lo-sb-header {
  padding: 16px 16px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lo-sb-header-text {
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.lo-sb-header-count {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  color: #00eeff; background: rgba(0,238,255,0.1);
  border: 1px solid rgba(0,238,255,0.2); padding: 1px 6px; border-radius: 3px;
}

/* Search */
.lo-sb-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 7px 10px; border-radius: 5px;
  transition: border-color 0.15s;
}
.lo-sb-search:focus-within {
  border-color: rgba(0,238,255,0.3);
  background: rgba(0,238,255,0.03);
}
.lo-search-icon { color: rgba(255,255,255,0.3); font-size: 0.9rem; flex-shrink: 0; }
.lo-sb-search input {
  background: none; border: none; color: #fff;
  font-family: 'Inter', sans-serif; font-size: 0.72rem;
  width: 100%; outline: none;
}
.lo-sb-search input::placeholder { color: rgba(255,255,255,0.25); }

/* Filters */
.lo-sb-filters {
  display: flex; gap: 4px; margin: 0 12px 10px;
}
.lo-filter {
  flex: 1; text-align: center;
  padding: 4px 0; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px; transition: all 0.15s;
}
.lo-filter:hover { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.15); }
.lo-filter.active {
  color: #00eeff;
  background: rgba(0,238,255,0.1);
  border-color: rgba(0,238,255,0.35);
  box-shadow: 0 0 8px rgba(0,238,255,0.08);
}

/* Agent list */
.lo-agent-list {
  flex-grow: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 4px 8px; gap: 3px;
}
.lo-agent-list::-webkit-scrollbar { width: 3px; }
.lo-agent-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Agent card */
.lo-agent-card {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer; transition: all 0.15s;
  background: transparent;
  position: relative;
}
.lo-agent-card::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 2px; border-radius: 0 2px 2px 0;
  background: transparent; transition: background 0.15s;
}
.lo-agent-card:hover {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.lo-agent-card.active {
  background: rgba(0,238,255,0.07);
  border-color: rgba(0,238,255,0.3);
  box-shadow: inset 0 0 16px rgba(0,238,255,0.04), 0 0 12px rgba(0,238,255,0.06);
}
.lo-agent-card.active::before {
  background: #00eeff;
  box-shadow: 0 0 6px #00eeff;
}

/* Status dot */
.lo-ac-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #374151; position: relative;
}
.lo-ac-dot.working     { background: #00e676; box-shadow: 0 0 5px rgba(0,230,118,0.8); }
.lo-ac-dot.researching { background: #00eeff; box-shadow: 0 0 5px rgba(0,238,255,0.8); }
.lo-ac-dot.meeting     { background: #b366ff; box-shadow: 0 0 5px rgba(179,102,255,0.8); }
.lo-ac-dot.idle        { background: #374151; }
.lo-ac-dot.break       { background: #f59e0b; box-shadow: 0 0 5px rgba(245,158,11,0.7); }

/* Avatar */
.lo-ac-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #0a1826, #0f2035);
  border: 1.5px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
  transition: border-color 0.15s;
}
.lo-agent-card.active .lo-ac-avatar {
  border-color: rgba(0,238,255,0.5);
  box-shadow: 0 0 10px rgba(0,238,255,0.15);
}

/* Name + role */
.lo-ac-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-ac-name {
  font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 700;
  color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lo-agent-card.active .lo-ac-name { color: #fff; }
.lo-ac-role {
  font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 400;
  color: rgba(255,255,255,0.32); letter-spacing: 0.02em;
}

/* State badge */
.lo-ac-badge {
  font-family: 'Inter', sans-serif; font-size: 0.55rem; font-weight: 700;
  padding: 2px 6px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
  letter-spacing: 0.03em; text-transform: capitalize;
}
.lo-badge-working    { background: rgba(0,230,118,0.1);   color: #00e676; border: 1px solid rgba(0,230,118,0.25); }
.lo-badge-researching{ background: rgba(0,238,255,0.08);  color: #5dd8e8; border: 1px solid rgba(0,238,255,0.2); }
.lo-badge-meeting    { background: rgba(179,102,255,0.1); color: #c084fc; border: 1px solid rgba(179,102,255,0.25); }
.lo-badge-idle       { background: rgba(55,65,81,0.4);    color: #6b7280; border: 1px solid rgba(55,65,81,0.5); }
.lo-badge-break      { background: rgba(245,158,11,0.1);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }

/* Footer */
.lo-sb-footer {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.lo-add-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(0,238,255,0.2);
  color: rgba(0,238,255,0.7);
  padding: 8px 0;
  border-radius: 5px;
  font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.lo-add-btn:hover {
  background: rgba(0,238,255,0.06);
  border-color: rgba(0,238,255,0.45);
  color: #00eeff;
  box-shadow: 0 0 10px rgba(0,238,255,0.08);
}

.lo-main { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px; gap: 10px; background: #030c17; }
.lo-rooms-label { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 800; color: #00eeff; letter-spacing: 0.12em; text-transform: uppercase; }

.lo-rooms-grid { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap: 10px; flex: 1; min-height: 0; }
.lo-room { border: 1px solid #132030; border-radius: 8px; background: #07111d; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.lor-head { padding: 7px 12px; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); }
.lor-icon { font-size: 0.85rem; }
.lor-body { flex-grow: 1; position: relative; overflow: hidden; }

/* Room themes — stronger floor lighting + colored border */
.lo-room-jarvis  { border-color: rgba(0,238,255,0.45); }
.lo-room-jarvis  .lor-head { color: #00eeff; background: rgba(0,238,255,0.08); }
.lo-room-jarvis  .lor-body {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,238,255,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #050e18 0%, #040b15 100%);
}
.lo-room-strategy { border-color: rgba(0,230,118,0.45); }
.lo-room-strategy .lor-head { color: #00e676; background: rgba(0,230,118,0.08); }
.lo-room-strategy .lor-body {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,230,118,0.2) 0%, transparent 65%),
    linear-gradient(180deg, #050f0a 0%, #040c08 100%);
}
.lo-room-research { border-color: rgba(179,102,255,0.45); }
.lo-room-research .lor-head { color: #b366ff; background: rgba(179,102,255,0.08); }
.lo-room-research .lor-body {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(179,102,255,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #0a0515 0%, #080412 100%);
}
.lo-room-content  { border-color: rgba(255,145,0,0.45); }
.lo-room-content  .lor-head { color: #ff9100; background: rgba(255,145,0,0.08); }
.lo-room-content  .lor-body {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,145,0,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #100800 0%, #0d0600 100%);
}
.lo-room-automation { border-color: rgba(255,214,0,0.45); }
.lo-room-automation .lor-head { color: #ffd600; background: rgba(255,214,0,0.08); }
.lo-room-automation .lor-body {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,214,0,0.15) 0%, transparent 60%),
    linear-gradient(180deg, #0f0d00 0%, #0c0a00 100%);
}
.lo-room-analytics  { border-color: rgba(234,67,53,0.45); }
.lo-room-analytics  .lor-head { color: #ea4335; background: rgba(234,67,53,0.08); }
.lo-room-analytics  .lor-body {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(234,67,53,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #120402 0%, #0e0302 100%);
}

/* ===========================================
   ROOM AMBIENT FILL ELEMENTS  (lr-*)
=========================================== */

/* Floor textures */
.lr-floor {
  position: absolute; bottom: 0; left: 0; right: 0; height: 35%; z-index: 0;
  pointer-events: none;
}
.lr-floor-jarvis {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0,238,255,0.04) 18px, rgba(0,238,255,0.04) 19px),
    repeating-linear-gradient(0deg, transparent 0, transparent 18px, rgba(0,238,255,0.03) 18px, rgba(0,238,255,0.03) 19px),
    linear-gradient(180deg, transparent 0%, rgba(0,238,255,0.06) 100%);
}
.lr-floor-strategy {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 20px, rgba(0,230,118,0.04) 20px, rgba(0,230,118,0.04) 21px),
    repeating-linear-gradient(0deg, transparent 0, transparent 20px, rgba(0,230,118,0.03) 20px, rgba(0,230,118,0.03) 21px),
    linear-gradient(180deg, transparent 0%, rgba(0,230,118,0.06) 100%);
}
.lr-floor-research {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 16px, rgba(179,102,255,0.04) 16px, rgba(179,102,255,0.04) 17px),
    repeating-linear-gradient(0deg, transparent 0, transparent 16px, rgba(179,102,255,0.03) 16px, rgba(179,102,255,0.03) 17px),
    linear-gradient(180deg, transparent 0%, rgba(179,102,255,0.06) 100%);
}
.lr-floor-content {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(255,145,0,0.03) 22px, rgba(255,145,0,0.03) 23px),
    linear-gradient(180deg, transparent 0%, rgba(255,145,0,0.05) 100%);
}
.lr-floor-automation {
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 11px, rgba(255,214,0,0.06) 11px, rgba(255,214,0,0.06) 12px),
    repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(255,214,0,0.06) 11px, rgba(255,214,0,0.06) 12px),
    linear-gradient(180deg, transparent 0%, rgba(255,214,0,0.08) 100%);
}
.lr-floor-analytics {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 15px, rgba(234,67,53,0.03) 15px, rgba(234,67,53,0.03) 16px),
    linear-gradient(180deg, transparent 0%, rgba(234,67,53,0.06) 100%);
}

/* Wall panels — vertical side strips */
.lr-wall-panel {
  position: absolute; width: 4%; z-index: 2;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 1px;
}
.lr-wall-panel::before {
  content: '';
  position: absolute; top: 10%; left: 25%; width: 50%;
  height: 6px; background: rgba(0,238,255,0.15);
  box-shadow: 0 10px 0 rgba(0,238,255,0.08), 0 20px 0 rgba(0,238,255,0.05);
}

/* Shelf */
.lr-shelf {
  position: absolute; height: 4px; z-index: 3;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 1px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.lr-shelf::before {
  content: '';
  position: absolute; top: -6px; left: 10%; width: 30%; height: 5px;
  background: rgba(0,238,255,0.12); border: 1px solid rgba(0,238,255,0.15);
  border-radius: 1px;
}

/* LED status strips (vertical on walls) */
.lr-led-strip {
  position: absolute; height: 18%; z-index: 3;
  border-radius: 0 1px 1px 0;
}
.lr-led-cyan   { background: linear-gradient(180deg, rgba(0,238,255,0.5) 0%, rgba(0,238,255,0.1) 100%); box-shadow: 2px 0 6px rgba(0,238,255,0.3); }
.lr-led-green  { background: linear-gradient(180deg, rgba(0,230,118,0.5) 0%, rgba(0,230,118,0.1) 100%); box-shadow: 2px 0 6px rgba(0,230,118,0.3); }
.lr-led-purple { background: linear-gradient(180deg, rgba(179,102,255,0.5) 0%, rgba(179,102,255,0.1) 100%); box-shadow: 2px 0 6px rgba(179,102,255,0.3); }
.lr-led-orange { background: linear-gradient(180deg, rgba(255,145,0,0.5) 0%, rgba(255,145,0,0.1) 100%); box-shadow: 2px 0 6px rgba(255,145,0,0.3); }
.lr-led-yellow { background: linear-gradient(180deg, rgba(255,214,0,0.5) 0%, rgba(255,214,0,0.1) 100%); box-shadow: 2px 0 6px rgba(255,214,0,0.3); }
.lr-led-red    { background: linear-gradient(180deg, rgba(234,67,53,0.5) 0%, rgba(234,67,53,0.1) 100%); box-shadow: 2px 0 6px rgba(234,67,53,0.3); }

/* Side desk */
.lr-side-desk {
  position: absolute; height: 8%; z-index: 3;
  background: #0d1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid rgba(255,255,255,0.1);
  border-radius: 1px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
}

/* Small wall-mounted screen */
.lr-wall-screen-sm {
  position: absolute; z-index: 2;
  background: #060c14;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px; overflow: hidden;
}
.lr-wall-screen-sm::before {
  content: '';
  position: absolute; inset: 2px;
  background: rgba(0,238,255,0.06);
  border-radius: 1px;
}
.lr-wall-screen-sm::after {
  content: '';
  position: absolute; bottom: 3px; left: 15%; right: 15%; height: 1px;
  background: rgba(0,238,255,0.2);
  box-shadow: 0 -4px 0 rgba(0,238,255,0.1);
}
.lo-room-strategy .lr-wall-screen-sm::before { background: rgba(0,230,118,0.06); }
.lo-room-strategy .lr-wall-screen-sm::after { background: rgba(0,230,118,0.2); box-shadow: 0 -4px 0 rgba(0,230,118,0.1); }
.lo-room-analytics .lr-wall-screen-sm::before { background: rgba(234,67,53,0.08); }
.lo-room-analytics .lr-wall-screen-sm::after { background: rgba(234,67,53,0.15); box-shadow: 0 -4px 0 rgba(234,67,53,0.1); }
.lo-room-content .lr-wall-screen-sm::before { background: rgba(255,145,0,0.06); }
.lo-room-content .lr-wall-screen-sm::after { background: rgba(255,145,0,0.15); box-shadow: 0 -4px 0 rgba(255,145,0,0.1); }

/* Large wall screen */
.lr-wall-screen-lg {
  position: absolute; z-index: 2;
  background: #060a10;
  border: 1px solid rgba(179,102,255,0.2);
  border-radius: 2px; overflow: hidden;
}
.lr-wall-screen-lg::before {
  content: '';
  position: absolute; inset: 3px;
  background: rgba(179,102,255,0.08);
  border-radius: 1px;
}
.lr-wall-screen-lg::after {
  content: '';
  position: absolute; bottom: 5px; left: 10%; right: 10%; height: 1px;
  background: rgba(179,102,255,0.3);
  box-shadow: 0 -6px 0 rgba(179,102,255,0.1), 0 -12px 0 rgba(179,102,255,0.06);
}

/* Hazard floor line (Automation Bay) */
.lr-hazard-line {
  position: absolute; left: 5%; right: 5%; height: 3px; z-index: 2;
  background: repeating-linear-gradient(90deg,
    rgba(255,214,0,0.6) 0px, rgba(255,214,0,0.6) 8px,
    transparent 8px, transparent 16px);
}

/* ===========================================
   ROOM PROPS — lrw-* (wall elements) + lrp-* (floor/desk props)
=========================================== */

/* SHARED BASE */
.lor-body * { pointer-events: none; }

/* ── WALL ELEMENTS (lrw-*) ── */

/* Jarvis Office: 3 back-wall screens */
.lrw-screen {
  position: absolute; top: 8%; height: 42%;
  background: #080f18; border: 1px solid rgba(0,238,255,0.25);
  z-index: 2; border-radius: 2px; overflow: hidden;
}
.lrw-screen::before {
  content: ''; position: absolute; inset: 3px;
  background: rgba(0,238,255,0.08);
  border-radius: 1px;
}
.lrw-screen::after {
  content: '';
  position: absolute; bottom: 4px; left: 10%; right: 10%; height: 1px;
  background: rgba(0,238,255,0.3);
  box-shadow: 0 -6px 0 rgba(0,238,255,0.1), 0 -12px 0 rgba(0,238,255,0.08);
}
.lrw-screen-a { left: 4%;  width: 27%; }
.lrw-screen-b { left: 35%; width: 30%; border-color: rgba(0,238,255,0.4); }
.lrw-screen-b::before { background: rgba(0,238,255,0.14); }
.lrw-screen-c { left: 68%; width: 27%; }

/* Strategy Room: projected map wall */
.lrw-map-wall {
  position: absolute; top: 5%; left: 5%; right: 5%; height: 35%; z-index: 2;
  background: rgba(0,230,118,0.05);
  border: 1px solid rgba(0,230,118,0.2); border-radius: 3px; overflow: hidden;
}
.lrw-map-wall::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(0,230,118,0.06) 14px, rgba(0,230,118,0.06) 15px),
    repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(0,230,118,0.06) 14px, rgba(0,230,118,0.06) 15px);
}
.lrw-map-wall::after {
  content: ''; position: absolute;
  top: 30%; left: 35%; width: 30%; height: 40%;
  background: rgba(0,230,118,0.15); border: 1px solid rgba(0,230,118,0.4); border-radius: 2px;
}

/* Research Lab: left data panel */
.lrw-data-panel {
  position: absolute; top: 8%; left: 4%; width: 22%; height: 50%; z-index: 2;
  background: rgba(179,102,255,0.05); border: 1px solid rgba(179,102,255,0.2);
  border-radius: 2px; overflow: hidden;
}
.lrw-data-panel::before {
  content: ''; position: absolute; inset: 4px;
  background: repeating-linear-gradient(180deg, rgba(179,102,255,0.15) 0px, rgba(179,102,255,0.15) 2px, transparent 2px, transparent 8px);
}

/* Automation Bay: control/status wall */
.lrw-ctrl-wall {
  position: absolute; top: 5%; left: 3%; right: 3%; height: 30%; z-index: 2;
  background: #0a0d10; border: 1px solid rgba(255,214,0,0.2); border-radius: 2px;
  display: flex; align-items: center; justify-content: space-around; padding: 4px 6px;
}
.lrw-ctrl-wall::before {
  content: '';
  position: absolute; top: 4px; left: 5%; right: 5%; height: 40%;
  background: repeating-linear-gradient(90deg,
    rgba(255,214,0,0.25) 0px, rgba(255,214,0,0.25) 3px,
    transparent 3px, transparent 12px);
}
.lrw-ctrl-wall::after {
  content: '';
  position: absolute; bottom: 4px; left: 10%; right: 10%; height: 3px;
  background: rgba(255,214,0,0.4);
  box-shadow: 0 -5px 0 rgba(255,214,0,0.15);
}

/* Analytics: main dashboard wall */
.lrw-dash-wall {
  position: absolute; top: 5%; left: 3%; right: 3%; height: 42%; z-index: 2;
  background: #0a0505; border: 1px solid rgba(234,67,53,0.25); border-radius: 3px; overflow: hidden;
}
.lrw-dash-wall::before {
  content: ''; position: absolute; inset: 3px 3px 40% 3px;
  background: rgba(234,67,53,0.08);
  border-bottom: 1px solid rgba(234,67,53,0.2);
}
.lrw-dash-wall::after {
  content: ''; position: absolute; bottom: 8px; left: 8%; width: 25%; height: 40%;
  background: linear-gradient(180deg, rgba(234,67,53,0.4) 0%, rgba(234,67,53,0.1) 100%);
  box-shadow: 30% 0 0 rgba(234,67,53,0.2);
}

/* ── FLOOR / DESK PROPS (lrp-*) ── */

/* Command platform rings (Jarvis Office) */
.lrp-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0,238,255,0.25);
  left: 50%; transform: translateX(-50%);
  z-index: 1;
}
.lrp-ring-outer { width: 58%; height: 28%; bottom: 10%; }
.lrp-ring-inner { width: 38%; height: 18%; bottom: 15%; border-color: rgba(0,238,255,0.4); }
.lrp-core {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  width: 10%; height: 5%; border-radius: 50%;
  background: rgba(0,238,255,0.15); border: 1px solid rgba(0,238,255,0.6);
  z-index: 2; box-shadow: 0 0 12px rgba(0,238,255,0.4);
}

/* Curved arc desk (Jarvis Office) */
.lrp-desk-arc {
  position: absolute; bottom: 23%; left: 10%; right: 10%; height: 10%;
  background: #122030; border: 1px solid rgba(0,238,255,0.2);
  border-radius: 40% 40% 0 0 / 20% 20% 0 0;
  z-index: 3;
  box-shadow: 0 4px 0 #060d14, inset 0 1px 0 rgba(0,238,255,0.1);
}

/* Generic monitor */
.lrp-mon {
  position: absolute; width: 28px; height: 20px;
  background: #080d12; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px; z-index: 4;
}
.lrp-mon::before {
  content: ''; position: absolute; inset: 3px;
  background: rgba(0,238,255,0.55); border-radius: 1px;
  box-shadow: inset 0 0 4px rgba(0,238,255,0.4);
}
.lrp-mon-l { left: 12%; bottom: 31%; }
.lrp-mon-c { left: 32%; bottom: 31%; }
.lrp-mon-r { left: 52%; bottom: 31%; }

/* Server / data rack */
.lrp-rack {
  position: absolute; width: 16px; height: 48px;
  background: #0c1520; border: 1px solid rgba(0,238,255,0.15); border-radius: 2px; z-index: 3;
}
.lrp-rack::before {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #00ff9d;
  box-shadow: 0 8px 0 #00eeff, 0 16px 0 rgba(255,51,102,0.9), 0 24px 0 rgba(0,238,255,0.4);
  animation: blinker 1.8s infinite;
}

/* Lab bench */
.lrp-bench {
  position: absolute; bottom: 22%; left: 4%; right: 28%; height: 9%;
  background: #0e1d2c; border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid rgba(255,255,255,0.12);
  z-index: 3; border-radius: 1px;
  box-shadow: 0 3px 0 #06111a;
}
.lrp-bench-content { right: 55%; left: 2%; }
.lrp-bench-analytics { left: 4%; right: 35%; }

/* Flask */
.lrp-flask {
  position: absolute; z-index: 5; width: 10px; height: 18px;
}
.lrp-flask::after {
  content: ''; position: absolute; bottom: 0; left: 1px;
  width: 8px; height: 13px;
  border-radius: 0 0 4px 4px;
  border: 1.5px solid rgba(179,102,255,0.6);
}
.lrp-flask::before {
  content: ''; position: absolute; top: 0; left: 3px;
  width: 4px; height: 6px;
  border: 1.5px solid rgba(179,102,255,0.4);
  border-bottom: none;
}
.lrp-flask-a { left: 50%; bottom: 30%; }
.lrp-flask-a::after  { background: rgba(179,102,255,0.3); }
.lrp-flask-b { left: 62%; bottom: 30%; }
.lrp-flask-b::after  { background: rgba(0,238,255,0.2); border-color: rgba(0,238,255,0.5); }

/* Beaker */
.lrp-beaker {
  position: absolute; left: 74%; bottom: 28%; z-index: 5;
  width: 12px; height: 14px;
  border: 1.5px solid rgba(179,102,255,0.4);
  border-top: none; border-radius: 0 0 4px 4px;
  background: rgba(179,102,255,0.15);
}

/* Holographic table (Strategy Room) */
.lrp-holo-table {
  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  width: 54%; height: 34%; z-index: 2;
  background: rgba(0,230,118,0.04);
  border: 2px solid rgba(0,230,118,0.35);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(0,230,118,0.12), inset 0 0 20px rgba(0,230,118,0.05);
}
.lrp-holo-glow {
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  width: 32%; height: 20%; z-index: 3;
  background: rgba(0,230,118,0.1);
  border: 1px solid rgba(0,230,118,0.3);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0,230,118,0.25);
}

/* Chair */
.lrp-chair {
  position: absolute; width: 12px; height: 10px;
  background: #15252e; border: 1px solid rgba(0,230,118,0.2);
  border-radius: 2px; z-index: 2;
}

/* Wall tablet / kiosk */
.lrp-tablet {
  position: absolute; width: 16px; height: 24px;
  background: #0a1520; border: 1.5px solid rgba(0,230,118,0.3);
  border-radius: 2px; z-index: 3;
}
.lrp-tablet::before {
  content: ''; position: absolute; inset: 3px;
  background: rgba(0,230,118,0.1);
  border-radius: 1px;
}

/* Plant */
.lrp-plant { position: absolute; width: 18px; height: 24px; z-index: 3; }
.lrp-plant::before {
  content: ''; position: absolute; bottom: 0; left: 4px;
  width: 10px; height: 8px; background: #5a2e18; border: 1px solid #3a1a0a; border-radius: 1px;
}
.lrp-plant::after {
  content: ''; position: absolute; bottom: 7px; left: -2px;
  width: 22px; height: 20px; background: #1e5a32; border-radius: 50%;
  border: 1px solid #144024;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,0.25);
}

/* Green screen (Content Studio) */
.lrp-greenscreen {
  position: absolute; right: 4%; top: 6%; width: 44%; height: 78%; z-index: 2;
  background: rgba(0,180,80,0.22); border: 2px solid rgba(0,230,80,0.35); border-radius: 3px;
}
.lrp-greenscreen::before {
  content: 'GREEN\A SCREEN'; white-space: pre;
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);
  font-size: 0.36rem; color: rgba(0,230,80,0.35); font-family: 'JetBrains Mono', monospace;
  font-weight: 700; letter-spacing: 0.08em; text-align: center;
}

/* Stage spotlights */
.lrp-spotlight {
  position: absolute; top: 4%; z-index: 3;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 18px solid rgba(255,200,0,0.25);
}
.lrp-spot-l { left: 32%; }
.lrp-spot-r { right: 53%; }

/* Camera tripod */
.lrp-camera-tripod {
  position: absolute; right: 52%; bottom: 22%; z-index: 4;
  width: 16px; height: 22px;
}
.lrp-camera-tripod::before {
  content: ''; position: absolute; top: 0; left: 2px;
  width: 12px; height: 8px;
  background: #1a1a1a; border: 1px solid #444; border-radius: 2px;
}
.lrp-camera-tripod::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 14px; background: rgba(255,255,255,0.2);
  box-shadow: -4px 0 0 rgba(255,255,255,0.1), 4px 0 0 rgba(255,255,255,0.1);
}

/* Speaker */
.lrp-speaker {
  position: absolute; z-index: 3;
  width: 10px; height: 22px;
  background: #111; border: 1px solid #333; border-radius: 2px;
}
.lrp-speaker::after {
  content: ''; position: absolute; top: 4px; left: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #0a0a0a; border: 1px solid #444;
}

/* Conveyor belt */
.lrp-conveyor {
  position: absolute; bottom: 26%; left: 4%; right: 4%; height: 12%; z-index: 3;
  background: repeating-linear-gradient(90deg,
    #141414 0px, #141414 10px, #1c1c1c 10px, #1c1c1c 20px);
  border: 1px solid rgba(255,214,0,0.2); border-radius: 3px;
  box-shadow: 0 4px 0 #060606;
}

/* Crate on belt */
.lrp-crate {
  position: absolute; z-index: 4;
  width: 16px; height: 14px;
  background: #1a1200; border: 1.5px solid rgba(255,214,0,0.4);
  border-radius: 1px;
}
.lrp-crate::before {
  content: ''; position: absolute; top: 3px; left: 3px; right: 3px;
  height: 1px; background: rgba(255,214,0,0.3);
  box-shadow: 0 4px 0 rgba(255,214,0,0.2);
}

/* Robotic arm */
.lrp-arm {
  position: absolute; z-index: 5;
  width: 8px; height: 36px;
  transform-origin: bottom center;
  border-radius: 3px;
}
.lrp-arm::before {
  content: ''; position: absolute; top: -8px; left: -4px;
  width: 16px; height: 10px;
  border-radius: 2px; background: inherit; border: inherit;
  transform: rotate(25deg);
}
.lrp-arm-a {
  left: 20%; bottom: 35%;
  background: rgba(255,214,0,0.7); border: 1px solid rgba(255,214,0,0.9);
  transform: rotate(-18deg);
}
.lrp-arm-b {
  left: 54%; bottom: 35%;
  background: rgba(255,100,0,0.7); border: 1px solid rgba(255,100,0,0.9);
  transform: rotate(18deg);
}

/* Floor grid (Automation) */
.lrp-floor-grid {
  position: absolute; bottom: 0; left: 0; right: 0; height: 28%; z-index: 1;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 9px, rgba(255,214,0,0.06) 9px, rgba(255,214,0,0.06) 10px),
    repeating-linear-gradient(90deg, transparent, transparent 9px, rgba(255,214,0,0.06) 9px, rgba(255,214,0,0.06) 10px);
}

/* Analytics sub-dashboard monitors */
.lrp-dash-mon {
  position: absolute; z-index: 3;
  background: #080505; border: 1px solid rgba(234,67,53,0.3); border-radius: 2px; overflow: hidden;
}
.lrp-dash-mon::before {
  content: ''; position: absolute; inset: 3px;
}
.lrp-dash-mon-a { top: 48%; left: 4%;  width: 27%; height: 30%; }
.lrp-dash-mon-a::before {
  background: linear-gradient(180deg, rgba(234,67,53,0.4) 0%, rgba(234,67,53,0.1) 60%, transparent 100%);
}
.lrp-dash-mon-b { top: 48%; left: 34%; width: 26%; height: 30%; }
.lrp-dash-mon-b::before {
  background: linear-gradient(180deg, rgba(234,67,53,0.3) 0%, rgba(234,67,53,0.12) 50%, transparent 100%);
}
.lrp-dash-mon-c { top: 48%; left: 63%; width: 26%; height: 30%; }
.lrp-dash-mon-c::before {
  background: linear-gradient(180deg, rgba(234,67,53,0.5) 0%, rgba(234,67,53,0.15) 40%, transparent 100%);
}

/* Chart strip (Analytics) */
.lrp-chart-strip {
  position: absolute; bottom: 12%; right: 4%; width: 22%; height: 26%; z-index: 4;
  display: flex; align-items: flex-end; gap: 2px; padding: 2px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(234,67,53,0.2);
}
.lrp-chart-strip::before {
  content: '';
  width: 14%; height: 75%; background: rgba(234,67,53,0.7); display: inline-block;
  box-shadow: calc(14% + 2px) 25% 0 rgba(234,67,53,0.5), calc(28% + 4px) 50% 0 rgba(234,67,53,0.35),
              calc(42% + 8px) 10% 0 rgba(234,67,53,0.7), calc(56% + 12px) 40% 0 rgba(234,67,53,0.45);
}



.lo-bot {
  position: absolute; z-index: 10;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; border: 2px solid;
  background: rgba(0,0,0,0.65);
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  backdrop-filter: blur(2px);
}
.lo-bot:hover { transform: scale(1.3) translateY(-4px); z-index: 20; }
.lo-bot-lg { width: 38px; height: 38px; font-size: 1.1rem; }
.lo-bot-cyan   { color: #00eeff; border-color: #00eeff;            box-shadow: 0 0 12px rgba(0,238,255,0.6); }
.lo-bot-green  { color: #00e676; border-color: #00e676;            box-shadow: 0 0 12px rgba(0,230,118,0.6); }
.lo-bot-purple { color: #b366ff; border-color: #b366ff;            box-shadow: 0 0 12px rgba(179,102,255,0.6); }
.lo-bot-pink   { color: #ff3366; border-color: #ff3366;            box-shadow: 0 0 12px rgba(255,51,102,0.6); }
.lo-bot-orange { color: #ff9100; border-color: #ff9100;            box-shadow: 0 0 12px rgba(255,145,0,0.6); }
.lo-bot-white  { color: #e8eaf6; border-color: rgba(255,255,255,0.5); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
.lo-bot-blue   { color: #4fc3f7; border-color: #4fc3f7;            box-shadow: 0 0 12px rgba(79,195,247,0.6); }
.lo-bot-yellow { color: #ffd600; border-color: #ffd600;            box-shadow: 0 0 12px rgba(255,214,0,0.6); }
.lo-bot-red    { color: #ef5350; border-color: #ef5350;            box-shadow: 0 0 12px rgba(239,83,80,0.6); }

.lo-bottom-deck { height: 116px; flex-shrink: 0; background: #07111d; border: 1px solid #132030; border-radius: 6px; display: grid; grid-template-columns: 1.1fr 1.6fr 0.9fr 1.4fr; }
.lo-bd-section { padding: 10px 16px; border-right: 1px solid #132030; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.lo-bd-section:last-child { border-right: none; }
.lo-bd-label { font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; }
.lo-bd-agent-row { display: flex; align-items: center; gap: 12px; }
.lo-bd-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #0a1a2e, #1a2a3e); border: 2px solid rgba(0,238,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; box-shadow: 0 0 15px rgba(0,238,255,0.2); }
.lo-bd-aname { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 800; color: #fff; }
.lo-bd-arole  { font-family: 'Inter', sans-serif; font-size: 0.65rem; color: rgba(255,255,255,0.4); }
.lo-bd-astatus { font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 600; }
.lo-s-working    { color: #00e676; }
.lo-s-meeting    { color: #b366ff; }
.lo-s-researching{ color: #00eeff; }
.lo-s-idle       { color: #90a4ae; }
.lo-s-break      { color: #ff9100; }
.lo-bd-taskname { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; color: #fff; line-height: 1.2; }
.lo-bd-tasksub  { font-family: 'Inter', sans-serif; font-size: 0.65rem; color: rgba(255,255,255,0.4); }
.lo-bd-prog-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.lo-bd-prog-bar { flex-grow: 1; height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.lo-bd-prog-fill { height: 100%; background: linear-gradient(90deg, #ffaa00, #ff6f00); border-radius: 3px; transition: width 0.4s; }
.lo-bd-pct { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #fff; font-weight: 700; }
.lo-bd-collab-row { display: flex; align-items: center; gap: 8px; }
.lo-collab-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; background: rgba(0,0,0,0.5); cursor: pointer; }
.lo-collab-add { width: 32px; height: 32px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.25); color: rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; font-weight: 300; }
.lo-bd-minilogs { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; display: flex; flex-direction: column; gap: 2px; }
.lo-minilog-row { display: flex; gap: 8px; }
.lo-ml-time { color: rgba(255,255,255,0.4); min-width: 34px; }
.lo-ml-msg  { color: rgba(255,255,255,0.7); }
.lo-ml-msg strong { color: #fff; font-weight: 600; }
.lo-dispatch-btn { width: 100%; padding: 8px 0; background: #00eeff; border: none; color: #000; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 900; border-radius: 4px; cursor: pointer; transition: 0.15s; letter-spacing: 0.03em; box-shadow: 0 3px 12px rgba(0,238,255,0.25); }
.lo-dispatch-btn:hover { background: #80f6ff; box-shadow: 0 3px 18px rgba(0,238,255,0.45); }
.lo-bd-action-row { display: flex; gap: 6px; }
.lo-half-btn { flex: 1; padding: 5px 0; background: transparent; border: 1px solid rgba(0,238,255,0.35); color: #00eeff; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 700; cursor: pointer; transition: 0.15s; }
.lo-half-btn:hover { background: rgba(0,238,255,0.15); }
.lo-half-purple { border-color: rgba(179,102,255,0.4); color: #b366ff; }
.lo-half-purple:hover { background: rgba(179,102,255,0.1); }

/* ===========================================
   JARVIS OFFICE — ENHANCED VISUAL TREATMENT
   All selectors scoped to .lo-room-jarvis so no
   other room is affected.
=========================================== */

/* Richer ambient lighting inside the room */
.lo-room-jarvis .lor-body {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,238,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0,238,255,0.30) 0%, transparent 62%),
    linear-gradient(180deg, #04121e 0%, #03101a 55%, #020a12 100%);
}

/* Floor grid with centred glow */
.lo-room-jarvis .lr-floor-jarvis {
  background:
    radial-gradient(circle at 50% 80%, rgba(0,238,255,0.18) 0%, transparent 48%),
    repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0,238,255,0.05) 18px, rgba(0,238,255,0.05) 19px),
    repeating-linear-gradient(0deg, transparent 0, transparent 18px, rgba(0,238,255,0.04) 18px, rgba(0,238,255,0.04) 19px),
    linear-gradient(180deg, transparent 0%, rgba(0,238,255,0.10) 100%);
}

/* Ceiling glow strip (top) */
.lo-room-jarvis .jo-ceiling-strip {
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,238,255,0.55) 50%, transparent 100%);
  box-shadow: 0 4px 16px rgba(0,238,255,0.35);
  z-index: 2;
  pointer-events: none;
}

/* Data strip above the back-wall screens */
.lo-room-jarvis .jo-data-strip {
  position: absolute;
  top: 3%; left: 4%; right: 4%; height: 3%;
  background: rgba(0,238,255,0.06);
  border-top: 1px solid rgba(0,238,255,0.25);
  border-bottom: 1px solid rgba(0,238,255,0.15);
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.lo-room-jarvis .jo-data-strip::before {
  content: '';
  position: absolute; top: 35%; left: 0; right: 0; height: 30%;
  background: repeating-linear-gradient(90deg,
    rgba(0,238,255,0.35) 0px, rgba(0,238,255,0.35) 4px,
    transparent 4px, transparent 14px);
}

/* Back-wall screens: deeper interior + scanlines + glow */
.lo-room-jarvis .lrw-screen {
  background: linear-gradient(180deg, #0a1824 0%, #050f18 100%);
  border: 1px solid rgba(0,238,255,0.45);
  box-shadow: 0 0 14px rgba(0,238,255,0.22), inset 0 0 12px rgba(0,238,255,0.12);
}
.lo-room-jarvis .lrw-screen::before {
  inset: 3px;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,238,255,0.08) 0px, rgba(0,238,255,0.08) 1px,
      transparent 1px, transparent 4px),
    rgba(0,238,255,0.10);
}
.lo-room-jarvis .lrw-screen::after {
  background: rgba(0,238,255,0.5);
  box-shadow:
    0 -6px 0 rgba(0,238,255,0.25),
    0 -12px 0 rgba(0,238,255,0.15),
    0 -18px 0 rgba(0,238,255,0.08);
}
.lo-room-jarvis .lrw-screen-b {
  border-color: rgba(0,238,255,0.65);
  box-shadow: 0 0 18px rgba(0,238,255,0.38), inset 0 0 16px rgba(0,238,255,0.22);
}

/* Central "JARVIS face" on screen B */
.lo-room-jarvis .jo-screen-face {
  position: absolute;
  top: 13%; left: 44%;
  width: 12%; height: 26%;
  border-radius: 50% / 45%;
  background: radial-gradient(circle at 50% 45%,
    rgba(128,246,255,0.55) 0%,
    rgba(0,238,255,0.18) 40%,
    transparent 68%);
  box-shadow: 0 0 14px rgba(0,238,255,0.4);
  z-index: 3;
  pointer-events: none;
  animation: joFacePulse 3.2s ease-in-out infinite;
}
.lo-room-jarvis .jo-screen-face::before,
.lo-room-jarvis .jo-screen-face::after {
  content: '';
  position: absolute; top: 38%;
  width: 14%; height: 20%; border-radius: 50%;
  background: #7ff5ff;
  box-shadow: 0 0 6px #00eeff;
}
.lo-room-jarvis .jo-screen-face::before { left: 26%; }
.lo-room-jarvis .jo-screen-face::after  { right: 26%; }
@keyframes joFacePulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Side wall panels: cyan tint + inner glow */
.lo-room-jarvis .lr-wall-panel {
  background: rgba(0,238,255,0.04);
  border-color: rgba(0,238,255,0.2);
  box-shadow: inset 0 0 8px rgba(0,238,255,0.1);
}

/* Shelves */
.lo-room-jarvis .lr-shelf {
  background: rgba(0,238,255,0.10);
  border-color: rgba(0,238,255,0.2);
}
.lo-room-jarvis .lr-shelf::before {
  background: rgba(0,238,255,0.22);
  border-color: rgba(0,238,255,0.3);
}

/* Left side desk */
.lo-room-jarvis .lr-side-desk {
  background: linear-gradient(180deg, #13273a 0%, #0a1622 100%);
  border-color: rgba(0,238,255,0.22);
  box-shadow: 0 3px 0 #040b14, inset 0 1px 0 rgba(0,238,255,0.18);
}

/* Server racks: crisper frame + subtle glow */
.lo-room-jarvis .lrp-rack {
  background: linear-gradient(180deg, #11202f 0%, #0a1622 100%);
  border-color: rgba(0,238,255,0.28);
  box-shadow: 0 0 6px rgba(0,238,255,0.18);
}

/* Curved command desk: gradient + glow edges */
.lo-room-jarvis .lrp-desk-arc {
  background: linear-gradient(180deg, #1a2e44 0%, #0c1827 100%);
  border: 1px solid rgba(0,238,255,0.45);
  box-shadow:
    0 4px 0 #050d16,
    inset 0 1px 0 rgba(0,238,255,0.4),
    inset 0 -8px 16px rgba(0,238,255,0.14),
    0 -6px 14px rgba(0,238,255,0.2);
}

/* Desk monitors: brighter screens */
.lo-room-jarvis .lrp-mon {
  border-color: rgba(0,238,255,0.35);
  box-shadow: 0 0 6px rgba(0,238,255,0.22);
}
.lo-room-jarvis .lrp-mon::before {
  background: rgba(0,238,255,0.78);
  box-shadow: inset 0 0 5px rgba(255,255,255,0.35);
}

/* Command ring platform: boosted rings + pulsing core */
.lo-room-jarvis .lrp-ring-outer {
  border: 1px solid rgba(0,238,255,0.55);
  box-shadow: 0 0 18px rgba(0,238,255,0.3), inset 0 0 22px rgba(0,238,255,0.18);
  background: radial-gradient(ellipse at center,
    rgba(0,238,255,0.12) 0%, transparent 70%);
}
.lo-room-jarvis .lrp-ring-inner {
  border: 1px solid rgba(0,238,255,0.75);
  box-shadow: 0 0 14px rgba(0,238,255,0.35), inset 0 0 14px rgba(0,238,255,0.22);
  background: radial-gradient(ellipse at center,
    rgba(0,238,255,0.22) 0%, rgba(0,238,255,0.05) 60%, transparent 100%);
}
.lo-room-jarvis .lrp-core {
  background: radial-gradient(circle, #80f6ff 0%, #00eeff 55%, rgba(0,238,255,0.2) 100%);
  border-color: #80f6ff;
  box-shadow: 0 0 18px rgba(0,238,255,0.7), 0 0 30px rgba(0,238,255,0.35);
  animation: joCorePulse 2.4s ease-in-out infinite;
}
@keyframes joCorePulse {
  0%, 100% { box-shadow: 0 0 16px rgba(0,238,255,0.6), 0 0 28px rgba(0,238,255,0.3); }
  50%      { box-shadow: 0 0 22px rgba(0,238,255,0.85), 0 0 40px rgba(0,238,255,0.45); }
}

/* Holographic beam rising from the core */
.lo-room-jarvis .jo-holo-beam {
  position: absolute;
  left: 50%; bottom: 17%;
  transform: translateX(-50%);
  width: 14%; height: 36%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,238,255,0.22) 55%,
    rgba(0,238,255,0.45) 100%);
  filter: blur(4px);
  z-index: 1;
  pointer-events: none;
  animation: joBeamFlicker 3.5s ease-in-out infinite;
}
@keyframes joBeamFlicker {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* Pulse ring expanding under the main bot */
.lo-room-jarvis .jo-pulse-ring {
  position: absolute;
  left: 50%; bottom: 21%;
  transform: translateX(-50%);
  width: 24%; height: 9%;
  border-radius: 50%;
  border: 1px solid rgba(0,238,255,0.55);
  z-index: 1;
  pointer-events: none;
  animation: joPulseExpand 3s ease-out infinite;
}
@keyframes joPulseExpand {
  0%   { transform: translateX(-50%) scale(0.6); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(1.3); opacity: 0; }
}

/* Wall LED strips: stronger glow */
.lo-room-jarvis .lr-led-cyan {
  background: linear-gradient(180deg, rgba(0,238,255,0.75) 0%, rgba(0,238,255,0.15) 100%);
  box-shadow: 3px 0 10px rgba(0,238,255,0.45);
}

/* Large Jarvis bot: stronger aura */
.lo-room-jarvis .lo-bot-lg {
  box-shadow:
    0 0 16px rgba(0,238,255,0.8),
    0 0 32px rgba(0,238,255,0.35),
    inset 0 0 8px rgba(0,238,255,0.3);
}

/* ============================================================
   MINI-ROBOT COMPOSITION
   Shared by room bots (.lo-bot), sidebar roster avatars
   (.lo-ac-avatar), bottom deck avatar (.lo-bd-avatar) and
   collaborator chips (.lo-collab-dot). Colour is driven by
   the inherited `color:` (from .lo-bot-xx or .lo-av-xx).
============================================================ */

.lob-face {
  width: 72%; height: 52%;
  background: #02080e;
  border-radius: 32%;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.85);
  border: 1px solid rgba(255,255,255,0.06);
}
.lob-eye {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
  animation: lobEyeGlow 2.2s ease-in-out infinite;
}
@keyframes lobEyeGlow {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}

/* Room bots: robot-head shape overriding old circle style */
.lo-bot {
  width: 30px; height: 34px;
  border-radius: 48% 48% 40% 40%;
  background: linear-gradient(180deg, #0f2338 0%, #081320 100%);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px;
  font-size: 0;
  overflow: visible;
  backdrop-filter: none;
}
.lo-bot::after {
  content: '';
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 2px; border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
  opacity: 0.85;
}
.lo-bot-lg {
  width: 38px; height: 42px;
  padding-top: 5px;
}
.lo-bot-lg::before {
  content: '';
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 4px; border-radius: 1px;
  background: currentColor;
  box-shadow: 0 -4px 0 currentColor, 0 0 6px currentColor;
}
.lo-bot-lg .lob-eye { width: 5px; height: 5px; }

/* Sidebar roster avatar: robot bust */
.lo-ac-avatar {
  width: 38px; height: 40px;
  border-radius: 48% 48% 40% 40%;
  background: linear-gradient(180deg, #0f2338 0%, #081320 100%);
  border: 1.5px solid rgba(0,238,255,0.25);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px;
  font-size: 0;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lo-ac-avatar .lob-face { width: 74%; height: 46%; }
.lo-ac-avatar .lob-eye  { width: 5px; height: 5px; }
.lo-ac-avatar::before {
  content: '';
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 4px; border-radius: 1px;
  background: currentColor;
  box-shadow: 0 -4px 0 currentColor, 0 0 4px currentColor;
  opacity: 0.75;
}
.lo-ac-avatar::after {
  content: '';
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 2px; border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
  opacity: 0.85;
}
.lo-agent-card.active .lo-ac-avatar {
  border-color: currentColor;
  box-shadow: 0 0 12px currentColor;
}

/* Bottom deck avatar: large detailed robot bust */
.lo-bd-avatar {
  width: 58px; height: 62px;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(180deg, #143456 0%, #071120 100%);
  border: 2px solid currentColor;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px;
  font-size: 0;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  box-shadow: 0 0 18px currentColor, inset 0 0 10px rgba(0,0,0,0.55);
}
.lo-bd-avatar .lob-face {
  width: 72%; height: 42%;
  border-radius: 28%;
  gap: 7px;
}
.lo-bd-avatar .lob-eye { width: 7px; height: 7px; }
.lo-bd-avatar::before {
  content: '';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 5px; border-radius: 1px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 0 6px currentColor;
}
.lo-bd-avatar::after {
  content: '';
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 50%; height: 3px; border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* Collaborator chips: mini robots */
.lo-collab-dot {
  width: 32px; height: 34px;
  border-radius: 48% 48% 40% 40% !important;
  border: 2px solid;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px;
  font-size: 0;
  background: linear-gradient(180deg, #0f2338 0%, #081320 100%);
  cursor: pointer;
  overflow: visible;
  position: relative;
}
.lo-collab-dot .lob-face { width: 74%; height: 48%; gap: 3px; }
.lo-collab-dot .lob-eye  { width: 3.5px; height: 3.5px; background: currentColor; box-shadow: 0 0 3px currentColor; }
.lo-collab-dot::after {
  content: '';
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 2px; border-radius: 1px;
  background: currentColor; box-shadow: 0 0 3px currentColor; opacity: 0.75;
}

/* Per-agent identity colours (sidebar + bottom deck) */
.lo-av-scribe    { color: #00eeff; }
.lo-av-atlas     { color: #4fc3f7; }
.lo-av-sentinel  { color: #5dd8e8; }
.lo-av-pixel     { color: #b366ff; }
.lo-av-nova      { color: #00eeff; }
.lo-av-vibe      { color: #c084fc; }
.lo-av-trendy    { color: #ff3366; }
.lo-av-clawd     { color: #ff9100; }
.lo-av-catalyst  { color: #00e676; }

/* ============================================================
   SECONDARY ROOM POLISH — subtle ambient lifts, scoped per room
============================================================ */

/* Strategy Room: richer holo table + room glow */
.lo-room-strategy .lor-body {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(0,230,118,0.22) 0%, transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(0,230,118,0.28) 0%, transparent 65%),
    linear-gradient(180deg, #05140c 0%, #040f08 100%);
}
.lo-room-strategy .lrw-map-wall {
  box-shadow: 0 0 16px rgba(0,230,118,0.25), inset 0 0 14px rgba(0,230,118,0.1);
}
.lo-room-strategy .lrp-holo-table,
.lo-room-strategy .lrp-holo-glow {
  box-shadow: 0 0 18px rgba(0,230,118,0.45);
}

/* Research Lab: brighter purple glow + data panel pulse */
.lo-room-research .lor-body {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(179,102,255,0.2) 0%, transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(179,102,255,0.24) 0%, transparent 62%),
    linear-gradient(180deg, #0b0517 0%, #07040f 100%);
}
.lo-room-research .lrw-data-panel {
  box-shadow: 0 0 14px rgba(179,102,255,0.3), inset 0 0 10px rgba(179,102,255,0.15);
}
.lo-room-research .lr-wall-screen-lg {
  box-shadow: 0 0 14px rgba(179,102,255,0.25), inset 0 0 12px rgba(179,102,255,0.15);
}

/* Content Studio: brighter greenscreen + spotlight cones */
.lo-room-content .lor-body {
  background:
    radial-gradient(ellipse at 50% 65%, rgba(255,145,0,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255,145,0,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #140800 0%, #0c0500 100%);
}
.lo-room-content .lrp-greenscreen {
  box-shadow: 0 0 18px rgba(0,230,118,0.4), inset 0 0 14px rgba(0,230,118,0.2);
}
.lo-room-content .lrp-spotlight {
  filter: drop-shadow(0 0 6px rgba(255,145,0,0.6));
}

/* Automation Bay: conveyor highlight + warning glow */
.lo-room-automation .lor-body {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255,214,0,0.16) 0%, transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(255,214,0,0.22) 0%, transparent 62%),
    linear-gradient(180deg, #110f00 0%, #0a0800 100%);
}
.lo-room-automation .lrp-conveyor {
  box-shadow: 0 0 12px rgba(255,214,0,0.3), inset 0 0 8px rgba(255,214,0,0.15);
}
.lo-room-automation .lrw-ctrl-wall {
  box-shadow: 0 0 12px rgba(255,214,0,0.2), inset 0 0 10px rgba(255,214,0,0.1);
}

/* Analytics: deeper red dashboards + pulse on chart strip */
.lo-room-analytics .lor-body {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(234,67,53,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(234,67,53,0.22) 0%, transparent 62%),
    linear-gradient(180deg, #160402 0%, #0e0302 100%);
}
.lo-room-analytics .lrw-dash-wall {
  box-shadow: 0 0 16px rgba(234,67,53,0.3), inset 0 0 14px rgba(234,67,53,0.15);
}
.lo-room-analytics .lrp-dash-mon,
.lo-room-analytics .lrp-chart-strip {
  box-shadow: 0 0 8px rgba(234,67,53,0.3);
}

/* ============================================================================
   TACTICAL — Operational clarity micro-copys.
   Distingue MONITOREO (lectura) vs ACCIÓN (interactivo) sin alterar lógica.
   Todo scoped a #view-tactical para no salpicar otras vistas.
============================================================================ */

/* Eyebrow contextual — orienta al operador sobre qué módulo está viendo */
#view-tactical .tac-context-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(126, 232, 255, 0.55);
  margin-bottom: 6px;
}
#view-tactical .tac-contact-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(126, 232, 255, 0.55);
  margin-top: 10px; margin-bottom: 6px;
}

/* Pequeño chip que marca el rol de un bloque (monitoreo / acción / mixto). */
#view-tactical .tac-role-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid;
  vertical-align: middle;
  line-height: 1.4;
}
#view-tactical .tac-role-monitor {
  color: rgba(234, 246, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
#view-tactical .tac-role-action {
  color: #7EE8FF;
  background: rgba(79, 216, 255, 0.08);
  border-color: rgba(79, 216, 255, 0.32);
}
#view-tactical .tac-role-mixed {
  color: rgba(126, 232, 255, 0.85);
  background: rgba(126, 232, 255, 0.06);
  border-color: rgba(126, 232, 255, 0.22);
}

/* Section divider con role tag — fix layout para mantener centrado */
#view-tactical .tac-section-divider[data-role="monitor"] {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Bitácora: title con sub-hint — title-box vertical */
#view-tactical .tac-logs-titlebox {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
#view-tactical .tac-logs-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem; font-weight: 500;
  color: rgba(234, 246, 255, 0.42);
  letter-spacing: 0.04em; text-transform: none;
}

/* Decoración contextual: badges fila se ven aún más como contexto, no info dura */
#view-tactical .tac-badge-row {
  opacity: 0.5;
  font-size: 0.62rem;
}
#view-tactical .tac-badge-row .tac-badge,
#view-tactical .tac-badge-row .tac-meta {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

/* ============================================================================
   TACTICAL — Habitación minimalista (regla nueva)
   Propósito + estado central como protagonistas; lo decorativo a segundo plano.
============================================================================ */

/* PROPÓSITO — frase clara bajo el título grande */
#view-tactical .tac-purpose {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem; font-weight: 500;
  color: rgba(234, 246, 255, 0.78);
  letter-spacing: 0.005em;
  line-height: 1.45;
  margin-top: 6px;
  max-width: 580px;
}

/* Subtítulo `// NÚCLEO...` baja a decoración temática */
#view-tactical .tac-sub-title {
  opacity: 0.42;
  font-size: 0.7rem;
  margin-top: 2px;
}

/* ESTADO CENTRAL — pieza protagonista junto al signature */
#view-tactical .tac-state-hero {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 14px 0 6px;
  padding: 10px 16px;
  background: rgba(10, 20, 36, 0.45);
  border: 1px solid rgba(79, 216, 255, 0.22);
  border-radius: 10px;
  width: fit-content;
}
#view-tactical .tac-state-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(126, 232, 255, 0.65);
}
#view-tactical .tac-state-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem; font-weight: 800;
  color: #7EE8FF;
  letter-spacing: 0.03em;
  line-height: 1;
}
#view-tactical .tac-state-pulse {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: #4FD8FF;
  box-shadow: 0 0 10px #4FD8FF, 0 0 20px rgba(79, 216, 255, 0.4);
  animation: pulseGlow 1.8s ease-in-out infinite;
}
/* Variantes de tono según el estado del módulo */
#view-tactical .tac-state-hero[data-tone="green"]  { border-color: rgba(79, 224, 138, 0.32); }
#view-tactical .tac-state-hero[data-tone="green"]  .tac-state-value { color: #4FE08A; }
#view-tactical .tac-state-hero[data-tone="green"]  .tac-state-pulse { background: #4FE08A; box-shadow: 0 0 10px #4FE08A, 0 0 20px rgba(79, 224, 138, 0.4); }
#view-tactical .tac-state-hero[data-tone="amber"]  { border-color: rgba(255, 209, 112, 0.4); }
#view-tactical .tac-state-hero[data-tone="amber"]  .tac-state-value { color: #FFD170; }
#view-tactical .tac-state-hero[data-tone="amber"]  .tac-state-pulse { background: #FFD170; box-shadow: 0 0 10px #FFD170, 0 0 20px rgba(255, 209, 112, 0.4); }
#view-tactical .tac-state-hero[data-tone="red"]    { border-color: rgba(255, 138, 122, 0.45); }
#view-tactical .tac-state-hero[data-tone="red"]    .tac-state-value { color: #FF8A7A; }
#view-tactical .tac-state-hero[data-tone="red"]    .tac-state-pulse { background: #FF8A7A; box-shadow: 0 0 10px #FF8A7A, 0 0 20px rgba(255, 138, 122, 0.4); }
#view-tactical .tac-state-hero[data-tone="muted"]  { border-color: rgba(255, 255, 255, 0.12); opacity: 0.7; }
#view-tactical .tac-state-hero[data-tone="muted"]  .tac-state-value { color: rgba(234, 246, 255, 0.6); }
#view-tactical .tac-state-hero[data-tone="muted"]  .tac-state-pulse { background: rgba(255, 255, 255, 0.4); box-shadow: none; animation: none; }

/* METRICS STRIP — más compacto, segundo plano */
#view-tactical .tac-metrics-strip {
  opacity: 0.78;
}

/* TELEMETRÍA — collapsible con summary que conserva contexto */
#view-tactical .tac-telemetry {
  margin-top: 14px;
  border: 1px solid rgba(79, 216, 255, 0.1);
  border-radius: 10px;
  background: rgba(10, 20, 36, 0.3);
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
#view-tactical .tac-telemetry[open] {
  border-color: rgba(79, 216, 255, 0.22);
  background: rgba(10, 20, 36, 0.45);
}
#view-tactical .tac-telemetry-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
}
#view-tactical .tac-telemetry-summary::-webkit-details-marker { display: none; }
#view-tactical .tac-telemetry-summary:hover { background: rgba(79, 216, 255, 0.04); }
#view-tactical .tac-telemetry-caret {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; color: #7EE8FF;
  transition: transform 0.18s;
}
#view-tactical .tac-telemetry[open] .tac-telemetry-caret { transform: rotate(90deg); }
#view-tactical .tac-telemetry-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; font-weight: 700;
  color: #7EE8FF;
  letter-spacing: 0.16em; text-transform: uppercase;
}
#view-tactical .tac-telemetry-mini {
  display: inline-flex; gap: 14px; align-items: baseline;
  margin-left: auto;
  flex-wrap: wrap;
}
#view-tactical .tac-mini-item {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
}
#view-tactical .tac-mini-label {
  color: rgba(234, 246, 255, 0.42);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.58rem;
}
#view-tactical .tac-mini-value {
  color: rgba(234, 246, 255, 0.85);
  font-weight: 700;
}
#view-tactical .tac-telemetry .tac-stats-grid {
  padding: 6px 14px 14px;
}

/* RADAR HUD readouts — bajan a contexto ambiental, suben al hover */
#view-tactical .tac-radar-box .radar-readout {
  opacity: 0.32;
  transition: opacity 0.2s;
}
#view-tactical .tac-radar-box:hover .radar-readout {
  opacity: 0.85;
}

/* DIRECTIVA — compactar meta-block para que no compita con estado central */
#view-tactical .tac-directive .tac-dir-meta {
  opacity: 0.85;
}

/* Si el operador prefiere reduced-motion, apagamos el pulse del estado */
@media (prefers-reduced-motion: reduce) {
  #view-tactical .tac-state-pulse {
    animation: none;
  }
}