/* markdown.css — Izrisan markdown v Claudovih odgovorih, slike in statusni čipi.
   (razbito iz enotnega styles.css; vrstni red povezav v index.html je pomemben) */
/* --- Izrisan markdown v Claudovih bubblih --- */
.bubble.md { white-space: normal; }
.bubble.md > :first-child { margin-top: 0; }
.bubble.md > :last-child { margin-bottom: 0; }
.bubble.md p { margin: 0.5rem 0; }
/* Naslov razdelka: zelena oznaka z navpično črtico */
.bubble.md .md-h {
  margin: 0.85rem 0 0.4rem; padding-left: 0.55rem; position: relative;
  color: var(--green-bright); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
}
.bubble.md .md-h::before {
  content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--green-bright), rgba(47,163,124,0.25));
}
/* Ključno = krepko: svetlejše od navadnega besedila */
.bubble.md strong { color: #ffffff; font-weight: 700; }
.bubble.md em { color: #bcd8cb; font-style: italic; }
.bubble.md a { color: var(--green-bright); text-decoration: underline; text-underline-offset: 2px; }
/* Koda / poti / ukazi v vrstici — zelen čip */
.bubble.md code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em;
  background: rgba(47,163,124,0.14); color: #7fe3bb;
  border: 1px solid rgba(47,163,124,0.2); border-radius: 6px; padding: 0.05em 0.32em;
  /* Prelom na naravnem mestu: md.js vstavi <wbr> za / _ . in -, sredi besede pa
     samo, kadar drugace ne gre (dolg hash brez locil). break-all je rezal poti
     kjer koli — „sova/publi | c/js/osnova.js". */
  word-break: normal; overflow-wrap: break-word;
}
/* Blok kode — tapni za kopiranje */
.bubble.md .md-koda {
  margin: 0.55rem 0; padding: 0.6rem 0.7rem; border-radius: 10px; overflow-x: auto;
  background: #0d130f; border: 1px solid var(--line); position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bubble.md .md-koda code {
  background: none; border: none; padding: 0; color: #cfe6da; font-size: 0.8rem; line-height: 1.45;
  white-space: pre; word-break: normal;
}
.bubble.md .md-koda::after {
  content: '⧉'; position: absolute; top: 4px; right: 7px; font-size: 0.8rem; color: var(--muted); opacity: 0.55;
}
.bubble.md .md-koda.kopirano { border-color: var(--green-bright); box-shadow: 0 0 0 2px rgba(70,197,150,0.16); }
.bubble.md .md-koda.kopirano::after { content: '✓ kopirano'; color: var(--green-bright); opacity: 1; font-size: 0.7rem; }
/* Tabele — siroka tabela drsi v svojem okvirju, mehurcek se ne razteza. */
.bubble.md .md-tab-ovoj {
  margin: 0.55rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 10px; background: #0d130f;
}
.bubble.md .md-tab { border-collapse: collapse; width: 100%; font-size: 0.86em; }
.bubble.md .md-tab th, .bubble.md .md-tab td {
  padding: 0.42rem 0.6rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.bubble.md .md-tab th:last-child, .bubble.md .md-tab td:last-child { border-right: none; }
.bubble.md .md-tab tbody tr:last-child td { border-bottom: none; }
.bubble.md .md-tab th { background: rgba(47,163,124,0.1); color: var(--green-bright); font-weight: 700; white-space: nowrap; }
.bubble.md .md-tab tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
/* V uporabnikovem (zelenem) mehurcku so barve obrnjene. */
.bubble.user.md .md-tab-ovoj { background: rgba(0,0,0,0.16); border-color: rgba(0,0,0,0.18); }
.bubble.user.md .md-tab th { background: rgba(0,0,0,0.14); color: #06120c; }
.bubble.user.md .md-tab th, .bubble.user.md .md-tab td { border-color: rgba(0,0,0,0.16); }

/* Seznami: zelene oznake, urejeni zamiki */
.bubble.md .md-sez { margin: 0.4rem 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.22rem; }
.bubble.md .md-sez li { padding-left: 0.15rem; }
.bubble.md .md-sez li::marker { color: var(--green-bright); font-weight: 700; }
.bubble.md .md-sez li.vgn { margin-left: 0.9rem; font-size: 0.93em; }
.bubble.md .md-sez li.vgn::marker { color: rgba(70,197,150,0.55); }
/* Ločilna črta med razdelki */
.bubble.md .md-crta {
  border: none; height: 1px; margin: 0.75rem 0;
  background: linear-gradient(90deg, rgba(47,163,124,0.35), rgba(47,163,124,0.05));
}
/* Citat / opomba */
.bubble.md .md-cit {
  margin: 0.5rem 0; padding: 0.35rem 0 0.35rem 0.7rem; color: var(--muted);
  border-left: 3px solid rgba(47,163,124,0.4); font-style: italic;
}

/* Poslane priponke (slike): majhna sličica v mehurčku, tap odpre čez cel zaslon. */
.bub-slike { display: flex; flex-wrap: wrap; gap: 5px; margin: -0.1rem 0 0; }
.bub-slika {
  display: block; width: 132px; height: 96px; object-fit: cover; cursor: zoom-in;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
}
.bub-slike.vec .bub-slika { width: 92px; height: 72px; }
/* Slika, vstavljena v besedilo odgovora (![…](…)): stoji na svojem mestu v besedilu,
   v polni širini mehurčka in z ohranjenim razmerjem (ne izrezana sličica kot zgoraj). */
.bubble.md .md-slika {
  display: block; width: 100%; height: auto; object-fit: contain;
  margin: 0.5rem 0 0.2rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.25); cursor: zoom-in;
}
/* Poslane datoteke (ne-slike): kartica v mehurčku; tap jo prenese. */
.bub-dats { display: flex; flex-direction: column; gap: 5px; margin: -0.1rem 0 0; }
.bub-dat {
  display: flex; align-items: center; gap: 0.55rem; text-decoration: none;
  max-width: 100%; padding: 0.5rem 0.7rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.18);
  color: inherit;
}
.bub-dat .bd-ik { display: flex; flex-shrink: 0; opacity: 0.85; }
.bub-dat .bd-besedilo { display: flex; flex-direction: column; min-width: 0; gap: 0.08rem; }
.bub-dat .bd-ime {
  font-size: 0.85rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bub-dat .bd-tip { font-size: 0.68rem; font-weight: 700; opacity: 0.7; letter-spacing: 0.03em; }
.bubble.md .bub-dats { margin-top: 0.55rem; }
/* Ko je slika pod markdown besedilom (npr. generirana slika v asistentovem mehurčku) — razmik. */
.bubble.md .bub-slike { margin-top: 0.55rem; }
.bub-opis { margin-top: 0.5rem; white-space: pre-wrap; }
/* Celozaslonski ogled (tap zapre) */
.slika-ovoj {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92); padding: 1rem; cursor: zoom-out;
  animation: ovojVstop 0.16s ease;
}
/* Drsnik: trak s tremi kadri (prejšnja | trenutna | naslednja), premika se kot celota.
   Zaradi tega je prehod med slikami en sam gladek drs brez menjave src pod prstom. */
.slika-drsnik {
  position: absolute; inset: 0; display: flex; width: 100%;
  transform: translateX(-100%); will-change: transform;
  touch-action: none;   /* uščip in premik obdela JS (povečava slike) */
}
.slika-kader {
  flex: 0 0 100%; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; box-sizing: border-box;
}
.slika-kader img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.slika-kader img { transform-origin: center center; will-change: transform; }
.slika-kader.prazno { visibility: hidden; }
.slika-ovoj { touch-action: none; overscroll-behavior: contain; }
.slika-ovoj.povecano { cursor: grab; }
/* Povečana slika sme čez rob kadra (kader je sicer omejen s paddingom). */
.slika-ovoj.povecano .slika-kader { overflow: visible; }
/* Števec "3 / 8" pri listanju s potegom levo/desno */
.slika-stevec {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(0.9rem + env(safe-area-inset-top, 0px));
  padding: 0.28rem 0.75rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  background: rgba(20,20,20,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* Vrstica gumbov nad spodnjim robom ogleda (Shrani + Deli) */
.slika-orodja {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.5rem;
}
.slika-shrani {
  display: inline-flex; align-items: center; gap: 0.45rem;
  cursor: pointer; border: none; border-radius: 999px;
  padding: 0.6rem 1.25rem 0.6rem 1.05rem; font-size: 0.95rem; font-weight: 600;
  color: #fff; background: rgba(20,20,20,0.72); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.slika-shrani svg { display: block; }
.slika-shrani:active { background: rgba(20,20,20,0.9); }
@keyframes ovojVstop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .slika-ovoj { animation: none; }
  .slika-drsnik { transition: none !important; }
}

/* Statusni čipi: ✅ / ⚠️ / ❌ / ℹ️ → barvna kartica, da rezultat izstopa */
.bubble.md .md-cip,
.bubble.md .md-sez li.cip {
  display: flex; align-items: flex-start; gap: 0.45rem;
  margin: 0.35rem 0; padding: 0.42rem 0.6rem; border-radius: 10px;
  border: 1px solid transparent; font-size: 0.92rem; line-height: 1.35;
}
.bubble.md .md-sez li.cip { margin-left: -1.15rem; list-style: none; }
.bubble.md .md-cip .cip-i, .bubble.md .md-sez li.cip .cip-i {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 1.35em; color: currentColor;
}
.bubble.md .md-cip .cip-i svg, .bubble.md .md-sez li.cip .cip-i svg { width: 15px; height: 15px; display: block; }
.bubble.md .ok   { background: rgba(47,163,124,0.13);  border-color: rgba(47,163,124,0.38);  color: #b7ecd6; }
.bubble.md .opoz { background: rgba(224,178,58,0.12);  border-color: rgba(224,178,58,0.38);  color: #f0d894; }
.bubble.md .nap  { background: rgba(224,106,90,0.12);  border-color: rgba(224,106,90,0.42);  color: #f2b3a6; }
.bubble.md .info { background: rgba(120,170,255,0.10); border-color: rgba(120,170,255,0.30); color: #bdd5f5; }
.bubble.md .md-cip strong, .bubble.md .md-sez li.cip strong { color: #fff; }

/* Strnjena orodja: več zaporednih 🔧 vrstic v eni zloženi kartici */
.bubble.tool-skup {
  align-self: flex-start; max-width: 92%; padding: 0;
  background: linear-gradient(100deg, rgba(47,163,124,0.14), rgba(47,163,124,0.05));
  border: 1px solid rgba(47,163,124,0.24); border-left: 3px solid var(--green);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); overflow: hidden;
}
.tool-glava {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; cursor: pointer;
  background: none; border: none; text-align: left;
  color: #cfe6da; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
}
.tool-glava:active { background: rgba(47,163,124,0.10); }
.tool-glava .tool-lok { margin-left: auto; color: var(--green-bright); transition: transform 0.2s ease; }
.tool-skup.odprta .tool-glava .tool-lok { transform: rotate(180deg); }
.tool-telo {
  display: flex; flex-direction: column; gap: 0.18rem;
  padding: 0.1rem 0.7rem 0.5rem; border-top: 1px solid rgba(47,163,124,0.15);
  animation: orodjaDol 0.18s ease;
}
.tool-telo[hidden] { display: none; }
@keyframes orodjaDol { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tool-vrstica {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; color: #a8c6b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 0.1rem;
}
/* Ikona orodja (prej emoji 🔧 v content) — SVG prevzame barvo vrstice. */
.tool-ik { display: inline-flex; flex: none; color: var(--green-bright); opacity: 0.9; }
.tool-ik svg { width: 13px; height: 13px; display: block; }
.tool-naziv { display: inline-flex; align-items: center; gap: 0.4rem; }
.tool-naziv .tool-ik svg { width: 14px; height: 14px; }
.tool-vrstica .sv-tekst, .tool-vrstica > span:last-child { overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .tool-telo { animation: none; } }