/* =============================================================================
   PORTAL COMMAND SYSTEM — reusable interaction pattern for the RonnieBot
   Customer Portal "Mission Control" redesign.

   Tokens below are copied 1:1 from index.html (:root) so every Command Room
   inherits the homepage's exact palette instead of inventing a new one.
   Do not edit the homepage to match this file — this file matches the homepage.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* --- inherited from homepage, do not diverge --- */
  --bg: #030712;
  --panel: #0b1022;
  --panel-2: #0a0f1f;
  --border: rgba(125,249,255,.16);
  --cyan: #22d3ee;
  --cyan-bright: #7df9ff;
  --blue: #2367ff;
  --purple: #8b36f3;
  --purple-2: #a855f7;
  --pink: #ef5ff8;
  --text: #ffffff;
  --text-dim: #a9c1e8;
  --text-mute: #7488ad;

  /* --- new tokens, derived from the above for the portal only --- */
  --pc-glass: rgba(11,16,34,.72);
  --pc-glass-strong: rgba(8,13,28,.88);
  --pc-glass-border: rgba(125,249,255,.22);
  --pc-glow-cyan: rgba(125,249,255,.5);
  --pc-glow-purple: rgba(139,54,243,.35);
  --pc-danger: #ef4444;
  --pc-good: #34d399;
  --pc-warn: #fbbf24;

  --pc-radius-panel: 20px;
  --pc-radius-pill: 999px;
  --pc-radius-console: 18px;

  --pc-z-topbar: 500;
  --pc-z-console: 500;
  --pc-z-room: 400;
  --pc-z-toast: 1000;

  --pc-fast: .2s ease;
  --pc-med: .35s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --pc-fast: .001s linear; --pc-med: .001s linear; }
}

/* -----------------------------------------------------------------------
   0. BASE
   ----------------------------------------------------------------------- */
.pc-scope, .pc-scope * { box-sizing: border-box; }
.pc-scope {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color: var(--text);
}
.pc-scope h1, .pc-scope h2, .pc-scope h3, .pc-scope h4 {
  font-family: 'Space Grotesk','Inter',Arial,sans-serif;
  margin: 0;
}
.pc-scope :focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 2px;
  border-radius: 6px;
}
.pc-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.pc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--pc-z-toast);
  background: var(--pc-glass-strong); color: var(--cyan-bright);
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--pc-glass-border);
}
.pc-skip-link:focus { left: 12px; top: 12px; }

/* -----------------------------------------------------------------------
   1. HOLOGRAPHIC PANEL (Level 1 tile — Business Health, Priority Actions, etc.)
   ----------------------------------------------------------------------- */
.command-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--pc-glass);
  border: 1px solid var(--border);
  border-radius: var(--pc-radius-panel);
  padding: 20px;
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: transform var(--pc-fast), border-color var(--pc-fast),
              box-shadow var(--pc-fast), background var(--pc-fast);
  overflow: hidden;
  isolation: isolate;
}
/* sheen sweep, purely decorative, disabled under reduced motion */
.command-panel::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 40%, rgba(125,249,255,.10) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.command-panel:hover::before,
.command-panel:focus-visible::before { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) {
  .command-panel::before { display: none; }
}

.command-panel:hover,
.command-panel:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(125,249,255,.45);
  background: var(--pc-glass-strong);
  box-shadow:
    0 0 0 1px rgba(125,249,255,.35),
    0 16px 34px rgba(0,0,0,.45),
    0 0 34px var(--pc-glow-cyan);
}
.command-panel:active { transform: translateY(-1px) scale(.995); }

.command-panel__icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  background: rgba(125,249,255,.08);
  border: 1px solid rgba(125,249,255,.28);
  flex: none;
}
.command-panel__title {
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
}
.command-panel__metric {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px; font-weight: 800; line-height: 1;
}
.command-panel__sub {
  font-size: 12.5px; color: var(--text-mute); line-height: 1.5;
}
.command-panel__status {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-mute);
}
.command-panel__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pc-good);
  box-shadow: 0 0 8px var(--pc-good);
}
.command-panel__dot.is-warn { background: var(--pc-warn); box-shadow: 0 0 8px var(--pc-warn); }
.command-panel__dot.is-danger { background: var(--pc-danger); box-shadow: 0 0 8px var(--pc-danger); animation: pc-pulse 1.4s ease-in-out infinite; }
@keyframes pc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .command-panel__dot.is-danger { animation: none; }
}

/* grid these panels live in on Mission Control home */
.command-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .command-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px)  { .command-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px)  { .command-grid { grid-template-columns: 1fr; } }

/* expand-out transition state, toggled by JS right before a room opens */
.command-panel.is-expanding {
  transform: scale(1.04);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 1px var(--cyan-bright), 0 0 60px var(--pc-glow-cyan);
  transition: transform var(--pc-med), box-shadow var(--pc-med);
}

/* -----------------------------------------------------------------------
   2. COMMAND ROOM (Level 2 container template)
   ----------------------------------------------------------------------- */
