/* videz.css — edina, privzeta tema Sove ("umirjeno / peščen poudarek"). Prej
   preklopljiva ("videz-nov"), od 2026-09-11 brez preklopa: velja vedno, brez
   pogoja. Nalaganje je zadnje v kaskadi (za avtopilot.css).

   Faza 1: barvna paleta (rahlo svetleje), nežen animiran žarek v ozadju,
   mirnejše kartice (pika + ime namesto barvnih avatarjev), ožji dokirani stolpec
   na namizju, peščen poudarek na izbranem chatu in fokusu. Zelena ostane barva
   dejanja in živega statusa. */

:root {
  /* Rahlo svetlejše površine kot privzeto */
  --bg:          #101613;
  --bg2:         #161f1a;
  --card:        #1b241f;
  --card-hover:  #232f28;
  --line:        #2c3931;
  --text:        #e9efea;
  --muted:       #93afa1;
  /* zelena ostane iz osnova.css: --green / --green-bright */

  /* Peščen poudarek — uporabljen varčno */
  --vn:          #c9a06a;
  --vn-2:        #d9c2a0;
  --vn-weak:     rgba(201,160,106,0.10);
  --opozorilo:   #e0913f;
  --opozorilo-2: #d9962f;
  --glow:        #6dffc1;
  --ink:         #06120c;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Ozadje: zelena aurora + mrežje vozlišč ("brain cells") -------------
   Tri plasti, VSE na lastnem pozicioniranem .vn-ozadje (ne na body/body::before):
   (1) osnovna barva + mehki zeleni radiali, (2) ::before zavesa, ki lebdi kot
   severni sij, (3) canvas .vn-mrezje z drsečimi vozlišči (riše ga videz.js).
   Zakaj ne na body: `interactive-widget=resizes-content` (glej priponke.js) ob
   dvigu tipkovnice namerno skrči layout viewport, da vnos pride nad tipkovnico
   -- a to skrči tudi ICB vsakega `fixed`/`background-attachment:fixed` na body,
   torej bi se to ozadje ob vsaki tipkovnici vidno stisnilo/premaknilo. .vn-ozadje
   je zato ločen element, ki ga videz.js pincira na največjo doslej znano
   velikost -- enako kot .vn-mrezje -- in tipkovnico preprosto ignorira. */
body { background: var(--bg); }
.vn-ozadje {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
  transform: translateZ(0); will-change: transform; backface-visibility: hidden;
  contain: layout paint style;
  background:
    radial-gradient(720px 580px at 12% 14%, rgba(47,163,124,0.18), transparent 70%),
    radial-gradient(640px 540px at 88% 82%, rgba(70,197,150,0.15), transparent 72%),
    radial-gradient(560px 480px at 58% 106%, rgba(35,130,100,0.13), transparent 70%),
    var(--bg);
  animation: vnGlow 30s ease-in-out infinite alternate;
}
@keyframes vnGlow {
  from { background-position: 0% 0%, 100% 100%, 50% 100%, 0 0; }
  to   { background-position: 9% 7%, 90% 92%, 58% 96%, 0 0; }
}
/* Zavesa severnega sija -- lebdi nad osnovo, pod vsebino. */
.vn-ozadje::before {
  content: ''; position: absolute; inset: -35%; pointer-events: none;
  background:
    radial-gradient(42% 55% at 28% 38%, rgba(70,197,150,0.20), transparent 72%),
    radial-gradient(46% 52% at 72% 62%, rgba(47,163,124,0.17), transparent 74%),
    radial-gradient(34% 44% at 55% 26%, rgba(130,235,190,0.11), transparent 70%);
  filter: blur(28px) saturate(1.12);
  animation: vnAurora 34s ease-in-out infinite alternate;
}
@keyframes vnAurora {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(-5deg) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(4deg) scale(1.16); }
  100% { transform: translate3d(-2%, 5%, 0) rotate(-2deg) scale(1.08); }
}
/* Canvas z mrežjem vozlišč: čez ozadje, pod vso vsebino aplikacije.
   translateZ(0) + will-change ga poriata na lastno kompozitno plast -- brez tega
   Android Chrome ob drsenju pusti navpične sledi/glitch skozi neprosojne poglede. */
