/* ==========================================================================
   JARVIS R05 — SHELL · desktop first (2560×1440, provereno i na 1920×1080)
   --------------------------------------------------------------------------
   Vlasnički brif: „čist command input · minimalan left/right operational
   context · bez developer telemetry wall-a · bez giant dashboarda".

   Zato ovde NEMA: navigacije, kartica, grafikona, brojača, sirovog JSON-a,
   sidebara sa 14 stavki. Ima tačno četiri mesta sa tekstom:

     gore-levo   ime + odakle dolaze podaci (UŽIVO / SNIMLJENO)
     levo        TOK — poslednja četiri STVARNA posla
     desno       STANJE — pet redova zdravlja sistema (+ DOKAZ posle komande)
     dole        status jednom rečju, pa komandna linija

   Scena (orb + B+ HUD) je zaključana iz R04C i ovde se ne dira: isti
   poluprečnik, isti pomak od centra, iste stranice kanvasa.
   ========================================================================== */

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

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

* { 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 scene */
#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(170px, 16vw) 1fr minmax(170px, 16vw);
  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);
}
/* Odakle dolaze podaci — nikad se ne prećutkuje. */
.badge {
  display: inline-block;
  margin-top: clamp(8px, .6vw, 12px);
  padding: .42em .8em .38em;
  border: 1px solid var(--line);
  font: 400 clamp(9px, .55vw, 11px)/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}
.badge[data-mode="live"]   { border-color: rgba(127,227,161,.45); color: var(--green); }
.badge[data-mode="replay"] { border-color: rgba(245,179,74,.45);  color: var(--gold); }
.badge[data-mode="none"]   { border-color: rgba(255,115,88,.45);  color: var(--red); }

/* --------------------------------------------------------------- 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, .62vw, 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 time { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tok__list li[data-kind="good"] time { color: color-mix(in srgb, var(--green) 70%, transparent); }
.tok__list li[data-kind="bad"]  time { color: color-mix(in srgb, var(--red) 72%, transparent); }
.tok__list li[data-kind="run"]  time { color: color-mix(in srgb, var(--gold) 70%, transparent); }
@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 dl {
  margin: 0; display: grid; grid-template-columns: 1fr;
  gap: clamp(6px, .5vw, 11px);
  font: 400 clamp(10px, .62vw, 13px)/1.4 var(--mono);
}
.stanje dt { color: var(--faint); letter-spacing: .1em; }
.stanje dd { margin: 0 0 clamp(4px, .35vw, 8px); color: var(--text); }
.stanje dd[data-s="ok"]  { color: var(--text); }
.stanje dd[data-s="bad"] { color: color-mix(in srgb, var(--red) 78%, var(--text)); }
/* „nije povezan" nije greška — to je pošteno stanje, pa je sivo, ne crveno */
.stanje dd[data-s="off"] { color: var(--muted); }

/* Dokaz se pojavljuje SAMO posle komande i pokazuje samo ono što je receipt
   stvarno vratio. Ovo je jedino mesto sa tehničkim identifikatorima. */
.proof {
  margin-top: clamp(18px, 1.6vw, 30px);
  padding-top: clamp(12px, 1vw, 18px);
  border-top: 1px solid var(--line);
}
.proof dl {
  margin: 0; display: grid; grid-template-columns: 1fr;
  gap: clamp(5px, .42vw, 9px);
  font: 400 clamp(9px, .58vw, 12px)/1.45 var(--mono);
}
.proof dt { color: var(--faint); letter-spacing: .08em; }
.proof dd { margin: 0 0 clamp(3px, .3vw, 6px); color: var(--muted);
             overflow-wrap: anywhere; }
/* Dokaz ne sme da se razlije preko HUD-a — drži se u svojoj koloni. */
.proof dl  { max-width: 30ch; margin-left: auto; }
.stanje dl { max-width: 32ch; margin-left: auto; }

/* ---------------------------------------------------------- izgovor */
.say { grid-area: say; align-self: end; text-align: center;
       max-width: min(920px, 58vw); justify-self: center; }
.say__word {
  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__word::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__word::before,
body[data-state="THINKING"] .say__word::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)); }
.say__since {
  margin: clamp(6px, .5vw, 10px) 0 0;
  font: 400 clamp(9px, .55vw, 11px)/1 var(--mono);
  letter-spacing: .16em; color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- komanda */
.cmd { grid-area: cmd; justify-self: center; width: min(760px, 46vw);
       margin-top: clamp(22px, 2vw, 44px); }
.cmd__bar {
  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__bar: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__bar: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;
}
/* Tri predloga, ne šest — predlog je pomoć, ne meni. */
.chips { display: flex; gap: clamp(8px, .7vw, 14px); justify-content: center;
         margin-top: clamp(12px, 1vw, 20px); flex-wrap: wrap; }
.chip {
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: .5em .95em;
  font: 400 clamp(9px, .58vw, 12px)/1 var(--mono);
  letter-spacing: .12em; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.chip:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--text); }

/* ------------------------------------------------------------ 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="VERIFYING"]     { --accent: #D9C9A6; }
body[data-state="DONE_VERIFIED"] { --accent: var(--green); }
body[data-state="FAILED"]        { --accent: var(--red); }

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

/* uvod: interfejs 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; }

.disclaim {
  position: fixed; z-index: 4; left: var(--pad); bottom: calc(var(--pad) * .62);
  font: 400 clamp(9px, .55vw, 11px)/1.5 var(--mono);
  letter-spacing: .1em; color: var(--faint);
  opacity: 0; transition: opacity 1.1s ease 1.1s; pointer-events: none;
  max-width: 34ch;
}
body.ready .disclaim { opacity: 1; }

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