.command-room {
  position: fixed;
  inset: 0;
  z-index: var(--pc-z-room);
  /* HOLOGRAM REDESIGN: this used to be a solid, opaque takeover that
     completely hid the desk artwork the instant any room opened —
     confirmed by reading the actual rule that shipped here before this
     pass. That's the real reason Mission Control felt like "floating
     web cards" instead of a HUD: every room was a flat page swap, not a
     projection. Now: translucent + blurred, so the actual desk render
     stays visible (dimmed, softened) behind every room, the way a HUD
     overlays a cockpit window rather than replacing it. */
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(35,103,255,.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 20%, rgba(139,54,243,.14), transparent 60%),
    rgba(3,7,18,.62);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px) scale(.99);
  pointer-events: none;
  transition: opacity var(--pc-med), transform var(--pc-med), backdrop-filter var(--pc-med);
}
.command-room.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.command-room__header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 84px 28px 18px; /* clears fixed topbar */
  border-bottom: 1px solid var(--border);
}
.command-room__heading { display: flex; flex-direction: column; gap: 4px; }
.command-room__breadcrumb {
  font-size: 11.5px; color: var(--text-mute); letter-spacing: .06em; text-transform: uppercase;
}
.command-room__title {
  font-size: 26px; font-weight: 800;
}
.command-room__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 28px 140px; /* clears fixed console */
}
.command-room__widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .command-room__widgets { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .command-room__widgets { grid-template-columns: 1fr; } }

.command-widget {
  /* HOLOGRAM REDESIGN: was a flat, single-opacity glass rectangle, then
     a rounded glass capsule. Now: a precise chamfered HUD panel —
     angled corners instead of rounded ones, matching real sci-fi HUD
     language (Iron Man, Mass Effect) instead of a generic web card.
     Safe to cut corners here (unlike the desk-level art masks): these
     widgets live inside the translucent room layer, not on top of
     baked-in art that needs full rectangular coverage to stay hidden. */
  position: relative;
  background: linear-gradient(180deg, rgba(125,249,255,.05), rgba(11,16,34,.55));
  border: 1px solid var(--pc-glass-border);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(125,249,255,.03) inset, 0 12px 30px -18px rgba(0,0,0,.6);
  transition: border-color var(--pc-fast), box-shadow var(--pc-med), transform var(--pc-med);
}
.command-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(125,249,255,.35), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .7;
}
.command-widget:hover {
  border-color: rgba(125,249,255,.4);
  box-shadow: 0 0 0 1px rgba(125,249,255,.06) inset, 0 0 24px -4px var(--pc-glow-cyan), 0 16px 34px -18px rgba(0,0,0,.7);
  transform: translateY(-2px);
}
.command-widget h3 { font-size: 14px; margin-bottom: 10px; color: var(--text-dim); font-weight: 600; letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) {
  .command-widget, .command-widget:hover { transition: none; transform: none; }
}

/* -----------------------------------------------------------------------
   3. RETURN-TO-MISSION-CONTROL
   ----------------------------------------------------------------------- */
.command-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(125,249,255,.06);
  border: 1px solid rgba(125,249,255,.3);
  color: var(--cyan-bright);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--pc-radius-pill);
  cursor: pointer;
  transition: background var(--pc-fast), border-color var(--pc-fast), transform var(--pc-fast);
}
.command-return:hover, .command-return:focus-visible {
  background: rgba(125,249,255,.14);
  border-color: var(--cyan-bright);
  transform: translateX(-2px);
}
.command-return__icon { font-size: 14px; }

/* -----------------------------------------------------------------------
   4. FIXED TOP UNIVERSAL CONTROLS
   ----------------------------------------------------------------------- */
.command-topbar {
  position: fixed;
  top: 14px; left: 18px; right: 18px;
  z-index: var(--pc-z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}
.command-topbar__brand,
.command-topbar__actions {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pc-glass);
  border: 1px solid var(--pc-glass-border);
  border-radius: 14px;
  padding: 9px 12px;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 0 20px rgba(34,211,238,.08);
}
.command-topbar__brand strong { font-size: 14.5px; letter-spacing: .01em; }
.command-topbar__brand span { font-size: 11px; color: var(--text-mute); display: block; }

.command-icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--pc-fast), border-color var(--pc-fast), color var(--pc-fast);
}
.command-icon-btn:hover, .command-icon-btn:focus-visible {
  background: rgba(125,249,255,.08);
  border-color: rgba(125,249,255,.35);
  color: var(--cyan-bright);
}
.command-icon-btn__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--pc-danger);
  color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.command-emergency-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pc-good);
  padding: 0 4px;
}

/* -----------------------------------------------------------------------
   5. FIXED BOTTOM CONSOLE
   ----------------------------------------------------------------------- */
.command-console {
  position: fixed;
  left: 18px; right: 18px; bottom: 14px;
  z-index: var(--pc-z-console);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--pc-glass-strong);
  border: 1px solid var(--pc-glass-border);
  border-radius: var(--pc-radius-console);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 30px rgba(34,211,238,.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.command-console::-webkit-scrollbar { display: none; }
.command-console__home {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  color: #fff;
  font-weight: 800; font-size: 13px;
  padding: 11px 18px;
  border-radius: var(--pc-radius-pill);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(35,103,255,.35);
  transition: filter var(--pc-fast);
}
.command-console__home:hover, .command-console__home:focus-visible { filter: brightness(1.12); }
.command-console__divider {
  flex: none;
  width: 1px; height: 26px;
  background: rgba(148,196,255,.18);
}
.command-console__actions {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.command-quick-btn {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,196,255,.28);
  color: var(--text);
  font-size: 12.5px; font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--pc-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--pc-fast), background var(--pc-fast), transform var(--pc-fast);
}
.command-quick-btn:hover, .command-quick-btn:focus-visible {
  border-color: var(--cyan-bright);
  background: rgba(125,249,255,.08);
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------
   6. RESPONSIVE SCALING RULES (global, beyond per-component media queries)
   ----------------------------------------------------------------------- */
@media (max-width: 800px) {
  .command-topbar { top: 8px; left: 8px; right: 8px; }
  .command-topbar__brand span { display: none; }
  .command-room__header { padding: 76px 16px 14px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .command-room__body { padding: 18px 16px 128px; }
  .command-console { left: 8px; right: 8px; bottom: 8px; padding: 8px; }
  .command-quick-btn span.command-quick-btn__label { display: none; }
}

/* -----------------------------------------------------------------------
   7. ACCESSIBILITY STATES
   ----------------------------------------------------------------------- */
/* All interactive elements above already carry :focus-visible rules.
   Additional global safety nets: */
.pc-scope button, .pc-scope [role="button"] { font-family: inherit; }
.pc-scope [aria-hidden="true"] { pointer-events: none; }
.command-room[aria-hidden="true"] { visibility: hidden; }
.command-room.is-open[aria-hidden="false"] { visibility: visible; }

/* -----------------------------------------------------------------------
   8. CLASSIC PORTAL FALLBACK TOGGLE
   ----------------------------------------------------------------------- */
.command-classic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-mute);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,196,255,.2);
  border-radius: var(--pc-radius-pill);
  padding: 8px 13px;
  text-decoration: none;
  transition: color var(--pc-fast), border-color var(--pc-fast), background var(--pc-fast);
}
.command-classic-toggle:hover, .command-classic-toggle:focus-visible {
  color: var(--cyan-bright);
  border-color: rgba(125,249,255,.4);
  background: rgba(125,249,255,.06);
}