.vn-mrezje {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  transform: translateZ(0); will-change: transform; backface-visibility: hidden;
  contain: layout paint style;
}
/* Na neprosojnih pogledih (Avtopilot, Arhiv) canvas sploh skrij -- tam se ne
   vidi, le prispeva h glitchu in porabi. Pregled je od redesigna (koncept 2)
   prosojen s steklenimi karticami, zato tam mrežje TEČE naprej. */
body:has(#avtopilot:not([hidden])) .vn-mrezje,
body:has(#arhiv:not([hidden])) .vn-mrezje {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .vn-ozadje,
  .vn-ozadje::before { animation: none; }
  .vn-mrezje { display: none; }
}
/* Glavni pogledi so prosojni, da se aurora in mrežje vidita skozi (paneli in glave ostanejo). */
#chat-view,
#avtopilot,
.bubbles,
#dom { background: transparent; }

/* --- Kartice chatov: mirneje, pika + ime ------------------------------- */
.kartica {
  border-radius: 10px;
  /* Podlaga NI tu podvojena — pride iz seznam.css (.kartica in stanja kot
     .neprebran imajo tam svojo barvo); ta datoteka naj ne tekmuje za isto polje. */
}
/* Ugasni prelivajoč gradient pri MIRNO odprtem chatu — čist videz. "Dela"
   (Claude res piše) in "čaka te" NAMENOMA izvzeta: prav ta dva gibanja sta
   edini namig, da nekaj teče oz. čaka pregled (kartCakaSij/preliv, seznam.css). */
.kartica.aktiven:not(.dela) {
  background-image: none;
  animation: none;
}
.kartica.neprebran:not(.dela) {
  background-image: none;
}
/* Brez obrob okoli kartic — tudi za stanja; pojavijo se šele ob prehodu z miško.
   Stanje pove leva črtica (odprt / čaka te) in statusna pika, ne okvir. */
.kartica,
.kartica.aktiven,
.kartica.neprebran:not(.dela) { border-color: transparent; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  body.namizje .predal .kartica:hover {
    border-color: rgba(70,197,150,0.4); background: var(--card-hover);
  }
}
/* Statusna pika je v tem videzu kar avatar (6 px). Dodatna pika iz namizje.css
   (za star videz) je tu odveč — pusti le eno, brez temnega obročka. */
.kartica .avatar.spi::after { display: none; }

/* Avatar -> enotna majhna statusna pika (brez barve-po-chatu).
   Višja specifičnost + !important, ker namizje.css poveča .predal .kartica .avatar. */
.kartica .avatar,
body.namizje .predal .kartica .avatar {
  width: 6px !important; height: 6px !important; border-radius: 50%;
  font-size: 0; border: none !important;
  background: #7fb8a2 !important; color: transparent !important;
  align-self: center;
}
.kartica .avatar .owl { display: none !important; }
.kartica .avatar.aktiven,
body.namizje .predal .kartica .avatar.aktiven {
  background: var(--green-bright) !important;
  box-shadow: 0 0 7px rgba(70,197,150,0.6);
}
/* Speči chati: vidna, a mirnejša pika (prej skoraj črna #4a5f54). */
.kartica .avatar.spi {
  background: #6f9686 !important; filter: none;
}
.kartica .avatar.pretekli {
  background: #5c7d70 !important;
}
/* Utrip okoli aktivne pike: vedno zelen (ne barva-po-chatu -- ta je bila lahko vijolična). */
.kartica .avatar.aktiven::after {
  inset: -3px; border-width: 1.5px;
  border-color: var(--green-bright) !important;
}
/* Pika neprebranega odgovora: pomanjšaj skladno s tanjšimi karticami. */
.kartica-pika { width: 6px; height: 6px; }

/* Izbran/odprt chat: tanka peščena črta ob levem robu */
.kartica.aktiven::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2.5px; border-radius: 2px; background: var(--vn);
}
/* Odprt chat, ki HKRATI dela (.aktiven.dela) — "dela" mora zmagati nad peščeno
   črto, sicer izgleda kot "čaka te" (rumeno), čeprav dejansko teče. Ista
   specifičnost kot zgoraj, zato mora priti PO njej. */
.kartica.aktiven.dela::before {
  background: var(--green-bright);
}

