/* ==========================================================================
   JARVIS SCENA — R04C · desktop first (2560×1440 i 1920×1080)
   --------------------------------------------------------------------------
   Kadar je NAMERNO isti kao u R04B: isti orb, isti pomak od centra, isti
   raspored interfejsa, ista tipografija. Jedina razlika u ovoj rundi je HUD,
   pa poređenje A/B/C meri HUD, a ne novi layout.

   Minimalan interfejs koji sme da stoji (po brifu §7): JARVIS oznaka, stanje,
   komandna linija, sitna periferna očitavanja. Nikakav Manager UI.

   Amber/zlato je i dalje rezervisano za ORB. Interfejs je toplo-belo i sivo,
   zlato samo kao akcenat stanja.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg:        #000;
  --text:      #EDE9E1;
  --muted:     rgba(237, 233, 225, .40);
  --faint:     rgba(237, 233, 225, .20);
  --line:      rgba(237, 233, 225, .12);

  --gold:      #F5B34A;
  --green:     #7FE3A1;
  --red:       #FF7358;

  --accent:    var(--muted);

  --pad:       clamp(28px, 2.4vw, 56px);
  --mono:      "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans:      "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* jedan izvor istine za geometriju scene — isti brojevi kao u js/hud/hud-core.js */
  --orb-r:     calc(min(100vw, 100vh) * 0.325);   /* radiusFrac iz orb-core.js */
  --hud-front: calc(var(--orb-r) * 3.34);         /* FRONT_SPAN */
  --hud-back:  calc(var(--orb-r) * 2.06);         /* BACK_SPAN  */
  --rise:      5.5vh;                              /* orb sedi iznad geometrijskog centra */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font: 400 14px/1.5 var(--mono);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------- slojevi kadra */
/* 0 zadnji HUD · 1 orb · 2 prednji HUD · 3 interfejs.
   Zadnji HUD mora biti ISPOD orba — inače nema „iza mase". */
#hudBack, #hudFront {
  position: fixed;
  left: 50%;
  top: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease .45s;
}
#hudBack {
  z-index: 0;
  width: var(--hud-back);
  height: var(--hud-back);
  transform: translate(-50%, calc(-50% - var(--rise)));
}
#orb {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateY(calc(-1 * var(--rise)));
}
#hudFront {
  z-index: 2;
  width: var(--hud-front);
  height: var(--hud-front);
  transform: translate(-50%, calc(-50% - var(--rise)));
}
body.ready #hudBack,
body.ready #hudFront { opacity: 1; }

/* ------------------------------------------------------------------ UI */
.ui {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(150px, 15vw) 1fr minmax(150px, 15vw);
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "brand   .      .      "
    "tok     .      stanje "
    ".       say    .      "
    ".       cmd    .      ";
  padding: var(--pad);
  gap: clamp(16px, 1.6vw, 30px);
  pointer-events: none;
}
.ui > * { pointer-events: auto; }

.lbl {
  margin: 0 0 clamp(10px, .9vw, 16px);
  font: 400 clamp(9px, .58vw, 12px)/1 var(--mono);
  letter-spacing: .28em;
  color: var(--faint);
  text-transform: uppercase;
}

.brand { grid-area: brand; align-self: start; }
.brand__name {
  font: 300 clamp(20px, 1.35vw, 30px)/1 var(--sans);
  letter-spacing: .40em;
  color: var(--text);
}
.brand__sub {
  margin-top: clamp(8px, .6vw, 12px);
  padding-top: clamp(8px, .6vw, 12px);
  border-top: 1px solid var(--line);
  font: 400 clamp(9px, .58vw, 12px)/1.4 var(--mono);
  letter-spacing: .16em;
  color: var(--faint);
  text-transform: uppercase;
}

.tok { grid-area: tok; align-self: center; }
.tok__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(8px, .7vw, 14px); }
.tok__list li {
  font: 400 clamp(10px, .64vw, 13px)/1.5 var(--mono);
  color: var(--muted);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8em;
  opacity: 0;
  transform: translateY(4px);
  animation: tokIn .5s ease forwards;
}
.tok__list li:first-child { color: var(--text); }
.tok__list li time { color: var(--faint); font-variant-numeric: tabular-nums; }
@keyframes tokIn { to { opacity: 1; transform: none; } }

