/* namizje.css — Namizni način (monitor): stranski stolpec in širše postavitve.
   (razbito iz enotnega styles.css; vrstni red povezav v index.html je pomemben) */
/* ============================================================================
   NAMIZNI NAČIN (monitor / računalnik)
   Vklopi ga app.js prek matchMedia('(min-width: 900px)') → body.namizje, da sta
   JS (dokiran predal, bližnjice) in CSS vedno usklajena. Vse spodaj je zaprto v
   .namizje ali v @media (hover: hover) → mobilni videz ostane nedotaknjen.
   ========================================================================== */
:root { --predal-w: 380px; --pas: 900px; }

/* Spodnja vrstica razdelkov (Pregled/Claude/Avtopilot) je bila v mobilni (dotik)
   velikosti tudi na namizju — velike ikone in napisi so na velikem zaslonu z
   miško delovali nesorazmerno "napihnjeno". Prepišemo isto spremenljivko
   (--vn-tb), ki jo `videz.css` uporablja tudi za rezervacijo spodnjega
   prostora v #chat-view/#dom/#pregled/#avtopilot — brez tega bi ostal pod
   nižjo vrstico prazen pas, ravno velik kot razlika v višini. */
body.namizje { --vn-tb: 50px; }
body.namizje .vn-tab { font-size: 0.68rem; gap: 2px; }
body.namizje .vn-tab svg { width: 18px; height: 18px; }
body.namizje .vn-tab[data-vn="claude"] svg { width: 19px; height: 19px; }

