/* MIRA Living AI layer.
   Rule: every style here either reproduces the accepted static baseline exactly
   (at rest) or only applies while a non-idle state class/attribute is present. */

/* ---------- CORE layers & effects ---------- */
.core-rings { pointer-events: none; }

/* ---------- presentation: centred, uniformly scaled, letterboxed canvas ---------- */
html, body { width: 100%; height: 100%; }
body {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8, 36, 70, .35), transparent 70%),
    radial-gradient(ellipse at center, #020a16 0%, #00040a 75%);
}
.stage {
  position: absolute; left: 50%; top: 50%; --k: 1;
  transform: translate(-50%, -50%) scale(var(--k)); transform-origin: 50% 50%;
  box-shadow: 0 0 0 1px rgba(60, 130, 200, .08), 0 0 80px rgba(0, 0, 0, .8);
}
:fullscreen body, body.fs { cursor: default; }
body.fs.idle-cursor, body.fs.idle-cursor * { cursor: none !important; }
.core-rings .core-layer { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 770px 333px; will-change: transform, opacity; }
#stageFx { pointer-events: none; mix-blend-mode: screen; overflow: visible; }

.core-state {
  left: 620px; top: 366px; width: 300px; text-align: center; pointer-events: none;
  font: 600 10px/1 var(--f-hud); letter-spacing: .32em; color: #8fdcff;
  text-shadow: 0 0 6px rgba(60, 180, 255, .8); opacity: 0; transition: opacity .6s ease;
}
.core-state.on { opacity: .9; }
.core-state .ctx { display: block; margin-top: 6px; font: 500 10px/1 var(--f-ui); letter-spacing: .12em; color: #bfe6ff; }
body[data-mira="ALERT"] .core-state { color: #ffcf7a; text-shadow: 0 0 6px rgba(255, 190, 80, .7); }
body[data-mira="ERROR"] .core-state { color: #ff8a9a; text-shadow: 0 0 6px rgba(255, 90, 110, .7); }

/* ---------- chat log (static exchange #0 keeps its exact baseline coordinates) ---------- */
.chatlog {
  position: absolute; left: 0; top: 50px; width: 100%; height: 266px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain;
}
.chatlog::-webkit-scrollbar { display: none; }
.xchg.x0 { position: relative; height: 266px; }
.x0 .u-bubble { top: 9px; } .x0 .u-time { top: 16px; } .x0 .u-avatar { top: 13px; }
.x0 .m-avatar { top: 59px; } .x0 .m-name { top: 130px; } .x0 .m-bubble { top: 61px; } .x0 .m-time { top: 230px; }

.xchg.live { position: relative; padding: 12px 0 10px; animation: xIn .45s ease both; }
@keyframes xIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.row-user { display: flex; justify-content: flex-end; align-items: center; padding-right: 16px; }
.row-user .bubble {
  height: 41px; border-radius: 12px; display: flex; align-items: center; gap: 16px; padding: 0 22px 0 12px;
  background: linear-gradient(180deg, #0b3252, #072843); border: 1px solid rgba(90, 150, 200, .35);
  font: 400 14px/1 var(--f-ui); color: #dcebf7; max-width: 560px;
}
.row-user .bubble svg { width: 20px; height: 20px; fill: #9fc6e6; flex: none; }
.row-user .bubble svg.mic-in { fill: none; stroke: #8fdcff; stroke-width: 1.7; }
.row-user time { margin: 0 20px 0 11px; font: 400 12px/1 var(--f-ui); color: #6f8aa0; align-self: flex-start; margin-top: 7px; }
.row-user .ua { width: 36px; height: 36px; border-radius: 50%; background: rgba(20, 40, 60, .6); display: grid; place-items: center; }
.row-user .ua svg { width: 22px; height: 22px; fill: #3c5670; }

.row-mira { position: relative; margin-top: 12px; padding-left: 101px; min-height: 90px; }
.row-mira .m-avatar { top: -2px; left: 25px; }
.row-mira .m-name { top: 69px; left: 36px; }
.row-mira .bubble {
  position: relative; width: 685px; border-radius: 8px; padding: 9px 10px 10px;
  border: 1px solid rgba(80, 125, 160, .35); background: rgba(8, 26, 43, .75);
}
.row-mira .bubble .tail { position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; transform: rotate(45deg); background: rgba(8, 26, 43, .95); border-left: 1px solid rgba(80, 125, 160, .45); border-bottom: 1px solid rgba(80, 125, 160, .45); }
.row-mira .bubble p { font: 500 14.5px/1.6 var(--f-ui); color: #eaf3fb; margin-left: 1px; white-space: pre-wrap; }
.row-mira .bubble p + p { margin-top: 2px; font-weight: 400; font-size: 13.5px; color: #cfe0ee; }
.row-mira time { position: absolute; left: 797px; bottom: 2px; font: 400 12px/1 var(--f-ui); color: #6f8aa0; }
.row-mira table {
  margin-top: 8px; width: 100%; border-collapse: collapse;
  border: 1px solid rgba(80, 125, 160, .35); background: rgba(2, 18, 34, .6);
}
.row-mira th, .row-mira td { height: 26.3px; padding: 0 10px; font: 400 13.4px/1 var(--f-ui); font-feature-settings: "palt"; color: #cfe0ee; text-align: left; border-bottom: 1px solid rgba(80, 125, 160, .22); white-space: nowrap; }
.row-mira th { width: 113px; color: #a9c2d6; border-right: 1px solid rgba(80, 125, 160, .3); font-weight: 400; }
.row-mira tr { animation: rowIn .35s ease both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.row-mira.error .bubble { border-color: rgba(255, 91, 114, .5); }
.row-mira.alert .bubble { border-color: rgba(255, 191, 77, .5); }
.thinking { display: inline-flex; gap: 5px; padding: 6px 2px; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: #7fd4ff; opacity: .25; animation: think 1.2s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 50% { opacity: .9; } }
.caret::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #8fdcff; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- input (identical to baseline text at rest) ---------- */
.input input {
  all: unset; position: absolute; left: 17px; top: 0; width: 790px; height: 44px;
  font: 400 13.8px/44px var(--f-ui); color: #dceaf6; caret-color: #8fdcff;
}
.input input::placeholder { color: #5d7890; opacity: 1; }
.input.listening input::placeholder { color: #8fdcff; }
.input .mic, .send { cursor: pointer; }
.input .mic { transition: stroke .3s, filter .3s; }
.input.listening { border-color: rgba(95, 200, 255, .55); box-shadow: 0 0 12px rgba(40, 160, 255, .25); }
.input.listening .mic { stroke: #8fe8ff; filter: drop-shadow(0 0 4px rgba(90, 210, 255, .95)); }
.mic-level { position: absolute; left: 826px; top: 5px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(120, 220, 255, .6); opacity: 0; transform: scale(.8); transition: opacity .3s; }
.input.listening .mic-level { opacity: 1; }
.send:focus-visible, .input .mic:focus-visible, .avatar:focus-visible { outline: 1px solid #8fdcff; outline-offset: 2px; }

/* ---------- agents ---------- */
.agents li { transition: opacity .4s; }
.agents li .ai { position: relative; transition: box-shadow .5s, background .5s; }
.agents li b, .agents li em { transition: color .4s; }
.agents li[data-state="ACTIVE"] .ai { box-shadow: inset 0 0 0 1px rgba(120, 210, 255, .55), 0 0 10px rgba(60, 170, 255, .45); }
.agents li[data-state="ACTIVE"] b { color: #d6f0ff; }
.agents li[data-state="ACTIVE"] em { color: #9fd6ff; }
.agents li[data-state="PROCESSING"] .ai { box-shadow: inset 0 0 0 1px rgba(120, 210, 255, .35), 0 0 12px rgba(60, 170, 255, .55); }
.agents li[data-state="PROCESSING"] .ai::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(143, 230, 255, .95) 88%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 17px, #000 17.5px, #000 19px, transparent 19.5px);
          mask: radial-gradient(circle, transparent 17px, #000 17.5px, #000 19px, transparent 19.5px);
  animation: spin 1.6s linear infinite;
}
.agents li[data-state="PROCESSING"] b { color: #e6f6ff; }
.agents li[data-state="PROCESSING"] em { color: #8fe6ff; }
.agents li[data-state="PROCESSING"] .dot { background: #5fd4ff; box-shadow: 0 0 5px #5fd4ff, 0 0 12px rgba(95, 212, 255, .6); animation: dotPulse 1.1s ease-in-out infinite; }
.agents li[data-state="ACTIVE"] .dot { background: #6fdcff; box-shadow: 0 0 5px #5fd4ff, 0 0 10px rgba(95, 212, 255, .5); }
.agents li[data-state="WAITING"] .dot { background: var(--amber-warning); box-shadow: 0 0 5px var(--amber-warning); animation: dotPulse 3s ease-in-out infinite; }
.agents li[data-state="WAITING"] em { color: #ffcf7a; }
.agents li[data-state="ERROR"] .dot { background: var(--red-alert); box-shadow: 0 0 6px var(--red-alert); }
.agents li[data-state="ERROR"] em { color: #ff8a9a; }
.agents li[data-state="ERROR"] .ai { box-shadow: inset 0 0 0 1px rgba(255, 91, 114, .6); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dotPulse { 50% { opacity: .45; transform: scale(.8); } }

/* ---------- system status ---------- */
.sys li .dot { transition: background .4s, box-shadow .4s; }
.sys li em { transition: color .4s; }
.sys li[data-state="BUSY"] .dot { background: #5fd4ff; box-shadow: 0 0 5px #5fd4ff, 0 0 12px rgba(95, 212, 255, .55); animation: dotPulse 1.4s ease-in-out infinite; }
.sys li[data-state="BUSY"] em { color: #7fe0ff; }
.sys li[data-state="ALERT"] .dot { background: var(--amber-warning); box-shadow: 0 0 6px var(--amber-warning); animation: dotPulse 2.6s ease-in-out infinite; }
.sys li[data-state="ALERT"] em { color: #ffcf7a; }
.sys li[data-state="ERROR"] .dot { background: var(--red-alert); box-shadow: 0 0 6px var(--red-alert); }
.sys li[data-state="ERROR"] em { color: #ff8a9a; }

/* ---------- global network ---------- */
.network .route { position: absolute; left: 3px; top: 24px; width: 238px; height: 90px; overflow: visible; pointer-events: none; }
.network li { transition: color .5s; }
.network li.hot { color: #e6f6ff; }
.network li.hot time { color: #bfe8ff; }
.network li.hot .fl { box-shadow: 0 0 0 1.5px rgba(120, 220, 255, .8), 0 0 8px rgba(80, 200, 255, .8); }

/* ---------- HUD reveals / one-shot event glows ---------- */
.reveal { animation: reveal .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes reveal { from { opacity: 0; filter: blur(3px); transform: translateY(3px); } to { opacity: 1; filter: none; transform: none; } }
.glow-once { animation: glowOnce .7s ease-out 1; }
@keyframes glowOnce { 0% { filter: none; } 35% { filter: drop-shadow(0 0 10px rgba(90, 200, 255, .9)) brightness(1.25); } 100% { filter: none; } }
.glow-once-amber { animation: glowAmber .8s ease-out 1; }
@keyframes glowAmber { 35% { filter: drop-shadow(0 0 10px rgba(255, 191, 77, .9)) brightness(1.2); } }
#activeProject.detect .hud path:first-child { transition: stroke .3s; stroke: rgba(143, 220, 255, .95); }
.projects li { transition: background .4s, color .4s; }
#recentList li.fresh span { color: #eaf6ff; }
#recentList li.fresh { animation: reveal .6s ease both; }

/* ---------- voice-mode popover ---------- */
.vm-pop {
  position: absolute; left: 1290px; top: 76px; width: 232px; padding: 12px 12px 10px; z-index: 30;
  border: 1px solid rgba(112, 165, 200, .72); border-radius: 8px;
  background: linear-gradient(180deg, rgba(5, 20, 36, .97), rgba(2, 10, 20, .97));
  box-shadow: 0 0 18px rgba(20, 120, 255, .25); font: 400 13px/1.3 var(--f-ui); color: #c8dbeb;
}
.vm-pop h4 { font: 700 13px/1 var(--f-hud); letter-spacing: .06em; color: #86bfe8; margin-bottom: 8px; }
.vm-pop label { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 4px; cursor: pointer; }
.vm-pop label:hover { background: rgba(60, 130, 200, .12); }
.vm-pop input { accent-color: #5fc8ff; }
.vm-pop small { display: block; margin-top: 6px; font-size: 11px; color: #6f8aa0; }
.vm-pop .vs-extra h4 { margin-top: 10px; }
.vm-pop { max-height: 900px; overflow-y: auto; }
/* microphone privacy state (voice session): standby = local wake-word listening, sending = audio going to speech-to-text */
body.mic-standby #micBtn { box-shadow: 0 0 0 1px rgba(90, 220, 150, .55); border-radius: 50%; }
body.mic-sending #micBtn { box-shadow: 0 0 0 1px rgba(255, 190, 90, .7); border-radius: 50%; }

/* ---------- demo console ---------- */
.demo {
  position: fixed; left: 16px; bottom: 16px; width: 300px; z-index: 1000; padding: 10px 12px 12px;
  border: 1px solid rgba(112, 165, 200, .72); border-radius: 8px;
  background: rgba(2, 10, 20, .94); box-shadow: 0 0 22px rgba(0, 0, 0, .6), 0 0 14px rgba(20, 120, 255, .2);
  font: 400 12px/1.35 var(--f-ui); color: #b7cde0;
}
.demo h4 { display: flex; justify-content: space-between; font: 700 13px/1 var(--f-hud); letter-spacing: .08em; color: #86bfe8; margin-bottom: 8px; }
.demo h4 button { all: unset; cursor: pointer; color: #6f8aa0; font-size: 14px; }
.demo .st { font: 700 15px/1 var(--f-hud); letter-spacing: .12em; color: #8fe6ff; margin-bottom: 8px; }
.demo .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px; }
.demo button.b {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 7px; border-radius: 5px; text-align: left;
  border: 1px solid rgba(80, 135, 180, .5); background: rgba(10, 35, 60, .6); color: #cfe6f7; font-size: 11.5px;
}
.demo button.b:hover { border-color: rgba(143, 220, 255, .8); }
.demo button.b.warn { border-color: rgba(255, 191, 77, .5); color: #ffd98f; }
.demo button.b.err { border-color: rgba(255, 91, 114, .5); color: #ffa0ae; }
.demo button.b.wide { grid-column: 1 / -1; }
.demo select { width: 100%; margin: 2px 0 6px; background: #041424; color: #cfe6f7; border: 1px solid rgba(80, 135, 180, .5); border-radius: 4px; padding: 3px; }
.demo .log { height: 74px; overflow: hidden; font: 400 10.5px/1.45 ui-monospace, Menlo, monospace; color: #7f9bb2; border-top: 1px solid rgba(80, 125, 160, .25); padding-top: 5px; }
.demo .log b { color: #8fe6ff; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .agents li[data-state="PROCESSING"] .ai::after, .thinking i, .caret::after { animation-duration: 0s; animation-iteration-count: 1; }
}
.row-mira table + p { margin-top: 8px !important; }

/* ================= Phase 2b: stronger state signatures ================= */
/* agent status chip (only when involved) */
.agents em .ast {
  display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; vertical-align: 1px;
  font: 700 9.5px/14px var(--f-hud); letter-spacing: .08em; color: #06182a; background: #6fdcff;
}
.agents em .alb { white-space: nowrap; }
.agents em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.agents li[data-state="ACTIVE"] .ast { background: rgba(111, 220, 255, .22); color: #9fe6ff; box-shadow: inset 0 0 0 1px rgba(111, 220, 255, .45); }
.agents li[data-state="WAITING"] .ast { background: #ffbf4d; color: #2a1800; }
.agents li[data-state="ERROR"] .ast { background: #ff5b72; color: #2a0008; }
/* icon glow + gentle pulse for working agents only */
.agents li[data-state="PROCESSING"] .ai svg, .agents li[data-state="WAITING"] .ai svg, .agents li[data-state="ACTIVE"] .ai svg { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.agents li[data-state="PROCESSING"] .ai { animation: agentPulse 1.6s ease-in-out infinite; }
@keyframes agentPulse { 50% { box-shadow: inset 0 0 0 1px rgba(143, 230, 255, .6), 0 0 18px rgba(60, 180, 255, .75); } }
.agents li[data-state="PROCESSING"], .agents li[data-state="WAITING"] { background: linear-gradient(90deg, rgba(40, 140, 230, .12), transparent 80%); border-radius: 6px; }

/* the core state word stays small; the caption carries the context */
.core-state { top: 368px; }

/* UNDERSTANDING caption: PROJECT / DEPARTMENT / CASE under the CORE */
.core-ctx {
  left: 470px; top: 458px; width: 600px; display: flex; justify-content: center; gap: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.core-ctx.on { opacity: 1; }
.core-ctx .cc {
  position: relative; padding: 6px 16px 7px; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(3, 16, 30, .82), rgba(2, 10, 20, .7));
  border-top: 1px solid rgba(120, 200, 255, .45);
}
.core-ctx .cc + .cc::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: rgba(120, 190, 240, .3); }
.core-ctx .cc:first-child { border-radius: 6px 0 0 6px; } .core-ctx .cc:last-child { border-radius: 0 6px 6px 0; }
.core-ctx small { display: block; font: 700 8.5px/1 var(--f-hud); letter-spacing: .22em; color: #6fa8d0; margin-bottom: 4px; }
.core-ctx b { display: block; font: 500 12.5px/1 var(--f-ui); color: #e6f4ff; text-shadow: 0 0 8px rgba(80, 180, 255, .45); }
.core-ctx.on .cc { animation: ccIn .55s cubic-bezier(.2, .7, .2, 1) both; }
.core-ctx.on .cc:nth-child(2) { animation-delay: .14s; } .core-ctx.on .cc:nth-child(3) { animation-delay: .28s; }
@keyframes ccIn { from { opacity: 0; transform: translateY(-6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* LISTENING: microphone glow that breathes with the voice */
.input.listening .mic { stroke: #c8f4ff; filter: drop-shadow(0 0 6px rgba(90, 210, 255, 1)) drop-shadow(0 0 12px rgba(60, 170, 255, .7)); }
.mic-level { box-shadow: 0 0 12px rgba(80, 200, 255, .55), inset 0 0 8px rgba(80, 200, 255, .35); }

/* ================= Phase 2c: screen-wide coordination ================= */
/* panels in use: slightly brighter border; packet arrival: short localised glow */
.panel.framed .hud path:first-child { transition: stroke .6s ease; }
.panel.lit > .hud path:first-child { stroke: rgba(150, 222, 255, .95); }
.panel.lit { box-shadow: 0 0 16px rgba(30, 150, 255, .22); transition: box-shadow .6s ease; }
.panel.ping, .agents li.ping { animation: pingGlow .7s ease-out 1; }
@keyframes pingGlow { 0% { box-shadow: 0 0 0 rgba(90, 210, 255, 0); } 30% { box-shadow: 0 0 22px rgba(90, 210, 255, .5); } 100% { box-shadow: 0 0 16px rgba(30, 150, 255, .22); } }
.agents li.ping .ai { animation: none; box-shadow: inset 0 0 0 1px rgba(200, 245, 255, .9), 0 0 20px rgba(90, 210, 255, .9); }
.agents li[data-state="PROCESSING"], .agents li[data-state="WAITING"] { box-shadow: inset 0 0 0 1px rgba(110, 200, 255, .28); }
/* the relevant project row breathes while MIRA works on it */
.projects li.working { animation: projWork 2.2s ease-in-out infinite; }
@keyframes projWork { 50% { box-shadow: 0 0 16px rgba(60, 180, 255, .7), 3px 0 10px -2px rgba(120, 220, 255, .9); } }

/* CORE group wrapper: identity transform in Dashboard mode */
.core-group { left: 0; top: 0; width: 1536px; height: 1024px; pointer-events: none; transform-origin: 770px 333px; }
.core-group > * { position: absolute; }
.core-group .mcore-hit { pointer-events: auto; }