/* SHELA UI/UX polish v1 (2.8.2026) — ikonice, scroll, responsive. Aditivno, brez rušenja. */

/* ---- header ikonice: enotna velikost, poravnava, hover ---- */
#shela-header-v2 .hv2-icon-btn,
#shela-header-v2 .shela-talk-btn,
#shela-header-v2 .shela-brain-view-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#shela-header-v2 .hv2-icon-btn svg,
#shela-header-v2 .shela-brain-view-btn svg { width: 20px; height: 20px; }
#shela-header-v2 .shela-talk-btn svg { width: 26px; height: 26px; }
#shela-header-v2 .hv2-icon-btn:hover,
#shela-header-v2 .shela-talk-btn:hover,
#shela-header-v2 .shela-brain-view-btn:hover {
  background: rgba(196,166,255,.10);
  transform: translateY(-1px);
}
#shela-header-v2 .shela-talk-btn:hover { box-shadow: 0 0 18px rgba(154,107,255,.35); }

/* ---- gladko scrollanje povsod ---- */
html { scroll-behavior: smooth; }
* { -webkit-overflow-scrolling: touch; }
body { overscroll-behavior-y: none; }

/* tanjsi, lepsi scrollbari (chat, sidebar, paneli) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(196,166,255,.18);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(196,166,255,.32); }

/* ---- mobil: safe-area + da nic ne uhaja cez rob ---- */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 640px) {
  #shela-header-v2 { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  #shela-header-v2 .hv2-icon-btn,
  #shela-header-v2 .shela-talk-btn,
  #shela-header-v2 .shela-brain-view-btn { width: 40px; height: 40px; } /* vecji tap targeti */
  img, video, canvas { max-width: 100%; }
}

/* ---- talk overlay: status in podnapisi malo bolj brani ---- */
#shela-talk-overlay #shela-talk-mode-label { letter-spacing: .28em; opacity: .85; }

/* ===================== v2: komplet chat refurbish (composer, sporocila, brain view) ===================== */

/* ---- composer: lepse tipkanje ---- */
textarea[placeholder^="Ask anything"] {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  padding: 8px 10px !important;
  caret-color: #ffab4a;
}
textarea[placeholder^="Ask anything"]::placeholder { color: rgba(196,166,255,.45); }
div[class*="rounded-2xl"]:has(> div textarea[placeholder^="Ask anything"]),
div[class*="rounded-2xl"]:has(> textarea[placeholder^="Ask anything"]) {
  border-radius: 18px !important;
  background: rgba(23,19,31,.85) !important;
  border-color: rgba(196,166,255,.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 50px rgba(0,0,0,.35) !important;
  transition: border-color .25s, box-shadow .25s !important;
}
div[class*="rounded-2xl"]:has(textarea[placeholder^="Ask anything"]):focus-within {
  border-color: rgba(196,166,255,.42) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 50px rgba(154,107,255,.16) !important;
}

/* ---- sporocila: berljivost ---- */
.max-w-3xl p, .max-w-3xl li { line-height: 1.65; }
.max-w-3xl pre { overflow-x: auto; border-radius: 12px; }
.max-w-3xl img, .max-w-3xl video { border-radius: 12px; max-width: 100%; }
.max-w-3xl table { display: block; overflow-x: auto; }

/* ---- sidebar: mehkejsi hover ---- */
aside [role="button"]:hover, aside a:hover, nav[class*="sidebar"] a:hover { background: rgba(196,166,255,.07); border-radius: 10px; }

/* ---- brain view overlay: legenda in labeli v nasi palete ---- */
#pulse-orb-caption, #pulse-orb-status {
  font-family: -apple-system, Inter, system-ui, sans-serif;
  letter-spacing: .06em;
}
[id*="legend"], [class*="legend"] {
  background: rgba(16,12,24,.78) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(196,166,255,.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
[class*="region-label"], [id*="region-label"] {
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
  letter-spacing: .12em;
}
/* Anatomy/Orbit preklopnika */
button[data-mode] {
  border-radius: 999px !important;
  letter-spacing: .08em;
  transition: background .2s, color .2s;
}
button[data-mode].active { background: rgba(154,107,255,.25) !important; }

/* ---- talk view preklopnik (Orb / Anatomy / Graph med klicem) ---- */
#talk-view-toggle {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 4px;
  background: rgba(16,12,24,.66);
  border: 1px solid rgba(196,166,255,.18);
  border-radius: 999px;
  padding: 4px;
  backdrop-filter: blur(10px);
}
#talk-view-toggle button {
  border: 0;
  background: transparent;
  color: #b9aecd;
  font: 600 11px/-apple-system, Inter, sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#talk-view-toggle button.active { background: rgba(154,107,255,.28); color: #f6f1ff; }
#talk-view-toggle button:hover { color: #f6f1ff; }
/* status pade pod preklopnik */
#shela-talk-status { top: 60px !important; }

/* ===================== v4: chat UI polish (kartice, sporocila, mobil) ===================== */

/* iOS: 16px v inputih prepreci auto-zoom */
@media (max-width: 640px) {
  textarea[placeholder^="Ask anything"] { font-size: 16px !important; }
  /* composer varen odmik od roba */
  div[class*="rounded-2xl"]:has(textarea[placeholder^="Ask anything"]) {
    margin-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

/* kartice predlogov na prazni strani: enoten radius, hover dvig */
main button[class*="rounded"],
main [role="button"][class*="rounded"] {
  transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s, background .22s, box-shadow .22s;
}
main button[class*="rounded"]:hover,
main [role="button"][class*="rounded"]:hover {
  transform: translateY(-2px);
  border-color: rgba(196,166,255,.35) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* sporocila: dihanje med odstavki, lepsi code bloki */
.max-w-3xl p + p { margin-top: .55em; }
.max-w-3xl pre {
  background: #120d1c !important;
  border: 1px solid rgba(196,166,255,.12);
  padding: 12px 14px;
}
.max-w-3xl :not(pre) > code {
  background: rgba(154,107,255,.14);
  border-radius: 6px;
  padding: 1px 6px;
}
.max-w-3xl blockquote {
  border-left: 3px solid rgba(154,107,255,.5);
  padding-left: 12px;
  color: #b9aecd;
}
.max-w-3xl a { color: #c4a6ff; text-decoration-color: rgba(196,166,255,.4); }
.max-w-3xl hr { border-color: rgba(255,255,255,.08); }

/* sidebar: New Chat gumb + item hover ze pokrit; se aktivni pogovor */
aside [class*="bg-"][class*="rounded"]:hover { filter: brightness(1.08); }

/* selection v nasi barvi */
::selection { background: rgba(154,107,255,.35); }

/* ---- tooltippi pod header ikonami ---- */
#shela-header-v2 .has-tip { position: relative; }
#shela-header-v2 .has-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(16,12,24,.94);
  border: 1px solid rgba(196,166,255,.22);
  color: #e9dcff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 90;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#shela-header-v2 .has-tip::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(196,166,255,.22);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 90;
}
#shela-header-v2 .has-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
#shela-header-v2 .has-tip:hover::before { opacity: 1; }

/* MOBILE (10.8.2026): pilule pogledov v talk overlayu v svojo (2.) vrsto,
   kompaktnejse — prej so se prekrivale z END/label v isti vrsti */
@media (max-width: 767px) {
  #talk-view-toggle { top: calc(80px + env(safe-area-inset-top, 0px)); }
  #talk-view-toggle button { font-size: 10px; padding: 5px 10px; }
}