/* vnos.css — Vnosna vrstica: priponke, polje, čipa modela in načina, mikrofon, PTR.
   (razbito iz enotnega styles.css; vrstni red povezav v index.html je pomemben) */
/* Predogled priponk (slik in datotek) nad vnosom */
.priponke {
  display: flex; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0;
  padding: 0.55rem 0.7rem 0; background: var(--bg);
}
.priponka { position: relative; width: 56px; height: 56px; }
.priponka img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line);
}
/* Datoteka brez predogleda: širša kartica z ikono, imenom in vrsto/velikostjo. */
.priponka.dat {
  width: auto; max-width: min(62vw, 250px); height: 56px;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0.7rem 0 0.6rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
}
.priponka.dat .dat-ik { display: flex; color: var(--green-bright); flex-shrink: 0; }
.priponka.dat .dat-besedilo { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.priponka.dat .dat-ime {
  font-size: 0.8rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.priponka.dat .dat-meta { font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.priponka .odstrani {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: var(--danger); color: #fff;
  font-size: 0.95rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* Vnos v slogu Claude app: eno veliko polje čez celo širino, akcije v vrstici POD besedilom. */
/* Brez ločilne črte in brez svoje barve: vnos je zlit s chatom, vidi se le balonček. */
.vnos {
  position: relative; flex-shrink: 0;
  padding: 0.35rem 0.55rem calc(0.45rem + env(safe-area-inset-bottom));
  background: var(--bg); border-top: none;
}
/* Nežen preliv nad vnosom: besedilo, ki se odkotali pod balonček, se zlije v ozadje. */
.vnos::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px;
  background: linear-gradient(180deg, rgba(14,19,16,0), var(--bg));
  pointer-events: none;
}
/* Čip z modelom — tapni za preklop. Sedi nad poljem za pisanje. */
.model-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle;
  margin: 0 0 0.35rem 0.2rem; padding: 0.24rem 0.5rem 0.24rem 0.55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted);
  font: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.model-chip:active { transform: scale(0.97); }
.model-chip .mc-ik { color: var(--green-bright); flex-shrink: 0; }
.model-chip .mc-ch { opacity: 0.7; margin-left: -0.05rem; }
.model-chip #model-chip-ime { color: var(--text); max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-chip[data-cakam="1"] { opacity: 0.6; pointer-events: none; }
/* Čip načina dela stoji desno od modela; ko je način izbran, se obarva zeleno. */
.nacin-chip { margin-left: 0.35rem; }
/* Ikona načina je SVG s currentColor → prevzame barvo čipa (siva → zelena, ko je aktiven). */
.nacin-chip .nc-ik { display: flex; align-items: center; line-height: 1; flex-shrink: 0; color: var(--muted); }
.nacin-chip .nc-ik svg { display: block; width: 14px; height: 14px; }
.nacin-chip #nacin-chip-ime { color: var(--text); }
.nacin-chip.aktiven { border-color: rgba(70,197,150,0.55); background: rgba(70,197,150,0.10); }
.nacin-chip.aktiven #nacin-chip-ime,
.nacin-chip.aktiven .nc-ik { color: var(--green-bright); }

/* Vrstica z ikono levo in imenom + opisom desno (izbirnik načinov, priponke).
   Dvojni razred, ker .model-obcija niže v datoteki postavlja stolpec (row bi izgubil). */
.model-opcija.opcija-ikona { flex-direction: row; align-items: center; gap: 0.8rem; }
.model-opcija.opcija-ikona .mo-ik {
  flex-shrink: 0; width: 26px; height: 26px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.model-opcija.opcija-ikona .mo-ik svg { display: block; width: 100%; height: 100%; }
.model-opcija.opcija-ikona.izbran .mo-ik { color: var(--green-bright); }
.model-opcija.opcija-ikona .mo-txt { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }

/* Oznaka načina v poslanem mehurčku (nad besedilom). */
.bub-nacin {
  display: flex; align-items: center; gap: 0.28rem; margin-bottom: 0.3rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  opacity: 0.72;
}
.bub-nacin .bn-ik { display: flex; flex-shrink: 0; }
.bub-nacin .bn-ik svg { display: block; width: 12px; height: 12px; }
.vnos-polje {
  /* Razmik do vrste z gumbi je namerno velik: pri večvrstičnem besedilu je bilo do
     gumba „pošlji" le ~5 px in tap za postavitev kazalca je zadel pošiljanje. */
  display: flex; flex-direction: column; gap: 0.4rem;
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(180deg, #1c2721, #151e19);
  padding: 0.5rem 0.55rem 0.45rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.vnos-polje:focus-within {
  border-color: rgba(47,163,124,0.65);
  box-shadow: 0 2px 16px rgba(0,0,0,0.32), 0 0 0 3px rgba(47,163,124,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}
.vnos-tekst {
  width: 100%; resize: none; min-height: 1.6rem; max-height: 140px; font-family: inherit; line-height: 1.4;
  border: none; background: none; color: var(--text); font-size: 1.05rem;
  padding: 0.32rem 0.45rem 0.6rem; outline: none; scrollbar-width: none;
  transition: height 0.12s ease;   /* če osnutek vseeno pride z zamikom (tok), naj zraste mehko, ne poskoči */
}
.vnos-tekst::-webkit-scrollbar { width: 0; }
.vnos-tekst::placeholder { color: var(--muted); opacity: 0.85; }
/* Vrstica z akcijami pod besedilom */
.vnos-vrsta { display: flex; align-items: center; gap: 0.3rem; }
.vnos-razmik { flex: 1; }
.vnos-akcija {
  width: 2.35rem; height: 2.35rem; flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,0.03);
  color: var(--muted); transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.vnos-akcija:active { background: var(--card-hover); color: var(--text); transform: scale(0.94); }
.vnos-akcija svg { pointer-events: none; }
.poslji {
  width: 2.35rem; height: 2.35rem; flex-shrink: 0; border: none; border-radius: 50%;
  background: linear-gradient(160deg, var(--green-bright), var(--green) 60%, #1f7a5c);
  color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0;
  position: relative; transition: background 0.2s, transform 0.12s, opacity 0.2s;
  box-shadow: 0 2px 8px rgba(31,116,88,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  /* margin: 0 je NAMEN, ne okras (najdeno 2026-09-11): razred `.prazno`, ki gumbu
     v seznam.css pomeni "nič za poslati" — utihni — po imenu trči s splošnim
     `.prazno` (prazen seznam/sekcija, isti CSS-datoteki), ki nosi
     `margin: 0.3rem 0.15rem`. Ker `.poslji.prazno` margina ni prepisal, si ga je
     gumb sposodil od tujega pravila (specifičnost ne pomaga — cascade gre po
     LASTNOSTIH, ne po pravilih) in za ~9,6 px zrastel navpično — s tem vred cela
     vrstica ikon IN kapsula vnosa, kar je bil viden "skok" ob vsakem začetku/
     koncu tipkanja. Brez tega margin:0 bi vsak nov razred, ki se po naključju
     imenuje enako kot kje drugje v appu, znova pokvaril to vrstico. */
  margin: 0;
}
.poslji:active { transform: scale(0.94); }
/* Komet obroč okoli gumba: vzklije, ko začneš pisati sporočilo (razred .tipkam). */
.poslji-komet {
  position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity 0.2s ease;
  filter: drop-shadow(0 0 2px rgba(109,255,193,0.55));
}
.poslji-komet svg { display: block; width: 100%; height: 100%; overflow: visible; }
.poslji-komet line { stroke: #8dffcf; stroke-width: 1.9; stroke-linecap: round; }
.poslji.tipkam .poslji-komet { opacity: 1; }
/* Prazno polje → gumb potihne (a ostane odziven) */
.poslji.prazno {
  background: linear-gradient(160deg, #2b3d34, #223029);
  color: var(--muted); box-shadow: none;
}

/* Busy stanje: medtem ko Claude dela, gumb pulzira in kaže vrtavko namesto letala */
.poslji .spinner { display: none; }
.poslji.dela {
  background: linear-gradient(180deg, #2c8c69, #1d6448);
  animation: posljiUtrip 1.5s ease-in-out infinite;
}
.poslji.dela .ikona-poslji { display: none; }
.poslji.dela .spinner {
  display: block; width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid rgba(6,18,12,0.3); border-top-color: var(--ink);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes posljiUtrip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(70,197,150,0); }
  50% { box-shadow: 0 0 0 6px rgba(70,197,150,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .poslji.dela { animation: none; }
  .poslji.dela .spinner { animation-duration: 1.4s; }
}
/* Stop stanje: medtem ko Claude dela in ni novega vnosa, gumb postane rdeč "ustavi" (--danger) */
.poslji .ikona-stop { display: none; }
.poslji.stop {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 80%, white), var(--danger)); animation: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--danger) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.22);
}
.poslji.stop .ikona-poslji, .poslji.stop .spinner { display: none; }
.poslji.stop .ikona-stop { display: block; }
/* Dolgi pritisk (med delom): halo, ki se v ~0,48 s razširi → napove meni "Prekini in pošlji" */
.poslji.lp-drzim { animation: none; }
.poslji.lp-drzim::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--glow) 80%, transparent); pointer-events: none;
  animation: posljiLpHalo 0.48s ease-out forwards;
}
@keyframes posljiLpHalo {
  from { transform: scale(0.85); opacity: 0.25; }
  to   { transform: scale(1.55); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .poslji.lp-drzim::after { animation: none; opacity: 0.85; }
}
/* Med narekom mikrofon postane rdeč "stop" + utrip — usklajeno z gumbom pošlji zgoraj */
.vnos-mic .ikona-mic-stop { display: none; }
.vnos-mic .mic-pulz { display: none; }
.vnos-mic.snema {
  color: #fff; border-color: transparent;
  background: linear-gradient(160deg, color-mix(in srgb, var(--danger) 80%, white), var(--danger));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--danger) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.22);
}
.vnos-mic.snema .ikona-mic { display: none; }
.vnos-mic.snema .ikona-mic-stop { display: block; }
.vnos-mic.snema .mic-pulz {
  display: block; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); animation: micUtrip 1.4s ease-out infinite;
}
@keyframes micUtrip {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 50%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--danger) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .vnos-mic.snema .mic-pulz { animation: none; } }

/* Živi narek: še-ne-potrjeno besedilo v sivem nad vnosom (potrjeno gre v polje). */
.narek-zivo {
  flex-shrink: 0; padding: 0.4rem 0.9rem; margin: 0 0.6rem;
  color: var(--muted); font-style: italic; font-size: 0.95rem; line-height: 1.3;
  background: var(--bg); border: 1px dashed var(--line); border-radius: 14px;
}
/* Živ prepis nareka: namesto emojija utripajoča pika (mikrofon je že ikona v gumbu). */
.narek-zivo::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); margin-right: 0.4rem; vertical-align: 1px;
  animation: narekUtrip 1.1s ease-in-out infinite;
}
@keyframes narekUtrip { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .narek-zivo::before { animation: none; } }
/* Napaka mikrofona: gumb za hip pordeči (razlaga je v placeholderju). */
#mikrofon.napaka { color: var(--danger); border-color: var(--danger); }