/* --- Namizje: ožji dokirani stolpec ---------------------------------- */
body.namizje { --predal-w: 317px; }

/* Fokus vnosnega polja: OPUŠČENO. Prej je #vnos:focus-within dobil peščen
   `box-shadow: 0 0 0 1px` okoli CELE cone vnosa — zaradi ID-specifičnosti ga
   `.vnos:focus-within` iz FAZE 8 ni preglasil, zato je na PC-ju ostala tanka
   črta okrog. Fokus zdaj nosi izključno zaobljeno polje .vnos-polje (FAZA 8). */

/* --- Drobne uglasitve ---------------------------------------------------- */
.btn-primary,
.uvod-nov { border-radius: 11px; }

/* ============ FAZA 2: spodnja vrstica razdelkov + zložljiv stolpec ========= */
:root {
  --vn-tb: 72px;
  /* Rezervirana višina skupaj z varnim robom telefona (home indicator). */
  --vn-tb-safe: calc(var(--vn-tb) + env(safe-area-inset-bottom, 0px));
}

/* --- Spodnja vrstica razdelkov (Pregled / Claude / Avtopilot) ---
   Nastavitve niso v vrstici: doma ostanejo gumb v glavi, drugod jih videz.js
   doda kot ikono v glavo pogleda (.vn-nast-ik), na namizju pa so pod chati. --- */
.vn-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  min-height: var(--vn-tb);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch;
  background: rgba(20,28,24,0.95);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.vn-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer; color: var(--muted);
  font: inherit; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; position: relative;
}
.vn-tab svg { width: 23px; height: 23px; pointer-events: none; }
/* Claude logotip je optično nizek in širok -> rahlo večji, da se poravna z drugimi. */
.vn-tab[data-vn="claude"] svg { width: 25px; height: 25px; }
.vn-tab.izbran { color: var(--vn); }
.vn-tab.izbran::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 2px; background: var(--vn);
}

html:has(#login-ovoj:not([hidden])) .vn-tabbar,
html:has(.galerija-ovoj:not([hidden])) .vn-tabbar { display: none; }

/* Značka neprebranega (Claude) / pozornega (Avtopilot) — jantarna, kot obstoječa
   .kartica-pika (glej seznam.css), z istim blagim utripom. */
.vn-znacka {
  position: absolute; top: 1px; left: 50%; transform: translateX(4px);
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #e0b155; color: #241c05;
  font-size: 0.62rem; font-weight: 800; line-height: 1; letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 0 0 2px var(--bg2), 0 0 0 0 rgba(224,177,85,0.55);
  animation: vn-znacka-utrip 2s ease-in-out infinite;
}
@keyframes vn-znacka-utrip {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 0 rgba(224,177,85,0.55); }
  50%      { box-shadow: 0 0 0 2px var(--bg2), 0 0 8px 3px rgba(224,177,85,0.5); }
}
@media (prefers-reduced-motion: reduce) { .vn-znacka { animation: none; } }

/* Med tipkanjem (telefon): vrstica se umakne in NE rezervira prostora, da
   gumb "pošlji" ostane dosegljiv nad tipkovnico. */
body:not(.namizje).vn-tipkam .vn-tabbar { display: none; }
body:not(.namizje).vn-tipkam #chat-view { padding-bottom: 0 !important; }
body:not(.namizje).vn-tipkam #dom { padding-bottom: 0 !important; }

/* --- Prostor za vrstico: rezerviraj dno v pogledih (border-box padding, ne height) --- */
#chat-view,
body.namizje #dom,
body.namizje #pregled,
body.namizje #avtopilot {
  box-sizing: border-box !important;
  padding-bottom: var(--vn-tb-safe) !important;
}
body:not(.namizje) #dom { padding-bottom: calc(var(--vn-tb-safe) + 1.5rem) !important; }
body.namizje .vn-tabbar { left: var(--predal-w); }

/* Stare vstopne točke nadomesti vrstica — Pregled/Avtopilot izgineta iz glave
   doma (sta v vrstici), Nastavitve pa tam OSTANEJO na svojem mestu (edini
   preostali gumb v glava-gumbi, prvotni izgled — ni "plavajoč", zato ni glomazen). */
.dom-head .glava-gumbi #pregled-odpri,
.dom-head .glava-gumbi #ap-odpri { display: none; }

