/* Telefon: glava je imela osem gumbov v eni vrstici (Marko, 9. 9. 2026: "zastarel UI").
   Ostanejo stranska vrstica, orb in racun; okrasje in diagnostika gresta ven. */
@media (max-width: 600px) {
  #shela-header-v2 .shela-brain-view-btn,
  #shela-header-v2 .shela-anim-btn { display: none !important; }
  #shela-header-v2 { gap: 6px !important; padding-left: 8px !important; padding-right: 8px !important; }
  #shela-header-v2 .hv2-icon-btn,
  #shela-header-v2 .shela-talk-btn { width: 38px !important; height: 38px !important; }
  #shela-header-v2 .hv2-menu { padding: 6px 10px !important; font-size: 12.5px !important; }
  /* Besedilo v klepetu naj bo povsod ista sistemska pisava, brez presenecenj. */
  #root p, #root li, #root .markdown, #root .prose, #root [class*="message"] {
    font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif !important;
  }
}

@media (max-width: 600px) {
  /* Skrijemo SAMO okras. 10. 9. 2026: prej so ta pravila skrila tudi izbirnik Veo modela
     (#shela-vid-toggle, ki je 31. 8. namenoma preseljen v vidno glavo) in izbiro modela --
     brez njiju je vse teklo na najsibkejsem Veo lite in tega ni bilo mogoce preklopiti. */
  #shela-header-v2 .hv2-status-dot,
  #shela-header-v2 .hv2-dot,
  #shela-header-v2 [class*="status-dot"] { display: none !important; }
}

/* Telefon: pod vnosnim poljem je bila se ena skatla okoli skatle in vrstica
   "Shift+Enter for new line" (na telefonu brez pomena). Ostane en sam okvir. */
@media (max-width: 600px) {
  #root div.max-w-3xl:has(textarea) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  #root div.max-w-3xl:has(textarea) > .flex.items-center.justify-between { display: none !important; }
}

/* Pisalo namesto obrazca (iOS vrstica s kljukico). Videz mora biti enak kot prej. */
.shela-pisalo {
  flex: 1 1 auto; min-width: 0; min-height: 24px; max-height: 200px; overflow-y: auto;
  padding: 10px 4px; color: inherit; outline: none; white-space: pre-wrap; word-break: break-word;
  font: 15px/1.5 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-user-select: text; user-select: text;
}
.shela-pisalo:empty:before { content: attr(data-namig); color: rgba(255,255,255,.38); pointer-events: none; }
textarea.shela-skrito-polje {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; padding: 0 !important;
  border: 0 !important; margin: 0 !important; overflow: hidden !important;
}

/* Seznam klepetov na telefonu: pri daljsem naslovu je gumb s tremi pikicami zdrsnil zunaj
   vidnega dela in ga je bilo treba potegniti z roko (Grega, 10. 9. 2026). Naslov se skrajsa,
   gumb pa ostane pribit ob desni rob vrstice in je viden brez miskinega prehoda. */
