/* ==================================================================
 *  Telefon prvi. Bez okvira i bez build koraka — jedan fajl, izmjena
 *  se vidi osvjezavanjem stranice.
 * ================================================================== */

:root {
  --pozadina:   #0f1115;
  --povrsina:   #171a21;
  --povrsina-2: #1e222b;
  --ivica:      #262b36;
  --tekst:      #e7e9ee;
  --tekst-tiho: #8b93a4;
  --naglasak:   #4c8dff;
  --zeleno:     #35c76a;
  --zuto:       #e8b339;
  --crveno:     #f2555a;
  --ljubicasto: #a77dff;
  --r: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--pozadina); color: var(--tekst);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior-y: none;
}

.skriveno { display: none !important; }

/* textarea MORA biti ovdje.
   Bila je izostavljena, pa je polje za pisanje na iPhoneu koristilo
   podrazumijevanu crnu boju slova — crno na crnom, nista se nije
   vidjelo dok kucas. */
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

/* --- PRIJAVA -------------------------------------------------------- */

.prijava {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
}
.prijava-kutija { width: 100%; max-width: 320px; text-align: center; }
.prijava-znak { font-size: 34px; color: var(--naglasak); margin-bottom: 6px; }
.prijava-kutija h1 {
  margin: 0 0 26px; font-size: 19px; font-weight: 600; letter-spacing: .04em;
}
.prijava-kutija input {
  width: 100%; padding: 14px 16px; border-radius: var(--r);
  border: 1px solid var(--ivica); background: var(--povrsina); outline: none;
}
.prijava-kutija input:focus { border-color: var(--naglasak); }
.prijava-kutija button {
  width: 100%; margin-top: 10px; padding: 14px;
  border-radius: var(--r); background: var(--naglasak); color: #fff; font-weight: 600;
}
.prijava-kutija button:disabled { opacity: .5; }
.greska { margin-top: 14px; min-height: 20px; color: var(--crveno); font-size: 13px; }

/* --- OKVIR EKRANA --------------------------------------------------- */

/* Visina ekrana na telefonu — NE RACUNA SE, nego se zakaci za rubove.
 *
 *  inset: 0 je top/right/bottom/left: 0. Fiksiran element razvucen na
 *  sva cetiri ruba stranice. Nema visine koju neko mora pogoditi, pa
 *  nema ni brojke koja moze biti kriva.
 *
 *  100dvh je ovdje radio isto (mjereno: 793 = puna stranica). Praznina
 *  na dnu koju smo lovili NIJE bila odavde — dolazila je od statusne
 *  trake, vidi komentar uz apple-mobile-web-app-status-bar-style u
 *  index.html. Ovo je ostalo jer je jednostavnije: rub umjesto brojke.
 *
 *  Ovdje su nekad stajale i --visina i --pomak: visinu i pomak je racunao
 *  JavaScript iz visualViewport-a. Skinuto je, jer je svaki put pravilo
 *  vece kvarove nego sto ih je rjesavalo — dvije strane su radile istu
 *  stvar, iOS pomjera i smanjuje, i mi pomjeramo i smanjujemo.
 *  Tastaturu sada rjesava preglednik preko viewport meta oznake
 *  (interactive-widget=resizes-content) u index.html; kad se stranica
 *  smanji, donji rub ide s njom jer je zakacen, a ne izracunat. */
.ekran {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
}

.vrh {
  background: rgba(15,17,21,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ivica);
  padding: calc(env(safe-area-inset-top) + 10px) 14px 0;
  flex: none;
}
.vrh-red { display: flex; align-items: center; justify-content: space-between; }
.vrh h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.tiho { color: var(--tekst-tiho); font-size: 19px; padding: 6px 8px; }
.tiho:active { color: var(--tekst); }

.trazi {
  width: 100%; padding: 9px 13px; margin-bottom: 10px;
  border-radius: 11px; border: 1px solid var(--ivica);
  background: var(--povrsina); outline: none; font-size: 15px;
}
.trazi:focus { border-color: var(--naglasak); }

.kartice {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 10px;
  scrollbar-width: none;
}
.kartice::-webkit-scrollbar { display: none; }
.kartica {
  flex: none; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--ivica); background: var(--povrsina);
  color: var(--tekst-tiho); font-size: 13.5px; white-space: nowrap;
}
.kartica.aktivna {
  background: var(--naglasak); border-color: var(--naglasak); color: #fff; font-weight: 600;
}
.kartica .tacka { font-size: 9px; vertical-align: 2px; margin-left: 5px; }