/* --- Stranski stolpec: predal ni več prekrivalo, ampak stalno viden stolpec --- */
body.namizje .predal-ovoj {
  position: fixed; inset: 0 auto 0 0; width: var(--predal-w); z-index: 40;
  background: none !important; backdrop-filter: none !important; transition: none;
}
body.namizje .predal {
  position: absolute; width: 100%; max-width: none;
  transform: none !important; transition: none;
  /* Brez spodnjega paddinga: prostor pod gumbi da nastavi `.predal-noga` sama,
     sicer bi pod pritrjenim trakom ostal prosojen pas, skozi katerega drsijo chati. */
  padding: 1rem 0.7rem 0; gap: 0.5rem;
  overscroll-behavior: contain;
  overflow: hidden;   /* stolpec se NE drsi — kar ne gre, odreže JS pod „Pokaži več" */
}
/* Seznam „Aktivni/Ostali" prevzame preostalo višino in odrežene kartice skrije. */
body.namizje #predal-aktivni { flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Razširjeno („Pokaži več chatov") — seznam SAM postane drsljiv, znotraj svoje
   nespremenjene (flex:1) višine. Prej je drsel cel `.predal`, glava/noga pa sta
   znotraj istega drsnika dobili `position:sticky` — ker je noga ostala pri
   robu VIDNEGA okna (ne pri koncu seznama), so nadaljnje kartice pristale
   vizualno POD njo, čeprav so bile v DOM-u za njo (Janovo poročilo: „naslednji
   chati se prikažejo kar pod nastavitvami"). Zdaj drsi le seznam, noga in gumbi
   ostanejo trajno pod njim, izven drsnika — nikoli prekriti. */
body.namizje .predal.razsirjeno #predal-aktivni { overflow-y: auto; }
body.namizje .predal-glava { font-size: 1.3rem; padding: 0.1rem 0.35rem 0.5rem; }
/* Gostejše kartice: v ozkem stolpcu je prostor za ime dragocen. */
body.namizje .predal .seznam { gap: 0.3rem; }
/* Fiksna višina vrstice — brez „resizanja" ob osveževanju. */
body.namizje .predal .kartica {
  height: 38px; flex: 0 0 38px; padding: 0 0.56rem; gap: 0.48rem; border-radius: 12px;
  /* Prazna vrstica: brez ozadja IN brez obrobe (tudi za stanja .spi/.aktiven/.neprebran,
     ki sicer barvajo obrobo). Oboje se pojavi šele ob prehodu z miško. */
  background-color: transparent; border-color: transparent;
}
/* Samo dejansko delujoč chat dobi rahlo polnilo; „aktiven" (živa, a mirujoča seja)
   je videti kot ostali — stanje pove leva črtica in pika, ne škatla. */
body.namizje .predal .kartica.dela { background-color: var(--card); }
/* Enako za "čaka te" — brez tega jo splošni reset dveh vrstic višje (enaka
   specifičnost, a on je NIŽJE v datoteki) povozi in zelena podlaga na namizju izgine. */
body.namizje .predal .kartica.neprebran:not(.dela) { background-color: #285b47; }
/* Izbrana (trenutno odprta) kartica v predalu: enako pravilo kot za mobilni
   seznam (listi.css), a z zadostno specifičnostjo, da povozi reset dve vrstici
   višje (background-color: transparent). */
body.namizje .predal .kartica.trenutni { background-color: rgba(70,197,150,0.16); }
body.namizje .predal .kartica:hover {
  background-color: var(--card-hover);
  border-color: rgba(70,197,150,0.4);
}
body.namizje .predal .kartica .avatar { width: 24px; height: 24px; }
body.namizje .predal .kartica .ime { font-size: 0.92rem; }
body.namizje .predal .kartica .kartica-cas { font-size: 0.72rem; }
/* Meni (⋯) se pokaže ob prehodu z miško, prostor pa ostane rezerviran (brez poskakovanja). */
body.namizje .predal .menu-btn { opacity: 0; transition: opacity 0.15s; }
body.namizje .predal .kartica:hover .menu-btn,
body.namizje .predal .menu-btn:focus-visible { opacity: 1; }
.pg-desk { display: none; }
body.namizje .pg-mob { display: none; }
body.namizje .pg-desk { display: inline; }
body.namizje .predal .btn-primary { margin-bottom: 0.6rem; padding: 0.75rem 1rem; font-size: 0.98rem; border-radius: 12px; }
/* Noga stolpca ostane na dnu — `.predal` sam se ne drsi (le notranji seznam
   #predal-aktivni, glej zgoraj), zato je noga vedno TRAJNO pod njim v
   normalnem toku, nikoli prekrita s karticami (prej `position:sticky` na
   `.predal`, ki se je "zataknil" sredi dolgega seznama, glej opombo zgoraj). */
.predal-noga { display: none; }
body.namizje .predal-noga {
  /* Seznam (#predal-aktivni, flex:1) že porine nogo na dno; `margin-top:auto` bi
     dodatno razdelil prosti prostor in pustil prazen pas nad gumbi. */
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0; flex-shrink: 0;
  padding: 0.7rem 0 1rem; background: var(--bg2); border-top: 1px solid var(--line);
}
/* Trije gumbi v 320 px širokem stolpcu odrežejo napis „Nastavitve", zato ima
   Avtopilot svojo vrstico, Pregled in Nastavitve pa si delita naslednjo. */
.noga-btn.siroko { flex: 1 0 100%; }
.noga-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--muted);
  font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.55rem 0.4rem;
}
.noga-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Pogledi se umaknejo desno od stolpca --- */
body.namizje #dom, body.namizje #chat-view, body.namizje #pregled { margin-left: var(--predal-w); }
body.namizje #dom {
  max-width: none; margin-right: 0; padding: 0;
  display: flex; flex-direction: column; height: 100dvh;
}
body.namizje .dom-head {
  padding: 0.7rem 1.2rem; margin: 0; background: var(--bg2);
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
body.namizje .glava-gumbi { display: none; }     /* vsi trije vstopi so v nogi stolpca */
/* Trak Avtopilota je edini element domačega zaslona, ki na namizju ostane v
   glavnem delu. Ker ima #dom takrat padding 0, se je razlezel od roba do roba —
   tu dobi enak pas kot ostala vsebina (720 px, poravnano s praznim stanjem). */
body.namizje #ap-trak {
  width: auto; max-width: 720px;
  margin: 1rem max(1.2rem, calc((100% - 720px) / 2)) 0;
}
/* Trak porabe se na namizju poravna z isto berljivo kolono kot vsebina pod njim
   (domači zaslon 720 px, avtopilot 960 px) — sicer merilniki lebdijo sredi širokega
   glavnega dela. Poravnava (center) ostane iz body.namizje .stanje-vrsta. */
body.namizje #dom-poraba {
  padding-left: max(1.2rem, calc((100% - 720px) / 2));
  padding-right: max(1.2rem, calc((100% - 720px) / 2));
}
body.namizje #ap-poraba-trak {
  padding-left: max(1.5rem, calc((100% - 960px) / 2));
  padding-right: max(1.5rem, calc((100% - 960px) / 2));
}
/* Na monitorju je seznam v stolpcu — tudi gumb do arhiva je tam, zato ga v glavnem
   delu skrijemo (sicer bi bila ista vrstica dvakrat). */