/* -----------------------------------------------------------------------
   9. TOAST NOTIFICATIONS (feedback for actions not yet wired to a backend,
      so nothing on screen is ever a silent dead click)
   ----------------------------------------------------------------------- */
.command-toast-region {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: var(--pc-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.command-toast {
  pointer-events: auto;
  background: var(--pc-glass-strong);
  border: 1px solid var(--pc-glass-border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--pc-radius-pill);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 20px rgba(34,211,238,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--pc-fast), transform var(--pc-fast);
}
.command-toast.is-visible { opacity: 1; transform: translateY(0); }

/* -----------------------------------------------------------------------
   10. HOME-PAGE FEED WIDGETS (Mission Control's own non-modal sections:
       Live Activity Feed, Bot Status Monitor, Recent Alerts, System
       Announcements, Global Activity Map placeholder)
   ----------------------------------------------------------------------- */
.mc-section-title {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 10px;
}
.mc-hero-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .mc-hero-row { grid-template-columns: 1fr; } }

.mc-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 760px) { .mc-feed-grid { grid-template-columns: 1fr; } }

.mc-feed-panel {
  background: var(--pc-glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}
.mc-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mc-feed-list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--text-dim);
  padding-bottom: 8px; border-bottom: 1px solid rgba(148,196,255,.1);
}
.mc-feed-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.mc-feed-list time { flex: none; font-size: 11px; color: var(--text-mute); font-family: 'Space Grotesk', sans-serif; }

.mc-map-placeholder {
  background: var(--pc-glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
  background-image: radial-gradient(circle at 50% 40%, rgba(125,249,255,.14), transparent 60%);
}
.mc-map-placeholder strong { font-size: 13px; }
.mc-map-placeholder span { font-size: 11.5px; color: var(--text-mute); }

.mc-briefing-panel {
  background: linear-gradient(160deg, rgba(35,103,255,.14), rgba(8,9,25,.7));
  border: 1px solid rgba(125,249,255,.22);
  border-radius: 20px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.mc-briefing-panel__top { display: flex; align-items: center; gap: 12px; }
.mc-briefing-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: conic-gradient(from 180deg, var(--cyan), var(--purple-2), var(--pink), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(125,249,255,.4);
}
.mc-briefing-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.priority-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
}
.priority-item__badge {
  flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(251,191,36,.14); color: var(--pc-warn); border: 1px solid rgba(251,191,36,.3);
}
.priority-item__label { font-size: 13px; font-weight: 700; }
.priority-item__meta { font-size: 11.5px; color: var(--text-mute); margin-left: auto; flex: none; }

.command-widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.command-widget-list li {
  font-size: 13px; color: var(--text-dim);
  padding: 8px 0; border-bottom: 1px solid rgba(148,196,255,.08);
}
.command-widget-list li:last-child { border-bottom: 0; }

/* -----------------------------------------------------------------------
   11. ART HOTSPOT OVERLAY — for full-bleed rendered scenes (same technique
       as the homepage's flat render + .spot/.halo hotspots). A single
       artist-produced image is the UI; invisible hotspots sit on top of it
       and light up on hover, exactly like the homepage's industry cards.
   ----------------------------------------------------------------------- */
.render-scene {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #03050d;
  overflow: hidden;
}
.render-scene__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.render-hotspot {
  position: absolute;
  border-radius: 14px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
.render-hotspot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color var(--pc-fast), box-shadow var(--pc-fast), background var(--pc-fast);
  pointer-events: none;
}
.render-hotspot:hover::before,
.render-hotspot:focus-visible::before {
  border-color: rgba(125,249,255,.5);
  background: rgba(125,249,255,.06);
  box-shadow:
    0 0 0 1px rgba(125,249,255,.35),
    0 0 26px rgba(125,249,255,.35),
    inset 0 0 26px rgba(125,249,255,.12);
}
.render-hotspot:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 2px;
}
.render-hotspot--pill::before { border-radius: 999px; }
.render-hotspot--tight::before { border-radius: 8px; }

/* small fixed corner control that floats over the art (not part of the
   rendered scene itself — the classic-portal toggle, same idea as the
   homepage's fixed nav, just relocated so it never sits on top of a
   meaningful part of the artwork) */
.render-floating-toggle {
  position: fixed;
  top: 14px; left: 14px;
  z-index: var(--pc-z-topbar);
}