/* Pull-to-refresh: deljen fiksni indikator (chat + domov) */
#chat-view { position: relative; }
.ptr {
  position: fixed; top: calc(3.6rem + env(safe-area-inset-top)); left: 50%; z-index: 60;
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center; color: var(--green-bright);
  opacity: 0; pointer-events: none; transform: translate(-50%, -8px);
}
.ptr-ikona { display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; }
.ptr-ikona svg { display: block; overflow: visible; }
/* Komet: valovita glava vleče bledeč rep okrog kroga; ob koncu se rep zravna in
   gladko prelije v novo ponovitev. Animacijo poganja JS (ptrKometRender). */
.ptr-komet { filter: drop-shadow(0 0 2px rgba(109,255,193,0.55)); }
.ptr-komet line { stroke: #8dffcf; stroke-width: 1.9; stroke-linecap: round; }
.bubbles { overscroll-behavior: contain; }

.term-frame { flex: 1; width: 100%; border: none; background: #000; }

/* POZOR (najden 2026-09-11): tale vrstica je merila na čipe (model/način/mapa nad
   poljem), a je pomotoma zadela `.vnos-vrsta` — vrstico IKON POD poljem (sponka/
   mikrofon/pošlji). Ti trije gumbi + prožen presledek se vedno prilegajo v eno
   vrsto, `flex-wrap: wrap` je bil zato mrtev balast — DOKLER se širina gumba
   "pošlji" ni za pol piksla spremenila med stanji (prazno/tipkam/dela/stop): takrat
   se je vrstica dejansko prelomila v dve vrstici in cela kapsula .vnos-polje
   vidno skrčila/zrasla (~10px) vsakič, ko si začel/nehal tipkati. Čipi nad poljem
   niso v tem flex vsebniku (so navadni elementi v .vnos), zato jim to sploh ni
   pomagalo — prelamljajo se sami po sebi (privzeto besedilo v vrstici). */

/* Pojasnilo na vrhu lista (npr. zakaj mape obstoječega chata ni mogoče zamenjati) */
.sheet-opomba {
  color: var(--muted); font-size: 0.85rem; line-height: 1.4;
  padding: 0.2rem 0.65rem 0.7rem;
}

/* Živ seznam nalog (TodoWrite): ozek trak nad vnosom z napredkom in trenutno nalogo;
   tap ga razpre. Vidi se le, dokler je kaj nedokončanega. */
.naloge {
  margin: 0 0.75rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.nal-glava {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.5rem 0.7rem; border: none; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.nal-napis { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.nal-stevec { font-size: 0.78rem; font-weight: 800; color: var(--green-bright); }
.nal-lok { color: var(--muted); font-size: 0.8rem; }
.nal-trak { height: 3px; background: var(--line); }
.nal-trak i { display: block; height: 100%; background: var(--green-bright); transition: width 0.4s ease; }
.nal-seznam { padding: 0.45rem 0.7rem 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.nal-vrstica { display: flex; gap: 0.5rem; font-size: 0.84rem; line-height: 1.35; }
.nal-ik { width: 1rem; flex-shrink: 0; text-align: center; }
.nal-vrstica.koncano { color: var(--muted); text-decoration: line-through; }
.nal-vrstica.tece { color: var(--text); font-weight: 700; }
.nal-vrstica.tece .nal-ik { color: var(--green-bright); }
.nal-vrstica.caka { color: var(--muted); }