body.namizje #nov-chat, body.namizje #dom .sekcija,
body.namizje #arhiv-odpri { display: none; }
body.namizje #arhiv { margin-left: var(--predal-w); }
body.namizje .arhiv-vsebina { padding: 1.2rem max(1.5rem, calc((100% - 720px) / 2)) 2rem; }
body.namizje .ptr { display: none; }             /* poteg za osvežitev je stvar dotika */

/* Pozdravna sredica domačega pogleda */
.dom-uvod { display: none; }
body.namizje .dom-uvod {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; padding: 2rem; text-align: center;
}
.uvod-owl { border-radius: 22px; opacity: 0.92; box-shadow: 0 12px 36px rgba(0,0,0,0.45); }
.uvod-naslov { font-size: 1.3rem; font-weight: 800; margin: 0.7rem 0 0; letter-spacing: -0.01em; }
.uvod-pod { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; max-width: 42ch; }
.uvod-nov { width: auto; margin: 0.7rem 0 0; padding: 0.8rem 1.7rem; font-size: 1rem; }
.uvod-tipke { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; margin-top: 1.5rem; }
.uvod-tipka {
  display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.76rem; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.7rem;
}
.uvod-tipka kbd {
  font-family: inherit; font-size: 0.72rem; font-weight: 700; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; padding: 0.05rem 0.34rem; line-height: 1.35;
}

/* --- Chat: glava brez mobilnih gumbov, vsebina v berljivem stolpcu --- */
body.namizje #predal-odpri, body.namizje #nazaj { display: none; }
body.namizje .term-head { padding: 0.6rem 1.1rem; gap: 0.5rem; }
body.namizje .term-ime { text-align: left; font-size: 1.05rem; padding-left: 0.15rem; }
body.namizje .bubbles { padding: 1.1rem max(1.5rem, calc((100% - var(--pas)) / 2)) 0.6rem; }
body.namizje .bubble { max-width: 76%; }
body.namizje .vnos {
  padding: 0.4rem max(1.5rem, calc((100% - var(--pas) - 40px) / 2)) 1rem;
}
body.namizje .model-chip #model-chip-ime { max-width: 22rem; }
body.namizje .pregled-vsebina { padding: 1.2rem max(1.5rem, calc((100% - 860px) / 2)) 2rem; }
body.namizje #vrhnji-namigi { left: calc(var(--predal-w) + (100vw - var(--predal-w)) / 2); }

/* --- Avtopilot: desno od stolpca, vsebina v berljivem stolpcu --- */
body.namizje #avtopilot {
  margin-left: var(--predal-w); position: relative;
  display: flex; flex-direction: column; height: 100dvh; min-height: 0;
}
body.namizje #avtopilot .term-head { flex-shrink: 0; }
body.namizje .ap-vsebina,
body.namizje .ap-plast-telo {
  flex: 1; min-height: 0;
}
/* Seznam nalog izkoristi širino monitorja — širši stolpec in kartice v mreži.
   Obrazec in podrobnosti ostanejo ozki: to je branje, ne pregled. */
body.namizje .ap-vsebina {
  padding: 1.4rem max(1.5rem, calc((100% - 960px) / 2)) 4rem;
}
body.namizje .ap-plast-telo {
  padding: 1.4rem max(1.5rem, calc((100% - 640px) / 2)) 1.6rem;
}
/* Plošča s statistiko/grafi (Poraba po dnevih ipd.) namenoma prebije berljivi
   960px stolpec zgoraj — to ni besedilo za branje, ampak pregledna plošča, ki
   naj izkoristi celotno širino okna. */
