/* face.css — KUCISTE EKRANA, nista vise.
 *
 * Ovaj fajl ne zna nista o transportu (granica §5.1, `tests/test_granice.py`).
 * Oblik ociju se racuna u `face.js` i upisuje u atribut `d`; CSS radi samo ono
 * sto CSS radi bolje: okvir uredjaja, sjaj, vinjetu, skenlajnove i boje.
 *
 * Pet pravila koja drze iluziju (docs/analiza/webui.md §5.3):
 *   1. Nema skrola.  Nikad.
 *   2. Ekran je KVADRAT sa okvirom (kao 240x240 na uredjaju), ne „full-bleed".
 *   3. Jedna boja svetla.  Crvena postoji SAMO za gresku.
 *   4. Sav tekst je poluproziran, preko dna, i nestaje.
 *   5. Kontrole su u uglovima, male, opacity .35, pune tek na hover.
 */

:root {
  --page: #000;           /* iza kucista — sto tamnije, to je igracka „u sobi" */
  --page-ink: #CFE9F2;    /* tekst IZVAN ekrana (demo strana) */
  --bg: #05070A;          /* skoro crno, ne #000 — #000 „proguta" sjaj */
  --eye: #7FE8FF;         /* cijan-bela: boja SVETLA, a ne boja objekta */
  --eye-dim: #2E6E80;
  --err: #FF6B6B;
  --warm: #FFC46B;
  --bezel: #101418;
  --shell: linear-gradient(160deg, #171C21, #101418 45%, #0A0D10);
  --shell-shadow: 0 40px 120px #000c, inset 0 1px 0 #ffffff14, inset 0 -1px 0 #00000080;
  --glow1: #7FE8FFAA;
  --glow2: #7FE8FF55;
  --ink: #CFE9F2;         /* tekst NA ekranu — uvek svetao, ekran je uvek taman */
}

/* Svetla tema (`prefers-color-scheme: light`) menja KUCISTE, ne ekran.
   Igracka je bela plastika na dnevnom svetlu; LCD u njoj je i dalje taman, jer
   takav i jeste — svetao „ekran robota" nije uredjaj nego web stranica. */
@media (prefers-color-scheme: light) {
  :root {
    --page: #E7EAEE;
    --page-ink: #262E34;
    --bezel: #F1F3F5;
    --shell: linear-gradient(160deg, #FFFFFF, #EFF1F3 45%, #DCE0E4);
    --shell-shadow: 0 26px 60px #00000026, inset 0 1px 0 #ffffffcc, inset 0 -1px 0 #0000001a;
  }
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--page);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  place-items: center;
  color: var(--page-ink);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/* ── Kuciste ─────────────────────────────────────────────────────────── */
.device {
  position: relative;
  /* Na telefonu je `vmin` sirina ekrana, pa 78 % ostavlja pola prozora prazno.
     Lice mora da bude OGROMNO — to je ceo interfejs.  `dvmin` (dynamic viewport)
     racuna i traku pregledaca na mobilnom; `vmin` je rezerva za stare verzije. */
  width: min(92vmin, 720px);
  width: min(92dvmin, 720px);
  aspect-ratio: 1 / 1;
  border-radius: 14%;
  background: var(--shell);
  padding: 3.5%;
  box-shadow: var(--shell-shadow);
}

.screen {
  position: relative;
  color: var(--ink);
  width: 100%;
  height: 100%;
  border-radius: 11%;
  background: radial-gradient(120% 120% at 50% 40%, #0B1016 0%, var(--bg) 70%);
  overflow: hidden;
  cursor: pointer;   /* klik po licu = prekid dok Titi prica */
}

/* Skenlajnovi: 1px linije na 3px koraka, jedva vidljive. */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000 0 2px, #00000030 2px 3px);
  mix-blend-mode: multiply;
  z-index: 3;
}

/* Vinjeta. */
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 90px #000a, inset 0 0 30px #0006;
  z-index: 2;
}

.face-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* ── Lice ────────────────────────────────────────────────────────────── */
.eyes {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sjaj (bloom) — ovo je ono sto ubedjuje da je ekran, a ne <div>.
   Filter stoji na grupi, ne na pojedinacnom oku, jer se u SVG-u filter
   primenjuje pre maske kapka. */
.eyes .glow {
  filter: drop-shadow(0 0 18px var(--glow1)) drop-shadow(0 0 46px var(--glow2));
}

.eyes .eye { fill: var(--eye); }
.eyes .tear { fill: #9FD8FF; }
.eyes .drop { fill: #9FD8FF; }
.eyes .blush { fill: #FF7BA6; opacity: .38; }
.eyes .heart { fill: #FF6E8A; }
.eyes .zzz {
  fill: var(--eye);
  font: 600 34px/1 system-ui, sans-serif;
  letter-spacing: 2px;
}

/* Boja svetla po stanju sesije — jedina mesta gde se boja menja. */
.eyes[data-session="connecting"] {
  --eye: #8FB6FF;
  --glow1: #8FB6FFAA;
  --glow2: #8FB6FF55;
}
.eyes[data-session="error"] {
  --eye: var(--err);
  --glow1: #FF6B6BAA;
  --glow2: #FF6B6B55;
}
.eyes[data-session="boot"] {
  --glow1: #7FE8FF55;
  --glow2: #7FE8FF22;
}
.eyes[data-session="speaking"] {
  --glow1: #7FE8FFCC;
  --glow2: #7FE8FF66;
}

/* Iskljucen mikrofon je PREKLOP, ne stanje: oci ostaju iste, ekran potamni. */
.eyes[data-muted] .glow { opacity: .7; }

/* ── Traka transkripta ───────────────────────────────────────────────── */
.transcript {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 5%;
  z-index: 4;
  padding: 10px 14px;
  border-radius: 14px;
  background: #0009;
  backdrop-filter: blur(8px);
  font-size: clamp(11px, 2.1vmin, 17px);
  line-height: 1.35;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.transcript.on { opacity: 1; }
.transcript p { margin: 0; }
.transcript p + p { margin-top: 4px; }
.transcript .who { color: #7FE8FF88; margin-right: 6px; }
.transcript .titi { color: #EAF7FB; }
.transcript .child { color: #A9C3CC; }

/* ── Periferija: status, kontrole, poruka ────────────────────────────── */
.hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  font-size: clamp(9px, 1.5vmin, 12px);
  letter-spacing: .3px;
}
.hud > * { pointer-events: auto; }

.status {
  position: absolute;
  top: 4%;
  left: 6%;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: .35;
  transition: opacity .2s;
}
.status:hover { opacity: .9; }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7378;
  box-shadow: 0 0 8px currentColor;
}
.dot[data-s="connecting"] { background: #E8C36B; }
.dot[data-s="idle"], .dot[data-s="listening"] { background: #6BE8A0; }
.dot[data-s="thinking"] { background: #8FB6FF; }
.dot[data-s="speaking"] { background: #7FE8FF; }
.dot[data-s="error"] { background: var(--err); }

.controls {
  position: absolute;
  top: 4%;
  right: 6%;
  display: flex;
  gap: 8px;
}

.btn {
  appearance: none;
  border: 1px solid #ffffff1a;
  background: #ffffff0d;
  color: var(--ink);
  border-radius: 10px;
  padding: 6px 9px;
  font: inherit;
  line-height: 1;
  opacity: .35;
  cursor: pointer;
  transition: opacity .18s, background .18s;
}
.btn:hover, .btn:focus-visible { opacity: 1; background: #ffffff1a; }
.btn[aria-pressed="true"] { opacity: 1; border-color: #7FE8FF66; color: #7FE8FF; }
.btn.muted { color: var(--err); border-color: #FF6B6B55; opacity: 1; }

.ptt {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  opacity: .28;
}
.ptt.hot { opacity: 1; background: #7FE8FF22; border-color: #7FE8FF66; color: #7FE8FF; }

.metrics {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  opacity: .25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.msg {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  max-width: 76%;
  text-align: center;
  color: var(--warm);
  opacity: 0;
  transition: opacity .3s;
}
.msg.on { opacity: .85; }

/* ── Ekran za budjenje (autoplay politika, §8) ───────────────────────── */
.wake {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: end center;
  padding-bottom: 12%;
  background: #0000;
  cursor: pointer;
}
.wake span {
  font-size: clamp(12px, 2.4vmin, 18px);
  letter-spacing: .6px;
  color: #BFE6F2;
  opacity: .75;
  animation: pulse 2.6s ease-in-out infinite;
}
.wake[hidden] { display: none; }
@keyframes pulse { 0%, 100% { opacity: .35 } 50% { opacity: .9 } }

/* Savet o slusalicama vazi SAMO do prvog gesta.  `.transcript` sedi na
   `bottom: 5%` i visok je dva reda, pa se posle budjenja stampao TACNO preko
   ovog teksta — vidi se golim okom na artifacts/ui_e2e/05-govori.png iz
   proslog kruga.  Dete je vec procitalo savet dok je gledalo „Probudi Titija";
   od trenutka kad Titi progovori, rec ima transkript, ne savet. */
.hint {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  opacity: .22;
  white-space: nowrap;
  transition: opacity .4s ease;
  pointer-events: none;
}
.screen:has(.wake[hidden]) .hint,
.screen:has(.transcript.on) .hint { opacity: 0; }

/* Meni sa 21 emocijom nije igracka — to je isporucni artefakt za Beiens. */
.panel {
  position: absolute;
  right: 6%;
  top: 11%;
  z-index: 7;
  width: min(56%, 320px);
  max-height: 74%;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: #060a0ee6;
  border: 1px solid #ffffff14;
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.panel[hidden] { display: none; }
.panel .btn { opacity: .8; padding: 6px 4px; font-size: 11px; }
.panel h3 {
  grid-column: 1 / -1;
  margin: 4px 0 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .45;
}

/* Prst nije misev: na dodirnom ekranu svako dugme mora da bude bar 44x44 CSS px
   (WCAG 2.2 „Target Size"), i ne sme da racuna na hover da bi se videlo. */
@media (pointer: coarse) {
  .btn { min-width: 44px; min-height: 44px; opacity: .55; }
  .status { opacity: .55; }
  .ptt { min-height: 48px; padding: 12px 22px; opacity: .5; }
  .panel .btn { min-width: 0; min-height: 38px; }
}

/* iPhone sa „zarezom": kuciste ne sme pod status-traku. */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding:
      env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
  }
}

/* Sav pokret koji CSS uopste radi (lice se gasi u face.js). */
@media (prefers-reduced-motion: reduce) {
  .wake span { animation: none; opacity: .8; }
  .transcript, .msg, .btn { transition: none; }
}