/* -----------------------------------------------------------------------
   12. "COMING NEXT" ROOMS — same command-room shell as a real room, so a
       panel that isn't backend-wired yet still opens a full, polished
       destination instead of a toast. Nothing on the desk is a dead end.
   ----------------------------------------------------------------------- */
.coming-next-hero {
  background: linear-gradient(160deg, rgba(139,54,243,.16), rgba(8,9,25,.7));
  border: 1px solid rgba(125,249,255,.22);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 16px;
}
.coming-next-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(251,191,36,.14); color: var(--pc-warn); border: 1px solid rgba(251,191,36,.32);
  margin-bottom: 12px;
}
.coming-next-hero h3 { font-size: 18px; margin: 0 0 8px; }
.coming-next-hero p { font-size: 13.5px; color: var(--text-dim); margin: 0; line-height: 1.5; }

/* -----------------------------------------------------------------------
   13. MISSION CONTROL ENTRANCE MOVIE PLACEHOLDER SYSTEM
   ----------------------------------------------------------------------- */
.mc-entrance {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: #01020a;
  opacity: 1;
  transition: opacity .5s ease;
}
.mc-entrance.is-leaving { opacity: 0; pointer-events: none; }
.mc-entrance__frame {
  position: relative;
  width: min(92vw, 980px);
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(125,249,255,.25);
  box-shadow: 0 0 60px rgba(35,103,255,.22), 0 0 120px rgba(139,54,243,.14);
  background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(35,103,255,.18), transparent 60%), #030712;
}
.mc-entrance__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-entrance__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 10px; padding: 30px;
}
.mc-entrance__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(125,249,255,.05) 0px, transparent 2px, transparent 4px);
  animation: mc-scan 5s linear infinite;
}
@keyframes mc-scan { from { background-position: 0 0; } to { background-position: 0 120px; } }
.mc-entrance__badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pc-warn); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
  padding: 4px 10px; border-radius: 999px;
}
.mc-entrance__title {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px,5vw,46px); font-weight: 800;
  margin: 4px 0 0; letter-spacing: .04em;
  background: linear-gradient(90deg, var(--cyan-bright), var(--purple-2), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mc-entrance__sub { font-size: 13px; color: var(--text-dim); margin: 0; }
.mc-entrance__hint { font-size: 11.5px; color: var(--text-mute); max-width: 460px; margin: 6px 0 0; line-height: 1.5; }
.mc-entrance__hint code { color: var(--cyan-bright); background: rgba(125,249,255,.08); padding: 1px 5px; border-radius: 5px; }
.mc-entrance__skip {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  background: var(--pc-glass-strong); border: 1px solid var(--pc-glass-border); color: var(--text);
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.mc-entrance__skip:hover, .mc-entrance__skip:focus-visible { border-color: var(--cyan-bright); color: var(--cyan-bright); }

.mc-replay-intro {
  color: #dbeafe; text-decoration: none; font-size: 12px; font-weight: 700;
  padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(125,249,255,.25);
  background: rgba(8,16,40,.5); cursor: pointer;
}
.mc-replay-intro:hover, .mc-replay-intro:focus-visible { border-color: rgba(125,249,255,.6); color: var(--cyan-bright); }

/* -----------------------------------------------------------------------
   14. RONNIE HOLOGRAM GUIDE + "SUMMON RONNIE"
   ----------------------------------------------------------------------- */
.summon-ronnie-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  color: #f8fafc;
  background: linear-gradient(120deg, rgba(35,103,255,.35), rgba(139,54,243,.35));
  border: 1px solid rgba(125,249,255,.4);
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 18px rgba(125,249,255,.18);
  animation: mc-summon-pulse 2.6s ease-in-out infinite;
}
.summon-ronnie-btn:hover, .summon-ronnie-btn:focus-visible {
  border-color: var(--cyan-bright); box-shadow: 0 0 26px rgba(125,249,255,.32);
}
.summon-ronnie-btn__icon { filter: drop-shadow(0 0 6px rgba(125,249,255,.7)); }
@keyframes mc-summon-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(125,249,255,.16); }
  50% { box-shadow: 0 0 26px rgba(125,249,255,.36); }
}

.ronnie-hologram-overlay {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--pc-med);
}
.ronnie-hologram-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.ronnie-hologram-overlay__backdrop {
  position: absolute; inset: 0; background: rgba(2,4,14,.72); backdrop-filter: blur(4px);
}
.ronnie-hologram-overlay__pod {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: min(92vw, 460px);
}
.ronnie-holo {
  position: relative;
  width: 168px; height: 168px;
  display: flex; align-items: center; justify-content: center;
}
.ronnie-holo__ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(125,249,255,.45);
  box-shadow: 0 0 22px rgba(125,249,255,.28), inset 0 0 22px rgba(125,249,255,.14);
}
.ronnie-holo__ring--outer { inset: 0; animation: mc-holo-spin 7s linear infinite; }
.ronnie-holo__ring--inner { inset: 22px; border-color: rgba(168,85,247,.5); animation: mc-holo-spin 5s linear infinite reverse; }
@keyframes mc-holo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ronnie-holo__figure {
  position: relative; width: 108px; height: 108px; border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 18px rgba(125,249,255,.55)) saturate(1.3) brightness(1.08);
  mix-blend-mode: screen;
  animation: mc-holo-flicker 3.2s ease-in-out infinite;
}
@keyframes mc-holo-flicker {
  0%, 100% { opacity: 1; }
  46% { opacity: 1; }
  48% { opacity: .78; }
  50% { opacity: 1; }
  82% { opacity: 1; }
  84% { opacity: .85; }
  86% { opacity: 1; }
}
.ronnie-holo__base {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 130px; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(125,249,255,.55), transparent 70%);
  filter: blur(1px);
}
.ronnie-holo__briefing { width: 100%; }
.ronnie-holo__tip { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin: 0; }
body.ronnie-holo-open { overflow: hidden; }

