/*
 * Vizualni jezik: MJERNI INSTRUMENT.
 *
 * Ovo je alat koji tuđe računalo stavlja pod ruku i pritom stalno mjeri —
 * ICE tip, rezolucija, sličice, kašnjenje. Zato brojevi nisu sitni tekst sa
 * strane nego prvorazredni sadržaj: monospace, tabularne znamenke, poravnati
 * stupci. Sve ostalo je tanko i mirno da im ne smeta.
 *
 * Tema je samo TAMNA, namjerno. Instrument se gleda satima i uz njega stoji
 * slika tuđeg ekrana koju svijetla podloga probija; polovična svijetla varijanta
 * bila bi lošija od nijedne.
 */

:root {
  --bg:      #0d0f13;
  --bg-2:    #0a0c0f;
  --panel:   #14181e;
  --sunk:    #10141a;   /* polja za unos, utori */
  --line:    #232a33;   /* vlas */
  --line-2:  #313a47;   /* jača vlas, rubovi kontrola */
  --fg:      #dde3ea;
  --muted:   #8b95a3;
  --dim:     #5f6a79;
  --accent:  #4cc2ff;
  --ok:      #3ddc84;
  --warn:    #f2b544;
  --bad:     #ff6b6b;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono",
          "Roboto Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gap: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) fixed;
  color: var(--fg);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Prazan tekstualni redak ne smije ostavljati rupu: većina statusnih redaka je
   prazna dok se nešto ne dogodi, a niz praznina razbija ritam ploče. */
.hint:empty, .error:empty { display: none; }

/* --- Tipografija ---------------------------------------------------------- */

h1 { font: 600 17px/1.3 var(--sans); margin: 0; letter-spacing: -.01em; }

/*
 * Naslov ploče je OZNAKA, ne rečenica: mala verzalna monospace pločica s vlasi
 * koja se proteže do ruba. Tako se ploče čitaju kao dijelovi jednog uređaja,
 * a ne kao poglavlja teksta.
 */
h2 {
  display: flex; align-items: center; gap: 12px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 14px;
}
h2::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
h3 { font: 600 13px/1.4 var(--sans); margin: 18px 0 8px; color: var(--fg); }

.hint { color: var(--muted); font-size: 12.5px; max-width: 68ch; margin: 0; }
.error { color: var(--bad); font-size: 12.5px; margin: 0; }

code {
  font: 12px/1.4 var(--mono);
  background: var(--sunk); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 3px; color: var(--fg);
}

pre {
  font: 11.5px/1.5 var(--mono);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px; overflow: auto; max-width: 100%; max-height: 300px; color: var(--muted);
  margin: 12px 0 0;
}

/* --- Diode ---------------------------------------------------------------- */

/*
 * Stanje se čita s ploče, ne iz rečenice. Sjaj postoji samo kad je upaljena —
 * ugašena dioda je rupa u ploči, ne siva mrlja.
 */
.led, .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--line-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}
.led.on, .machine.on .dot {
  background: var(--ok); box-shadow: 0 0 7px color-mix(in srgb, var(--ok) 70%, transparent);
}
.led.live {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 75%, transparent);
  animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .led.live { animation: none; } }

/* --- Kontrole ------------------------------------------------------------- */

/*
 * Gumbi su PLOČICE s vlasi, ne ispunjene pilule. Ispunjena boja bi u ovako
 * tamnoj ploči vukla pogled jače od slike udaljenog ekrana, a ona je ovdje
 * glavni sadržaj.
 */
button {
  font: 500 11px/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  padding: 9px 14px; cursor: pointer;
  color: var(--fg); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 3px;
  transition: border-color .12s, background .12s, color .12s;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:active:not(:disabled) { background: var(--sunk); }
button:disabled { opacity: .38; cursor: not-allowed; }

button.primary {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
button.primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line-2)); }
button.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, var(--panel)); }

/* Tekstualna radnja: bez okvira, bez verzala — nije upravljačka pločica. */
button.link {
  background: none; border: 0; padding: 0 2px; color: var(--accent);
  font: 12.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none;
}
button.link:hover { text-decoration: underline; }

