/* Nase dodatke, i nista vise. Stilovi osnovnog sajta se NE menjaju: svaki
   izbor ispod je nov razred sa prefiksom `wolf-`, pa ni jedno postojece
   pravilo ne moze da se promeni ovim fajlom.

   Boje se naslanjaju na promenljive osnovnog sajta (--ink, --muted, --frame,
   --mono, --pred), pa panel prati temu i u svetloj i u tamnoj varijanti ako
   sajt jednom dobije tamnu. Gde promenljiva ne postoji, stoji rezerva. */

/* Osnovni sajt drzi `.box` na fiksnih 380px. Kada odgovor stane ispod
   pitanja, sadrzaj izlazi iz kutije i preklapa polje za pitanje -- tako je
   izgledalo na snimku na sirini telefona. Kutija zato sme da naraste, a
   380px ostaje kao NAJMANJA visina, da se raspored ne skupi kada je
   odgovora jos nema. Pravilo trazi i nas razred, pa ne moze da zahvati
   nijednu drugu `.box` na stranici. */
.box.wolf-has-answer { height: auto; min-height: 380px; }

.wolf-answer-box {
  padding: 0 10px 8px;
  font-size: 12px;
  color: var(--ink, #111);
  max-height: 320px;
  overflow: auto;
  /* Visina je ogranicena i sadrzaj se skroluje UNUTAR kutije, da jedan dug
     odgovor ne rastegne stranicu bez kraja. 320px je izmereno: tipican
     odgovor sa napomenama, SQL-om i redom za ocenu staje bez skrolovanja
     (mereni sadrzaji su bili 232-305px), pa dugmici Yes/No nisu ispod
     ivice -- sa 190px jesu bili. */
}

.wolf-meta { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 5px; }

.wolf-tag {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--frame, #ddd);
  padding: 1px 5px;
  color: #444;
  white-space: nowrap;
}

.wolf-answer {
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;          /* odgovor dolazi sa prelomima redova */
  margin: 4px 0;
}

.wolf-sub {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  color: var(--muted, #666);
  margin: 4px 0;
}

.wolf-sql {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  /* NEUTRALNO SIVO, ne svetlo sivo. Osnovni sajt nema tamnu temu, ali
     pregledac ume da je NAMETNE (Chrome "force dark"), i tada je cvrsto
     upisano #f7f7f7 nerazumljivo -- videno na snimku ekrana. Providna siva
     radi i na beloj i na tamnoj podlozi, jer uzima boju ispod sebe. */
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid var(--frame, #ddd);
  padding: 6px 8px;
  margin: 4px 0;
  white-space: pre-wrap;
  word-break: break-word;         /* dug SQL se lomi, ne izlazi iz kutije */
}

.wolf-chip {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  background: transparent;
  border: 1px solid var(--frame, #ddd);
  color: var(--ink, #111);
  padding: 2px 8px;
  cursor: pointer;
}
.wolf-chip:hover { background: rgba(127, 127, 127, 0.15); }

/* Linija stanja modela. Stoji u podnozju kutije sa pitanjem, levo od dugmeta.
   `min-height` drzi mesto i kada je prazna, pa pojava teksta ne pomera
   dugme -- to je ista mera koju `web/chat.html` koristi. */
.wolf-warm {
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--muted, #666);
  min-height: 1em;
  min-width: 0;
}

.wolf-model {
  font-family: var(--mono, monospace);
  font-size: 10px;
  max-width: 180px;
  /* VISINA JE MERA, NE UKRAS. Zaglavlje `.box-head` je visoko onoliko koliko
     je njegov najvisi sadrzaj; sa menijem podrazumevane visine (18px) ono je
     naraslo na 35px, dok su zaglavlja druge dve kutije ostala na 29px -- tri
     kutije jedna pored druge, a crta ispod naslova na dve razlicite visine.
     Izmereno na snimku ekrana. Meni se zato stesnjava na visinu naslova. */
  height: 13px;
  line-height: 13px;
  padding: 0 2px;
  box-sizing: border-box;
}
.wolf-model[hidden] { display: none; }

@media (max-width: 1000px) {
  /* Na telefonu su kutije jedna pod drugom (osnovni sajt to vec radi na
     1000px), pa odgovor sme da bude visi -- nema sta da pomeri u stranu. */
  .wolf-answer-box { max-height: 300px; }
}

/* ------------------------------------------------- fokus bez plavog sjaja
   Osnovni sajt daje SVIM poljima `outline: 2px solid var(--actual)` na
   `:focus-visible`, a `--actual` je jarko plava (#1f4fd6) -- na polju za
   pitanje to je debeo plavi okvir oko cele kutije, i pojavljuje se i na
   klik, jer tekstualno polje po pravilima dobija `:focus-visible` i misem.
   Vidi se i posle odgovora, jer panel vraca fokus u polje.

   Sjaj se SKIDA, ali ne i oznaka fokusa: bez nje korisnik tastature ne zna
   gde je. Umesto plave ostaje tanka neutralna linija u boji teksta
   (`--ink`), providna, i bez pomeranja rasporeda (`outline` ne zauzima
   prostor). Pravilo trazi NAS razred (`wolf-q`), pa ne dira nijedno drugo
   polje na kontrolnoj tabli. */
#question.wolf-q:focus,
#question.wolf-q:focus-visible {
  outline: 1px solid rgba(17, 17, 17, 0.45);
  outline-offset: -1px;
  box-shadow: none;
}

/* Dugmici panela moraju da zadrze VIDLJIV fokus. Osnovni sajt to ima za
   `.btn` (Ask, Download) i to se ne menja -- ovde je samo nase: dugmici za
   ocenu i `summary` bloka Details. */
.wolf-chip:focus-visible,
.wolf-details > summary:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.55);
  outline-offset: 1px;
}

/* ------------------------------------- red sa modelom, U ZAGLAVLJU KUTIJE
   Stoji kao drugo dete `.box-head`, a taj red osnovnog sajta je
   `display: flex; justify-content: space-between`, pa je nas deo desno od
   reci "Question" bez ijednog novog pravila o poravnanju.

   `.box-head` ima `text-transform: uppercase` za svoj naslov: to se OVDE
   vraca na normalno, jer ime modela mora da se cita tacno onako kako ga
   server pise (`qwen2.5:7b`), a ne velikim slovima. */
.wolf-model-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: normal;
  /* Red je monospace, a naslov kutije nije: pri istoj velicini slova mono
     red je visi, pa je sam dizao zaglavlje. Visina reda se izjednacava sa
     naslovovom, da crta ispod zaglavlja stoji na istoj visini u sve tri
     kutije. */
  line-height: 13px;
  color: var(--muted, #666);
}
/* Zaglavlje sme da se lomi na telefonu: naslov u jednom redu, meni u drugom,
   bez vodoravnog skrolovanja. */
.box-head.wolf-head { flex-wrap: wrap; gap: 6px; }

/* LINIJA STANJA, odmah pod zaglavljem. `min-height` drzi mesto i kada je
   prazna, pa pojava teksta ne pomera polje za pitanje. */
.wolf-status-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 10px 0;
  /* MESTO ZA DVA REDA JE REZERVISANO. Poruka o ucitavanju je duza od jednog
     reda na sirini ove kutije, pa bi se pri prelasku na drugi model polje za
     pitanje pomerilo nadole bas dok korisnik gleda u meni. Prazna linija
     stanja i dalje drzi isto mesto. */
  min-height: 3.1em;
  align-content: flex-start;
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--muted, #666);
}

/* ----------------------------------------- Clear pored dugmeta Ask Agent
   Oba dugmeta su u jednoj grupi, pa podnozje ostaje dvodelno (uputstvo levo,
   dugmici desno) kao i pre. Clear nosi `.btn` osnovnog sajta, ali neutralno
   obojen: glavna radnja u toj kutiji je Ask, i dva jednaka crna dugmeta bi
   se citala kao dva jednako vazna izbora. */
.wolf-foot-actions { display: flex; align-items: center; gap: 8px; }
.wolf-clear {
  background: transparent;
  color: var(--ink, #111);
  border: 1px solid var(--frame, #ddd);
  /* Osnovni `.btn` nema okvir i ima `padding: 9px 16px`. Nas okvir od 1px bi
     dugme ucinio 2px visim od dugmeta Ask (izmereno 32 prema 30), pa bi i
     podnozje te kutije bilo vise od podnozja susedne. Dopuna se smanjuje za
     tacno toliko. */
  padding: 8px 15px;
}
.wolf-clear:hover:enabled { background: rgba(127, 127, 127, 0.15); }
/* Vidljiva oznaka fokusa, tanka i neutralna -- isto pravilo kao u 17b, bez
   plavog sjaja osnovnog sajta. */
.wolf-clear:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.55);
  outline-offset: 1px;
}
.wolf-model-label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #444;
}
.wolf-model-name { font-weight: 600; color: var(--ink, #111); }
.wolf-dim { color: var(--muted, #666); }
.wolf-model-row [hidden], .wolf-dim[hidden] { display: none; }

/* -------------------------------------------------------- red sa ocenom
   Stoji ISPOD prostora za odgovor i izvan njega, pa unutrasnje skrolovanje
   odgovora ne moze da ga odnese ispod ivice. `min-height` drzi mesto i pre
   prvog odgovora, pa pojava dugmica ne pomera nista. */
.wolf-feedback {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  color: var(--muted, #666);
  margin: 0;
  padding: 0 10px 8px;
  min-height: 1.6em;
}
.wolf-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------- Details */
.wolf-details {
  margin: 6px 0;
  border: 1px solid var(--frame, #ddd);
  padding: 4px 8px;
  background: rgba(127, 127, 127, 0.06);
}
.wolf-details > summary {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  color: var(--muted, #666);
  cursor: pointer;
}
.wolf-details > p:last-child { margin-bottom: 4px; }

.wolf-hint { font-size: 10.5px; }