@media (max-width: 700px) {
  .summon-ronnie-btn span:not(.summon-ronnie-btn__icon) { display: none; }
}

/* -----------------------------------------------------------------------
   15. BUSINESS CHANNEL STATUS BAR (customer-safe replacement for the
       vendor-labeled system health strip baked into the desk render)

       .mc-channel-bar is a full-opacity MASK — flat color, zero alpha,
       matched to the scene's own ambient dark tone — covering exactly the
       region of the render where the old vendor strip is printed. It has
       no border/glow of its own so it reads as part of the desk, not as
       an obvious pasted rectangle. The actual visible UI is the separate,
       genuinely thin .mc-channel-bar__items line anchored near the
       bottom of that masked region.
   ----------------------------------------------------------------------- */
.mc-channel-bar {
  position: absolute;
  background: #03060f; /* flat, fully opaque — matches .render-scene/body bg, no alpha anywhere */
}
.mc-channel-bar__items {
  position: absolute;
  left: 0; right: 0; bottom: 8%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 1%;
  padding: 5px 2%;
  min-width: 0;
  background: rgba(125,249,255,.03);
  border-top: 1px solid rgba(125,249,255,.14);
  border-bottom: 1px solid rgba(125,249,255,.05);
}
.mc-channel {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 3px 4px;
  cursor: pointer;
  color: inherit;
  min-width: 0;
}
.mc-channel__dot {
  flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pc-good);
  box-shadow: 0 0 6px var(--pc-good);
}
.mc-channel[data-status="warn"] .mc-channel__dot { background: var(--pc-warn); box-shadow: 0 0 6px var(--pc-warn); }
.mc-channel[data-status="bad"]  .mc-channel__dot { background: var(--pc-danger); box-shadow: 0 0 6px var(--pc-danger); animation: pc-pulse 1.4s ease-in-out infinite; }
.mc-channel__label {
  font-size: 10.5px; font-weight: 700; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-channel:hover .mc-channel__label,
.mc-channel:focus-visible .mc-channel__label { color: var(--cyan-bright); }
.mc-channel__tooltip {
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--pc-glass-strong);
  border: 1px solid var(--pc-glass-border);
  color: var(--text);
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  padding: 7px 10px; border-radius: 10px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--pc-fast), transform var(--pc-fast);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  z-index: 5;
}
.mc-channel:hover .mc-channel__tooltip,
.mc-channel:focus-visible .mc-channel__tooltip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (max-width: 900px) {
  .mc-channel__label { font-size: 9.5px; }
}
@media (max-width: 640px) {
  .mc-channel__label { display: none; }
  .mc-channel { padding: 3px 6px; }
}

/* -----------------------------------------------------------------------
   16. DYNAMIC GREETING (masks the baked-in "Good morning, Jodi…" strip)
   ----------------------------------------------------------------------- */