.stanje { grid-area: stanje; align-self: center; justify-self: end; text-align: right; }
.stanje .lbl { text-align: right; }
.stanje__grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(7px, .55vw, 12px);
  font: 400 clamp(10px, .64vw, 13px)/1.4 var(--mono);
}
.stanje__grid dt { color: var(--faint); letter-spacing: .1em; }
.stanje__grid dd { margin: 0 0 clamp(4px, .35vw, 8px); color: var(--text); }
.stanje__grid dd#sState {
  color: var(--accent);
  letter-spacing: .10em;
  font-size: clamp(12px, .80vw, 17px);
  transition: color .4s ease;
}
.stanje__grid dd#sMode { color: var(--faint); max-width: 18ch; margin-left: auto; }
.stanje__grid dd#sSince { font-variant-numeric: tabular-nums; color: var(--muted); }
.stanje__grid dd#sReceipt { color: var(--muted); }

.say {
  grid-area: say;
  align-self: end;
  text-align: center;
  max-width: min(920px, 58vw);
  justify-self: center;
}
.say__state {
  margin: 0 0 clamp(10px, .8vw, 18px);
  font: 200 clamp(38px, 3.05vw, 70px)/1.02 var(--sans);
  letter-spacing: -.015em;
  color: var(--text);
  transition: color .4s ease;
}
.say__state::before {
  content: "";
  display: inline-block;
  width: .22em; height: .22em;
  margin-right: .42em;
  vertical-align: .16em;
  border-radius: 50%;
  background: var(--accent);
  transition: background .4s ease, box-shadow .4s ease;
  box-shadow: 0 0 0 0 transparent;
}
body[data-state="LISTENING"] .say__state::before,
body[data-state="THINKING"] .say__state::before,
body[data-state="SPEAKING"] .say__state::before {
  box-shadow: 0 0 clamp(14px, 1.1vw, 24px) color-mix(in srgb, var(--accent) 70%, transparent);
}
.say__line {
  margin: 0;
  font: 400 clamp(13px, .86vw, 18px)/1.55 var(--mono);
  letter-spacing: .04em;
  color: var(--muted);
  min-height: 1.55em;
  transition: color .4s ease;
}
body[data-state="FAILED"] .say__line { color: color-mix(in srgb, var(--red) 78%, var(--text)); }

.cmd {
  grid-area: cmd;
  justify-self: center;
  width: min(760px, 46vw);
  margin-top: clamp(26px, 2.4vw, 54px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8em;
  padding-bottom: clamp(9px, .7vw, 14px);
  border-bottom: 1px solid var(--line);
  transition: border-color .35s ease;
}
.cmd:focus-within { border-bottom-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.cmd__caret { color: var(--faint); font-size: clamp(13px, .86vw, 18px); transition: color .35s ease; }
.cmd:focus-within .cmd__caret { color: var(--gold); }
.cmd__input {
  font: 400 clamp(13px, .86vw, 18px)/1.4 var(--mono);
  letter-spacing: .03em;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}
.cmd__input::placeholder { color: var(--faint); }
.cmd__hint {
  font: 400 clamp(9px, .58vw, 11px)/1 var(--mono);
  letter-spacing: .16em;
  color: var(--faint);
  text-transform: uppercase;
  white-space: nowrap;
}

/* oznaka varijante — da se na snimcima nikad ne pomeša A, B i C */
.vtag {
  position: fixed;
  z-index: 4;
  left: var(--pad);
  bottom: calc(var(--pad) * .7);
  font: 400 clamp(9px, .58vw, 12px)/1 var(--mono);
  letter-spacing: .28em;
  color: var(--faint);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 1.1s ease 1.1s;
  pointer-events: none;
}
body.ready .vtag { opacity: 1; }

body[data-state="IDLE"]          { --accent: rgba(237,233,225,.42); }
body[data-state="LISTENING"]     { --accent: #EDE9E1; }
body[data-state="THINKING"]      { --accent: var(--gold); }
body[data-state="SPEAKING"]      { --accent: var(--gold); }
body[data-state="VERIFYING"]     { --accent: #D9C9A6; }
body[data-state="DONE_VERIFIED"] { --accent: var(--green); }
body[data-state="FAILED"]        { --accent: var(--red); }

body[data-state="DONE_VERIFIED"] .say__state { color: var(--green); }
body[data-state="FAILED"] .say__state { color: var(--red); }

.ui > section, .ui > header, .ui > form { opacity: 0; transition: opacity 1.1s ease; }
body.ready .ui > section,
body.ready .ui > header,
body.ready .ui > form { opacity: 1; }
body.ready .brand { transition-delay: .15s; }
body.ready .say { transition-delay: .35s; }
body.ready .tok, body.ready .stanje { transition-delay: .70s; }
body.ready .cmd { transition-delay: .90s; }

@media (prefers-reduced-motion: reduce) {
  #hudBack, #hudFront, .say__state, .say__line, .ui > *, .vtag { transition: none !important; }
  .tok__list li { animation: none; opacity: 1; transform: none; }
}