/* Nastavitve doma naj bodo videti ENAKO kot povsod drugod: gola ikona (.ikona-btn
   oz. .vn-nast-ik), ne obročast .glava-btn. Ko sta Pregled in Avtopilot odšla v
   spodnjo vrstico, je tu ostal edini gumb s starim obročem — isti gumb je bil
   zato doma obročast, v Pregledu/Avtopilotu pa gol. Velikost in stanje ob dotiku
   sta prepisana po .ikona-btn (chat.css), da se ujemata do pike. */
.dom-head .glava-gumbi #nastavitve {
  width: 2.7rem; height: 2.7rem;
  border: none; background: none; color: var(--text);
}
.dom-head .glava-gumbi #nastavitve:active { background: var(--line); }

/* Chat/Pregled/Avtopilot imajo prosojno glavo brez lastnega vstopa v Nastavitve —
   videz.js jim doda ikono v isti vrstici (.vn-nast-ik, glej tam). Na namizju je
   ne potrebujemo: tam je Nastavitve spodaj levo pod chati (predal-noga, niže). */
body.namizje .vn-nast-ik { display: none; }

/* Noga stolpca (samo namizje): prej trije vstopi, zdaj samo Nastavitve — Pregled
   in Avtopilot sta že v spodnji vrstici razdelkov, da se ne podvajata. */
body.namizje .predal-noga #predal-avtopilot,
body.namizje .predal-noga #predal-pregled { display: none; }
body.namizje .predal-noga #predal-nastavitve { flex: 1 0 100%; }
/* Malo dvignjena od roba stolpca, ne prilepljena nanj; margin-top:auto jo
   pritrdi na dno, tudi kadar je chatov malo in #predal-aktivni ne zapolni
   vsega prostora sam. */
body.namizje .predal-noga { margin-top: auto; margin-bottom: 0.6rem; }
body.namizje .predal-noga #predal-nastavitve:hover {
  border-color: rgba(70,197,150,0.4); background: var(--card-hover); color: var(--text);
}

/* Poraba na sredino glave chata */
#chat-view #stanje-vrsta { justify-content: center; }

/* --- Zložljiv dokirani stolpec (samo namizje) --- */
.vn-zvij {
  margin-left: auto; width: 26px; height: 26px; flex-shrink: 0;
  display: none; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 7px;
  color: var(--muted); cursor: pointer;
}
.vn-zvij svg { width: 14px; height: 14px; pointer-events: none; }
body.namizje .predal-glava { display: flex; align-items: center; }
body.namizje .vn-zvij { display: flex; }

/* Skrit + robni gumb */
body.namizje[data-vn-stolpec="skrit"] { --predal-w: 0px; }
body.namizje[data-vn-stolpec="skrit"] #predal-ovoj {
  width: 320px; transform: translateX(-100%); overflow: hidden;
}
.vn-odpri-rob {
  position: fixed; left: 0; top: 50%; z-index: 61; display: none;
  width: 20px; height: 52px; align-items: center; justify-content: center;
  background: var(--vn); color: #241c05; border: none; cursor: pointer;
  border-radius: 0 9px 9px 0;
}
.vn-odpri-rob svg { width: 14px; height: 14px; pointer-events: none; }
body.namizje[data-vn-stolpec="skrit"] .vn-odpri-rob { display: flex; }

/* Dokirani seznam ne sme teči pod vrstico */
body.namizje .predal { padding-bottom: calc(var(--vn-tb-safe) + 0.5rem); }

/* ============ FAZA 3: nižje kartice, mehak vnos, stekleni trak porabe ====== */

/* --- Kartice chatov: nižje; na domačem zaslonu brez podnapisa časa --------- */
.kartica {
  padding: 0.42rem 0.6rem; gap: 0.5rem; border-radius: 9px;
}
#dom .kartica .pod { display: none; }

/* --- Domači zaslon: vse skupaj više (manj zraka pod glavo) --------------- */
body:not(.namizje) #dom {
  padding-top: calc(0.4rem + env(safe-area-inset-top)) !important;
}
.dom-head { padding-bottom: 0.4rem; }

/* --- Trak porabe: brez podlage in brez lepljenja -- samo položen za glavo,
   zdrsi z vsebino vred. --- */