.mc-greeting-mask {
  position: absolute;
  background: #091327; /* flat, opaque — matches the console panel's ambient tone */
}
.mc-greeting {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.mc-greeting p {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(10px, 1.05vw, 14px);
  line-height: 1.3;
  color: #d7e4ff;
  font-weight: 500;
}
.mc-greeting p:first-child { color: #ffffff; font-weight: 700; }

/* -----------------------------------------------------------------------
   16B. RONNIE SIGNAL — the signature moment. Ronnie is the center of
   Mission Control; information orbits her, not the other way around.
   Three concentric rings pulse outward from behind her portrait, slow
   and quiet — a broadcast, not a special effect. This is the one bold
   gesture in this redesign; everything else stays disciplined around it
   (see frontend-design skill: "spend your boldness in one place").
   Purely decorative — position is fixed relative to the known portrait
   location, doesn't need to track any other element.
   ----------------------------------------------------------------------- */
.mc-ronnie-signal {
  position: absolute;
  left: 35.5%; top: 11%; width: 13%; height: 26%;
  pointer-events: none;
  z-index: 1;
}
.mc-ronnie-signal span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(125,249,255,.35);
  animation: ronnieSignalPulse 4.5s ease-out infinite;
}
.mc-ronnie-signal span:nth-child(2) { animation-delay: 1.5s; }
.mc-ronnie-signal span:nth-child(3) { animation-delay: 3s; }
@keyframes ronnieSignalPulse {
  0% { transform: scale(.75); opacity: 0; }
  15% { opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-ronnie-signal span { animation: none; opacity: 0; }
}

/* -----------------------------------------------------------------------
   17. AI WORKFORCE STATUS — live per-specialist activity cards
   ----------------------------------------------------------------------- */
.workforce-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.workforce-status-card { display: flex; align-items: center; gap: 12px; background: var(--pc-glass); border: 1px solid var(--pc-glass-border); border-radius: 14px; padding: 12px 14px; }
.workforce-status-card strong { display: block; font-size: 13.5px; color: var(--text); }
.workforce-status-card span { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.workforce-status-card .wfDot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-mute); }
.workforce-status-card.is-busy .wfDot { background: var(--pc-good); box-shadow: 0 0 8px var(--pc-good); animation: pc-pulse 1.8s ease-in-out infinite; }
.workforce-status-card.is-idle .wfDot { background: var(--pc-warn); box-shadow: 0 0 6px var(--pc-warn); }

/* -----------------------------------------------------------------------
   18. GENERIC IN-ROOM TABS (Outbound Command Center, Global Activity layers,
       Ronnie briefing cadence, etc.)
   ----------------------------------------------------------------------- */
.wf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.wf-tab-btn {
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  background: var(--pc-glass); border: 1px solid var(--pc-glass-border);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.wf-tab-btn.is-active { color: #03121a; background: var(--cyan-bright); border-color: var(--cyan-bright); box-shadow: 0 0 16px rgba(125,249,255,.4); }
.wf-tab-panel {
  display: none;
  background: rgba(6,10,24,.55);
  border: 1px solid var(--pc-glass-border);
  border-radius: 16px;
  padding: 18px;
  animation: wfPanelIn .22s ease;
}
.wf-tab-panel.is-active { display: block; }
@keyframes wfPanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.wf-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.wf-form-grid label { display: block; font-size: 11.5px; color: var(--text-mute); margin-bottom: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wf-form-grid input, .wf-form-grid textarea, .wf-form-grid select {
  width: 100%; background: rgba(4,10,26,.7); border: 1px solid var(--pc-glass-border); border-radius: 8px;
  color: var(--text); font-size: 13px; padding: 8px 10px; font-family: inherit;
}
.wf-form-grid .wf-full { grid-column: 1 / -1; }
.wf-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wf-chip { font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--pc-glass); border: 1px solid var(--pc-glass-border); padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.wf-chip.is-on { color: #03121a; background: var(--pc-good); border-color: var(--pc-good); }
.wf-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--pc-glass-border); font-size: 13px; color: var(--text-dim); }
.wf-toggle-row:last-child { border-bottom: none; }
.wf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wf-table th { text-align: left; color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--pc-glass-border); }
.wf-table td { padding: 7px 8px; border-bottom: 1px solid rgba(125,249,255,.06); color: var(--text-dim); }
.wf-emergency-btn { background: linear-gradient(90deg,#dc2626,#f87171); color: #fff; font-weight: 800; border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer; font-size: 13px; }

/* -----------------------------------------------------------------------
   19. TODAY'S SAVINGS
   ----------------------------------------------------------------------- */
.todays-savings-band {
  margin-top: 20px; padding: 22px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(52,211,153,.14), rgba(35,103,255,.08));
  border: 1px solid rgba(52,211,153,.28);
}
.todays-savings-band h3 { font-size: 17px; margin: 0 0 4px; }
.savings-sub { font-size: 12.5px; color: var(--text-mute); margin: 0 0 16px; }
.savings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 14px; }
.savings-item { text-align: center; }
.savings-item strong { display: block; font-size: 22px; font-weight: 800; color: var(--pc-good); font-family: 'Space Grotesk', sans-serif; }
.savings-item span { display: block; font-size: 11px; color: var(--text-mute); margin-top: 3px; }

/* -----------------------------------------------------------------------
   20. AI WORKFORCE POWER (Mission Control's own wallet room)
   ----------------------------------------------------------------------- */
.awp-core-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.awp-core { position: relative; width: 130px; height: 130px; flex: none; }
.awp-core svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.awp-core .awpTrack { fill: none; stroke: rgba(125,249,255,.14); stroke-width: 10; }
.awp-core .awpFill { fill: none; stroke-width: 10; stroke-linecap: round; stroke: var(--cyan-bright); filter: drop-shadow(0 0 10px rgba(125,249,255,.6)); transition: stroke-dashoffset 1s ease, stroke .4s; }
.awp-core.status-low .awpFill { stroke: var(--pc-warn); filter: drop-shadow(0 0 10px rgba(251,191,36,.6)); }
.awp-core.status-critical .awpFill { stroke: var(--pc-danger); filter: drop-shadow(0 0 10px rgba(239,68,68,.65)); }
.awp-core-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.awp-core-center strong { font-size: 21px; font-weight: 800; color: var(--text); }
.awp-core-center span { font-size: 9.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
@keyframes awpRecharge { 0% { filter: brightness(1); } 40% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
.awp-core.recharging .awpFill { animation: awpRecharge 1.1s ease; }
.awp-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1 1 320px; }
.awp-stat { background: var(--pc-glass); border: 1px solid var(--pc-glass-border); border-radius: 10px; padding: 10px 12px; }
.awp-stat span { display: block; font-size: 10.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.awp-stat strong { font-size: 15px; color: var(--text); }
.awp-stat strong.awp-stat-pending { font-size: 11px; font-weight: 600; font-style: italic; color: var(--text-mute); }
.awp-policy-note { font-size: 11.5px; color: var(--text-mute); margin: 10px 0 18px; }
.awp-ledger-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.awp-ledger-table th { text-align: left; color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--pc-glass-border); }
.awp-ledger-table td { padding: 7px 8px; border-bottom: 1px solid rgba(125,249,255,.06); color: var(--text-dim); }
.awp-ledger-table td.is-credit { color: var(--pc-good); font-weight: 700; }
.awp-ledger-table td.is-debit { color: var(--pc-danger); font-weight: 700; }

/* -----------------------------------------------------------------------
   22. RECENT CONVERSATION SUMMARIES
   ----------------------------------------------------------------------- */
.convo-summaries { margin-top: 22px; }
.convo-summaries__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.convo-summaries__head h3 { font-size: 16px; margin: 0; }
.convo-summaries__loading, .convo-summaries__empty { font-size: 12.5px; color: var(--text-mute); }
.convo-summaries__list { display: flex; flex-direction: column; gap: 10px; }
.convo-card { background: var(--pc-glass); border: 1px solid var(--pc-glass-border); border-radius: 14px; padding: 14px 16px; }
.convo-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.convo-card__who { font-size: 13.5px; font-weight: 700; color: var(--text); }
.convo-card__meta { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.convo-card__status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: rgba(52,211,153,.14); color: var(--pc-good); border: 1px solid rgba(52,211,153,.3); white-space: nowrap; }
.convo-card__reason { font-size: 12px; color: var(--cyan-bright); font-weight: 700; margin-bottom: 4px; }
.convo-card__summary { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
.convo-card__flags { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-mute); margin-bottom: 8px; }
.convo-card__flags b { color: var(--text-dim); }
.convo-card__links { display: flex; gap: 12px; flex-wrap: wrap; }
.convo-card__links a, .convo-card__links span { font-size: 11.5px; font-weight: 700; color: var(--cyan-bright); text-decoration: none; }
.convo-card__links span.is-unavailable { color: var(--text-mute); font-weight: 600; }
.convo-summaries__demo-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pc-warn); margin-bottom: 10px; }

/* -----------------------------------------------------------------------
   24. TIME RANGE FILTER (Today / This Week / This Month / All Time)
   Shared component applied to every panel showing real, filterable data.
   ----------------------------------------------------------------------- */
.time-range-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.time-range-bar select {
  background: rgba(4,10,26,.7); border: 1px solid var(--pc-glass-border); border-radius: 8px;
  color: var(--text); font-size: 12.5px; font-weight: 700; padding: 7px 10px;
}
.time-range-reset { font-size: 11px; color: var(--text-mute); display: flex; align-items: center; gap: 5px; }
.time-range-reset .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-bright); flex: none; }