/* --- SPISAK --------------------------------------------------------- */

.spisak { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.kraj {
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 28px);
  text-align: center; color: var(--tekst-tiho); font-size: 13px;
}

.red {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--ivica);
}
.red:active { background: var(--povrsina); }

.slovo {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 600; color: #fff;
}

.red-sredina { flex: 1; min-width: 0; }
.red-vrh { display: flex; align-items: baseline; gap: 8px; }
.red-ime {
  font-weight: 600; font-size: 15.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.red-kad { margin-left: auto; flex: none; font-size: 12px; color: var(--tekst-tiho); }
.red-dno { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.red-zadnja {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--tekst-tiho);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.red-zadnja .od { color: #5f6778; }

.broj {
  flex: none; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--crveno); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.znak { flex: none; font-size: 12px; }

.oznaka {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 5px; text-transform: uppercase;
}
.o-profil { background: var(--povrsina-2); color: var(--tekst-tiho); }
.o-clan   { background: rgba(53,199,106,.16); color: var(--zeleno); }
.o-gotovo { background: transparent; color: #4b515f; font-weight: 600; padding: 2px 0; }

/* --- RAZGOVOR ------------------------------------------------------- */

.vrh-razgovor {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 10px;
}
.vrh-razgovor .tiho { font-size: 27px; line-height: 1; padding: 0 6px; }
.vrh-ko { flex: 1; min-width: 0; }
.r-ime {
  font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-pod { font-size: 12.5px; color: var(--tekst-tiho); }

.poruke {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 3px;
}

.p { max-width: 78%; padding: 8px 12px; border-radius: 17px; font-size: 15px;
     word-wrap: break-word; overflow-wrap: anywhere; }
.p-on   { align-self: flex-start; background: var(--povrsina-2); border-bottom-left-radius: 5px; }
.p-ona  { align-self: flex-end; background: var(--ljubicasto); color: #fff; border-bottom-right-radius: 5px; }
.p-bot  { align-self: flex-end; background: var(--naglasak); color: #fff; border-bottom-right-radius: 5px; }
.p + .p-on  { margin-top: 7px; }
.p-on + .p-ona, .p-on + .p-bot { margin-top: 7px; }

.p-kad { font-size: 10.5px; opacity: .6; margin-left: 8px; float: right; margin-top: 4px; }
.p-vrsta { font-style: italic; opacity: .8; }

.dan {
  align-self: center; margin: 12px 0 6px; padding: 3px 11px;
  border-radius: 999px; background: var(--povrsina);
  font-size: 11.5px; color: var(--tekst-tiho);
}

.pisi-traka {
  flex: none; border-top: 1px solid var(--ivica); background: var(--povrsina);
  /* Uze nego prije: na telefonu je ovo jelo cetvrtinu ekrana. */
  padding: 9px 12px calc(env(safe-area-inset-bottom) + 9px);
}
.pisi-obavjestenje { color: var(--tekst-tiho); font-size: 13px; text-align: center; }

/* --- KARTON --------------------------------------------------------- */

.karton { position: fixed; inset: 0; z-index: 50; }
.karton-pozadina { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.karton-list {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%;
  overflow-y: auto; background: var(--povrsina);
  border-radius: 18px 18px 0 0; border-top: 1px solid var(--ivica);
  padding: 8px 18px calc(env(safe-area-inset-bottom) + 24px);
}
.karton-rucka {
  width: 38px; height: 4px; border-radius: 2px; background: var(--ivica);
  margin: 0 auto 16px;
}
.k-red {
  display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ivica);
  font-size: 14.5px;
}
.k-red:last-child { border-bottom: 0; }
.k-kljuc { flex: none; width: 118px; color: var(--tekst-tiho); }
.k-vrij { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.prazno { padding: 44px 20px; text-align: center; color: var(--tekst-tiho); }

/* --- SIRI EKRAN ----------------------------------------------------- */

@media (min-width: 900px) {
  .ekran { max-width: 780px; margin: 0 auto; border-inline: 1px solid var(--ivica); }
  .p { max-width: 62%; }
}

/* --- VEZA PALA ------------------------------------------------------
 *  Zivi prenos je websocket; kad pukne, ovo se pokaze dok se ne vrati.
 *  Bez toga bi ekran izgledao ispravno a stajao bi zamrznut. */
.veza-pala {
  flex: none; padding: 7px; text-align: center;
  background: rgba(242,85,90,.15); color: var(--crveno);
  font-size: 12.5px; font-weight: 600;
}

/* Nevidljiva straza na vrhu razgovora — okida dogradnju starijih poruka. */
.vrh-straza { flex: none; height: 1px; }

/* --- PISANJE --------------------------------------------------------- */

.linkovi { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.linkovi:not(:empty) { margin-bottom: 8px; }
.linkovi::-webkit-scrollbar { display: none; }
.link-dugme {
  flex: none; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--ivica); background: var(--povrsina-2);
  color: var(--tekst); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.link-dugme:active { background: var(--naglasak); border-color: var(--naglasak); color: #fff; }

.pisi-red { display: flex; gap: 9px; align-items: flex-end; }
/* ==================================================================
 *  POLJE KOJE RASTE — bez ijednog mjerenja iz JavaScripta
 *
 *  Ranije se visina racunala iz scrollHeight-a. To je puklo na nacin
 *  koji se tesko primijeti: pri otvaranju razgovora polje se mjerilo
 *  dok je ekran JOS BIO SKRIVEN, a skriven element ima scrollHeight 0.
 *  Polje bi dobilo visinu 0px — vidio bi se samo okvir i pola slova.
 *  Cim bi kucnuo, mjerilo bi se ponovo, sad ispravno, pa bi traka
 *  poskocila. To je bio "odskoci pa se vrati".
 *
 *  Sada visinu odredjuje NEVIDLJIVA KOPIJA teksta u ::after. Oboje
 *  stoje u istom polju mreze, pa je omotac uvijek tacno onoliko visok
 *  koliko tekst trazi — bez obzira je li ekran vidljiv ili ne.
 *
 *  Zato kopija i polje MORAJU imati isto slovo, razmak i okvir.
 * ================================================================== */

.polje-raste {
  flex: 1; min-width: 0;
  display: grid;
  /* Jedan stupac PUNE sirine.
     Bez ovoga se stupac slaze prema najuzem mogucem sadrzaju, pa
     nevidljiva kopija lomi tekst gdje ne treba i visina odleti. */
  grid-template-columns: minmax(0, 1fr);
  max-height: 140px;
  overflow-y: auto;
  scrollbar-width: none;
}
.polje-raste::-webkit-scrollbar { display: none; }

.polje-raste::after {
  /* Razmak na kraju drzi jedan red i kad je polje prazno — zato se
     nikad ne moze sklopiti na nulu. */
  content: attr(data-vrijednost) " ";
  visibility: hidden;
  white-space: pre-wrap;
}

.polje-raste > .pisi,
.polje-raste::after {
  /* Isto polje mreze — jedno preko drugog. */
  grid-area: 1 / 1 / 2 / 2;

  /* Sve sto utice na visinu mora biti IDENTICNO. */
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 20px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  /* PAZI: "anywhere" ovdje ne smije.
     Ono utice na racunanje najuze moguce sirine, pa je nevidljiva
     kopija lomila tekst slovo po slovo — rijec "test" je davala cetiri
     reda i polje je naraslo na 112px umjesto 44. "break-word" lomi
     samo kad rijec stvarno ne stane. */
  overflow-wrap: break-word;
  word-break: normal;
}

.pisi {
  resize: none;
  overflow: hidden;
  border-color: var(--ivica);
  background: var(--pozadina);
  /* Izricito, ne preko "inherit": textarea je ranije bila izostavljena
     iz pravila za boju, pa su slova bila crna na crnom. */
  color: var(--tekst);
  -webkit-text-fill-color: var(--tekst);
  caret-color: var(--naglasak);
  outline: none;
}
.pisi:focus { border-color: var(--naglasak); }
.pisi::placeholder { color: var(--tekst-tiho); -webkit-text-fill-color: var(--tekst-tiho); }
.pisi::-webkit-scrollbar { display: none; }
.pisi:focus { border-color: var(--naglasak); }
.posalji {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--naglasak); color: #fff; font-size: 19px; font-weight: 700;
  display: grid; place-items: center;
}
.posalji:disabled { opacity: .35; }

.pisi-greska {
  margin-bottom: 9px; padding: 8px 12px; border-radius: 10px;
  background: rgba(242,85,90,.14); color: var(--crveno); font-size: 13px;
}

/* Poruka koja jos putuje — blijeda dok Telegram ne potvrdi. */
.p-ceka { opacity: .45; }