#dom .poraba-trak,
#avtopilot .poraba-trak {
  position: static;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: none;
  padding-top: 0.2rem; padding-bottom: 0.35rem;
}

/* --- Trikotnik "poraba prehiteva uro": poenoten peščen poudarek --------- */
.stanje-vrsta .hitro,
.poraba-trak .hitro {
  color: var(--vn);
  font-size: 0.7rem; margin-left: 3px;
  filter: drop-shadow(0 0 4px rgba(201,160,106,0.4));
}

/* --- Vnos v chatu: polje in čipa modela le plavajo, brez podlage pod njimi - */
.vnos {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.priponke { background: transparent; }
/* Namesto sence: široka zelena ločilnica na vrhu cone vnosa (nad čipoma in poljem). */
.vnos::before {
  top: 0; bottom: auto; left: 8px; right: 8px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(70,197,150,0.8) 16%, rgba(70,197,150,0.8) 84%, transparent);
  box-shadow: 0 0 9px rgba(70,197,150,0.35);
}
/* Cona vnosa stisnjena: čipa modela navpično centrirana med ločilnico in poljem
   (enak zrak zgoraj/spodaj), zunanji in notranji robovi manjši. */
.vnos { padding: 0.4rem 0.55rem calc(0.3rem + env(safe-area-inset-bottom)); }
.vnos .model-chip { margin-bottom: 0.4rem; }
.vnos-polje {
  padding-top: 0.4rem; padding-bottom: 0.4rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Gumb "Na dno" enako velik kot čipa modela. */
.na-dno {
  padding: 0.24rem 0.5rem 0.24rem 0.55rem;
  gap: 0.3rem; font-size: 0.74rem; font-weight: 600;
  box-shadow: none;
}
.na-dno svg { width: 14px; height: 14px; }
.na-dno .nd-stevec {
  font-size: 0.68rem; padding: 0 0.32rem; min-width: 1rem;
}

/* ============ FAZA 7: Avtopilot poravnan z novim videzom ==================
   Avtopilot je zdaj ENAKOVREDEN razdelek spodnje vrstice, ne potisnjen
   podzaslon. Zato:
   - vstop je blag fade (kot #dom), ne potisk z desne;
   - glava je prosojna, brez ločnice/sence, gumb "nazaj" odpade
     (#ap-nazaj ostane v DOM-u, da ga vrstica "Claude" še sproži s .click());
   - osrednja površina je prosojna (skoznjo se vidi aurora);
   - lastna spodnja vrstica avtopilota (Plošča / Naloge / Nova naloga /
     Nastavitve) sede TOČNO nad globalno vrstico razdelkov — bereta se kot en
     dvonivojski pas, ne dve prekrivajoči se vrstici. */

#avtopilot:not([hidden]),
#pregled:not([hidden]) {
  animation: vstopFade 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Glava: ena ploskev s stranjo, naslov ob levem robu --- */
#avtopilot > .term-head {
  background: transparent; border-bottom: none; box-shadow: none;
  padding-top: calc(0.4rem + env(safe-area-inset-top));
}
#avtopilot > .term-head #ap-nazaj { display: none; }
/* Ikona Nastavitev mora tudi tu držati DESNI rob, kot povsod drugod. V tej glavi
   ni razmika (.glava-razmik je skrit), „nazaj" je skrit, naslov pa je absolutno
   centriran — ikona je zato edini element v toku in je pristala ob levem robu.
   Potisne jo lastni margin-left:auto; kadar je desno od naslova že kak gumb
   (status ali „nova naloga"), avto-rob prevzame TISTI, ikoni pa ga odvzamemo,
   sicer bi si prosti prostor razdelila in gumba bi se razlezla narazen. */
#avtopilot > .term-head .vn-nast-ik { margin-left: auto; }
#avtopilot > .term-head #ap-glava-plus:not([hidden]) { margin-left: auto; }
#avtopilot > .term-head #ap-glava-status:not([hidden]) ~ .vn-nast-ik,
#avtopilot > .term-head #ap-glava-plus:not([hidden]) ~ .vn-nast-ik { margin-left: 0; }