/* -----------------------------------------------------------------------
   23. RONNIE CASCADE TRANSFER™ — V104A settings + routing brain
   ----------------------------------------------------------------------- */
.cascade-status-banner {
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.35);
  border-radius: 12px; padding: 12px 16px; font-size: 12.5px; color: var(--pc-warn);
  line-height: 1.5; margin-bottom: 20px;
}
.cascade-section-title { font-size: 15px; margin: 22px 0 10px; color: var(--text); }
.wf-table-wrap { overflow-x: auto; }
.cascade-help-text { font-size: 12px; color: var(--text-mute); margin: 0 0 10px; }
.cascade-status-line { font-size: 12px; color: var(--text-mute); margin-top: 8px; min-height: 16px; }
.cascade-route-toggle { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid; cursor: pointer; background: transparent; }
.cascade-route-toggle.is-on { color: var(--pc-good); border-color: var(--pc-good); }
.cascade-route-toggle.is-off { color: var(--text-mute); border-color: var(--pc-glass-border); }
.cascade-route-delete { font-size: 11px; font-weight: 700; color: var(--pc-danger); background: transparent; border: 1px solid rgba(239,68,68,.4); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.cascade-attempt-log, .cascade-billing-preview { margin-top: 18px; }
.cascade-attempt-log h4, .cascade-billing-preview h4 { font-size: 13px; color: var(--text); margin: 0 0 8px; }
.cascade-run-tag { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pc-warn); background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.cascade-step-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--pc-glass); border: 1px solid var(--pc-glass-border); margin-bottom: 6px; font-size: 12.5px; }
.cascade-step-row .step-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(125,249,255,.12); color: var(--cyan-bright); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cascade-step-row .step-agent { flex: 1; color: var(--text); font-weight: 700; }
.cascade-step-status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.cascade-step-status.st-connected { background: rgba(52,211,153,.16); color: var(--pc-good); }
.cascade-step-status.st-no_answer, .cascade-step-status.st-busy, .cascade-step-status.st-failed, .cascade-step-status.st-skipped { background: rgba(148,163,184,.14); color: var(--text-mute); }
.cascade-step-status.st-no_press1 { background: rgba(251,191,36,.14); color: var(--pc-warn); }
.cascade-outcome-line { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }

/* -----------------------------------------------------------------------
   26. BUSINESS ACTIVITY — real calls-by-hour chart (replaces the fake
       geographic heat map)
   ----------------------------------------------------------------------- */
.biz-hours-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 10px 0; }
.biz-hour-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.biz-hour-bar__fill { width: 100%; background: linear-gradient(180deg, var(--cyan-bright), rgba(125,249,255,.25)); border-radius: 3px 3px 0 0; min-height: 2px; }
.biz-hour-bar__label { font-size: 8px; color: var(--text-mute); margin-top: 4px; writing-mode: vertical-rl; text-orientation: mixed; height: 22px; }

/* -----------------------------------------------------------------------
   25. PRIORITY ACTIONS — mask + real-data overlay (replaces baked-in
       Orion/Sarah Johnson art)
   ----------------------------------------------------------------------- */