input, select {
  font: 13px/1.3 var(--sans);
  padding: 9px 11px; color: var(--fg);
  background: var(--sunk); border: 1px solid var(--line-2); border-radius: 3px;
}
/* Identifikatori i kodovi se ČITAJU NAGLAS preko telefona — monospace i šire
   razmaknuto, da se 0 i O ne pomiješaju u samom polju. */
#pair-id, #code-input, #sas {
  font: 14px/1.3 var(--mono); letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input::placeholder { color: var(--dim); }

label {
  display: grid; gap: 5px;
  font: 500 10px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim);
}
form { display: grid; gap: 13px; }
form.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
form.inline label { flex: 0 1 200px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

/* --- Gornja traka --------------------------------------------------------- */

.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 46px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
/* Tanka signalna traka ispod zaglavlja — jedini ukras u cijelom sučelju. */
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 45%, transparent) 30%, transparent 70%);
}
.wordmark {
  font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.wordmark b { color: var(--fg); font-weight: 600; }
.bar .spacer { flex: 1; }
.bar-user { display: none; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.bar-user strong { color: var(--fg); font-weight: 500; }
/* Korisnik se pokazuje tek kad je prijava gotova; stanje se čita iz DOM-a,
   da ga ne treba držati na dva mjesta. */
body:has(#app-view:not([hidden])) .bar-user { display: flex; }
body:has(#app-view:not([hidden])) .bar .led { background: var(--ok);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ok) 70%, transparent); }

/* --- Ploče ---------------------------------------------------------------- */

/*
 * Ista zamka kao kod `.cols`, jedan sloj dublje: implicitni stupac grida se
 * siri do `max-content`, pa je dug redak ICE ispisa gurao cijelu ploču izvan
 * prozora i stranica je dobila vodoravni skrol.
 */
.stack { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.panel .switch { margin-top: 14px; }
.deck { max-width: 1060px; margin: 0 auto; padding: 24px 20px 72px; display: grid; gap: var(--gap); }
/*
 * `minmax(0, …)`, ne goli `1fr`.
 *
 * Zadani `1fr` je `minmax(auto, 1fr)` i ne smije se stisnuti ispod min-content
 * svojeg sadrzaja. Dovoljan je jedan dug redak ICE ispisa (adrese kandidata se
 * ne lome) da desni stupac nabuja i lijevom ostavi trecinu sirine — a razmjer
 * u predlosku pritom izgleda ispravno.
 */
.cols {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--gap); align-items: start;
}
.cols > * { min-width: 0; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

.panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 16px 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.panel > .hint { margin-bottom: 12px; }

/* Prijava i registracija: uska ploča, sama na sredini. */
.panel.solo { max-width: 400px; margin: 8vh auto 0; }
.panel.solo form { max-width: none; }

/* --- Popis računala ------------------------------------------------------- */

#machines { display: grid; margin-top: 14px; }
#machines > .hint { padding: 6px 2px; }

/*
 * Redak je FLEX, ne grid s imenovanim stupcima: `machines.js` iza glavnog gumba
 * dodaje promjenjiv broj sporednih (Probudi se pojavi samo offline strojevima),
 * pa bi ih fiksna mreza slozila jednu preko druge.
 */
.machine {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 10px 12px 12px;
  border-top: 1px solid var(--line);
  position: relative;
}
.machine:first-child { border-top: 0; }
/* Kanalna traka uz redak: pokaže koji je red pod rukom, bez pomicanja ičega. */
.machine::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px;
  background: transparent; transition: background .12s;
}
.machine:hover::before { background: var(--line-2); }
.machine.on:hover::before { background: var(--ok); }
.machine:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.machine.off { opacity: .6; }

.machine-main { display: grid; gap: 3px; flex: 1; min-width: 170px; }
.machine-main strong { font-weight: 600; font-size: 13.5px; }
.machine-sub {
  font: 11.5px/1.45 var(--mono); color: var(--dim);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.machine-sub .warn { color: var(--warn); }
/* Sve radnje u jednom omotu: bez njega bi se pri uskom stupcu jedan gumb
   otkinuo u novi red i sletio uz LIJEVI rub, ispod imena. */
.machine-acts {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end;
  /* Kad se cijeli omot prelomi u novi red, `auto` ga i tada drzi uz desni rub —
     radnje su uvijek na istoj strani, bez obzira na sirinu stupca. */
  margin-left: auto;
}
.machine-state {
  font: 11px/1 var(--mono); color: var(--muted);
  letter-spacing: .04em; white-space: nowrap; margin-right: 2px;
}
/* Poveži se je glavna radnja retka; ostale su tiše i manje. */
.machine .connect { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); }
.machine .connect:disabled { color: var(--fg); border-color: var(--line-2); }
.machine .wake, .machine .wolset, .machine .unpair {
  font-size: 10px; padding: 6px 9px; color: var(--muted); border-color: var(--line);
}
/* Zupcanik je znak, ne rijec: verzal i prored bi ga stisnuli u mrlju. */
.machine .wolset { font-size: 13px; line-height: 1; letter-spacing: 0; padding: 5px 8px; }

/*
 * Potvrda i postavke retka: uvuceno ispod stroja na koji se odnose, s tankom
 * trakom uz lijevi rub — da se odmah vidi CIJEMU retku pripadaju.
 */
.machine-panel {
  display: grid; gap: 10px;
  padding: 12px 14px; margin: 0 0 2px 12px;
  border-left: 2px solid var(--line-2);
  background: var(--sunk);
}
.machine-panel .hint { max-width: none; }
.machine-panel .row { gap: 8px; }
.machine-panel label { max-width: 320px; }

/* --- Zapisnik ------------------------------------------------------------- */

#audit h3:first-child { margin-top: 0; }
.audit-row {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
  font: 12px/1.5 var(--mono);
}
.audit-row:first-of-type { border-top: 0; }
.audit-row span { color: var(--dim); }
.audit-row strong { color: var(--fg); font-weight: 500; }
.audit-state { margin-left: auto; color: var(--muted); letter-spacing: .05em; }
/* Prijenosi datoteka idu u vlastiti redak: to je ono zbog čega vlasnik i čita
   zapisnik, pa ne smije završiti stisnuto među ostale oznake. */
.audit-files {
  flex-basis: 100%; margin: 6px 0 0; padding-left: 16px;
  color: var(--muted); font-size: 11.5px; line-height: 1.6;
}
.audit-files li { overflow-wrap: anywhere; }
.audit-files li::marker { color: var(--dim); }

/* --- Dijagnostika --------------------------------------------------------- */

/*
 * ICE test je alat za razvoj, ne svakodnevna radnja. Sklopljen je da ne stoji
 * na putu, ali se NE skriva — bez njega se ne može utvrditi radi li TURN.
 */
details.panel > summary {
  list-style: none; cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); display: flex; align-items: center; gap: 12px;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: ""; flex: 1; height: 1px; background: var(--line); }
details.panel > summary::before { content: "+"; font-size: 13px; line-height: 1; }
details.panel[open] > summary::before { content: "–"; }
details.panel[open] > summary { margin-bottom: 14px; }
details.panel > *:not(summary) { margin-top: 12px; }

#ice-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  font: 11px/1 var(--mono); letter-spacing: .06em;
  padding: 6px 10px; border-radius: 3px; border: 1px solid;
}
.badge.ok  { color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
             background: color-mix(in srgb, var(--ok) 10%, transparent); }
.badge.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent);
             background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* --- Sesija: preuzima cijeli prozor --------------------------------------- */

/*
 * Kad sesija živi, ona je JEDINO što se vidi. Popis računala i zapisnik ispod
 * slike tuđeg ekrana samo bi mamili skrol usred upravljanja.
 *
 * Stanje se čita iz `:has()` nad samim `#session`, umjesto da se drži zastavica
 * u JS-u: sesija se gasi s više mjesta (gumb, kraj s druge strane, pad veze),
 * pa bi se zastavica prije ili poslije razišla sa stvarnošću.
 */
body:has(#session:not([hidden]):not(.minimized)) .deck,
body:has(#session:not([hidden]):not(.minimized)) .bar { display: none; }

#session:not([hidden]) {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--bg-2);
}

/*
 * Sklopljena pozornica: ostaje samo zaglavlje, kao traka uz donji rub.
 *
 * Sesija pritom ŽIVI dalje — traka to i govori (dioda, ime stroja, očitanja,
 * Prekini). Skrivanje slike bez ijednog traga bilo bi upravo ono što etičko
 * pravilo zabranjuje: gledanje koje se ne vidi.
 */
#session.minimized { inset: auto 0 0 0; border-top: 1px solid var(--line); }
#session.minimized .stage-body, #session.minimized .stage-foot { display: none; }
/*
 * U sklopljenoj traci nema radnji: sklapanje gasi upravljanje, pa bi prijenos
 * datoteka ionako bio odbijen. Gumb koji ne moze uspjeti gori je od nikakvog.
 */
#session.minimized .stage-actions { display: none; }
#session.minimized .stage-head { border-bottom: 0; }
/* Traka lebdi nad sadržajem, pa dno stranice mora dobiti mjesta. */
body:has(#session.minimized) .deck { padding-bottom: 84px; }

.stage-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 44px; flex: none;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.stage-head strong { font-size: 13.5px; font-weight: 600; }
#stage-back { font-size: 10px; padding: 7px 11px; color: var(--muted); border-color: var(--line); }

/* Skupina radnji uz desni rub, odvojena vlasi od očitanja. */
.stage-actions {
  display: flex; align-items: center; gap: 7px;
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--line);
}
/* Bez `nowrap` se dvorijecni natpis prelomi u dva reda i traka naraste. */
.stage-actions button { font-size: 10px; padding: 7px 11px; white-space: nowrap; }

/* Ime stroja ne smije gurati gumbe iz trake. */
.stage-head strong { white-space: nowrap; }
#session-status {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Na uskom prozoru očitanja odlaze prva: gumbi su radnje, brojevi su podatak. */
@media (max-width: 1100px) { .stage-head #stats { display: none; } }
@media (max-width: 900px) { .stage-head #latency, .stage-head #session-status { display: none; } }
.stage-head .spacer { flex: 1; }

/* Očitanja: mjerene vrijednosti, poravnate i uvijek na istom mjestu. */
#latency, #stats {
  font: 11.5px/1 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap;
}
#session-status { font-size: 12px; color: var(--muted); }

.stage-body { flex: 1; min-height: 0; display: flex; }
/*
 * Slika se poziciju APSOLUTNO, ne kroz `height: 100%`.
 *
 * Omot je grid s automatski visokim retkom, pa mu visina za postotke NIJE
 * odrediva; `height: 100%` se tada ponasa kao `auto`, a <video> tada uzme
 * visinu iz vlastitog omjera. Izmjereno: omot 1440x450, a video 1440x**810** —
 * prelio se 360 px preko alatne trake i, kako je iznad nje, POJEO SVE KLIKOVE
 * na njoj. Uz to su i koordinate bile krive, jer se vidjela samo gornja
 * polovica slike, a racunica je gledala cijelu.
 *
 * Prije preslagivanja u pozornicu omot je imao `aspect-ratio: 16/9`, pa se
 * krivo izracunata visina slucajno poklapala s njegovom i kvar se nije vidio.
 */
.screen-wrap {
  flex: 1; min-height: 0; position: relative;
  background: #000; overflow: hidden;
}
#screen {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
}
#screen.controlling { cursor: none; }

/*
 * Cijeli zaslon dobiva OMOT, ne <video>.
 *
 * Kursor se crta lokalno kao zaseban element unutar omota; da u fullscreen ode
 * sam video, kursor bi ostao u dokumentu ispod i jednostavno se ne bi vidio.
 * `aspect-ratio` se mora ugasiti — na punom zaslonu bi inače ostavio praznine
 * uz sliku i pomaknuo računicu koordinata.
 */
.screen-wrap:fullscreen {
  aspect-ratio: auto; width: 100vw; height: 100vh;
  border: 0; border-radius: 0; background: #000;
}

/* Zaslon za lozinku: jedina stvar preko slike koja SMIJE primati klikove. */
.gate {
  position: absolute; inset: 0; z-index: 6;
  display: grid; align-content: center; justify-content: center;
  gap: 12px; padding: 28px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
}
/* Zastor pokriva cijelu plohu, ali stupac s poljem ostaje uzak i citljiv. */
.gate > * { width: min(360px, 78vw); }
.gate h2 { margin: 0; }
.gate .row { gap: 8px; }

#cursor {
  position: fixed; width: 12px; height: 18px; pointer-events: none; z-index: 10;
  background: #fff; border: 1px solid #000;
  clip-path: polygon(0 0, 0 100%, 28% 78%, 46% 100%, 62% 92%, 44% 70%, 100% 62%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Podnožje pozornice: alatna traka pa, ispod nje, sve što se javlja povremeno. */
.stage-foot {
  flex: none; max-height: 42vh; overflow-y: auto;
  background: var(--panel); border-top: 1px solid var(--line);
  padding: 12px 16px 14px; display: grid; gap: 10px;
}
.stage-foot .row { gap: 8px; }
#screen-controls { padding-top: 10px; border-top: 1px solid var(--line); }
.inline-label {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 10px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim);
}
.inline-label select { padding: 6px 9px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.inline-label select:disabled { opacity: .45; }

progress {
  width: 100%; height: 3px; appearance: none; border: 0; background: var(--sunk);
}
progress::-webkit-progress-bar { background: var(--sunk); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }

/* --- Provjera identiteta -------------------------------------------------- */

.verify {
  border: 1px solid var(--line); border-left: 2px solid var(--ok);
  border-radius: 3px; padding: 11px 14px; background: var(--sunk);
}
.verify strong { font-size: 13px; }
.verify.bad { border-left-color: var(--bad); }
.verify.bad strong { color: var(--bad); }
.verify p { margin: 5px 0 0; }
.sas { font-size: 12.5px; color: var(--muted); }
.sas code { font-size: 15px; letter-spacing: .2em; color: var(--fg); }

/* --- Kamere --------------------------------------------------------------- */

/*
 * Kamere lebde nad slikom udaljenog ekrana, u donjem desnom kutu.
 *
 * `pointer-events: none` je obavezan: kad je upravljanje uključeno, klik preko
 * kamere mora proći na udaljeno računalo kao i svaki drugi. Bez toga bi kut
 * slike bio mrtva zona u koju se ne može kliknuti, a razlog se ne bi vidio.
 */
.call-media {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.call-media video {
  display: block; aspect-ratio: 4/3; object-fit: cover;
  background: #000; border: 1px solid var(--line-2); border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0,0,0,.55);
}
/* Sugovornik je veći od vlastite slike: njega se gleda, sebe se provjerava. */
#remote-cam { width: 240px; }
#local-cam  { width: 132px; }
/* Na uskom prozoru kamere ne smiju pojesti sliku. */
@media (max-width: 700px) {
  #remote-cam { width: 150px; }
  #local-cam  { width: 92px; }
}

/*
 * Atribut `hidden` mora POBIJEDITI svako pravilo za display.
 *
 * Preglednikov zadani `[hidden] { display: none }` dolazi iz UA stilova, pa ga
 * nadjača bilo koje autorsko `display: flex/grid/block` na istom elementu. Bez
 * ovog pravila `el.hidden = true` tiho ne radi ništa.
 *
 * Nije teoretsko: traka "Sesija u tijeku" bila je zato vidljiva UVIJEK, i na
 * stroju na kojem nitko nije gledao ekran. Baš indikator koji po etičkom
 * pravilu mora govoriti istinu (vidi CLAUDE.md) lagao je od prvog dana.
 */
[hidden] { display: none !important; }