/* --- Prosojne površine: aurora se vidi skozi osrednji tok --- */
.ap-vsebina { background: transparent; }
/* Plasti (obrazec / podrobnosti / nastavitve) MORAJO ostati neprosojne, da
   zakrijejo ploščo za sabo — le njihova glava se poravna z novim videzom. */
.ap-plast > .term-head {
  background: transparent; border-bottom: none; box-shadow: none;
}
.ap-zavihki { background: transparent; }

/* --- Telefon: rezerviraj dno tudi v #avtopilot (kot #dom / #chat-view),
   da se osrednji drsnik konča nad globalno vrstico razdelkov. --- */
body:not(.namizje) #avtopilot {
  box-sizing: border-box !important;
  padding-bottom: var(--vn-tb-safe) !important;
}

/* Plasti (nova naloga, podrobnosti, nastavitve) so `position: absolute; inset: 0`
   znotraj #avtopilot (glej .ap-plast) — inset:0 jih razteza PREK padding-bottoma
   zgoraj, torej naravnost pod globalno vrstico .vn-tabbar, ki je fiksna in vidna
   na VSEH širinah (tudi na namizju, le zamaknjena za stolpec). Brez tega konča
   njihova pritrjena vrstica dejanj (.ap-p-pas — npr. gumb "Zaženi") skrita pod
   njo. To je osnova za vse širine; @media spodaj jo na ozkih zaslonih poveča še
   za avtopilotov lastni tab-bar (.ap-zavihki-dno), ki se prikaže samo tam. */
#ap-obrazec, #ap-podrobno, #ap-nastavitve { bottom: var(--vn-tb-safe); }

/* --- Dvonivojski pas na dnu (samo telefon) --- */
@media (max-width: 640px) {
  /* Lastna vrstica avtopilota se dvigne za višino globalne in prevzame njen
     material — skupaj berljivi kot en pas. Varni rob telefona nosi globalna
     vrstica pod njo, zato ga tu odvzamemo. */
  .ap-zavihki-dno {
    bottom: var(--vn-tb-safe);
    background: rgba(20, 28, 24, 0.95);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: none;
    padding-bottom: 0.3rem;
  }
  /* Izbrani razdelek dobi peščen poudarek (skladno z .vn-tab.izbran):
     besedilo v barvi poudarka + tanka črtica na vrhu, brez pill-podlage. */
  .ap-zavihki-dno .ap-zd {
    position: relative; border-color: transparent;
  }
  .ap-zavihki-dno .ap-zd[aria-current="page"] {
    color: var(--vn); background: transparent; border-color: transparent;
  }
  .ap-zavihki-dno .ap-zd[aria-current="page"]::after {
    content: ''; position: absolute; top: -0.3rem; left: 50%; transform: translateX(-50%);
    width: 22px; height: 2px; border-radius: 2px; background: var(--vn);
  }
  /* Vsebina panelov odmakne obe vrstici (svojo + globalno). */
  #avtopilot:has(.ap-zavihki-dno:not([hidden])) .ap-vsebina {
    padding-bottom: 4.4rem !important;
  }
  /* Vrhnje plasti končaj točno nad OBEMA vrsticama. */
  #ap-obrazec,
  #ap-podrobno,
  #ap-nastavitve {
    bottom: calc(3.65rem + var(--vn-tb-safe));
  }
}

/* ============ FAZA 8: namizna postavitev (PC pogled je bil "razstavljen") ====
   Cilj: PC izgleda kot telefon. Popravlja:
   1) podvojeni "Sova" (stolpec + glava domačega zaslona),
   2) merilnike porabe, ki so lebdeli sredi širokega podokna,
   3) vnos, ki se je zaradi telefonskih pravil raztegnil čez celo širino,
   4) tesno lepljenje vnosa ob spodnjo vrstico razdelkov,
   5) vidne okvirje: neprosojna glava, fokusni pravokotnik okoli vnosa, obroba
      Claudovega mehurčka — vse odstranjeno za seamless prehod,
   6) gumb "Na dno", ki je odletel na skrajni desni rob podokna.
   Točke 5 in 6 veljajo tudi za telefon (izboljšajo tudi tam), ostalo je body.namizje. */

/* 1) Domači zaslon nima svoje glave — logotip nosi že stolpec levo. */
body.namizje .dom-head { display: none; }
body.namizje #dom { padding-top: 0.6rem; }

