/* ==========================================================================
   JARVIS SCENA — R03 · desktop first (2560×1440 i 1920×1080)
   --------------------------------------------------------------------------
   Pravila iz vlasničkog brifa, doslovno:
     · orb dominantan u centru, dosta crnog prostora
     · NEMA velikog kružnog HUD-a (R01 je odbijen)
     · informacije samo gde imaju smisla, veliki čitljiv tekst
     · nekoliko TANKIH tehničkih markera — kratki lukovi, nikad zatvoren obruč
     · kretanje po događaju, ne konstantno vrtenje
     · komandni unos dole, status/aktivnost diskretno sa strane
   Amber/zlato je rezervisano za ORB. Interfejs je toplo-belo i sivo, sa
   zlatom SAMO kao akcentom (tačka stanja, aktivan marker). Zato se atmosfera
   ne vraća u „hellfire" preko UI-ja.
   ========================================================================== */

: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;

  /* boja stanja — jedina promenljiva koju stanja diraju u UI-ju */
  --accent:    var(--muted);

  /* skala: isti izgled na 1920 i 2560 */
  --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;
}

* { 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;
}

/* ---------------------------------------------------------------- orb */
/* orb sedi malo IZNAD geometrijskog centra — tako veliki tekst dole dobija
   vazduh, a orb ostaje optički u sredini kadra. */
#orb {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateY(-5.5vh);
}

/* ------------------------------------------------- tehnički markeri */
/* Četiri kratka luka na ~1,13 R i četiri crtice. Ništa se ne zatvara u prsten. */
.marks {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(96vh, 64vw);
  height: min(96vh, 64vw);
  transform: translate(-50%, calc(-50% - 5.5vh));
  pointer-events: none;
  opacity: .0;
  transition: opacity 1.6s ease 0.5s;
}
body.ready .marks { opacity: 1; }

.marks__arc {
  fill: none;
  stroke: rgba(237, 233, 225, .15);
  stroke-width: .28;
  stroke-linecap: round;
  transition: stroke .55s ease, stroke-width .55s ease;
}
.marks__arc--long { stroke-dasharray: 2.6 2.2; }

.marks__ticks line {
  stroke: rgba(237, 233, 225, .16);
  stroke-width: .32;
  stroke-linecap: round;
  transition: stroke .55s ease;
}

/* KRETANJE PO DOGAĐAJU: lukovi stoje. Na promenu stanja se jednom preokrenu za
   zadati ugao i tu ostanu. Nema beskonačne rotacije. */
.marks__spin {
  transform-origin: 0 0;
  transform: rotate(var(--rot, 0deg));
  transition: transform 1.15s cubic-bezier(.16, .84, .28, 1);
}

body[data-state="THINKING"] .marks__arc,
body[data-state="SPEAKING"] .marks__arc,
body[data-state="VERIFYING"] .marks__arc { stroke: color-mix(in srgb, var(--accent) 26%, transparent); stroke-width: .36; }
body[data-state="DONE_VERIFIED"] .marks__arc { stroke: color-mix(in srgb, var(--green) 34%, transparent); }
body[data-state="FAILED"] .marks__arc { stroke: color-mix(in srgb, var(--red) 34%, transparent); }

/* ------------------------------------------------------------------ UI */
.ui {
  position: fixed;
  inset: 0;
  z-index: 2;
  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;
}

/* ------------------------------------------------------------- brend */
.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 */
.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 */
.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); }

/* ---------------------------------------------------------- izgovor */
/* Veliki, čitljiv tekst — jedina „glasna" tipografija na ekranu. */
.say {
  grid-area: say;
  align-self: end;
  text-align: center;
  max-width: min(920px, 58vw);   /* ch bi se racunao od 14px mono, ne od naslova */
  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)); }

/* ---------------------------------------------------------- komanda */
.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;
}

/* ------------------------------------------------------------ stanja */
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); }

/* uvod: UI ulazi jednom, tiho */
.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) {
  .marks__spin, .marks__arc, .say__state, .say__line, .ui > * { transition: none !important; }
  .tok__list li { animation: none; opacity: 1; transform: none; }
}