/* AMBIENT AI MODE — presentation of the same stage, same components.
   Dashboard mode is untouched: every rule here is scoped to .mode-ambient / .amb*. */

/* ---------- ambient layer is invisible in Dashboard ---------- */
.amb { left: 0; top: 0; width: 1536px; height: 1024px; pointer-events: none; display: none; }
.mode-ambient .amb { display: block; }
.amb > * { position: absolute; }

/* ---------- app shell: GlobalHeader stays, ModeContent cross-fades (160 ms out + 220 ms in) ---------- */
.mode-content, .app-header { left: 0; top: 0; width: 1536px; height: 1024px; }
.mode-content > *, .app-header > * { position: absolute; }
.app-header { pointer-events: none; z-index: 20; }
.app-header > * { pointer-events: auto; }
.mode-content { transition: opacity .22s cubic-bezier(.2, .7, .2, 1), filter .22s ease; }
.mode-switching .mode-content { opacity: 0; filter: blur(2px); transition: opacity .16s ease-in, filter .16s ease-in; }
/* ambient ground glow on its own layer so the background never hard-cuts */
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .38s ease;
  background: radial-gradient(760px 560px at 768px 450px, rgba(6, 34, 66, .42), transparent 72%); }
.mode-ambient .stage::before { opacity: 1; }