body.namizje .ap-vsebina > #ap-plosca {
  margin-left: calc(-1 * max(1.5rem, calc((100% - 960px) / 2)));
  margin-right: calc(-1 * max(1.5rem, calc((100% - 960px) / 2)));
  padding-left: max(1.5rem, calc((100% - 1600px) / 2));
  padding-right: max(1.5rem, calc((100% - 1600px) / 2));
}
body.namizje .ap-zavihki,
body.namizje .ap-p-pas {
  padding-left: max(1.5rem, calc((100% - 640px) / 2));
  padding-right: max(1.5rem, calc((100% - 640px) / 2));
}
/* Kartice nalog: samodejno 1–3 stolpci glede na širino, brez tankega traku sredi zaslona. */
body.namizje #ap-seznam {
  display: grid; gap: 0.6rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* min-width: 0 je nujen: kartica je element mreže (privzeti min-width: auto =
   min-content), njen naslov .ap-cilj pa je white-space: nowrap — brez tega bi
   min-content kartice bil cela dolžina naslova in besedilo bi ušlo čez stolpec
   v neskončnost namesto tropičja. */
body.namizje #ap-seznam .ap-kartica { margin-bottom: 0; min-width: 0; }
/* Nova naloga / stikala / „Razrešene" ostanejo polna vrstica nad in pod mrežo. */
body.namizje .ap-vsebina > #ap-nova { max-width: 22rem; }
/* Plast (nova naloga, podrobnosti) ostane znotraj avtopilota, ne čez stolpec */
body.namizje .ap-plast { position: absolute; }
/* Galerija posnetkov na monitorju: dve sliki naenkrat + viden tanek drsnik
   (na miško se ne swipa — drsnik pove, da je še kaj desno). */
body.namizje .ap-galerija {
  scrollbar-width: thin; scrollbar-color: #2f4238 transparent;
  padding-bottom: 0.5rem;
}
body.namizje .ap-galerija::-webkit-scrollbar { display: block; height: 9px; }
body.namizje .ap-galerija::-webkit-scrollbar-thumb {
  background: #2f4238; border-radius: 999px;
}
body.namizje .ap-galerija .ap-gpol { flex-basis: 48%; }
body.namizje .ap-galerija .ap-gpol:only-child { flex-basis: 100%; }
body.namizje .ap-gpol img { max-height: 12rem; }

/* --- Listi (sheet) postanejo sredinska okna --- */
body.namizje .ovoj { align-items: center; }
body.namizje .sheet {
  max-width: 430px; border-radius: 18px; border-bottom: 1px solid var(--line);
  max-height: 82vh; padding-bottom: 0.9rem; animation: oknoVstop 0.16s ease;
}
@keyframes oknoVstop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.namizje .sheet { animation: none; } }