/* 2) Merilniki porabe: na namizju NE na sredino, ampak poravnani z bralnim
   stolpcem (levi rob = levi rob pogovora / kartic) in stisnjeni pod glavo —
   berejo se kot podnapis, ne kot samostojna naprava sredi praznine. */
body.namizje #chat-view #stanje-vrsta {
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 0.1rem max(1.5rem, calc((100% - var(--pas)) / 2)) 0.5rem;
  margin-top: -0.15rem;
}
body.namizje #chat-view #stanje-vrsta .mer { width: auto; }
body.namizje #dom-poraba {
  justify-content: flex-start;
  padding-left: max(1.2rem, calc((100% - 720px) / 2));
}

/* 3) + 4) Vnos: telefonski stisnjen padding je bil za polno širino — na namizju
   vrni bralni stolpec in dodaj zrak do spodnje vrstice razdelkov. */
body.namizje .vnos {
  padding: 0.5rem max(1.5rem, calc((100% - var(--pas) - 40px) / 2)) 1rem;
}
/* Zelena ločilnica NAD vnosom ostane tudi na PC-ju (je ločilnica, ne okvir) —
   le zožana na isti bralni stolpec kot čipa in polje, da ne teče čez cel monitor. */
body.namizje .vnos::before {
  left: max(1.5rem, calc((100% - var(--pas) - 40px) / 2));
  right: max(1.5rem, calc((100% - var(--pas) - 40px) / 2));
}
body.namizje #chat-view {
  padding-bottom: calc(var(--vn-tb-safe) + 0.4rem) !important;
}
body.namizje .priponke {
  padding: 0.6rem max(1.5rem, calc((100% - var(--pas) - 40px) / 2)) 0;
}

/* ---- 5) SEAMLESS: brez vidnih okvirjev okoli pogovora in vnosa ------------
   Cilj: PC izgleda kot telefon — nič "definiranih boksov". */

/* Glava chata in vrstica stanja sta bili neprosojni ploskvi (--bg2) na prosojnem
   pogovoru → viden vodoraven šiv "škatle". Prosojni, kot je že #avtopilot glava. */
#chat-view > .term-head,
#chat-view #stanje-vrsta { background: transparent; }

/* Fokus vnosa je risal 1px pravokotnik okoli CELE cone .vnos (na PC-ju čez vso
   širino). Fokusni poudarek naj nosi samo zaobljeno polje .vnos-polje — in je
   ZELEN (ne peščen), obroba polja je zelena tudi v mirovanju. */
.vnos:focus-within {
  box-shadow: none !important; border-color: transparent !important;
}
.vnos-polje {
  border-color: rgba(47,163,124,0.40);
}
.vnos-polje:focus-within {
  border-color: var(--green-bright) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.32), 0 0 0 3px rgba(70,197,150,0.16),
              inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Claudov mehurček je imel 1px obrobo (--line) → "tanka meja" ob sporočilih.
   Brez obrobe in z mehkejšo senco se zlije z ozadjem; blag preliv ostane zaradi
   berljivosti nad auroro. */
.bubble.assistant {
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(70,197,150,0.10), rgba(70,197,150,0) 55%),
    linear-gradient(165deg, rgba(31,44,36,0.5), rgba(24,34,28,0.5));
}

/* 6) Gumb "Na dno": sidran je bil na desni rob CELEGA podokna (odletel je čez
   pogovor). Na namizju ga poravnaj z desnim robom bralnega stolpca — kot na
   telefonu sedi tik ob robu pogovora, nad vnosom. */
body.namizje .na-dno {
  right: max(1.5rem, calc((100% - var(--pas)) / 2));
}

/* ============ FAZA 9: Pregled poravnan z novim videzom ====================
   Pregled je zdaj enakovreden razdelek spodnje vrstice (tab "Pregled"), ne
   potisnjen podzaslon. Zato — tako kot #avtopilot v Fazi 7:
   - prosojne površine: skozi se vidi aurora (kartice lebdijo nad njo);
   - glava brez ločnice/sence, naslov ob levem robu, gumb "nazaj" odpade
     (#pregled-nazaj ostane v DOM-u — vrstica "Claude" ga še sproži s .click());
   - na telefonu je dno rezervirano nad globalno vrstico (kot #dom / #chat-view),
     sicer zadnja kartica ("Lokalna aktivnost") teče pod vrstico.
   Kartice dobijo enoten radij kot .kartica / gumbi. Zelena ostane barva
   podatka in živega statusa; peščena samo za značko "kje je ura" na obroču
   (skladno s trikotnikom "poraba prehiteva uro"). */