@media (max-width: 900px) {
  [class*="sidebar"] .group.flex.items-center,
  aside .group.flex.items-center {
    position: relative !important;
    padding-right: 36px !important;
    overflow: hidden !important;
  }
  [class*="sidebar"] .group.flex.items-center > div.flex-1.min-w-0,
  aside .group.flex.items-center > div.flex-1.min-w-0 { min-width: 0 !important; overflow: hidden !important; }
  [class*="sidebar"] .group.flex.items-center > button:last-of-type,
  aside .group.flex.items-center > button:last-of-type {
    position: absolute !important; right: 2px !important; top: 50% !important;
    transform: translateY(-50%) !important; opacity: 1 !important;
    width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
  }
}
@media (max-width: 900px) {
  /* Vrstica se ne sme razsiriti cez seznam: dolg naslov se skrajsa s tremi pikami. */
  [class*="sidebar"] .group.flex.items-center,
  aside .group.flex.items-center { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  [class*="sidebar"] .group.flex.items-center div.flex-1.min-w-0 > *,
  aside .group.flex.items-center div.flex-1.min-w-0 > * {
    display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;
  }
}
@media (max-width: 900px) {
  /* Seznam sam se je raztegnil po vsebini (431 px) znotraj 287 px sirokega predala,
     zato so pikice koncale zunaj. Vsi trije nivoji morajo ostati v sirini predala. */
  [class*="sidebar"] .group.flex.items-center,
  [class*="sidebar"] .group.flex.items-center > div.flex-1.min-w-0,
  aside .group.flex.items-center,
  aside .group.flex.items-center > div.flex-1.min-w-0 { min-width: 0 !important; }
  [class*="sidebar"] div:has(> .group.flex.items-center),
  aside div:has(> .group.flex.items-center) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
}
@media (max-width: 900px) {
  /* Ovoj seznama je bil 447 px sirok v 287 px sirokem predalu (izmerjeno 10. 9. 2026),
     zato so pikice koncale zunaj zaslona. Ovoja pribijemo na sirino predala. */
  [class*="sidebar"] [class*="size-full"] > div,
  [class*="sidebar"] [class*="size-full"] > div > div {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
  }
}
@media (max-width: 900px) {
  /* Vmesni ovoj je imel display:table in se je zato raztegnil po najdaljsem naslovu
     (447 px v 287 px predalu). Kot navaden blok ostane v sirini predala. */
  [class*="sidebar"] [class*="size-full"] > div { display: block !important; }
}

/* Mobilni predal je modalen: Radix postavi pointer-events:none na <body>.
   Spustni meni vrstice visi na <body>, zato se je videl, klik na Delete pa
   ni delal. Meni in njegovi gumbi morajo klike loviti sami. */
.shela-dropdown, .shela-dropdown * { pointer-events: auto !important; }

/* Chat se je dal vleci levo/desno. Vodoravno premikanje ni nikjer zeleno. */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
#root { overflow-x: clip; max-width: 100vw; }

/* Vidna napaka namesto tihe odpovedi (Grega, 10. 9. 2026). */
.shela-napaka {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000; max-width: min(560px, calc(100vw - 24px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px; border-radius: 14px;
  background: rgba(28, 12, 16, .96); border: 1px solid rgba(255, 108, 108, .38);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5); color: #ffdede;
  font: 14px/1.45 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
}
.shela-napaka-t { flex: 1 1 auto; min-width: 0; }
.shela-napaka-x {
  flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: #ffdede; font-size: 19px; line-height: 1; cursor: pointer;
}
.shela-napaka-x:hover { background: rgba(255, 255, 255, .09); }

/* Izbirnik Veo modela v glavi (Grega, 10. 9. 2026).
   Tarca je bila 28 px -- premalo za prst -- spustni meni pa je gledal cez desni rob
   zaslona, zato zadnjih nekaj pikslov moznosti ni bilo mogoce zadeti. */
@media (max-width: 600px) {
  #shela-vid-toggle.shela-vid-in-header {
    min-width: 38px !important; min-height: 38px !important;
    padding: 6px 8px !important; justify-content: center !important;
  }
}

/* 11. 9. 2026 — dve napaki, ki ju je javil Grega s telefona:

   1) Meni pod "+" se je skrival za karticami. Ni slo za z-index (tudi 2 milijardi ni
      pomagalo): ovoj pisala ima backdrop-filter, ta pa naredi svoj skladovni kontekst
      in meni iz njega ne more ven. Na telefonu zameglitev odstranimo -- ovoj je itak ze
      brez okvirja in ozadja.

   2) Izbira Veo modela je gledala cez rob. Spustni meni je otrok 38 px sirokega gumba,
      zato je "right: 8px" racunal glede nanj in ga vrgel na left: -212px. Pripnemo ga
      na glavo, ki je siroka cez cel zaslon. */
@media (max-width: 900px) {
  #root div.max-w-3xl:has(textarea),
  #root div.max-w-3xl:has(textarea) .relative.flex.items-end {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #shela-vid-dropdown {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 54px) !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }
}