/* --- Vidni (tanki) drsniki, izbira besedila z miško --- */
body.namizje .bubbles, body.namizje .predal, body.namizje .pregled-vsebina {
  scrollbar-width: thin; scrollbar-color: #2f4238 transparent;
}
body.namizje .bubbles::-webkit-scrollbar,
body.namizje .predal::-webkit-scrollbar,
body.namizje .pregled-vsebina::-webkit-scrollbar { width: 11px; height: 11px; }
body.namizje .bubbles::-webkit-scrollbar-thumb,
body.namizje .predal::-webkit-scrollbar-thumb,
body.namizje .pregled-vsebina::-webkit-scrollbar-thumb {
  background: #2f4238; border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}
body.namizje .bubbles::-webkit-scrollbar-thumb:hover,
body.namizje .predal::-webkit-scrollbar-thumb:hover,
body.namizje .pregled-vsebina::-webkit-scrollbar-thumb:hover { background: #3d574a; background-clip: content-box; }
body.namizje { -webkit-user-select: text; user-select: text; }
body.namizje button, body.namizje .kartica, body.namizje .predal-sek,
body.namizje .sekcija-naslov, body.namizje .uvod-tipke { -webkit-user-select: none; user-select: none; }

/* --- Miška: kazalec in odziv na prehod (dotika ta pravila ne prožijo) --- */
@media (hover: hover) and (pointer: fine) {
  .kartica { cursor: pointer; }
  .kartica:hover { border-color: rgba(70,197,150,0.5); filter: brightness(1.09); }
  .ikona-btn:hover, .glava-btn:hover, .menu-btn:hover { background: var(--line); color: var(--text); }
  .noga-btn:hover { background: var(--card-hover); color: var(--text); border-color: rgba(70,197,150,0.35); }
  .btn-primary:hover { filter: brightness(1.06); }
  .vnos-akcija:hover { background: var(--card-hover); color: var(--text); }
  .poslji:hover { filter: brightness(1.08); }
  .model-chip:hover { border-color: rgba(70,197,150,0.45); color: var(--text); }
  .sheet-opcija:hover, .sheet-opcija.vrstica:hover, .nast-vrstica:hover, .model-opcija:hover { background: var(--card-hover); }
  .starejsa:hover { background: var(--card-hover); }
  .bubble.md .md-koda:hover { border-color: rgba(70,197,150,0.4); }
}

/* Spuščanje datotek v chat (miška): jasna tarča čez celoten pogled. */
#chat-view.spusti::after {
  content: 'Spusti datoteke sem'; position: absolute; inset: 0.4rem; z-index: 30;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(14,19,16,0.86); border: 2px dashed var(--green-bright); border-radius: 16px;
  color: var(--green-bright); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
}
/* Prijava zavzame cel zaslon → namig naj bo sredinski, ne poravnan ob stranski stolpec. */
body.namizje:has(#login-ovoj:not([hidden])) #vrhnji-namigi { left: 50%; }
/* Okvir prijave na velikem zaslonu (na telefonu ostane brez škatle). */
body.namizje .login-box {
  max-width: 380px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.8rem 1.6rem 1.6rem; box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

/* --- Galerija chata (vse priponke) --------------------------------------- */
.galerija-ovoj {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column;
  animation: vstopDesno 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .galerija-ovoj { animation: none; } }
.galerija-vsebina {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0.6rem 0.8rem calc(1.4rem + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.galerija-vsebina::-webkit-scrollbar { width: 0; }
.gal-mreza {
  display: grid; gap: 0.5rem; margin: 0.5rem 0 0.2rem;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}
.gal-plosca {
  position: relative; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); overflow: hidden; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, transform 0.12s;
}
.gal-plosca:active { transform: scale(0.97); }
/* Vrh slike je pri posnetkih zaslona informativen (glava, naslov) — ne režemo ga. */
.gal-plosca img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* Podpis: ime + velikost/čas v prelivu, ki sličice ne prekrije. */
.gal-plosca .gal-pas {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 0.45rem 0.35rem;
  display: flex; flex-direction: column; gap: 0.05rem; text-align: left;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.62) 42%, rgba(0,0,0,0.92));
  pointer-events: none;
}
.gal-plosca .gal-ime {
  font-size: 0.58rem; font-weight: 600; color: #eaf6ef; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gal-plosca .gal-meta {
  font-size: 0.52rem; font-weight: 500; color: #b7cbc0; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gal-seznam { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.5rem 0 0.2rem; }
.gal-dat {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--text); font: inherit; padding: 0.65rem 0.8rem;
}
.gal-dat:active { background: var(--card-hover); }
.gal-dat .dat-ik { display: flex; color: var(--green-bright); flex-shrink: 0; }
.gal-dat .dat-besedilo { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.gal-dat .dat-ime { font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-dat .dat-meta { font-size: 0.74rem; font-weight: 600; color: var(--muted); }

/* Namizje: logo v naslovu stolpca, poravnane priponke, širša galerija */
body.namizje .pg-desk { display: inline-flex; align-items: center; gap: 0.5rem; }
.pg-logo { border-radius: 8px; flex-shrink: 0; box-shadow: 0 3px 12px rgba(0,0,0,0.4); }
/* Priponke morajo slediti istemu sredinskemu stolpcu kot vnos (sicer visijo skrajno levo). */
body.namizje .priponke { padding: 0.6rem max(1.5rem, calc((100% - var(--pas) - 40px) / 2)) 0; gap: 0.6rem; }
body.namizje .priponka { width: 68px; height: 68px; }
body.namizje .priponka.dat { width: auto; max-width: 280px; height: 68px; }
body.namizje .narek-zivo { padding-left: max(1.5rem, calc((100% - var(--pas) - 40px) / 2)); }
/* Monitor: galerija ni več čez cel zaslon, ampak ozek panel ob desnem robu —
   chat ostane viden in kontekst se ne izgubi. Zastor pod njim lovi klik ob strani. */
.galerija-zastor { display: none; }
body.namizje .galerija-zastor:not([hidden]) {
  display: block; position: fixed; inset: 0; z-index: 89;
  background: rgba(0,0,0,0.42); backdrop-filter: blur(1.5px);
  animation: zastorNoter 0.18s ease;
}
@keyframes zastorNoter { from { opacity: 0; } to { opacity: 1; } }
body.namizje .galerija-ovoj {
  inset: 0 0 0 auto; width: clamp(340px, 30vw, 460px);
  background: var(--bg2); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(0,0,0,0.5);
}
body.namizje .galerija-ovoj .term-head { padding-left: 0.4rem; }
body.namizje .galerija-vsebina {
  padding: 0.9rem 1rem 1.6rem;
  scrollbar-width: thin; scrollbar-color: #2f4238 transparent;
}
/* V ožjem panelu naj gredo v vrsto vsaj trije predogledi. */
body.namizje .galerija-ovoj .gal-mreza { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.55rem; }
@media (prefers-reduced-motion: reduce) {
  body.namizje .galerija-zastor:not([hidden]) { animation: none; }
}
body.namizje .galerija-vsebina::-webkit-scrollbar { width: 11px; }
body.namizje .galerija-vsebina::-webkit-scrollbar-thumb {
  background: #2f4238; border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}
body.namizje .gal-mreza { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
@media (hover: hover) and (pointer: fine) {
  .gal-plosca:hover { border-color: rgba(70,197,150,0.55); }
  .gal-dat:hover { background: var(--card-hover); border-color: rgba(70,197,150,0.35); }
}

/* --- Speči chati -------------------------------------------------------- */
/* Speči chat: v seznamu med aktivnimi, a proces ne teče — barven avatar brez utripa. */
.kartica.spi { border-color: rgba(47,163,124,0.24); background-image: none; animation: none; }
.kartica .avatar.spi { position: relative; filter: saturate(0.72) brightness(0.82); }
.kartica .avatar.spi::after {
  content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px;
  border-radius: 50%; background: #5c6b63; border: 2px solid var(--bg);
}
.kartica.spi .pod { color: var(--muted); }
/* Med selitvijo (Aktivni ↔ Pretekli) kartica plava nad sosedami. */
.kartica.seli { z-index: 3; will-change: transform; }

/* Opozorilo o teži chata: vitka vrstica tik pod merilniki porabe (#stanje-vrsta),
   nad pogovorom. Prej je stala nad vnosom in se lovila z lebdečo tabletko „Na dno";
   zdaj je spodnji pas prost. Ena vrsta, brez ovoja — daljše besedilo se odreže. */
.ctx-namig {
  position: relative;
  flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  font-size: 0.76rem; line-height: 1.25;
  border: none; border-bottom: 1px solid rgba(224,178,58,0.3);
  background: linear-gradient(90deg, rgba(224,178,58,0.17), rgba(224,178,58,0.08));
  color: #f0d894;
  animation: ctxVstop 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Levi poudarek v barvi opozorila — traku da identiteto brez teže. */
.ctx-namig::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e0b23a;
}
.ctx-namig.tezek {
  border-bottom-color: rgba(224,106,90,0.42);
  background: linear-gradient(90deg, rgba(224,106,90,0.2), rgba(224,106,90,0.09));
  color: #f2b3a6;
}
.ctx-namig.tezek::before { background: #e0665a; }
@keyframes ctxVstop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ctx-namig { animation: none; } }
/* Ikona konteksta na začetku — ista oblika kot pri merilniku porabe. */
.ctx-namig .ctx-ik { flex: none; display: block; opacity: 0.9; }
.ctx-namig .ctx-tekst {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Akcija kot mehka tabletka, da je očitno tapljiva. */
.ctx-namig .ctx-nov {
  flex-shrink: 0; border: none; font: inherit; color: inherit;
  font-size: 0.75rem; font-weight: 700; padding: 0.24rem 0.62rem;
  border-radius: 999px; background: rgba(224,178,58,0.18);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.ctx-namig.tezek .ctx-nov { background: rgba(224,106,90,0.2); }
.ctx-namig .ctx-nov svg { flex: none; }
.ctx-namig .ctx-nov:disabled { opacity: 0.75; }
.ctx-namig .ctx-x {
  flex-shrink: 0; border: none; background: none; color: inherit; opacity: 0.6;
  font-size: 1rem; line-height: 1; padding: 0 0.2rem;
}
body.namizje .ctx-namig { padding-left: 1.1rem; padding-right: 0.7rem; }
@media (hover: hover) and (pointer: fine) {
  .ctx-namig .ctx-nov:hover:not(:disabled) { filter: brightness(1.15); }
  .ctx-namig .ctx-x:hover { opacity: 1; }
}