/* Prosojne površine — aurora se vidi skozi */
#pregled,
.pregled-vsebina { background: transparent; }

/* Glava: ena ploskev z ozadjem, naslov levo, brez nazaj-gumba */
#pregled > .term-head {
  background: transparent; border-bottom: none; box-shadow: none;
  padding-top: calc(0.4rem + env(safe-area-inset-top));
}
#pregled > .term-head #pregled-nazaj { display: none; }
#pregled > .term-head .term-ime {
  text-align: left; padding-left: 0.35rem;
}

/* Telefon: rezerviraj dno nad globalno vrstico razdelkov */
body:not(.namizje) #pregled {
  box-sizing: border-box !important;
  padding-bottom: var(--vn-tb-safe) !important;
}

/* #pregled mora biti pozicioniran, da se izriše NAD fiksnim canvasom mrežja
   (ta je prvi otrok body, z-index:0) -- sicer bi mrežje prekrilo kartice. */
#pregled { position: relative; z-index: 0; }

/* --- Redesign koncept 2: steklene kartice v mreži 2×2 -------------------
   Kartice so polprosojne (backdrop-blur), da se skozi vidita aurora in
   drseče mrežje. Zelena ostane barva podatka; peščena samo za poudarke. */
#pregled .pk-kartica {
  background: linear-gradient(180deg, rgba(27,36,31,0.72), rgba(22,31,26,0.66));
  border: 1px solid rgba(120,160,140,0.14);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
#pregled .pk-ik { color: var(--vn); }
#pregled .pk-meter .bar,
#pregled .track { background: rgba(120,160,140,0.14); }
#pregled .aktiv-naslov { color: var(--vn); }
#pregled .aktiv-col + .aktiv-col,
#pregled .pk-svc + .pk-svc { border-color: rgba(120,160,140,0.12); }

/* Značka "kje je ura" na obroču porabe: peščen poudarek */
#pregled .ring-tik { stroke: var(--vn); opacity: 1; }

/* ============ FAZA 10: PC — zadnje vidne hairline meje + poskakujoča drsna vrstica ===
   Dve pritožbi za namizni pogled Sovinega chata:
   1) še vedno vidne tanke črte "kjer je definirana meja",
   2) ob preklopu med razdelki (Pregled / Avtopilot / Claude) se z desne odpira in
      zapira drsna vrstica in vsebina poskoči za njeno širino. */

/* 1a) Tanka črta NAD vrstico "Delal X" znotraj Claudovega odgovora (border-top --line). */
.delal-cas { border-top: none; padding-top: 0; }

/* 1b) Časovni ločilnik med sklopi ("06:23") je bil obrobljena kapsula — brez obrobe
   in podlage je le tih napis. */
.cas-locilo {
  border: none; background: transparent; padding-left: 0; padding-right: 0;
}

/* 2) Osrednji drsniki razdelkov: skrij drsno vrstico (kot na telefonu). Ničelna
   širina = ni žleba = ob preklopu razdelkov nič ne poskoči. .predal (seznam chatov)
   obdrži svojo — ta je ves čas prisotna in ne povzroča skoka. */
body.namizje .bubbles,
body.namizje .pregled-vsebina,
body.namizje .ap-vsebina {
  scrollbar-width: none;
}
body.namizje .bubbles::-webkit-scrollbar,
body.namizje .pregled-vsebina::-webkit-scrollbar,
body.namizje .ap-vsebina::-webkit-scrollbar {
  width: 0; height: 0;
}

/* 2b) Kratek blisk drsne vrstice OB PREKLOPU razdelka: med menjavo sta oba pogleda
   (star + nov, vsak height:100dvh) za sličico hkrati v postavitvi → dokument
   naraste na ~200dvh in telo dobi navpično drsno vrstico, ki takoj izgine. Vsak
   razdelek že drsi sam v sebi, zato telo na namizju sploh ne sme drseti. */
body.namizje { overflow: hidden; }
