/* chat.css — Chat: glava, merilniki, mehurčki, plavajoči namigi, izbirni poziv.
   (razbito iz enotnega styles.css; vrstni red povezav v index.html je pomemben) */
/* --- Chat pogled (bubbli + vnos) --- */
#chat-view { display: flex; flex-direction: column; height: 100dvh; background: var(--bg); position: relative; }
.term-head {
  display: flex; align-items: center; gap: 0.35rem;
  padding: calc(0.5rem + env(safe-area-inset-top)) 0.45rem 0.5rem;
  background: var(--bg2); border-bottom: 1px solid var(--line); flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.term-ime { flex: 1; min-width: 0; font-weight: 700; font-size: 1.02rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--green-bright); padding: 0 0.2rem; }
/* Poraba limitov v glavi chata: obroč seje (5 h) + obroč tedna.
   Nadomešča prejšnji .glava-razmik, zato ostane naslov chata približno centriran. */
.poraba {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.34rem;
  flex-shrink: 0; min-width: 2.7rem;
  background: none; border: none; padding: 0 0.1rem; color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.poraba:active { opacity: 0.6; }
.poraba.prazna { pointer-events: none; }   /* ni podatka → samo razmik, ne gumb */
/* Čip z obema odstotkoma: [◔ 19% · ◕ 61%] */
.pz-cip {
  display: flex; align-items: center; gap: 0.38rem;
  padding: 0.2rem 0.48rem 0.2rem 0.38rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
}
.pz-par { display: flex; align-items: center; gap: 0.22rem; }
.pz-par svg { display: block; flex-shrink: 0; }
.pz-par span { font-size: 0.72rem; font-weight: 700; letter-spacing: -0.01em; }
.pz-pika { width: 3px; height: 3px; border-radius: 50%; background: var(--line); flex-shrink: 0; }

/* Podrobnosti porabe (bottom sheet ob tapu na obroča) */
.pz-vrstica { background: var(--card); border-radius: 13px; padding: 0.85rem 0.95rem; text-align: left; }
.pzv-vrh { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.pzv-ime { font-size: 1rem; font-weight: 700; }
.pzv-opis { display: block; font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(--muted); margin-top: 0.12rem; }
.pzv-pct { font-size: 1.15rem; font-weight: 800; flex-shrink: 0; }
.pzv-palica { position: relative; height: 6px; border-radius: 999px; background: var(--line); margin: 0.6rem 0 0.45rem; }
.pzv-palica i { display: block; height: 100%; border-radius: 999px; }
/* Črtica = kje v 5-urnem / tedenskem oknu smo (ura okna, ne poraba). */
.pzv-palica u { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: #cfe6da; box-shadow: 0 0 0 1px rgba(14,19,16,0.75); }
.pzv-reset { font-size: 0.78rem; color: var(--muted); }
.pz-opomba { font-size: 0.76rem; line-height: 1.4; color: var(--muted); text-align: left; padding: 0.1rem 0.35rem; }

.ikona-btn {
  background: none; border: none; color: var(--text); font-size: 1.4rem;
  width: 2.7rem; height: 2.7rem; border-radius: 50%; line-height: 1; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ikona-btn:active { background: var(--line); }
/* Tap naj vedno zadene gumb, ne SVG-ja znotraj (Android: tap na črto poti sicer
   ne sproži klika gumba → gumb nazaj "ne dela"). */
.ikona-btn svg, .poslji svg, .pripni svg { pointer-events: none; }

.bubbles {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0.8rem 0.8rem 0.5rem; display: flex; flex-direction: column; gap: 0;
  scrollbar-width: none;
}
.bubbles::-webkit-scrollbar { width: 0; height: 0; }
.bubbles-prazno { margin: auto; color: var(--muted); font-size: 0.92rem; text-align: center; padding: 1rem; line-height: 1.5; }
/* Vrh seznama: naloži starejši del pogovora (poll ostane poceni) */
.starejsa {
  align-self: center; flex-shrink: 0; margin: 0.2rem 0 0.5rem; cursor: pointer;
  padding: 0.4rem 0.9rem; border-radius: 999px; font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--green-bright); border: 1px solid rgba(47,163,124,0.35);
  background: linear-gradient(180deg, rgba(47,163,124,0.14), rgba(47,163,124,0.05));
}
.starejsa:active { background: var(--card-hover); }
.starejsa:disabled { color: var(--muted); border-color: var(--line); background: var(--card); }
/* Sova v praznem chatu: maska iz badge-96.png (ista risba kot avatarji), ne emoji. */
.prazno-owl { margin-bottom: 0.5rem; opacity: 0.85; display: flex; justify-content: center; }
.prazno-owl .owl {
  width: 54px; height: 54px; background: var(--green-bright);
  -webkit-mask: url(/badge-96.png) center / contain no-repeat;
          mask: url(/badge-96.png) center / contain no-repeat;
}
.cas-locilo {
  align-self: center; color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  margin: 0.85rem 0 0.25rem; padding: 0.16rem 0.6rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(47,163,124,0.10), rgba(47,163,124,0.04));
  border: 1px solid rgba(47,163,124,0.16);
}
.delal-cas {
  display: flex; align-items: center; gap: 0.28rem;
  margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
}
.delal-cas .delal-ik { flex-shrink: 0; opacity: 0.8; width: 13px; height: 13px; }
.bubble {
  position: relative; max-width: 84%; margin-top: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 17px;
  font-size: 0.95rem; line-height: 1.38; white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.22);
  flex-shrink: 0;
}
/* Trajen varovalni rez (ne le med `.raste`, glej PLAN.md #36): pri hitrih zaporednih
   `zrasti()` klicih lahko sob animaciji za trenutek vsebina preseže animirano višino
   mehurčka — brez tega bi se izlila čez rob in prekrila naslednji element (npr. pad
   "Pišem odgovor"). `.tipka` izvzeta, ker njena ikona namerno poskoči izven svoje
   27px škatle (`claudeSkok`).
   POZOR (najdeno takoj po uvedbi): `overflow` ≠ `visible` na flex elementu (`.bubbles`
   je flex column) izniči privzeto `min-height: auto` (samodejno najmanjšo velikost po
   vsebini) in flexbox sme mehurček STISNITI, da se z ostalimi na silo prilega vidnemu
   oknu — vsi mehurčki so se skrčili na delček prave višine. Zato `flex-shrink: 0`
   zgoraj: mehurček se nikoli ne krči, ne glede na overflow. */
.bubble:not(.tipka) { overflow: hidden; }
/* Zaporedna sporočila iste strani so en sklop: tesnejši razmik + sploščen rob na strani repa */
.bubble.skupina { margin-top: 0.16rem; }
.bubble.user.skupina { border-top-right-radius: 7px; }
.bubble.assistant.skupina { border-top-left-radius: 7px; }

/* Moj bubble: diagonalni zelen preliv + svetel odsev v zgornjem kotu (steklen rob)
   in mehka barvna senca, da "lebdi" nad ozadjem. */
.bubble.user {
  align-self: flex-end;
  background:
    radial-gradient(115% 85% at 100% 0%, rgba(255,255,255,0.17), rgba(255,255,255,0) 58%),
    linear-gradient(148deg, #43c095 0%, #2FA37C 46%, #1e7259 100%);
  color: #f4fffa; border-bottom-right-radius: 5px;
  box-shadow: 0 3px 14px rgba(31,116,88,0.34), 0 1px 2px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.22);
}
/* Claudov bubble: temen preliv z rahlim zelenim pridihom v zgornjem levem kotu. */
.bubble.assistant {
  align-self: flex-start;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(70,197,150,0.13), rgba(70,197,150,0) 55%),
    linear-gradient(165deg, #1f2c24 0%, #18221c 100%);
  color: var(--text);
  border: 1px solid var(--line); border-bottom-left-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
}
.bubble.tool {
  align-self: flex-start; max-width: 92%;
  background: linear-gradient(100deg, rgba(47,163,124,0.16), rgba(47,163,124,0.05));
  color: #cfe6da;
  font-size: 0.82rem; padding: 0.35rem 0.75rem;
  border: 1px solid rgba(47,163,124,0.26); border-left: 3px solid var(--green);
  border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Vstop: animiramo SAMO nove bubble (razred .nov doda app.js), sicer bi ob vsakem
   ponovnem izrisu seznama poskakalo vse naenkrat. */
.bubble.user.nov { animation: bublDesno 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bubble.assistant.nov, .bubble.tool.nov { animation: bublLevo 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bublDesno { from { opacity: 0; transform: translate(10px, 8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bublLevo  { from { opacity: 0; transform: translate(-10px, 8px) scale(0.96); } to { opacity: 1; transform: none; } }
/* Enkraten svetlobni preblisk čez svež moj bubble. */
.bubble.user.nov::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 65%);
  background-size: 260% 100%;
  animation: bublSij 0.95s ease-out 0.12s both;
}
@keyframes bublSij { from { background-position: 160% 0; opacity: 0.9; } to { background-position: -60% 0; opacity: 0; } }

/* Poslano, a še nepotrjeno (čaka v vrsti): pobledi. Ko strežnik sporočilo potrdi,
   izris OBDRŽI isti element in mu le odvzame .caka → megla se gladko stopi v polno
   barvo (prehod), namesto da bi se bubble na novo ustvaril in poskočil. */
.bubble.user { transition: opacity 0.45s ease, filter 0.45s ease; }
.bubble.user.caka { opacity: 0.55; filter: saturate(0.72); }
/* Vstop čakajočega animira SAMO premik — prosojnost pusti navadnemu pravilu (.caka).
   Tako je ob potrditvi prehod 0.55 → 1 čist CSS prehod med dvema navadnima vrednostma
   (in ne "konec animacije"), kar brskalniki prelivajo zanesljivo, brez trzljaja. */
.bubble.user.caka.nov { animation: bublDrsi 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bublDrsi { from { transform: translate(10px, 8px) scale(0.96); } to { transform: none; } }

/* Rast med pisanjem: dokler teče animacija višine, vsebino porežemo, da se nova
   vrstica ne pokaže pod robom mehurčka, preden se ta razpre. */
.bubble.raste { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .bubble.user.nov, .bubble.assistant.nov, .bubble.tool.nov, .bubble.user.nov::after,
  .bubble.user.caka.nov { animation: none; }
  .bubble.user.nov::after { display: none; }
}

.bubble.tipka {
  align-self: flex-start; display: flex; gap: 10px; align-items: center; padding: 0.5rem 0.95rem;
  background: linear-gradient(160deg, #1f2c24, #18221c);
  border: 1px solid rgba(47,163,124,0.35); border-bottom-left-radius: 5px;
  /* Vstop (enkrat ob pojavu / ob menjavi koraka) + neprekinjen utrip. */
  animation: tipkaVstop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both, tipkaPulz 1.7s ease-in-out infinite;
  transform-origin: 0 100%;
}
/* Ikona koraka pred napisom (prej vodilni emoji v besedilu). */
.bubble.tipka .tipka-ik { display: inline-flex; vertical-align: -2px; margin-right: 0.28rem; color: var(--green-bright); }
.bubble.tipka .tipka-ik svg { width: 15px; height: 15px; display: block; }
.bubble.tipka .tipka-label {
  display: inline-flex; align-items: center; margin-left: 0; font-size: 0.82rem; color: var(--green-bright); opacity: 0.92;
  white-space: nowrap; max-width: 52vw; overflow: hidden; text-overflow: clip;
  /* Širino nastavi JS (izmerjena v px) → pad se GLADKO razširi/zoži, brez poskoka. */
  transition: width 0.42s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.3s ease;
}
/* Med animacijo ima napis width:0 in overflow:hidden. Brez tega bi se ikona in črke
   (flex otroci) skrčili na nič in JS bi izmeril prazno širino — napis se ne bi razprl. */
.bubble.tipka .tipka-label > *, .bubble.tipka .crke span { flex: 0 0 auto; }
/* Nova beseda se mehko dvigne in pojavi (obstoječi val in ikona tečeta naprej). */
.bubble.tipka .crke { animation: napisVstop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes napisVstop { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.bubble.zastalo { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.95rem; background: var(--card); border: 1px solid var(--danger); border-bottom-left-radius: 5px; color: var(--danger); font-size: 0.85rem; cursor: pointer; }
.bubble.zastalo svg { display: block; flex-shrink: 0; }
.zast-ik { display: inline-flex; flex: none; }
.zast-ik svg { width: 15px; height: 15px; }
/* Nevsiljiv namig ob izpadu povezave (restart strežnika / telefon zaspi) */
/* Skladovnica plavajočih namigov na vrhu (povezava, restart, prijava). Vsi trije
   sedijo v enem stolpcu, zato se nikoli ne prekrivajo — in nobeden ne zakriva
   vnosnega polja na dnu, kjer je prej stal gumb za restart. */
#vrhnji-namigi {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 68px);  /* JS to natančno poravna pod glavo */
  transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;                 /* prazen prostor ne lovi tapov */
  max-width: calc(100vw - 1.5rem);
}
#vrhnji-namigi > * { pointer-events: auto; }
/* Stalen vrstni red: stanje povezave zgoraj, nato opozorilo o prijavi, nato posodobitev. */
#povezava { order: 1; }
#racun-namig { order: 2; }
#restart-namig { order: 3; }

#povezava { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
#povezava[hidden] { display: none; }
#povezava .pv-pika { width: 8px; height: 8px; border-radius: 50%; background: #e0b23a; animation: utrip 1s infinite; }

/* Samodejni gumb "Restartaj" (pojavi se, ko strežnik javi restartNeeded) */
#restart-namig { display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--accent, #46c596);
  background: var(--accent, #46c596); color: #06130d; font: inherit; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4); cursor: pointer; position: relative; }

/* Komet, ki teče po robu tabletke — ista poteza in barva kot obroč okoli gumba
   "pošlji", le da tam kroži, tu pa obkroža podolgovat okvir. */
.okvir-komet {
  position: absolute; inset: -3px; pointer-events: none; overflow: visible;
  /* Dve plasti: tesen sij za ostrino roba in širok za žar okoli tabletke. */
  filter: drop-shadow(0 0 2px rgba(160,255,214,0.95)) drop-shadow(0 0 7px rgba(109,255,193,0.75));
}
.okvir-komet svg { display: block; width: 100%; height: 100%; overflow: visible; }
.okvir-komet line { stroke: #b6ffe1; stroke-width: 2.2; stroke-linecap: round; }
/* Rdeča različica (opozorilo o prijavi) — isti val, topleje obarvan. */
.okvir-komet.rdec { filter: drop-shadow(0 0 2px rgba(255,190,175,0.95)) drop-shadow(0 0 7px rgba(255,130,105,0.75)); }
.okvir-komet.rdec line { stroke: #ffdcd2; }
#restart-namig[hidden] { display: none; }
#restart-namig:active { transform: scale(0.97); }
#restart-namig .rn-ik { display: flex; align-items: center; flex-shrink: 0; }
#restart-namig .rn-ik svg { display: block; width: 16px; height: 16px; }
#restart-namig span { white-space: nowrap; }

/* Opozorilo "Claude ni prijavljen" — brez prijave ne dela noben chat, zato izstopa.
   Sedi nad gumbom za restart, da se ne prekrivata. */
#racun-namig { display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid #e0705e;
  background: #e0705e; color: #1a0906; font: inherit; font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); cursor: pointer; position: relative; }
#racun-namig[hidden] { display: none; }
#racun-namig:active { transform: scale(0.97); }
#racun-namig .rn-ik { display: flex; align-items: center; flex-shrink: 0; }
#racun-namig .rn-ik svg { display: block; width: 15px; height: 15px; }
#racun-namig span { white-space: nowrap; }
/* Ko je odprt kateri koli list (sheet/modal/nastavitve), plavajoča namiga umakni —
   sicer sedita čez vsebino lista (npr. čez polje za vnos kode). */
body:has(.ovoj:not([hidden])) #racun-namig,
body:has(.ovoj:not([hidden])) #restart-namig { display: none; }

/* Prijava v Claude račun (v bottom sheetu) */
.racun-kart { display: flex; flex-direction: column; gap: 0.55rem; text-align: left; }
.racun-vrh { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.racun-pika { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.racun-pika.ok { background: var(--green-bright); }
.racun-pika.nap { background: #e0705e; }
.racun-stanje { font-weight: 700; font-size: 0.95rem; }
.racun-mail { font-size: 0.8rem; color: var(--muted); margin-left: auto; }
.racun-opis, .racun-korak { font-size: 0.84rem; color: var(--muted); line-height: 1.4; padding: 0 0.2rem; }
.racun-korak { font-weight: 700; color: var(--text); margin-top: 0.3rem; }
.racun-sporocilo { font-size: 0.84rem; line-height: 1.4; padding: 0.6rem 0.8rem; border-radius: 11px;
  background: rgba(70,197,150,0.12); border: 1px solid rgba(70,197,150,0.4); color: var(--green-bright); }
.racun-sporocilo.nap { background: rgba(224,112,94,0.12); border-color: rgba(224,112,94,0.45); color: #e0705e; }
.racun-gumb { display: block; width: 100%; text-align: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--text);
  font: inherit; font-size: 0.98rem; font-weight: 700; padding: 0.85rem 1rem; cursor: pointer; }
.racun-gumb:active { background: var(--card-hover); }
.racun-gumb.glavni { background: var(--green); border-color: var(--green); color: #06130d; }
.racun-gumb.tanek { font-size: 0.88rem; font-weight: 600; padding: 0.6rem 1rem; color: var(--muted); }
.racun-gumb[disabled] { opacity: 0.6; }
.racun-vnos { width: 100%; border: 1px solid var(--line); border-radius: 13px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 0.95rem; padding: 0.8rem 0.9rem; }
.racun-vnos:focus { outline: none; border-color: var(--green); }
/* Stikalo "odjavi vse naprave" v oknu za menjavo gesla */
.geslo-stikalo { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.35rem;
  font-size: 0.86rem; color: var(--muted); cursor: pointer; }
.geslo-stikalo input { width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; }

/* Gumb "Prijava s prstnim odtisom" na prijavni maski */
.login-odtis {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; margin-top: 0.55rem; padding: 0.8rem 1rem;
  border: 1px solid var(--line); border-radius: 13px; background: var(--card);
  color: var(--text); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.login-odtis[hidden] { display: none; }
.login-odtis:active { background: var(--card-hover); }
.login-odtis[disabled] { opacity: 0.6; }
.login-odtis svg { display: block; color: var(--green-bright); flex-shrink: 0; }

/* Interaktivni izbirni poziv (Claude čaka na izbiro) */
.poziv { align-self: stretch; max-width: 100%; margin: 0.2rem 0; padding: 0.85rem 0.9rem;
  background: var(--card); border: 1px solid var(--green); border-radius: 14px; display: flex; flex-direction: column; gap: 0.55rem; }
.poziv-glava { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 700; color: var(--green-bright); }
.poziv-ik { display: inline-flex; flex: none; }
.poziv-ik svg { width: 15px; height: 15px; display: block; }
.poziv-q { font-size: 0.9rem; color: var(--text, #e8f1ec); line-height: 1.35; }
.poziv-opcije { display: flex; flex-direction: column; gap: 0.45rem; }
.poziv-gumb { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; cursor: pointer;
  padding: 0.65rem 0.7rem; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); color: inherit; font-size: 0.9rem; line-height: 1.3; }
.poziv-gumb:active { background: var(--card-hover); }
.poziv-gumb.izbran { border-color: var(--green-bright); background: var(--card-hover); }
.poziv-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; background: linear-gradient(180deg, var(--green-bright), var(--green)); color: #06120c; }
.poziv-lbl { flex: 1; }
.poziv-preklic { align-self: flex-start; background: none; border: none; color: var(--muted); font-size: 0.82rem; cursor: pointer; padding: 0.15rem 0.1rem; }
.poziv-preklic:active { color: var(--text, #e8f1ec); }
.bubble.limit { border: 1px solid #e0b23a; }
.bubble.limit::before { content: '⏳ '; }

/* --- Skok na dno (z brojem novih odgovorov) --------------------------------
   Med Claudovim delom pogosto bereš višje v pogovoru; prej se ni bilo kam vrniti
   razen z dolgim drsanjem. Gumb lebdi nad vnosom in se pokaže šele, ko si stran
   od dna (prag 220 px), da ne krade prostora. */
.na-dno {
  /* Odmik od dna nastavi JS (--nd-dno) = višina vnosa + zrak; tipkovnica ga zato
     ne prekrije, gumb pa vedno lebdi tik nad vnosnim poljem. */
  position: absolute; right: 0.85rem; bottom: var(--nd-dno, 5.2rem); z-index: 6;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.72rem 0.42rem 0.55rem;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  animation: naDnoVstop 0.18s ease;
}
@keyframes naDnoVstop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .na-dno { animation: none; } }
.na-dno svg { width: 16px; height: 16px; color: var(--green-bright); flex: none; }
.na-dno:active { background: var(--card-hover); }
.na-dno .nd-stevec {
  background: var(--green-bright); color: #06120c; border-radius: 999px;
  padding: 0 0.4rem; font-size: 0.72rem; font-weight: 800; min-width: 1.15rem; text-align: center;
}
/* Ob novih sporočilih je napis odveč — pomembna je številka. */
.na-dno.ima-nove .nd-tekst { display: none; }

/* Kratek zelen odziv po „Kopiraj besedilo" (dolg pritisk na mehurček). */
.bubble.kopirano { box-shadow: 0 0 0 2px rgba(70,197,150,0.55); transition: box-shadow 0.2s; }