/* ---------- the ONE global View Mode switch (desktop: fixed top-right HUD, same box in every mode) ---------- */
.vm-switch {
  left: 1168px; top: 29px; width: 160px; height: 32px; display: flex; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(112, 165, 200, .55); background: rgba(2, 12, 24, .82);
  box-shadow: inset 0 0 10px rgba(30, 120, 220, .12), 0 0 12px rgba(20, 120, 255, .12);
}
.vm-switch button { all: unset; box-sizing: border-box; position: relative; z-index: 1; flex: 1 1 50%; height: 100%; cursor: pointer; text-align: center;
  font: 700 10.5px/30px var(--f-hud); letter-spacing: .12em; color: #7f9bb2; transition: color .3s ease; }
.vm-switch button:hover { color: #bfe0f5; }
.vm-switch button.on { color: #06182a; }
.vm-switch button:focus-visible { outline: 1px solid #8fdcff; outline-offset: -3px; border-radius: 14px; }
.vm-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 14px; background: #6fdcff;
  box-shadow: 0 0 12px rgba(80, 200, 255, .55); transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.vm-switch[data-active="dashboard"] .vm-thumb { transform: translateX(100%); }
body.shot .vm-switch { display: none; }          /* reference renders compare against the MASTER only */

/* ---------- CORE at centre stage ---------- */
.mode-ambient .core-group { transform: translate(-2px, 117px) scale(1.38); }
.mode-ambient .core-group .core-ctx { display: none; }          /* context lives in HUD windows here */

/* ---------- dashboard furniture steps away ---------- */
.mode-ambient .nav, .mode-ambient .projects, .mode-ambient .overview, .mode-ambient .active-project,
.mode-ambient .recent, .mode-ambient .metric, .mode-ambient .sys, .mode-ambient .agents,
.mode-ambient .pill, .mode-ambient .frame {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* ---------- voice / chat input: the workspace becomes a floating bar ---------- */
.mode-ambient .workspace { left: 418px; top: 922px; width: 700px; height: 60px; }
.mode-ambient .workspace.framed { border: 1px solid rgba(112, 165, 200, .5); border-radius: 30px; background: rgba(2, 12, 24, .78);
  box-shadow: 0 0 24px rgba(20, 120, 255, .18), inset 0 0 14px rgba(30, 120, 220, .1); }
.mode-ambient .workspace > .hud, .mode-ambient .workspace .tabs, .mode-ambient .workspace .chatlog,
.mode-ambient .workspace .divider { display: none; }
.mode-ambient .workspace .input { left: 10px; top: 7px; width: 616px; height: 44px; border: 0; background: none; }
.mode-ambient .workspace .input input { width: 520px; }
.mode-ambient .workspace .input .mic { left: 548px; }
.mode-ambient .workspace .input .clip { display: none; }
.mode-ambient .workspace .send { left: 634px; top: 8px; width: 54px; height: 44px; border-radius: 22px; }

/* ---------- subtle global network: the same panel, as a quiet mini map ---------- */
.mode-ambient .network { left: 1262px; top: 812px; opacity: .42; }
.mode-ambient .network.framed > .hud, .mode-ambient .network h3, .mode-ambient .network ul { display: none; }
.mode-ambient .network.amb-hot { opacity: 1; }
.mode-ambient .network.amb-hot ul { display: block; top: 110px; }
.mode-ambient .network.amb-hot ul li:not(.hot) { display: none; }

/* ---------- minimal system status ---------- */
.amb-status { left: 50%; top: 30px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  height: 30px; padding: 0 16px; border-radius: 15px; background: rgba(2, 12, 24, .55); border: 1px solid rgba(90, 150, 200, .22);
  font: 600 11px/1 var(--f-hud); letter-spacing: .12em; color: #7f9bb2; }
.amb-sys { display: flex; align-items: center; gap: 8px; color: #7ee8b8; margin-right: 4px; }
.amb-sys i { width: 7px; height: 7px; border-radius: 50%; background: #36f1b1; box-shadow: 0 0 8px #36f1b1; animation: dotPulse 3.4s ease-in-out infinite; }
.amb-svc { display: flex; align-items: center; gap: 5px; }
.amb-svc i { width: 5px; height: 5px; border-radius: 50%; background: #36f1b1; opacity: .7; }
.amb-svc[data-state="BUSY"] { color: #9fe6ff; } .amb-svc[data-state="BUSY"] i { background: #5fd4ff; box-shadow: 0 0 6px #5fd4ff; opacity: 1; animation: dotPulse 1.2s ease-in-out infinite; }
.amb-svc[data-state="ALERT"] i { background: #ffbf4d; opacity: 1; } .amb-svc[data-state="ERROR"] i { background: #ff5b72; opacity: 1; }
body:not([data-mira="IDLE"]) .amb-sys { color: #9fe6ff; } body:not([data-mira="IDLE"]) .amb-sys i { background: #5fd4ff; box-shadow: 0 0 8px #5fd4ff; }


/* ---------- agent presence ---------- */
.amb-agent { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(6, 22, 40, .7);
  border: 1px solid rgba(90, 150, 200, .22); opacity: .38; transition: opacity .6s, box-shadow .6s, border-color .6s; }
.amb-agent svg { width: 18px; height: 18px; fill: none; stroke: #8fc8f2; stroke-width: 1.6; }
.amb-agent em { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 var(--f-ui); font-style: normal; color: #bfe6ff; opacity: 0; transition: opacity .4s; }
.amb-agent .ring { position: absolute; inset: -4px; border-radius: 50%; opacity: 0; }
.amb-agent[data-state] { opacity: 1; border-color: rgba(143, 220, 255, .7); box-shadow: 0 0 14px rgba(60, 180, 255, .5); }
.amb-agent[data-state] em { opacity: 1; }
.amb-agent[data-state="PROCESSING"] .ring { opacity: 1; background: conic-gradient(from 0deg, transparent 0 60%, rgba(160, 235, 255, .95) 88%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 19px, #000 19.5px, #000 21px, transparent 21.5px); mask: radial-gradient(circle, transparent 19px, #000 19.5px, #000 21px, transparent 21.5px);
  animation: spin 1.6s linear infinite; }
.amb-agent[data-state="WAITING"] { border-color: rgba(255, 191, 77, .7); box-shadow: 0 0 12px rgba(255, 191, 77, .4); }

/* ---------- subtitles ---------- */
.amb-sub { left: 318px; top: 808px; width: 900px; text-align: center; }
.amb-sub p { opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s; }
.amb-sub p.on { opacity: 1; transform: none; }
.amb-sub .u { font: 400 14px/1.5 var(--f-ui); color: #8fa9bf; margin-bottom: 6px; }
.amb-sub .m { font: 500 17px/1.6 var(--f-ui); color: #eaf5ff; text-shadow: 0 0 12px rgba(60, 170, 255, .45); max-height: 56px; overflow: hidden; }
.amb-hint { left: 318px; top: 846px; width: 900px; text-align: center; font: 400 13px/1 var(--f-ui); color: #59758b; transition: opacity .5s; }
body:not([data-mira="IDLE"]) .amb-hint, .amb-sub p.on ~ .amb-hint { opacity: 0; }
.amb:has(.amb-sub p.on) .amb-hint { opacity: 0; }

/* ---------- contextual HUD windows ---------- */
.amb-windows { inset: 0; }
.amb-win { position: absolute; pointer-events: auto; padding: 14px 16px 14px; min-height: 90px;
  opacity: 0; transform: translateY(8px) scale(.985); filter: blur(3px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .55s ease; }
.amb-win.in { opacity: 1; transform: none; filter: none; }
.amb-win.out { opacity: 0; transform: translateY(-6px); filter: blur(2px); }
.amb-win h3 { position: relative; font: 700 16px/1 var(--f-hud); letter-spacing: .06em; color: #86bfe8; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(80, 150, 210, .35); }
.amb-win .amb-x { all: unset; cursor: pointer; position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; text-align: center; line-height: 28px; font-size: 18px; color: #6f8aa0; }
.amb-win .amb-x:hover { color: #cfe6f7; }
.amb-ctx { margin: -2px 0 10px; font: 600 12.5px/1.3 var(--f-hud); letter-spacing: .08em; color: #bfe6ff; }
.amb-ctx span { color: #59758b; }
.amb-rows div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(80, 125, 160, .18); }
.amb-rows dt { font: 400 12.5px/1.45 var(--f-ui); color: #8fa9bf; }
.amb-rows dd { font: 500 13.5px/1.45 var(--f-ui); color: #e6f2fb; }
.amb-items { list-style: none; }
.amb-items li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid rgba(80, 125, 160, .16); }
.amb-items li:last-child, .amb-rows div:last-child { border-bottom: 0; }
.amb-items i { width: 7px; height: 7px; border-radius: 50%; background: #5db7ff; flex: none; }
.amb-items li.hot i { background: #ffbf4d; box-shadow: 0 0 6px #ffbf4d; }
.amb-items span { flex: 1; min-width: 0; }
.amb-items b { display: block; font: 500 13.5px/1.4 var(--f-ui); color: #e6f2fb; }
.amb-items small { display: block; font: 400 12px/1.35 var(--f-ui); color: #8fa9bf; }
.amb-items time { flex: none; font: 500 12px/1 var(--f-ui); color: #8fb4d0; }
.amb-items li.hot time { color: #ff9aa8; }
.amb-win.kind-alert h3 { color: #ffcf7a; border-color: rgba(255, 191, 77, .4); }
.amb-win.kind-error h3 { color: #ff8a9a; border-color: rgba(255, 91, 114, .4); }
.amb-agents { inset: 0; }
.amb-agents .amb-agent { position: absolute; }
.amb-win .amb-body, .amb-win .amb-x { position: relative; z-index: 1; } .amb-win .amb-x { position: absolute; }
.mode-ambient .workspace .input .mic-level { left: 544px; }      /* ring around the mic in the ambient bar */
.mode-ambient .workspace .input.listening { border: 0; box-shadow: none; }
body.mode-ambient[data-mira="LISTENING"] .workspace.framed { border-color: rgba(143, 230, 255, .85);
  box-shadow: 0 0 0 1px rgba(143, 230, 255, .25), 0 0 26px rgba(40, 160, 255, .35), inset 0 0 14px rgba(30, 120, 220, .12); }
.mode-ambient .workspace.framed { transition: border-color .4s ease, box-shadow .4s ease; }


/* =====================================================================================================
   SIMPLIFIED COMMAND MODE (first pass, 2026-09-30): quiet, minimal, focused, alive.
   Same design system as Dashboard; every rule is scoped to .mode-ambient / .amb*, so Dashboard is unchanged.
   ===================================================================================================== */

/* the globe network steps back: a radial veil between the globe and the CORE rings */
.amb-veil { left: 0; top: 0; width: 1536px; height: 1024px; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(circle at 770px 333px, rgba(1, 8, 18, 0) 0, rgba(1, 8, 18, 0) 188px, rgba(1, 8, 18, .5) 232px,
              rgba(1, 8, 18, .8) 330px, rgba(1, 8, 18, .88) 520px); }
.mode-ambient .amb-veil { opacity: 1; }
body.mode-ambient:not([data-mira="IDLE"]) .amb-veil { opacity: .82; }        /* the network brightens a little while MIRA works */

/* the CORE is the centre of attention */
.mode-ambient .core-group { transform: translate(-2px, 104px) scale(1.5); }

/* header: the wordmark alone, a quieter clock */
.mode-ambient .brand-sub, .mode-ambient .brand-tag { opacity: 0; visibility: hidden; }
.mode-ambient .clock { opacity: .5; transition: opacity .4s; }      /* quieter, never moved: the global header is fixed across modes */

/* one status pill: ONLINE · mode; a service shows only while it works or needs attention */
.amb-status { gap: 10px; padding: 0 14px; background: rgba(2, 12, 24, .45); border-color: rgba(90, 150, 200, .18); }
.amb-svc { display: none; }
.amb-svc[data-state="BUSY"], .amb-svc[data-state="ALERT"], .amb-svc[data-state="ERROR"] { display: flex; }
.amb-mode { color: #6f8aa0; letter-spacing: .14em; }
.amb-mode.is-live { color: #8fdcff; }
.amb-mode.is-demo { color: #ffbf4d; }

/* no decorative map or idle agent icons: they appear only when something happens */
.mode-ambient .network:not(.amb-hot) { opacity: 0; }
.mode-ambient .network { transition: opacity .8s ease; }
.amb-agent { opacity: 0; }
.amb-agent[data-state] { opacity: 1; }

/* the command bar: larger, glass, centred */
.mode-ambient .workspace { left: 318px; top: 900px; width: 900px; height: 68px; }
.mode-ambient .workspace.framed { border-radius: 34px; border-color: rgba(120, 180, 225, .42);
  background: linear-gradient(180deg, rgba(8, 26, 46, .72), rgba(2, 12, 24, .84));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35), 0 0 30px rgba(20, 120, 255, .16), inset 0 1px 0 rgba(160, 220, 255, .08); }
.mode-ambient .workspace .input { left: 18px; top: 10px; width: 790px; height: 48px; }
.mode-ambient .workspace .input input { width: 690px; font-size: 16.5px; height: 48px; }
.mode-ambient .workspace .input .mic { left: 716px; }
.mode-ambient .workspace .input .mic-level { left: 712px; }
.mode-ambient .workspace .send { left: 826px; top: 10px; width: 60px; height: 48px; border-radius: 24px; }
.amb-hint { top: 862px; color: #5a7690; font-size: 13.5px; letter-spacing: .02em; }
.amb-sub { top: 780px; }

/* contextual panels: glass, readable, summoned near the CORE */
.amb-win { background: linear-gradient(180deg, rgba(10, 30, 52, .78), rgba(3, 14, 28, .86)) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; }
.amb-win .amb-body { max-height: 420px; overflow-y: auto; }
.amb-win .amb-note { margin-top: 10px; font: 400 12px/1.4 var(--f-ui); color: #6f8aa0; }

/* long answers: one focused response panel above the command bar (instead of a two-line subtitle) */
.amb-answer { left: 318px; top: 560px; width: 900px; max-height: 318px; overflow: hidden; pointer-events: auto; border-radius: 14px;
  padding: 18px 22px 16px; background: linear-gradient(180deg, rgba(10, 30, 52, .8), rgba(3, 14, 28, .9));
  border: 1px solid rgba(120, 180, 225, .32); box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 24px rgba(20, 120, 255, .12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.amb-answer.on { opacity: 1; transform: none; }
.amb-answer .q { font: 400 13.5px/1.5 var(--f-ui); color: #8fa9bf; margin-bottom: 8px; }
.amb-answer .a { font: 400 16px/1.75 var(--f-ui); color: #eaf5ff; white-space: pre-wrap; max-height: 236px; overflow-y: auto; }
.amb-answer .amb-x { all: unset; cursor: pointer; position: absolute; right: 12px; top: 10px; width: 28px; height: 28px; text-align: center;
  line-height: 28px; font-size: 18px; color: #6f8aa0; }
.amb:has(.amb-answer.on) .amb-sub .m { opacity: 0; }