.mc-priority-mask {
  position: absolute;
  background: #06122e; /* flat, opaque, sharp rectangle — matches this card's ambient panel tone. NEVER made translucent AND NEVER given border-radius: rounding an opaque div's corners makes those corners transparent, which would let baked-in fake data peek through exactly at the corners. This hides real fake data in the art; only the glow below is decorative. */
  box-shadow: 0 0 40px -8px rgba(125,249,255,.18);
}
.mc-priority-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', Arial, sans-serif;
  /* HUD shape, content layer only — never applied to .mc-priority-mask.
     Angled top-left and bottom-right corners instead of a plain
     rectangle, matching real sci-fi HUD language (Iron Man, Mass
     Effect) rather than a rounded web card. Safe here specifically
     because the opaque mask beneath this is a full, uncut rectangle —
     this shape only affects the overlay's own background/border, not
     what's hidden underneath. */
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background: linear-gradient(160deg, rgba(125,249,255,.05), rgba(4,10,26,.35));
  border: 1px solid rgba(125,249,255,.22);
  padding: 12px 14px;
}
.mc-priority-overlay::before {
  /* corner accent ticks at the two chamfered corners — the classic HUD
     "bracket" cue, reinforcing the cut rather than hiding it */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(125,249,255,.55) 0, rgba(125,249,255,.55) 1.5px, transparent 1.5px) top left / 14px 14px no-repeat,
    linear-gradient(-45deg, rgba(125,249,255,.55) 0, rgba(125,249,255,.55) 1.5px, transparent 1.5px) bottom right / 14px 14px no-repeat;
}
.mc-priority-overlay__title {
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 800;
  letter-spacing: .04em;
  color: #e7edf7;
  margin-bottom: 8px;
  flex: none;
}
.mc-priority-overlay__title span { color: #7ea6ff; font-weight: 700; }
.mc-priority-overlay__list { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.mc-priority-overlay__loading, .mc-priority-overlay__empty {
  font-size: clamp(8.5px, 0.78vw, 11px); color: #7f8dae; line-height: 1.4;
}

/* -----------------------------------------------------------------------
   27. HOLOGRAPHIC EMPTY STATE — shared, replaces plain gray italic text
   across every "Not tracked yet" / "No data yet" instance in the app.
   The room should still feel alive with zero data — a soft breathing
   glow and a centered icon read as "waiting," not "broken" or "missing."
   ----------------------------------------------------------------------- */
.holo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 22px 16px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.5;
}
.holo-empty__icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(125,249,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: radial-gradient(circle, rgba(125,249,255,.12), transparent 70%);
  animation: holoBreathe 3.2s ease-in-out infinite;
}
.holo-empty__text { color: var(--text-mute); max-width: 30ch; }
@keyframes holoBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125,249,255,.25); opacity: .75; }
  50% { box-shadow: 0 0 16px 4px rgba(125,249,255,.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .holo-empty__icon { animation: none; }
}
.holo-inline-empty {
  color: var(--text-mute) !important;
  font-style: normal !important;
  font-size: 13px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.holo-inline-empty::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(125,249,255,.5);
  box-shadow: 0 0 6px 1px rgba(125,249,255,.4);
  flex: none;
  animation: holoDotPulse 2.4s ease-in-out infinite;
}
@keyframes holoDotPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .holo-inline-empty::before { animation: none; }
}

/* -----------------------------------------------------------------------
   28. BUSINESS ACTIVITY — ambient "living" background. Slow-drifting
   glow fields suggest ongoing activity without literal, fragile
   line-drawing between elements. Sits behind the room's real content
   (z-index below .command-room__body), never competes with it.
   ----------------------------------------------------------------------- */
.mc-alive-room::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(125,249,255,.08), transparent 35%),
    radial-gradient(circle at 80% 60%, rgba(139,54,243,.07), transparent 40%),
    radial-gradient(circle at 50% 85%, rgba(239,95,248,.05), transparent 35%);
  background-size: 180% 180%;
  animation: aliveDrift 22s ease-in-out infinite;
}
.mc-alive-room .command-room__body { position: relative; z-index: 1; }
@keyframes aliveDrift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 100%; }
  50% { background-position: 20% 30%, 70% 60%, 40% 70%; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-alive-room::before { animation: none; }
}

/* -----------------------------------------------------------------------
   29. CORNER BADGE — for large legacy card regions with no dedicated
   small instrument in the artwork. The mask underneath still covers the
   full original card (required to hide baked-in fake data), but the
   VISIBLE content is now a small indicator light in one corner, not a
   panel filling the whole region. The rest of that region stays dark —
   deliberately, like an unlit section of a console next to one active
   indicator, not a mistake or an unfinished panel.
   ----------------------------------------------------------------------- */
.mc-corner-badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 9px;
  background: linear-gradient(160deg, rgba(125,249,255,.07), rgba(4,10,26,.4));
  border: 1px solid rgba(125,249,255,.28);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
}
.mc-corner-badge__label { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7ea6ff; }
.mc-corner-badge__value { font-size: clamp(11px, 1.1vw, 15px); font-weight: 800; color: #eef3ff; line-height: 1.1; }
.mc-corner-badge:hover { border-color: rgba(125,249,255,.55); box-shadow: 0 0 14px -2px rgba(125,249,255,.35); }
.mc-corner-badge .wfDot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-bright); display: inline-block; margin-right: 4px; box-shadow: 0 0 5px 1px rgba(125,249,255,.6); }
.mc-priority-overlay__item {
  background: rgba(125,249,255,.06);
  border: 1px solid rgba(125,249,255,.14);
  border-radius: 7px;
  padding: 5px 7px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.mc-priority-overlay__item strong { display: block; font-size: clamp(8.5px, 0.8vw, 11px); color: #eef3ff; font-weight: 700; line-height: 1.25; }
.mc-priority-overlay__item span { display: block; font-size: clamp(7.5px, 0.7vw, 9.5px); color: #93a3c4; margin-top: 1px; }
.mc-priority-overlay__viewall {
  flex: none;
  margin-top: 8px;
  background: transparent;
  border: 0;
  color: #7ea6ff;
  font-size: clamp(8.5px, 0.8vw, 11px);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

/* -----------------------------------------------------------------------
   21. ILLUMINATE SPOTLIGHTS (Summon Ronnie references panels)
   ----------------------------------------------------------------------- */
.mc-illuminate-spot {
  position: absolute;
  border-radius: 14px;
  border: 2px solid rgba(125,249,255,0);
  box-shadow: 0 0 0 rgba(125,249,255,0);
  pointer-events: none;
  transition: border-color .5s ease, box-shadow .5s ease;
  z-index: 4;
}
.mc-illuminate-spot.is-lit {
  border-color: rgba(125,249,255,.65);
  box-shadow: 0 0 34px rgba(125,249,255,.35), inset 0 0 26px rgba(125,249,255,.12);
}