/* ══════════════════════════════════════════════════════════
   MatBot v2.6 – matbot.css
   ══════════════════════════════════════════════════════════ */

#matbot-root {
  --mb-accent:     #4f8ef7;
  --mb-accent-dk:  #1a56db;
  --mb-accent-rgb: 79,142,247;
  --mb-bg:         #131c2e;
  --mb-surface:    #101828;
  --mb-border:     #1a2240;
  --mb-text:       #c7d9fb;
  --mb-muted:      #7a9abf;
  --mb-bot-bg:     #141e34;
  --mb-radius:     16px;
  --mb-shadow:     0 12px 48px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(79,142,247,.15);
  --mb-font:       'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-family: var(--mb-font);
  all: initial;
  font-family: var(--mb-font);
}

#matbot-launcher {
  all: unset;
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 99998 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  background: #0a0f1e !important;
  border: 3px solid #4f8ef7 !important;
  box-shadow: 0 6px 28px rgba(79,142,247,.55), 0 0 0 6px rgba(79,142,247,.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important;
  box-sizing: border-box !important;
}
#matbot-launcher:hover {
  transform: scale(1.18) !important;
  box-shadow: 0 12px 48px rgba(79,142,247,.9), 0 0 0 12px rgba(79,142,247,.18) !important;
}
#matbot-launcher:active { transform: scale(.93) !important; }
.matbot-launcher-pi {
  font-size: 34px !important;
  font-weight: 700 !important;
  font-family: 'Times New Roman', Georgia, serif !important;
  color: #85b4fb !important;
  text-shadow: 0 0 18px rgba(133,180,251,.9), 0 0 40px rgba(79,142,247,.5) !important;
  line-height: 1 !important;
  user-select: none !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), text-shadow .2s !important;
}
#matbot-launcher:hover .matbot-launcher-pi {
  transform: scale(1.15) !important;
  text-shadow: 0 0 28px rgba(133,180,251,1), 0 0 60px rgba(79,142,247,.9) !important;
}
.matbot-launcher-icon { display: flex !important; align-items: center !important; justify-content: center !important; }
.matbot-launcher-pi {
  display: block !important;
  filter: drop-shadow(0 0 8px rgba(147,197,253,.9)) drop-shadow(0 0 20px rgba(79,142,247,.6)) !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .2s !important;
}
#matbot-launcher:hover .matbot-launcher-pi {
  transform: scale(1.2) !important;
  filter: drop-shadow(0 0 14px rgba(147,197,253,1)) drop-shadow(0 0 32px rgba(79,142,247,.9)) !important;
}
.matbot-launcher-label { display: none !important; }
.matbot-icon-close svg { width: 26px !important; height: 26px !important; display: block !important; }

/* ── Panel ────────────────────────────────────────────── */
#matbot-panel {
  position: fixed !important;
  bottom: 92px !important;
  right: 24px !important;
  left: 50px !important;
  z-index: 99997 !important;
  width: auto !important;
  max-width: calc(100vw - 74px) !important;
  height: 600px !important;
  max-height: calc(100vh - 120px) !important;
  background: #131c2e !important;
  border-radius: var(--mb-radius) !important;
  box-shadow: var(--mb-shadow) !important;
  border: 1px solid var(--mb-border) !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  transition: height .2s ease !important;
}
#matbot-panel[hidden] { display: none !important; }

/* ── Fullscreen ───────────────────────────────────────── */
#matbot-panel.matbot-fullscreen {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; max-width: 100vw !important;
  height: 100vh !important; max-height: 100vh !important;
  border-radius: 0 !important; border: none !important;
  z-index: 999999 !important;
}
#matbot-root.matbot-is-fullscreen #matbot-launcher { display: none !important; }

#matbot-fullscreen {
  all: unset !important;
  cursor: pointer !important; color: #fff !important;
  padding: 8px !important; border-radius: 8px !important;
  display: flex !important; align-items: center !important;
  background: rgba(255,255,255,.22) !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  transition: background .15s !important;
}
#matbot-fullscreen:hover { background: rgba(255,255,255,.38) !important; }

/* ── Header ───────────────────────────────────────────── */
#matbot-panel #matbot-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 11px 13px !important;
  background: linear-gradient(135deg, #1a2a50 0%, #172040 45%, #0f1520 100%) !important;
  color: #fff !important; flex-shrink: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}
#matbot-panel .matbot-header-left { display: flex !important; align-items: center !important; gap: 9px !important; }
#matbot-panel .matbot-avatar {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important; border: 1.5px solid rgba(255,255,255,.35) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.4rem !important; font-weight: 700 !important; flex-shrink: 0 !important;
  color: #fff !important; font-family: 'Times New Roman', Georgia, serif !important;
  line-height: 1 !important;
}
#matbot-panel .matbot-header-name { font-size: 13.5px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.2 !important; }
#matbot-panel .matbot-header-sub  { font-size: 0.85rem !important; opacity: .75 !important; margin-top: 1px !important; color: #fff !important; }
#matbot-panel .matbot-pdf-badge   { font-size: 0.85rem !important; background: rgba(255,255,255,.2) !important; padding: 1px 5px !important; border-radius: 4px !important; margin-left: 4px !important; }
#matbot-panel .matbot-header-actions { display: flex !important; align-items: center !important; gap: 5px !important; }

/* LaTeX toggle */
#matbot-panel .matbot-latex-toggle {
  display: flex !important; align-items: center !important; gap: 4px !important;
  cursor: pointer !important; user-select: none !important;
}
#matbot-panel .matbot-latex-toggle input { display: none !important; }
#matbot-panel .matbot-toggle-track {
  width: 30px !important; height: 16px !important; border-radius: 9px !important;
  background: rgba(255,255,255,.25) !important; position: relative !important;
  transition: background .2s !important; flex-shrink: 0 !important;
}
#matbot-panel .matbot-latex-toggle input:checked + .matbot-toggle-track { background: rgba(255,255,255,.65) !important; }
#matbot-panel .matbot-toggle-thumb {
  position: absolute !important; top: 2px !important; left: 2px !important;
  width: 12px !important; height: 12px !important; border-radius: 50% !important;
  background: #131c2e !important; transition: transform .2s !important;
}
#matbot-panel .matbot-latex-toggle input:checked + .matbot-toggle-track .matbot-toggle-thumb { transform: translateX(14px) !important; }
#matbot-panel .matbot-toggle-label { font-size: 0.85rem !important; opacity: .85 !important; font-weight: 500 !important; color: #fff !important; }

/* Zoom gumbi – odstranjeni */

#matbot-clear {
  all: unset !important;
  cursor: pointer !important; color: rgba(255,255,255,.85) !important;
  padding: 8px !important; border-radius: 8px !important;
  display: flex !important; align-items: center !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
#matbot-clear:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.65) !important; }

#matbot-share-btn {
  all: unset !important;
  cursor: pointer !important; color: rgba(255,255,255,.85) !important;
  padding: 8px !important; border-radius: 8px !important;
  display: flex !important; align-items: center !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
#matbot-share-btn:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.65) !important; }

/* ── Messages ─────────────────────────────────────────── */
#matbot-panel #matbot-messages {
  flex: 1 !important; overflow-y: auto !important; padding: 13px 11px 6px !important;
  display: flex !important; flex-direction: column !important; gap: 9px !important;
  scroll-behavior: smooth !important; box-sizing: border-box !important;
  background: #131c2e !important;
}
#matbot-panel #matbot-messages::-webkit-scrollbar { width: 4px !important; }
#matbot-panel #matbot-messages::-webkit-scrollbar-thumb { background: var(--mb-border) !important; border-radius: 4px !important; }

#matbot-panel .matbot-msg {
  max-width: 92% !important; padding: 10px 14px !important; border-radius: 16px !important;
  font-size: 1.05rem !important; line-height: 1.7 !important; word-break: break-word !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
}
#matbot-panel .matbot-msg--bot {
  background: #0a0f1e !important; color: #c7d9fb !important;
  border-bottom-left-radius: 4px !important; align-self: flex-start !important;
  border: 1px solid rgba(79,142,247,.25) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
#matbot-panel .matbot-msg--user {
  background: linear-gradient(135deg, #5a9bfb, #4f8ef7) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important; align-self: flex-end !important;
  box-shadow: 0 2px 8px rgba(79,142,247,.4) !important;
}
#matbot-panel .matbot-msg--error { background: rgba(10,15,30,0.06) !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }

#matbot-panel .matbot-msg--bot h2,
#matbot-panel .matbot-msg--bot h3 { font-size: 1.1rem !important; font-weight: 700 !important; margin: 9px 0 3px !important; color: var(--mb-accent) !important; }
#matbot-panel .matbot-msg--bot p  { margin: 0 0 5px !important; }
#matbot-panel .matbot-msg--bot ul,
#matbot-panel .matbot-msg--bot ol { padding-left: 17px !important; margin: 3px 0 7px !important; }
#matbot-panel .matbot-msg--bot li { margin-bottom: 2px !important; }
#matbot-panel .matbot-msg--bot strong { font-weight: 700 !important; }
#matbot-panel .matbot-msg--bot em     { font-style: italic !important; }

/* Kodni bloki */
#matbot-panel .matbot-msg--bot pre {
  background: #dbeafe !important; color: #1a2240 !important; border-radius: 8px !important;
  padding: 9px 11px !important; margin: 7px 0 !important; overflow-x: auto !important;
  font-size: 0.95rem !important; line-height: 1.5 !important; position: relative !important;
}
#matbot-panel .matbot-msg--bot code {
  font-family: 'Cascadia Code','Fira Code',Consolas,monospace !important;
  background: none !important; color: inherit !important;
}
#matbot-panel .matbot-msg--bot p code {
  background: rgba(var(--mb-accent-rgb),.1) !important; padding: 1px 5px !important;
  border-radius: 4px !important; color: var(--mb-accent) !important; font-size: 0.95rem !important;
}
#matbot-panel .matbot-msg--bot pre.matbot-latex-block {
  background: #f0f0f0 !important; color: #1a1a1a !important; border: 1px solid #d0d0d0 !important;
}
#matbot-panel .matbot-msg--bot pre.matbot-latex-block code { color: #1a1a1a !important; }

/* ── Akcijska vrstica pod bot odgovorom ── */
#matbot-panel .matbot-msg-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  padding: 3px 4px 6px !important;
  margin-top: -2px !important;
}
#matbot-panel .matbot-msg-actions .matbot-msg-action-btn {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  font-size: 0.75rem !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  color: #8899aa !important;
  border: 1px solid rgba(124,106,247,0.18) !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
  background: transparent !important;
  line-height: 1 !important;
}
#matbot-panel .matbot-msg-actions .matbot-msg-action-btn:hover {
  background: rgba(124,106,247,0.12) !important;
  color: #b0a8ff !important;
  border-color: rgba(124,106,247,0.45) !important;
}
#matbot-panel .matbot-msg-actions .matbot-msg-action-btn:disabled {
  opacity: 0.5 !important; cursor: default !important;
}
#matbot-panel .matbot-msg-actions .matbot-tts-active {
  background: rgba(124,106,247,0.22) !important;
  color: #a89cff !important;
}
body.matbot-light-mode .matbot-msg-actions .matbot-msg-action-btn {
  color: #6655cc !important;
  border-color: rgba(101,84,224,0.22) !important;
}
body.matbot-light-mode .matbot-msg-actions .matbot-msg-action-btn:hover {
  background: rgba(101,84,224,0.08) !important;
  color: #4433aa !important;
}


  position: absolute !important; top: 5px !important; right: 6px !important;
  background: rgba(255,255,255,.12) !important; border: none !important; color: #8baabf !important;
  font-size: 0.85rem !important; padding: 2px 7px !important; border-radius: 4px !important;
  cursor: pointer !important; transition: background .15s !important;
  font-family: var(--mb-font) !important;
}
.matbot-copy-btn:hover  { background: rgba(255,255,255,.22) !important; color: #fff !important; }
.matbot-copy-btn.copied { background: #22c55e22 !important; color: #22c55e !important; }

/* TikZ */
.matbot-tikz-wrap { margin: 6px 0 !important; }
.matbot-tikz-img  { max-width: 100% !important; border-radius: 6px !important; border: 1px solid var(--mb-border) !important; display: block !important; }
.matbot-tikz-loading { font-size: 0.95rem !important; color: var(--mb-muted) !important; font-style: italic !important; }
.matbot-tikz-error   { font-size: 0.95rem !important; color: #b91c1c !important; background: rgba(10,15,30,0.06) !important; border: 1px solid #fecaca !important; border-radius: 6px !important; padding: 6px 10px !important; }

.matbot-tikz-code-wrap { margin-top: 6px !important; }
.matbot-tikz-code-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  font-size: 0.9rem !important; color: #666 !important; margin-bottom: 3px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
}
.matbot-tikz-copy {
  position: static !important;
  background: rgba(0,0,0,.08) !important; border: none !important; color: #555 !important;
  font-size: 0.85rem !important; padding: 2px 7px !important; border-radius: 4px !important;
  cursor: pointer !important;
}
.matbot-tikz-copy:hover  { background: rgba(0,0,0,.16) !important; color: #dbeafe !important; }
.matbot-tikz-copy.copied { background: #22c55e22 !important; color: #22c55e !important; }

/* KaTeX */
#matbot-panel .katex         { font-size: 1em !important; }
#matbot-panel .katex-display { margin: 5px 0 !important; overflow-x: auto !important; }

/* Typing */
#matbot-panel .matbot-typing {
  display: flex !important; align-items: center !important; gap: 5px !important;
  padding: 9px 13px !important; background: var(--mb-bot-bg) !important;
  border: 1px solid rgba(var(--mb-accent-rgb),.12) !important;
  border-radius: 13px !important; border-bottom-left-radius: 4px !important;
  align-self: flex-start !important; width: fit-content !important;
}
#matbot-panel .matbot-typing span {
  width: 6px !important; height: 6px !important; background: var(--mb-accent) !important;
  border-radius: 50% !important; animation: mb-bounce .9s ease-in-out infinite !important; opacity: .7 !important;
}
#matbot-panel .matbot-typing span:nth-child(2) { animation-delay: .15s !important; }
#matbot-panel .matbot-typing span:nth-child(3) { animation-delay: .30s !important; }
@keyframes mb-bounce {
  0%,60%,100% { transform: translateY(0);    opacity: .5; }
  30%         { transform: translateY(-5px); opacity: 1;  }
}

/* ── Settings panel ───────────────────────────────────── */
#matbot-panel #matbot-settings-panel {
  padding: 10px 14px 8px !important;
  border-bottom: 1px solid #1a2240 !important;
  background: linear-gradient(180deg, #101828 0%, #0d1525 100%) !important;
  flex-shrink: 0 !important;
}
#matbot-panel .mb-row {
  display: flex !important; gap: 12px !important; margin-bottom: 8px !important; flex-wrap: wrap !important;
}
#matbot-panel .mb-field {
  display: flex !important; flex-direction: column !important; gap: 3px !important; flex: 1 !important; min-width: 120px !important;
}
#matbot-panel .mb-field > label {
  font-size: 0.85rem !important; font-weight: 500 !important; color: #4f8ef7 !important;
  text-transform: uppercase !important; letter-spacing: .5px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; display: block !important;
}

/* Select meniji – enotni stil za vse v levem panelu */
#mb-left select,
#mb-left input[type="number"] {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 5px 28px 5px 10px !important;
  border: 1.5px solid #7c6af7 !important;
  border-radius: 8px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237c6af7' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  color: #1a1a2e !important;
  font-size: 0.88rem !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#mb-left input[type="number"] {
  background: #fff !important;
  padding: 5px 8px !important;
  text-align: center !important;
}
#mb-left select:focus,
#mb-left input[type="number"]:focus {
  outline: none !important;
  border-color: #6554e0 !important;
  box-shadow: 0 0 0 2px rgba(124,106,247,.2) !important;
}

/* ── Način gumbi – 3D učinek ──────────────────────────── */
#matbot-panel .mb-field-full { flex: 1 !important; width: 100% !important; }
#matbot-panel .mb-mode-group {
  display: flex !important;
  border: none !important;
  border-radius: 24px !important; overflow: visible !important; width: 100% !important;
  gap: 6px !important; background: transparent !important;
  padding: 2px !important; box-sizing: border-box !important;
}
#matbot-panel .mb-mode-btn {
  all: unset !important; flex: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 4px !important; padding: 8px 4px !important; cursor: pointer !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8f0fe 100%) !important;
  color: #4f8ef7 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; font-weight: 500 !important;
  border: 1px solid #4f8ef7 !important; border-radius: 20px !important;
  /* 3D učinek */
  box-shadow: 0 4px 6px rgba(79,142,247,.25), 0 1px 0 #fff inset !important;
  transition: all .15s ease !important;
  text-align: center !important; box-sizing: border-box !important;
}
#matbot-panel .mb-mode-btn:hover {
  background: linear-gradient(180deg, #e8f0fe 0%, #c7d9fb 100%) !important;
  box-shadow: 0 6px 10px rgba(79,142,247,.3), 0 1px 0 #fff inset !important;
  transform: translateY(-2px) !important;
}
#matbot-panel .mb-mode-btn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 3px rgba(79,142,247,.2) !important;
}
#matbot-panel .mb-mode-btn.mb-mode-active {
  background: linear-gradient(180deg, #5a9bfb 0%, #4f8ef7 60%, #1a56db 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(79,142,247,.45), 0 1px 0 rgba(255,255,255,.2) inset !important;
  transform: translateY(0) !important;
}
#matbot-panel .mb-mode-icon {
  font-size: 1.2rem !important; line-height: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)) !important;
}
#matbot-panel .mb-mode-label { font-size: 0.72rem !important; white-space: nowrap !important; }

/* Attach vrstica – Kamera / Slika / +PDF */
#matbot-panel .mb-attach-row {
  display: flex !important; gap: 8px !important;
  justify-content: center !important; margin-top: 6px !important;
  padding: 0 2px !important;
}
#matbot-panel .mb-attach-btn {
  all: unset !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  padding: 5px 12px !important; cursor: pointer !important;
  background: transparent !important;
  color: #4f8ef7 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; font-size: 0.75rem !important; font-weight: 400 !important;
  border: 1px solid #4f8ef7 !important; border-radius: 16px !important;
  transition: all .15s ease !important; box-sizing: border-box !important;
}
#matbot-panel .mb-attach-btn:hover {
  background: rgba(79,142,247,.1) !important;
  transform: translateY(-1px) !important;
}
#matbot-panel .mb-attach-btn:active { transform: translateY(1px) !important; }
#matbot-panel .mb-attach-btn svg { flex-shrink: 0 !important; }

/* PDF dropdown */
#matbot-panel .mb-pdf-dropdown-wrap {
  position: relative !important; display: inline-flex !important;
}
#matbot-panel .mb-pdf-chevron {
  transition: transform .2s !important; flex-shrink: 0 !important;
}
#matbot-panel .mb-attach-btn--open .mb-pdf-chevron { transform: rotate(180deg) !important; }
#matbot-panel .mb-pdf-dropdown {
  position: absolute !important; bottom: calc(100% + 6px) !important; right: 0 !important;
  left: auto !important; transform: none !important;
  background: #1a2540 !important; border: 1px solid #4f8ef7 !important;
  border-radius: 10px !important; overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
  z-index: 100 !important; min-width: 170px !important;
}
#matbot-panel .mb-pdf-dd-item {
  all: unset !important; display: flex !important; align-items: center !important;
  gap: 8px !important; width: 100% !important; padding: 10px 14px !important;
  font-size: 13px !important; font-family: 'Segoe UI',Arial,sans-serif !important;
  color: #dbeafe !important; cursor: pointer !important; box-sizing: border-box !important;
  transition: background .12s !important;
}
#matbot-panel .mb-pdf-dd-item:hover { background: rgba(79,142,247,.2) !important; }
#matbot-panel .mb-pdf-dd-item + .mb-pdf-dd-item { border-top: 1px solid rgba(79,142,247,.25) !important; }
/* Light mode dropdown */
#matbot-panel[data-theme="light"] .mb-pdf-dropdown {
  background: #fff !important; border-color: #bfdbfe !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
#matbot-panel[data-theme="light"] .mb-pdf-dd-item { color: #1a56db !important; }
#matbot-panel[data-theme="light"] .mb-pdf-dd-item:hover { background: #eff6ff !important; }

/* Število nalog */
#matbot-panel #mb-num-tasks {
  all: unset !important; width: 60px !important; padding: 5px 8px !important;
  border: 2px solid #4f8ef7 !important; border-radius: 8px !important;
  font-size: 1rem !important; font-family: 'Segoe UI',Arial,sans-serif !important;
  color: #dbeafe !important; background: #131c2e !important;
  text-align: center !important; box-sizing: border-box !important; display: block !important;
}
#matbot-panel #mb-num-tasks:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(79,142,247,.15) !important; }

/* Zoom gumbi – enak stil a na belem ozadju glave */

#matbot-panel #matbot-num-tasks {
  all: unset !important; width: 52px !important; padding: 4px 8px !important;
  border: 2px solid #4f8ef7 !important; border-radius: 8px !important;
  font-size: 1rem !important; font-family: 'Segoe UI',Arial,sans-serif !important;
  color: #dbeafe !important; background: #131c2e !important;
  text-align: center !important; box-sizing: border-box !important; display: block !important;
}
#matbot-panel #matbot-num-tasks:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(79,142,247,.15) !important; }

/* ── Chips – moder okvir ──────────────────────────────── */
#matbot-panel #matbot-suggestions {
  display: flex !important; flex-wrap: wrap !important; gap: 4px !important; padding: 4px 0 2px !important;
}
#matbot-panel .matbot-chip {
  all: unset !important; display: inline-flex !important; align-items: center !important;
  font-size: 0.85rem !important; padding: 3px 10px !important;
  border: 1.5px solid #4f8ef7 !important; border-radius: 20px !important;
  background: #131c2e !important; color: #4f8ef7 !important;
  cursor: pointer !important; font-family: 'Segoe UI',Arial,sans-serif !important;
  font-weight: 500 !important; white-space: nowrap !important; box-sizing: border-box !important;
  transition: background .12s, color .12s !important;
}
#matbot-panel .matbot-chip:hover { background: #4f8ef7 !important; color: #fff !important; }

/* ── Toolbar – svetlo modro ozadje, moder okvir gumbov ── */
#matbot-panel #matbot-rte-toolbar {
  display: flex !important; align-items: center !important; gap: 3px !important; flex-wrap: wrap !important;
  padding: 6px 10px 5px !important;
  border-top: 1px solid #1a2240 !important;
  background: linear-gradient(180deg, #141e34 0%, #111928 100%) !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
#matbot-panel .matbot-rte-btn {
  all: unset !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: #131c2e !important;
  border: 1px solid #1e3a6e !important; border-radius: 6px !important;
  cursor: pointer !important; color: #4f8ef7 !important; padding: 3px 7px !important;
  font-size: 0.9rem !important; font-family: 'Segoe UI',Arial,sans-serif !important; font-weight: 500 !important;
  min-width: 26px !important; height: 24px !important; box-sizing: border-box !important;
  transition: all .12s !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}
#matbot-panel .matbot-rte-btn:hover  {
  background: #4f8ef7 !important; color: #fff !important; border-color: #4f8ef7 !important;
  box-shadow: 0 2px 6px rgba(79,142,247,.25) !important; transform: translateY(-1px) !important;
}
#matbot-panel .matbot-rte-btn.active { background: #1a56db !important; color: #fff !important; border-color: #1a56db !important; }

/* ── Σ trigger gumb ────────────────────────────────────── */
#matbot-panel .matbot-math-popup-btn {
  font-size: 1rem !important; font-weight: 700 !important;
  min-width: 30px !important; color: #4f8ef7 !important;
  border-color: #1e3a6e !important; letter-spacing: 0 !important;
}
#matbot-panel .matbot-math-popup-btn:hover,
#matbot-panel .matbot-math-popup-btn.active {
  background: #4f8ef7 !important; color: #fff !important; border-color: #4f8ef7 !important;
}

/* ── Matematični popup ─────────────────────────────────── */
#matbot-panel #matbot-math-popup {
  position: fixed !important;
  background: rgba(8, 16, 38, 0.82) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border: 1px solid rgba(79,142,247,.35) !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 40px rgba(0,0,0,.7),
    0 0 0 1px rgba(79,142,247,.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  z-index: 999998 !important;
  padding: 10px !important;
  user-select: none !important;
  min-width: 320px !important;
  max-width: 430px !important;
}
#matbot-panel .matbot-math-popup-tabs {
  display: flex !important; gap: 4px !important; margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(79,142,247,.15) !important;
  padding-bottom: 8px !important;
}
#matbot-panel .matbot-math-tab {
  all: unset !important; cursor: pointer !important;
  padding: 4px 13px !important; border-radius: 7px !important;
  font-size: 0.8rem !important; font-weight: 500 !important;
  color: rgba(199,217,251,.55) !important; border: 1px solid transparent !important;
  transition: all .12s !important; letter-spacing: .01em !important;
}
#matbot-panel .matbot-math-tab:hover { color: #c7d9fb !important; }
#matbot-panel .matbot-math-tab.active {
  background: rgba(79,142,247,.18) !important;
  color: #7dbfff !important;
  border-color: rgba(79,142,247,.4) !important;
}
#matbot-panel .matbot-math-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) !important;
  gap: 5px !important;
}
#matbot-panel .matbot-mpb {
  all: unset !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 36px !important; border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(79,142,247,.2) !important;
  color: #c7d9fb !important;
  font-size: 0.83rem !important; font-family: 'Segoe UI', Arial, sans-serif !important;
  font-weight: 500 !important; transition: all .1s !important;
  box-sizing: border-box !important; text-align: center !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}
#matbot-panel .matbot-mpb sup, #matbot-panel .matbot-mpb sub {
  font-size: 0.6rem !important; line-height: 1 !important;
}
#matbot-panel .matbot-mpb:hover {
  background: rgba(79,142,247,.35) !important;
  color: #fff !important;
  border-color: rgba(79,142,247,.7) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(79,142,247,.25) !important;
}
#matbot-panel .matbot-mpb:active { transform: scale(.95) !important; }
#matbot-panel #matbot-tikz-btn { background: rgba(10,15,30,0.56) !important; border-color: #ffb3a3 !important; color: #cc2200 !important; }
#matbot-panel #matbot-tikz-btn:hover  { background: #cc2200 !important; color: #fff !important; border-color: #cc2200 !important; }
#matbot-panel #matbot-tikz-btn.active { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
/* YouTube gumb */
#matbot-panel #matbot-yt-btn { color: #ff4444 !important; border-color: #4a1a1a !important; }
#matbot-panel #matbot-yt-btn:hover { background: #ff0000 !important; color: #fff !important; border-color: #ff0000 !important; }

/* ── YouTube video kartice v chat oknu ────────────────── */
#matbot-panel .matbot-yt-header {
  display: flex !important; align-items: center !important; gap: 6px !important;
  font-size: 0.9rem !important; margin-bottom: 10px !important;
  color: #c7d9fb !important;
}
#matbot-panel .matbot-yt-header strong { color: #fff !important; }
#matbot-panel .matbot-yt-grid {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}
#matbot-panel .matbot-yt-card {
  display: flex !important; gap: 10px !important; align-items: flex-start !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(79,142,247,.18) !important;
  border-radius: 10px !important; padding: 8px !important;
  text-decoration: none !important; color: inherit !important;
  transition: background .15s, border-color .15s !important;
  cursor: pointer !important;
}
#matbot-panel .matbot-yt-card:hover {
  background: rgba(79,142,247,.12) !important;
  border-color: rgba(79,142,247,.4) !important;
}
#matbot-panel .matbot-yt-thumb {
  flex-shrink: 0 !important; width: 100px !important; height: 56px !important;
  border-radius: 6px !important; overflow: hidden !important;
  background: #0a0f1e !important;
}
#matbot-panel .matbot-yt-thumb img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
#matbot-panel .matbot-yt-thumb-fallback {
  width: 100% !important; height: 100% !important;
  align-items: center !important; justify-content: center !important;
  font-size: 1.4rem !important; color: #ff4444 !important;
  background: #1a0a0a !important;
}
#matbot-panel .matbot-yt-info {
  flex: 1 !important; min-width: 0 !important;
}
#matbot-panel .matbot-yt-title {
  font-size: 0.85rem !important; font-weight: 600 !important;
  color: #c7d9fb !important; margin-bottom: 2px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#matbot-panel .matbot-yt-card:hover .matbot-yt-title { color: #fff !important; }
#matbot-panel .matbot-yt-channel {
  font-size: 0.75rem !important; color: #ff6666 !important; margin-bottom: 3px !important;
}
#matbot-panel .matbot-yt-desc {
  font-size: 0.78rem !important; color: #7a9abf !important;
  line-height: 1.4 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}

/* Light mode */
#matbot-panel[data-theme="light"] .matbot-yt-header { color: #1e3a6e !important; }
#matbot-panel[data-theme="light"] .matbot-yt-header strong { color: #0a1628 !important; }
#matbot-panel[data-theme="light"] .matbot-yt-card {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(26,86,219,.15) !important;
}
#matbot-panel[data-theme="light"] .matbot-yt-card:hover {
  background: rgba(26,86,219,.06) !important;
  border-color: rgba(26,86,219,.35) !important;
}
#matbot-panel[data-theme="light"] .matbot-yt-title { color: #1e3a6e !important; }
#matbot-panel[data-theme="light"] .matbot-yt-card:hover .matbot-yt-title { color: #1a56db !important; }
#matbot-panel[data-theme="light"] .matbot-yt-desc { color: #5a7a9a !important; }
#matbot-panel .matbot-rte-sep {
  width: 1px !important; height: 18px !important;
  background: linear-gradient(180deg, transparent, #1e3a6e, transparent) !important;
  margin: 0 4px !important;
}

/* ── Editor – moder okvir ─────────────────────────────── */
#matbot-panel #matbot-input-area {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 10px !important;
  background: #131c2e !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

/* Textarea + send gumb v isti vrstici */
#matbot-panel #matbot-input-area > textarea,
#matbot-panel #matbot-input-area > #matbot-send-row {
  /* Postavljeni so kot flex row spodaj v JS */
}

#matbot-panel .matbot-input-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 10px !important;
  padding: 0 !important;
}

#matbot-panel #matbot-editor,
#matbot-panel textarea#matbot-editor {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important; min-width: 0 !important;
  box-sizing: border-box !important;
  min-height: 52px !important; max-height: 160px !important;
  overflow-y: auto !important; resize: none !important;
  border: 1px solid #4f8ef7 !important; border-radius: 12px !important;
  padding: 12px 14px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; font-size: 1rem !important;
  line-height: 1.5 !important; color: #7a9abf !important; background: #090e1c !important;
  outline: none !important; -webkit-appearance: none !important;
  appearance: none !important; margin: 0 !important;
}
#matbot-panel #matbot-editor:focus,
#matbot-panel textarea#matbot-editor:focus {
  border-color: #74aefb !important;
  box-shadow: 0 0 0 3px rgba(79,142,247,.15) !important;
  color: #a8c4e8 !important;
}

/* ── Send row – desno od textarea ─────────────────────── */
#matbot-panel #matbot-send-row,
#matbot-root #matbot-panel #matbot-send-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: auto !important;
}
#matbot-panel #matbot-send,
button#matbot-send {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg, #5a9bfb, #4f8ef7, #1a56db) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 14px rgba(79,142,247,.4) !important;
  transition: all .15s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  height: 52px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#matbot-panel #matbot-send:hover,
button#matbot-send:hover {
  background: linear-gradient(135deg, #74aefb, #5a9bfb, #4f8ef7) !important;
  box-shadow: 0 6px 20px rgba(79,142,247,.5) !important;
  transform: translateY(-1px) !important;
}
#matbot-panel #matbot-send:active { transform: scale(.97) !important; }
#matbot-panel #matbot-send:disabled,
button#matbot-send:disabled {
  background: #aaa !important; border-color: #aaa !important;
  color: #fff !important; cursor: not-allowed !important;
}
#matbot-panel #matbot-send svg { width: 15px !important; height: 15px !important; stroke: #fff !important; }

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 600px) {
  #matbot-panel {
    bottom: 0 !important; right: 0 !important; left: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    /* dvh = dynamic viewport height – skrči se ko se odpre tipkovnica */
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    /* Varni robovi za iPhone notch/home bar */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Input area prilepljena na dno – nikoli ne izgine */
  #matbot-panel #matbot-input-area {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }
  #matbot-panel #matbot-rte-toolbar {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
  }
  #matbot-launcher { bottom: 16px !important; right: 16px !important; }
  /* Ko je panel odprt na mobilnem, launcher ni viden – to je OK ker je panel fullscreen */
  /* Ko je panel zaprt, launcher mora biti viden */
  #matbot-root:not(.matbot-panel-open) #matbot-launcher { display: flex !important; }
  #matbot-root.matbot-panel-open #matbot-launcher { display: none !important; }
  #matbot-panel #matbot-img-preview:not([data-active]) { display: none !important; }
  #matbot-panel #matbot-send-row,
  #matbot-root #matbot-panel #matbot-send-row {
    justify-content: stretch !important;
    display: flex !important;
  }
  #matbot-panel #matbot-send,
  button#matbot-send {
    flex: 1 !important;
  }
  /* Attach gumbi na mobilnih – večji tap target, polna širina */
  #matbot-panel .mb-attach-row {
    gap: 6px !important;
  }
  #matbot-panel .mb-attach-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    font-size: 0.7rem !important;
    min-height: 40px !important; /* prijazen tap target */
  }
}

/* ── Gumb za rešitve ──────────────────────────────────── */
#matbot-panel .matbot-resitve-wrap {
  align-self: flex-start !important; margin: 2px 0 !important;
  display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
}
#matbot-panel .matbot-resitve-btn {
  all: unset !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 7px 16px !important; border-radius: 20px !important;
  border: 2px solid #4f8ef7 !important;
  background: #131c2e !important; color: #4f8ef7 !important;
  font-size: 0.95rem !important; font-weight: 500 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  cursor: pointer !important; box-sizing: border-box !important;
  transition: background .15s, color .15s !important;
}
#matbot-panel .matbot-resitve-btn:hover {
  background: #4f8ef7 !important; color: #fff !important;
}
#matbot-panel .matbot-resitve-btn:disabled {
  opacity: .6 !important; cursor: not-allowed !important;
}
#matbot-panel .matbot-resitve-btn.copied {
  background: #16a34a !important; border-color: #16a34a !important; color: #fff !important;
}
/* Gumb za LaTeX rešitev – zelen okvir */
#matbot-panel .matbot-latex-resitve-btn {
  background: #131c2e !important; color: #16a34a !important; border-color: #16a34a !important;
}
#matbot-panel .matbot-latex-resitve-btn:hover {
  background: #16a34a !important; color: #fff !important;
}
#matbot-panel .matbot-latex-resitve-btn.copied {
  background: #16a34a !important; border-color: #16a34a !important; color: #fff !important;
}
#matbot-panel .matbot-latex-naloge-btn {
  background: #131c2e !important; color: #4f8ef7 !important; border-color: #4f8ef7 !important;
}
#matbot-panel .matbot-latex-naloge-btn:hover {
  background: #4f8ef7 !important; color: #fff !important;
}
#matbot-panel .matbot-latex-naloge-btn.copied {
  background: #16a34a !important; border-color: #16a34a !important; color: #fff !important;
}

/* ── GeoGebra widget ──────────────────────────────────── */
#matbot-panel .matbot-tikz-wrap {
  margin: 6px 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important;
}
#matbot-panel .matbot-gg-wrap {
  background: #141e38 !important; border: 1.5px solid #4f8ef7 !important;
  border-radius: 10px !important; padding: 10px 12px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
}
#matbot-panel .matbot-gg-header {
  display: flex !important; align-items: center !important; gap: 6px !important;
  margin-bottom: 7px !important;
}
#matbot-panel .matbot-gg-header strong {
  font-size: 0.95rem !important; font-weight: 700 !important; color: #4f8ef7 !important;
}
#matbot-panel .matbot-gg-link {
  display: inline-block !important; margin-bottom: 8px !important;
  font-size: 0.95rem !important; color: #4f8ef7 !important; font-weight: 500 !important;
  text-decoration: none !important; border-bottom: 1px solid #4f8ef7 !important;
  transition: color .12s !important;
}
#matbot-panel .matbot-gg-link:hover { color: #1a56db !important; border-color: #1a56db !important; }
#matbot-panel .matbot-gg-syntax { margin-top: 4px !important; }
#matbot-panel .matbot-gg-label {
  font-size: 0.85rem !important; font-weight: 500 !important; color: #666 !important;
  text-transform: uppercase !important; letter-spacing: .4px !important; display: block !important; margin-bottom: 4px !important;
}
#matbot-panel .matbot-gg-expr-row {
  display: flex !important; align-items: center !important; gap: 6px !important;
}
#matbot-panel .matbot-gg-expr {
  flex: 1 !important; background: #131c2e !important; border: 1px solid #4f8ef7 !important;
  border-radius: 6px !important; padding: 4px 8px !important; font-size: 0.95rem !important;
  font-family: 'Cascadia Code',Consolas,monospace !important; color: #dbeafe !important;
  display: block !important; overflow-x: auto !important;
}
#matbot-panel .matbot-gg-copy-expr {
  all: unset !important; cursor: pointer !important;
  background: #4f8ef7 !important; color: #fff !important;
  font-size: 0.9rem !important; font-weight: 500 !important; padding: 4px 10px !important;
  border-radius: 6px !important; white-space: nowrap !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  transition: background .12s !important;
}
#matbot-panel .matbot-gg-copy-expr:hover { background: #1a56db !important; }
#matbot-panel .matbot-gg-note {
  font-size: 0.9rem !important; color: #666 !important; margin-top: 5px !important; font-style: italic !important;
}
#matbot-panel .matbot-gg-note code {
  background: #131c2e !important; padding: 1px 4px !important; border-radius: 3px !important;
  font-size: 0.9rem !important; color: #4f8ef7 !important; border: 1px solid #dde !important;
}

/* TikZ koda pod GeoGebra widgetom */
#matbot-panel .matbot-tikz-code-wrap { margin-top: 2px !important; }
#matbot-panel .matbot-tikz-code-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  font-size: 0.9rem !important; color: #666 !important; margin-bottom: 3px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
}
#matbot-panel .matbot-tikz-copy-btn {
  all: unset !important; cursor: pointer !important;
  background: #131c2e !important; border: 1.5px solid #4f8ef7 !important; color: #4f8ef7 !important;
  font-size: 0.9rem !important; font-weight: 500 !important; padding: 3px 10px !important;
  border-radius: 6px !important; font-family: 'Segoe UI',Arial,sans-serif !important;
  transition: background .12s, color .12s !important;
}
#matbot-panel .matbot-tikz-copy-btn:hover { background: #4f8ef7 !important; color: #fff !important; }
#matbot-panel .matbot-tikz-copy-btn.copied { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }

/* ── LaTeX kopiraj blok (pod rešitvami) ───────────────── */
#matbot-panel .matbot-latex-copy-wrap {
  margin: 4px 0 8px !important;
  border: 1.5px solid #4f8ef7 !important;
  border-radius: 10px !important; overflow: hidden !important;
}
#matbot-panel .matbot-latex-copy-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 7px 12px !important; background: #141e38 !important;
  border-bottom: 1px solid #4f8ef7 !important;
}
#matbot-panel .matbot-latex-copy-header span {
  font-size: 0.95rem !important; font-weight: 500 !important; color: #4f8ef7 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
}
#matbot-panel .matbot-latex-copy-btn {
  all: unset !important; cursor: pointer !important;
  background: #4f8ef7 !important; color: #fff !important;
  font-size: 0.9rem !important; font-weight: 500 !important;
  padding: 4px 12px !important; border-radius: 6px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  transition: background .12s !important;
}
#matbot-panel .matbot-latex-copy-btn:hover   { background: #1a56db !important; }
#matbot-panel .matbot-latex-copy-btn.copied  { background: #16a34a !important; }
#matbot-panel .matbot-latex-preview {
  margin: 0 !important; border-radius: 0 !important;
  max-height: 160px !important; overflow-y: auto !important;
  font-size: 0.9rem !important;
}

/* ── Slika upload ─────────────────────────────────────── */
#matbot-panel #matbot-img-preview {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 6px 10px !important;
  background: #141e38 !important; border-top: 1px solid #4f8ef7 !important;
  border-bottom: 1px solid rgba(79,142,247,.3) !important;
}
#matbot-panel #matbot-img-preview[style*="display:none"],
#matbot-panel #matbot-img-preview[style*="display: none"] { display: none !important; }

/* PDF preview badge */
#matbot-panel #matbot-pdf-preview {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 7px 10px !important;
  background: #141e38 !important; border-top: 1px solid #4f8ef7 !important;
  border-bottom: 1px solid rgba(79,142,247,.3) !important;
}
#matbot-panel #matbot-pdf-preview[style*="display:none"],
#matbot-panel #matbot-pdf-preview[style*="display: none"] { display: none !important; }
#matbot-panel #matbot-pdf-preview-icon {
  flex-shrink: 0 !important; color: #4f8ef7 !important;
  display: flex !important; align-items: center !important;
}
#matbot-panel #matbot-pdf-preview-info {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  flex: 1 !important; min-width: 0 !important;
}
#matbot-panel #matbot-pdf-name {
  font-size: 0.78rem !important; color: #4f8ef7 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#matbot-panel #matbot-pdf-status {
  font-size: 0.72rem !important; color: #9ca3af !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
}
#matbot-panel #matbot-pdf-remove {
  all: unset !important; cursor: pointer !important;
  color: #9ca3af !important; font-size: 16px !important;
  padding: 4px !important; line-height: 1 !important; flex-shrink: 0 !important;
}
#matbot-panel #matbot-pdf-remove:hover { color: #fff !important; }
/* Light mode PDF preview */
#matbot-panel[data-theme="light"] #matbot-pdf-preview {
  background: #eff6ff !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] #matbot-pdf-name { color: #1a56db !important; }
#matbot-panel[data-theme="light"] #matbot-pdf-status { color: #6b7280 !important; }
/* Thumb wrapper z overlay gumbom za obrez */
#matbot-panel #matbot-img-thumb-wrap {
  position: relative !important; flex-shrink: 0 !important;
  width: 60px !important; height: 60px !important;
  border-radius: 8px !important; overflow: hidden !important;
  cursor: pointer !important; border: 2px solid #4f8ef7 !important;
  touch-action: manipulation !important;
}
#matbot-panel #matbot-img-thumb {
  width: 60px !important; height: 60px !important;
  object-fit: cover !important; display: block !important;
  transition: opacity .15s !important;
}
#matbot-panel #matbot-img-thumb-wrap:hover #matbot-img-thumb { opacity: .75 !important; }
#matbot-panel #matbot-img-crop-btn {
  all: unset !important;
  position: absolute !important; inset: 0 !important;
  background: rgba(0,0,0,.45) !important; color: #fff !important;
  font-size: 22px !important; text-align: center !important; line-height: 60px !important;
  cursor: pointer !important; opacity: 0 !important; transition: opacity .15s !important;
}
#matbot-panel #matbot-img-thumb-wrap:hover #matbot-img-crop-btn { opacity: 1 !important; }
#matbot-panel #matbot-img-preview-info {
  display: flex !important; flex-direction: column !important; gap: 3px !important;
  flex: 1 !important; min-width: 0 !important;
}
#matbot-panel #matbot-img-name {
  font-size: 0.78rem !important; color: #4f8ef7 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#matbot-panel #matbot-img-hint {
  font-size: 0.72rem !important; color: #888 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; font-style: italic !important;
}
#matbot-panel #matbot-img-remove {
  all: unset !important; cursor: pointer !important;
  width: 26px !important; height: 26px !important; border-radius: 50% !important;
  background: #cc2200 !important; color: #fff !important;
  font-size: 13px !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; transition: background .12s !important;
}
#matbot-panel #matbot-img-remove:hover { background: #991800 !important; }
#matbot-panel .matbot-user-img {
  max-width: 100% !important; max-height: 200px !important;
  border-radius: 8px !important; display: block !important;
  margin-bottom: 4px !important; object-fit: contain !important;
}
#matbot-panel #matbot-img-btn.active,
#matbot-panel #matbot-cam-btn.active {
  background: #4f8ef7 !important; color: #fff !important; border-color: #4f8ef7 !important;
}


/* ── LaTeX toggle v toolbaru ──────────────────────────── */
#matbot-panel .matbot-rte-latex-toggle {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  cursor: pointer !important; user-select: none !important;
  padding: 2px 4px !important;
}
#matbot-panel .matbot-rte-latex-toggle input { display: none !important; }
#matbot-panel .matbot-rte-toggle-track {
  width: 32px !important; height: 18px !important; border-radius: 9px !important;
  background: #ccc !important; position: relative !important;
  transition: background .2s !important; flex-shrink: 0 !important;
  border: 1.5px solid #bbb !important;
}
#matbot-panel .matbot-rte-latex-toggle input:checked + .matbot-rte-toggle-track {
  background: #4f8ef7 !important; border-color: #4f8ef7 !important;
}
#matbot-panel .matbot-rte-toggle-thumb {
  position: absolute !important; top: 2px !important; left: 2px !important;
  width: 12px !important; height: 12px !important; border-radius: 50% !important;
  background: #131c2e !important; transition: transform .2s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
#matbot-panel .matbot-rte-latex-toggle input:checked + .matbot-rte-toggle-track .matbot-rte-toggle-thumb {
  transform: translateX(14px) !important;
}
#matbot-panel .matbot-rte-toggle-label {
  font-size: 0.9rem !important; font-weight: 500 !important;
  color: #4f8ef7 !important; font-family: 'Segoe UI',Arial,sans-serif !important;
}

/* ── ABC Kviz ─────────────────────────────────────────── */
#matbot-panel .matbot-abc-quiz {
  display: flex !important; flex-direction: column !important; gap: 12px !important;
  margin: 4px 0 !important; width: 100% !important;
}
#matbot-panel .matbot-abc-score {
  display: flex !important; align-items: center !important; gap: 8px !important;
  background: #141e34 !important; border: 2px solid #4f8ef7 !important;
  border-radius: 8px !important; padding: 8px 14px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  font-size: 0.95rem !important; font-weight: 700 !important;
  color: #4f8ef7 !important;
}
#matbot-panel .matbot-abc-score-val { font-size: 1.1rem !important; }
#matbot-panel .matbot-abc-score-pct { font-size: 0.9rem !important; font-weight: 600 !important; }

#matbot-panel .matbot-abc-question {
  background: #131c2e !important; border: 1.5px solid #1a2240 !important;
  border-radius: 10px !important; padding: 12px 14px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
}
#matbot-panel .matbot-abc-qtext {
  font-size: 1rem !important; color: #dbeafe !important;
  margin-bottom: 10px !important; line-height: 1.6 !important;
}
#matbot-panel .matbot-abc-qtext p { margin: 0 !important; }

#matbot-panel .matbot-abc-options,
#matbot-root #matbot-panel .matbot-abc-options {
  display: grid !important;
  grid-template-columns: 1fr !important;   /* ena kolona = vertikalno */
  gap: 8px !important;
  width: 100% !important;
}
#matbot-panel .matbot-abc-option,
#matbot-root #matbot-panel .matbot-abc-option {
  display: flex !important; align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important; border-radius: 10px !important;
  border: 1.5px solid #1a2240 !important; background: #141e34 !important;
  cursor: pointer !important; font-size: 1rem !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; color: #c7d9fb !important;
  transition: border-color .12s, background .12s !important;
  user-select: none !important; width: 100% !important; box-sizing: border-box !important;
  position: relative !important;
}
/* Skrčene nastavitve med kvizom ali po odgovoru */
#matbot-panel #matbot-settings-panel.mb-collapsed {
  padding: 4px 12px !important;
}
#matbot-panel #matbot-settings-panel.mb-collapsed .mb-row,
#matbot-panel #matbot-settings-panel.mb-collapsed #matbot-naloge-opts,
#matbot-panel #matbot-settings-panel.mb-collapsed .mb-mode-group {
  display: none !important;
}

/* Settings bar – vrstica z toggle in collapsed info */
#matbot-panel #mb-settings-bar {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 8px !important;
}
#matbot-panel #mb-collapsed-info {
  display: none; align-items: center !important; gap: 8px !important;
  flex: 1 !important;
}
#matbot-panel #mb-collapsed-mode {
  font-size: 0.8rem !important; color: #4f8ef7 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; font-weight: 500 !important;
}
#matbot-panel #mb-expand-btn {
  all: unset !important; cursor: pointer !important;
  font-size: 0.78rem !important; font-weight: 500 !important;
  color: #fff !important; background: #4f8ef7 !important;
  padding: 3px 10px !important; border-radius: 12px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  transition: background .12s !important; white-space: nowrap !important;
}
#matbot-panel #mb-expand-btn:hover { background: #1a56db !important; }
#matbot-panel .matbot-abc-option:hover {
  border-color: #4f8ef7 !important; background: #141e34 !important;
}
#matbot-panel .matbot-abc-option input[type=radio] {
  /* NE uporabi all:unset – ubije pointer-events in click handling */
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important; height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #4f8ef7 !important;
  background: #0a0f1e !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  vertical-align: middle !important;
  pointer-events: none !important; /* klik gre na label, ne na radio */
}
#matbot-panel .matbot-abc-option input[type=radio]:checked {
  background: #4f8ef7 !important;
  box-shadow: inset 0 0 0 3px #0a0f1e !important;
  border-color: #4f8ef7 !important;
}
/* Presledek: radio ← 10px → a) ← 8px → besedilo */
#matbot-panel .matbot-abc-letter {
  font-weight: 700 !important; color: #4f8ef7 !important;
  margin-left: 10px !important; margin-right: 10px !important;
  flex-shrink: 0 !important; font-size: 1rem !important;
  min-width: 22px !important;
}
#matbot-panel .matbot-abc-txt {
  flex: 1 !important; line-height: 1.55 !important; font-size: 1rem !important;
}
#matbot-panel .matbot-abc-txt p { margin: 0 !important; display: inline !important; }

/* Izbran odgovor */
#matbot-panel .matbot-abc-option.matbot-abc-selected {
  border-color: #4f8ef7 !important; background: #141e34 !important;
}

/* Pravilni – cel gumb zelen */
#matbot-panel .matbot-abc-option.matbot-abc-correct,
#matbot-root #matbot-panel .matbot-abc-option.matbot-abc-correct {
  border-color: #16a34a !important; background: #16a34a !important;
  color: #fff !important;
}
#matbot-panel .matbot-abc-option.matbot-abc-correct .matbot-abc-letter { color: #fff !important; }
#matbot-panel .matbot-abc-option.matbot-abc-correct input[type=radio] {
  border-color: #fff !important; background: #131c2e !important;
  box-shadow: inset 0 0 0 3px #16a34a !important;
}
#matbot-panel .matbot-abc-option.matbot-abc-correct::after {
  content: '✓' !important; margin-left: auto !important; font-weight: 700 !important;
  color: #fff !important; flex-shrink: 0 !important; padding-left: 8px !important;
  font-size: 1.1rem !important;
}

/* Napačni – cel gumb rdeč */
#matbot-panel .matbot-abc-option.matbot-abc-wrong,
#matbot-root #matbot-panel .matbot-abc-option.matbot-abc-wrong {
  border-color: #dc2626 !important; background: #dc2626 !important;
  color: #fff !important;
}
#matbot-panel .matbot-abc-option.matbot-abc-wrong .matbot-abc-letter { color: #fff !important; }
#matbot-panel .matbot-abc-option.matbot-abc-wrong input[type=radio] {
  border-color: #fff !important; background: #131c2e !important;
  box-shadow: inset 0 0 0 3px #dc2626 !important;
}
#matbot-panel .matbot-abc-option.matbot-abc-wrong::after {
  content: '✗' !important; margin-left: auto !important; font-weight: 700 !important;
  color: #fff !important; flex-shrink: 0 !important; padding-left: 8px !important;
  font-size: 1.1rem !important;
}

/* Banner – odgovorjeno na vse */
#matbot-panel .matbot-abc-complete {
  display: none; align-items: center !important; justify-content: space-between !important;
  gap: 10px !important; flex-wrap: wrap !important;
  background: #f0fff4 !important; border: 2px solid #16a34a !important;
  border-radius: 10px !important; padding: 10px 14px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  font-size: 0.9rem !important; font-weight: 500 !important; color: #15803d !important;
}
#matbot-panel .matbot-abc-reveal-btn {
  all: unset !important; cursor: pointer !important;
  background: #16a34a !important; color: #fff !important;
  padding: 7px 16px !important; border-radius: 7px !important;
  font-size: 0.85rem !important; font-weight: 600 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  transition: background .12s !important; white-space: nowrap !important;
}
#matbot-panel .matbot-abc-reveal-btn:hover { background: #15803d !important; }
#matbot-panel .matbot-abc-reveal-btn:disabled { opacity: .6 !important; cursor: not-allowed !important; }

/* Povzetek */
#matbot-panel .matbot-abc-summary {
  background: #141e34 !important; border: 2px solid #4f8ef7 !important;
  border-radius: 10px !important; padding: 12px 16px !important;
  font-size: 1rem !important; font-family: 'Segoe UI',Arial,sans-serif !important;
  color: #4f8ef7 !important; text-align: center !important;
}

/* ── TikZ rendered slika ──────────────────────────────── */
#matbot-panel .matbot-tikz-img-wrap {
  margin-bottom: 8px !important; text-align: center !important;
}
#matbot-panel .matbot-tikz-rendered-img {
  max-width: 100% !important; border-radius: 8px !important;
  border: 1px solid #1a2240 !important; display: block !important;
  margin: 0 auto 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}
#matbot-panel .matbot-tikz-dl-btn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 5px 14px !important; border-radius: 7px !important;
  background: #4f8ef7 !important; color: #fff !important;
  font-size: 0.85rem !important; font-weight: 500 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  text-decoration: none !important; transition: background .12s !important;
}
#matbot-panel .matbot-tikz-dl-btn:hover { background: #1a56db !important; }
#matbot-panel .matbot-tikz-note {
  font-size: 0.85rem !important; color: #666 !important;
  font-style: italic !important; padding: 6px 0 !important;
}

/* ── Welcome popup ────────────────────────────────────── */
#matbot-panel #matbot-welcome-popup {
  position: relative !important;
  margin: 10px 10px 0 !important;
  background: #141e38 !important;
  border: 1.5px solid #4f8ef7 !important;
  border-radius: 12px !important;
  padding: 14px 14px 48px 14px !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  font-size: 0.9rem !important; line-height: 1.6 !important;
  color: #dbeafe !important; flex-shrink: 0 !important;
  animation: matbot-fadein .3s ease !important;
}
@keyframes matbot-fadein {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
#matbot-panel #matbot-welcome-popup.mb-hidden { display: none !important; }
#matbot-panel #matbot-welcome-close {
  all: unset !important;
  position: absolute !important;
  bottom: 10px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: #cc2200 !important; color: #fff !important;
  font-size: 15px !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; transition: background .12s !important;
  line-height: 1 !important; box-shadow: 0 2px 6px rgba(204,34,0,.4) !important;
}
#matbot-panel #matbot-welcome-close:hover { background: #991800 !important; }
#matbot-panel .matbot-welcome-body strong { color: #4f8ef7 !important; }

/* ── Način gumbi – razširitev odstranjena ─────────────── */

/* ── Crop modal ───────────────────────────────────────── */
#matbot-crop-modal {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 9999999 !important;
  background: rgba(0,0,0,.92) !important;
  display: none; flex-direction: column !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  overscroll-behavior: contain !important;
}
#matbot-crop-modal[style*="flex"] { display: flex !important; }
#matbot-crop-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 12px 16px !important; background: #4f8ef7 !important; color: #fff !important;
  font-size: 0.95rem !important; font-weight: 700 !important;
  flex-shrink: 0 !important; min-height: 52px !important;
}
#matbot-crop-reset-h {
  all: unset !important; cursor: pointer !important;
  font-size: 0.82rem !important; padding: 6px 12px !important; border-radius: 8px !important;
  background: rgba(255,255,255,.2) !important; color: #fff !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  min-height: 36px !important; display: flex !important; align-items: center !important;
}
#matbot-crop-cancel {
  all: unset !important; cursor: pointer !important;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important; background: rgba(255,255,255,.2) !important; color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 18px !important; font-weight: 700 !important;
}
#matbot-crop-canvas-wrap {
  flex: 1 !important; overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 16px !important;
  overscroll-behavior: contain !important;
}
#matbot-crop-canvas {
  cursor: crosshair !important;
  max-width: 100% !important;
  border-radius: 6px !important; display: block !important;
  touch-action: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.5) !important;
  -webkit-user-select: none !important; user-select: none !important;
  -webkit-touch-callout: none !important;
}
#matbot-crop-footer {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 12px 16px !important; background: rgba(0,0,0,.7) !important;
  flex-shrink: 0 !important; flex-wrap: wrap !important; gap: 8px !important;
  min-height: 60px !important;
}
#matbot-crop-info {
  font-size: 0.82rem !important; color: rgba(255,255,255,.7) !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
}
#matbot-crop-btns { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
#matbot-crop-full {
  all: unset !important; cursor: pointer !important;
  touch-action: manipulation !important;
  padding: 10px 14px !important; border-radius: 10px !important;
  font-size: 0.88rem !important; font-weight: 500 !important;
  background: rgba(255,255,255,.15) !important; color: #fff !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  border: 1px solid rgba(255,255,255,.3) !important; min-height: 44px !important;
}
#matbot-crop-reset {
  all: unset !important; cursor: pointer !important;
  touch-action: manipulation !important;
  padding: 10px 16px !important; border-radius: 10px !important;
  font-size: 0.88rem !important; font-weight: 500 !important;
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  border: 1px solid rgba(255,255,255,.2) !important; min-height: 44px !important;
}
#matbot-crop-confirm {
  all: unset !important; cursor: pointer !important;
  touch-action: manipulation !important;
  padding: 10px 22px !important; border-radius: 10px !important;
  font-size: 0.92rem !important; font-weight: 700 !important;
  background: #4f8ef7 !important; color: #fff !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  box-shadow: 0 2px 12px rgba(79,142,247,.4) !important; min-height: 44px !important;
}
@media (max-width: 600px) {
  #matbot-crop-footer { flex-direction: column !important; align-items: stretch !important; padding: 10px 12px !important; }
  #matbot-crop-btns { flex-direction: column !important; gap: 8px !important; }
  #matbot-crop-reset, #matbot-crop-full, #matbot-crop-confirm {
    text-align: center !important; min-height: 52px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 12px !important; font-size: 1rem !important;
  }
  #matbot-crop-confirm { order: -1 !important; } /* Potrdi gumb na vrh na mobilnih */
  #matbot-crop-info { text-align: center !important; font-size: 0.85rem !important; }
}

/* ── Header zapri gumb ────────────────────────────────── */
#matbot-panel #matbot-close-btn {
  all: unset !important; cursor: pointer !important;
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.25) !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff !important; transition: background .15s !important;
}
#matbot-panel #matbot-close-btn:hover { background: rgba(255,255,255,.45) !important; }

/* ── Toolbar settings toggle – aktivno stanje ─────────── */
#matbot-panel #matbot-toolbar-settings-toggle.mb-settings-open {
  background: #4f8ef7 !important; color: #fff !important;
  border-color: #4f8ef7 !important;
}

/* ── Donate gumb ──────────────────────────────────────── */
#matbot-panel #matbot-donate {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 5px !important;
  padding: 5px 10px !important; border-radius: 16px !important;
  background: #131c2e !important;
  border: 2px solid #fff !important;
  color: #4f8ef7 !important; text-decoration: none !important;
  transition: background .15s, transform .12s !important; flex-shrink: 0 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.15) !important;
}
#matbot-panel #matbot-donate:hover {
  background: #ffe082 !important; border-color: #ffe082 !important;
  transform: scale(1.05) !important;
}
#matbot-panel .matbot-donate-label {
  font-size: 0.82rem !important; font-weight: 800 !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  white-space: nowrap !important; color: #dbeafe !important;
}

/* ── Donacija v welcome popupu ────────────────────────── */
#matbot-panel .matbot-donate-popup {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 7px 16px !important; border-radius: 20px !important;
  background: #4f8ef7 !important; color: #fff !important;
  font-weight: 600 !important; font-size: 0.9rem !important;
  font-family: 'Segoe UI',Arial,sans-serif !important;
  text-decoration: none !important;
  transition: background .15s, transform .15s !important;
  box-shadow: 0 2px 8px rgba(79,142,247,.4) !important;
}
#matbot-panel .matbot-donate-popup:hover {
  background: #1a56db !important; transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(79,142,247,.4) !important;
}

/* ── PDF gumb ─────────────────────────────────────────── */
#matbot-panel #matbot-pdf-btn {
  all: unset !important; cursor: pointer !important;
  width: 30px !important; height: 30px !important; border-radius: 8px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff !important; transition: background .15s !important; flex-shrink: 0 !important;
  font-size: 14px !important;
}
#matbot-panel #matbot-pdf-btn:hover { background: rgba(255,255,255,.35) !important; }
#matbot-panel #matbot-pdf-btn:disabled { opacity: .5 !important; cursor: wait !important; }

/* ── Mikrofon gumb ────────────────────────────────────── */
#matbot-panel #matbot-mic-btn.matbot-mic-active {
  background: #dc2626 !important; color: #fff !important;
  border-color: #dc2626 !important;
  animation: matbot-pulse 1s infinite !important;
}
@keyframes matbot-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,.0); }
}

/* ── Welcome features ─────────────────────────────────── */
#matbot-panel .matbot-features {
  display: flex !important; flex-direction: column !important; gap: 5px !important;
  margin-bottom: 10px !important; padding: 8px 10px !important;
  background: rgba(79,142,247,.06) !important; border-radius: 8px !important;
  border-left: 3px solid #4f8ef7 !important;
}
#matbot-panel .matbot-features span {
  font-size: 0.85rem !important; color: #dbeafe !important;
  font-family: 'Segoe UI',Arial,sans-serif !important; line-height: 1.5 !important;
}

/* ── TTS gumb ─────────────────────────────────────────── */
#matbot-panel #matbot-tts-btn.matbot-tts-active {
  background: #4f8ef7 !important; color: #fff !important;
  border-color: #4f8ef7 !important;
  animation: matbot-pulse 1.2s infinite !important;
}

/* ── Zastavice za prevajanje ──────────────────────────── */
#matbot-panel .matbot-lang-btn {
  font-size: 1.1rem !important; padding: 2px 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important; color: inherit !important;
  min-width: unset !important;
  transition: transform .12s, border-color .12s !important;
}
#matbot-panel .matbot-lang-btn:hover {
  transform: scale(1.25) !important;
  background: rgba(79,142,247,.08) !important;
  border-color: #1e3a6e !important;
  color: inherit !important;
  box-shadow: none !important;
}
#matbot-panel .matbot-lang-btn:disabled { opacity: .5 !important; transform: none !important; }


/* ══════════════════════════════════════════════════════════
   LIGHT MODE  –  vse prepisovnike pod #matbot-panel[data-theme="light"]
   ══════════════════════════════════════════════════════════ */

/* Osnova panela */
#matbot-panel[data-theme="light"] {
  background: #ffffff !important; color: #131c2e !important;
}

/* Sporočilno območje */
#matbot-panel[data-theme="light"] #matbot-messages {
  background: #f5f8ff !important;
}
#matbot-panel[data-theme="light"] .matbot-msg--bot {
  background: #eff6ff !important; color: #131c2e !important;
  border-color: rgba(26,86,219,.2) !important;
}
#matbot-panel[data-theme="light"] .matbot-msg--bot h2,
#matbot-panel[data-theme="light"] .matbot-msg--bot h3 { color: #1a56db !important; }
#matbot-panel[data-theme="light"] .matbot-msg--bot pre {
  background: #dbeafe !important; color: #1a2240 !important;
}
#matbot-panel[data-theme="light"] .matbot-msg--error {
  background: #fff5f5 !important; color: #b91c1c !important; border-color: #fecaca !important;
}

/* Settings panel */
#matbot-panel[data-theme="light"] #matbot-settings-panel {
  background: #f0f7ff !important; border-color: #dbeafe !important;
}
#matbot-panel[data-theme="light"] #matbot-settings-panel .mb-field > label { color: #1e3a6e !important; }
#matbot-panel[data-theme="light"] #matbot-settings-panel select {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236554e0' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  color: #131c2e !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .mb-mode-btn {
  background: #eff6ff !important; color: #1a56db !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .mb-mode-btn.mb-mode-active {
  background: #1a56db !important; color: #fff !important;
}
#matbot-panel[data-theme="light"] .mb-attach-btn {
  color: #1a56db !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .mb-attach-btn:hover {
  background: rgba(26,86,219,.08) !important;
}
#matbot-panel[data-theme="light"] #mb-collapsed-mode { color: #1a56db !important; }
#matbot-panel[data-theme="light"] #mb-expand-btn { background: #1a56db !important; }
#matbot-panel[data-theme="light"] .mb-settings-toggle { color: #1a56db !important; }

/* Toolbar */
#matbot-panel[data-theme="light"] #matbot-rte-toolbar {
  background: #e8f0ff !important; border-color: #dbeafe !important;
}
#matbot-panel[data-theme="light"] .matbot-rte-btn {
  background: #fff !important; color: #1a56db !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .matbot-rte-btn:hover {
  background: #1a56db !important; color: #fff !important; border-color: #1a56db !important;
}
#matbot-panel[data-theme="light"] .matbot-rte-btn.active {
  background: #1a56db !important; color: #fff !important; border-color: #1a56db !important;
}
#matbot-panel[data-theme="light"] .matbot-math-popup-btn {
  color: #1a56db !important; border-color: #bfdbfe !important; background: #eff6ff !important;
}
#matbot-panel[data-theme="light"] .matbot-math-popup-btn:hover,
#matbot-panel[data-theme="light"] .matbot-math-popup-btn.active {
  background: #1a56db !important; color: #fff !important; border-color: #1a56db !important;
}
#matbot-panel[data-theme="light"] #matbot-math-popup {
  background: rgba(240, 247, 255, 0.85) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border-color: rgba(26,86,219,.25) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
#matbot-panel[data-theme="light"] .matbot-math-popup-tabs {
  border-bottom-color: rgba(26,86,219,.12) !important;
}
#matbot-panel[data-theme="light"] .matbot-math-tab { color: rgba(30,58,110,.5) !important; }
#matbot-panel[data-theme="light"] .matbot-math-tab:hover { color: #1a56db !important; }
#matbot-panel[data-theme="light"] .matbot-math-tab.active {
  background: rgba(26,86,219,.1) !important; color: #1a56db !important; border-color: rgba(26,86,219,.35) !important;
}
#matbot-panel[data-theme="light"] .matbot-mpb {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(26,86,219,.2) !important;
  color: #1e3a6e !important;
  text-shadow: none !important;
}
#matbot-panel[data-theme="light"] .matbot-mpb:hover {
  background: #1a56db !important; color: #fff !important;
  border-color: #1a56db !important;
  box-shadow: 0 3px 10px rgba(26,86,219,.3) !important;
}
#matbot-panel[data-theme="light"] #matbot-tikz-btn {
  background: #fff0ee !important; border-color: #ffb3a3 !important; color: #cc2200 !important;
}
#matbot-panel[data-theme="light"] #matbot-yt-btn {
  color: #cc0000 !important; border-color: #ffb3b3 !important; background: #fff5f5 !important;
}
#matbot-panel[data-theme="light"] #matbot-yt-btn:hover {
  background: #ff0000 !important; color: #fff !important; border-color: #ff0000 !important;
}
#matbot-panel[data-theme="light"] .matbot-rte-sep {
  background: linear-gradient(180deg, transparent, #bfdbfe, transparent) !important;
}
#matbot-panel[data-theme="light"] .matbot-rte-toggle-label { color: #1a56db !important; }
#matbot-panel[data-theme="light"] .matbot-rte-toggle-thumb { background: #fff !important; }
#matbot-panel[data-theme="light"] #matbot-toolbar-settings-toggle.mb-settings-open {
  background: #1a56db !important; color: #fff !important; border-color: #1a56db !important;
}

/* Vnosno območje */
#matbot-panel[data-theme="light"] #matbot-input-area { background: #f5f8ff !important; }
#matbot-panel[data-theme="light"] #matbot-editor,
#matbot-panel[data-theme="light"] textarea#matbot-editor {
  background: #ffffff !important; color: #182244 !important; border-color: #bfdbfe !important;
}

/* Chips */
#matbot-panel[data-theme="light"] .matbot-chip {
  background: #eff6ff !important; color: #1a56db !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .matbot-chip:hover {
  background: #1a56db !important; color: #fff !important;
}

/* Gumbi za rešitve / naloge */
#matbot-panel[data-theme="light"] .matbot-resitve-btn {
  background: #eff6ff !important; color: #1a56db !important; border-color: #1a56db !important;
}
#matbot-panel[data-theme="light"] .matbot-resitve-btn:hover {
  background: #1a56db !important; color: #fff !important;
}
#matbot-panel[data-theme="light"] .matbot-latex-resitve-btn {
  background: #f0fff4 !important; color: #16a34a !important; border-color: #16a34a !important;
}
#matbot-panel[data-theme="light"] .matbot-latex-naloge-btn {
  background: #eff6ff !important; color: #1a56db !important; border-color: #1a56db !important;
}
#matbot-panel[data-theme="light"] .matbot-latex-naloge-btn:hover {
  background: #1a56db !important; color: #fff !important;
}

/* GeoGebra widget */
#matbot-panel[data-theme="light"] .matbot-gg-wrap {
  background: #f0f7ff !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .matbot-gg-link {
  background: #eff6ff !important; color: #1a56db !important; border-color: #bfdbfe !important;
}

/* TikZ / LaTeX kodni bloki */
#matbot-panel[data-theme="light"] .matbot-tikz-code-wrap,
#matbot-panel[data-theme="light"] .matbot-latex-copy-wrap {
  background: #f0f7ff !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .matbot-tikz-code-header,
#matbot-panel[data-theme="light"] .matbot-latex-copy-header {
  background: #e8f0ff !important; color: #1a56db !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .matbot-tikz-code-pre,
#matbot-panel[data-theme="light"] .matbot-latex-copy-pre {
  background: #f0f7ff !important; color: #182244 !important;
}
#matbot-panel[data-theme="light"] .matbot-tikz-copy-btn,
#matbot-panel[data-theme="light"] .matbot-latex-copy-btn {
  background: #fff !important; color: #1a56db !important; border-color: #bfdbfe !important;
}

/* Image upload preview */
#matbot-panel[data-theme="light"] #matbot-img-preview {
  background: #f0f7ff !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] #matbot-img-name { color: #1a56db !important; }

/* ABC Kviz */
#matbot-panel[data-theme="light"] .matbot-abc-score {
  background: #eff6ff !important; border-color: #bfdbfe !important; color: #1a56db !important;
}
#matbot-panel[data-theme="light"] .matbot-abc-question {
  background: #f5f9ff !important; border-color: #dbeafe !important;
}
#matbot-panel[data-theme="light"] .matbot-abc-qtext { color: #131c2e !important; }
#matbot-panel[data-theme="light"] .matbot-abc-option {
  background: #fff !important; border-color: #dbeafe !important; color: #131c2e !important;
}
#matbot-panel[data-theme="light"] .matbot-abc-option:hover {
  border-color: #1a56db !important; background: #eff6ff !important;
}
#matbot-panel[data-theme="light"] .matbot-abc-option input[type=radio] {
  background: #fff !important; border-color: #1a56db !important;
}
#matbot-panel[data-theme="light"] .matbot-abc-option input[type=radio]:checked {
  background: #1a56db !important; box-shadow: inset 0 0 0 3px #fff !important;
}
#matbot-panel[data-theme="light"] .matbot-abc-option.matbot-abc-selected {
  border-color: #1a56db !important; background: #dbeafe !important;
}
#matbot-panel[data-theme="light"] .matbot-abc-letter { color: #1a56db !important; }
#matbot-panel[data-theme="light"] .matbot-abc-summary {
  background: #f0f7ff !important; border-color: #bfdbfe !important; color: #1a56db !important;
}

/* Welcome popup */
#matbot-panel[data-theme="light"] #matbot-welcome-popup {
  background: #f0f7ff !important; border-color: #4f8ef7 !important; color: #131c2e !important;
}
#matbot-panel[data-theme="light"] .matbot-features span { color: #182244 !important; }
#matbot-panel[data-theme="light"] .matbot-welcome-body strong { color: #1a56db !important; }

/* Donate gumb */
#matbot-panel[data-theme="light"] #matbot-donate {
  background: #eff6ff !important; border-color: #bfdbfe !important;
}
#matbot-panel[data-theme="light"] .matbot-donate-label { color: #131c2e !important; }

/* Theme toggle gumb – prilagojen za svetlo ozadje */
#matbot-panel[data-theme="light"] #matbot-theme-toggle {
  background: rgba(26,86,219,.12) !important;
  border-color: rgba(26,86,219,.3) !important;
}

/* Theme toggle gumb */
#matbot-panel #matbot-theme-toggle {
  all: unset !important; cursor: pointer !important;
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; transition: background .15s !important;
}
#matbot-panel #matbot-theme-toggle:hover { background: rgba(255,255,255,.3) !important; }

/* ── Input vrstica: textarea + send gumb v isti vrstici ─ */
#matbot-panel #matbot-input-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
#matbot-panel #matbot-input-area > #matbot-img-preview {
  /* Preview ostane nad vrstico */
  position: absolute !important; bottom: 100% !important;
  left: 10px !important; right: 10px !important;
}

/* ════════════════════════════════════════════════════════
   NOVI DVOSTOLPIČNI LAYOUT – matbot-v28
   ════════════════════════════════════════════════════════ */

/* Panel postane flex row */
#matbot-panel {
  flex-direction: row !important;
  height: 600px !important;
}

/* ── Skupni layout wrapper ── */
#mb-layout {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* ── LEVI PANEL ── */
#mb-left {
  width: 200px !important;
  min-width: 200px !important;
  flex-shrink: 0 !important;
  border-right: 1px solid var(--mb-border) !important;
  background: #0d1424 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.mb-left-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 10px 8px !important;
  border-bottom: 1px solid var(--mb-border) !important;
  flex-shrink: 0 !important;
}
.mb-left-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #c0b8ff !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.mb-pi-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #0a0f1e !important;
  border: 2px solid #4f8ef7 !important;
  box-shadow: 0 2px 10px rgba(79,142,247,.5), 0 0 0 3px rgba(79,142,247,.1) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'Times New Roman', Georgia, serif !important;
  color: #85b4fb !important;
  text-shadow: 0 0 10px rgba(133,180,251,.9), 0 0 20px rgba(79,142,247,.5) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}
.mb-left-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid var(--mb-border) !important;
  flex-shrink: 0 !important;
}
.mb-icon-btn {
  all: unset !important;
  cursor: pointer !important;
  color: rgba(255,255,255,.6) !important;
  padding: 5px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color .15s, background .15s !important;
  font-size: 14px !important;
}
.mb-icon-btn:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }

/* Nastavitve v levem panelu */
.mb-left-settings {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}
.mb-left-settings::-webkit-scrollbar { width: 3px !important; }
.mb-left-settings::-webkit-scrollbar-thumb { background: var(--mb-border) !important; border-radius: 3px !important; }

.mb-left-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255,255,255,.4) !important;
  margin-bottom: 3px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
}
.mb-left-field select,
.mb-left-field input[type="number"] {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #1a1a2e !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: 8px !important;
  color: #c0b8ff !important;
  font-size: 12px !important;
  padding: 5px 8px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.mb-left-field { position: relative !important; }

.mb-left-sep {
  border-top: 1px solid var(--mb-border) !important;
  margin: 2px 0 !important;
}

/* Mode gumbi v levem panelu */
#mb-left .mb-mode-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#mb-left .mb-mode-btn {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  border: 1px solid var(--mb-border) !important;
  background: transparent !important;
  color: rgba(255,255,255,.65) !important;
  font-size: 12px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  cursor: pointer !important;
  transition: all .15s !important;
  flex-direction: row !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#mb-left .mb-mode-btn:hover {
  background: rgba(124,106,247,.15) !important;
  color: #c0b8ff !important;
}
#mb-left .mb-mode-btn.mb-mode-active {
  background: linear-gradient(135deg, #7c6af7, #6554e0) !important;
  color: #fff !important;
  border-color: transparent !important;
}
#mb-left .mb-mode-icon { font-size: 14px !important; }
#mb-left .mb-mode-label { font-size: 12px !important; }

/* Zahtevnost + nalog v dveh kolonah */
.mb-left-row2 {
  display: flex !important;
  gap: 6px !important;
}
.mb-left-row2 .mb-left-field { flex: 1 !important; }

/* Spodnji toolbar levega panela */
.mb-left-bottom {
  flex-shrink: 0 !important;
  border-top: 1px solid var(--mb-border) !important;
  padding: 6px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.mb-left-bottom .matbot-rte-btn {
  font-size: 11px !important;
  padding: 3px 6px !important;
}
.mb-left-bottom .matbot-rte-toggle-label { font-size: 10px !important; }

/* ── DESNI PANEL ── */
#mb-right {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: #131c2e !important;
}

/* Vnos ZGORAJ */
#mb-input-top {
  flex-shrink: 0 !important;
  border-bottom: 1px solid var(--mb-border) !important;
  background: #0d1424 !important;
  padding: 8px 10px 0 !important;
}

#mb-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-bottom: 6px !important;
}

#mb-input-row #matbot-editor {
  flex: 1 !important;
  background: #1a1a2e !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: 10px !important;
  color: #e8e4ff !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  resize: none !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  line-height: 1.4 !important;
  max-height: 100px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#mb-input-row #matbot-send {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, #7c6af7, #6554e0) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: opacity .15s !important;
}
#mb-input-row #matbot-send:hover { opacity: .88 !important; }
#mb-input-row #matbot-send:disabled { opacity: .45 !important; cursor: default !important; }

#mb-input-row #matbot-mic-btn {
  color: rgba(255,255,255,.6) !important;
  background: #1a1a2e !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}
#mb-input-row #matbot-mic-btn:hover { color: #fff !important; }

/* + dropdown */
.mb-attach-plus-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}
.mb-attach-plus-btn {
  all: unset !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1a1a2e !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.7) !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.mb-attach-plus-btn:hover { background: rgba(124,106,247,.2) !important; color: #fff !important; }

.mb-attach-plus-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  background: #1a1a2e !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: 12px !important;
  padding: 5px !important;
  min-width: 180px !important;
  z-index: 99999 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
  display: none !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.mb-attach-plus-menu.mb-open {
  display: flex !important;
}
.mb-attach-plus-item {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #c0b8ff !important;
  cursor: pointer !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  transition: background .12s !important;
}
.mb-attach-plus-item:hover { background: rgba(124,106,247,.18) !important; }

/* Toolbar v desnem panelu */
#mb-right #matbot-rte-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
  padding: 4px 6px 6px !important;
  background: #0d1424 !important;
  border: none !important;
}

/* Sporočila SPODAJ */
#mb-right #matbot-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px 14px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Preview slike/PDF v novem layoutu */
#mb-input-top #matbot-img-preview,
#mb-input-top #matbot-pdf-preview {
  margin-bottom: 6px !important;
}

/* Skrij stare elemente ki jih ne rabimo več */
#matbot-header,
#matbot-settings-panel,
#matbot-input-area,
.mb-attach-row {
  display: none !important;
}

/* Welcome popup v novem layoutu */
#mb-right #matbot-welcome-popup {
  position: absolute !important;
  top: 50px !important;
  left: 210px !important;
  right: 10px !important;
  z-index: 100 !important;
}

/* Light mode prilagoditve */
body.matbot-light-mode #mb-left {
  background: #f0eeff !important;
  border-right-color: #d0c8ff !important;
}
body.matbot-light-mode .mb-left-title { color: #5544cc !important; }
body.matbot-light-mode .mb-left-label { color: rgba(0,0,0,.45) !important; }
body.matbot-light-mode .mb-icon-btn { color: rgba(0,0,0,.55) !important; }
body.matbot-light-mode .mb-icon-btn:hover { color: #333 !important; background: rgba(0,0,0,.06) !important; }
body.matbot-light-mode .mb-left-field select,
body.matbot-light-mode .mb-left-field input { background: #fff !important; color: #4433aa !important; border-color: #c0b8ff !important; }
body.matbot-light-mode #mb-left .mb-mode-btn { color: rgba(0,0,0,.6) !important; border-color: #c0b8ff !important; }
body.matbot-light-mode #mb-left .mb-mode-btn:hover { background: rgba(101,84,224,.1) !important; }
body.matbot-light-mode #mb-right { background: #faf9ff !important; }
body.matbot-light-mode #mb-input-top { background: #f0eeff !important; }
body.matbot-light-mode #mb-input-row #matbot-editor { background: #fff !important; color: #1a1a2e !important; border-color: #c0b8ff !important; }
body.matbot-light-mode .mb-attach-plus-btn { background: #fff !important; border-color: #c0b8ff !important; }
body.matbot-light-mode .mb-attach-plus-menu { background: #fff !important; border-color: #c0b8ff !important; }
body.matbot-light-mode .mb-attach-plus-item { color: #4433aa !important; }
body.matbot-light-mode #mb-right #matbot-rte-toolbar { background: #f0eeff !important; }
body.matbot-light-mode .mb-left-bottom { background: #f0eeff !important; }

/* Fullscreen prilagoditev */
#matbot-panel.matbot-fullscreen #mb-layout { height: 100vh !important; }

/* Mobile – pod 600px nazaj na en stolpec */
@media (max-width: 600px) {
  #mb-left { width: 100% !important; min-width: 0 !important; }
  #mb-left .mb-mode-label { font-size: 11px !important; }
}
@media (max-width: 480px) {
  #mb-layout { flex-direction: column !important; }
  #mb-left {
    width: 100% !important; min-width: 0 !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--mb-border) !important;
  }
  /* Nastavitve v dveh kolonah na mobilnem */
  #mb-left .mb-left-settings {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    max-height: none !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  /* Program in Letnik vsak 50% */
  #mb-left .mb-left-settings > .mb-left-field {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 120px !important;
  }
  /* Selecti normalne velikosti */
  #mb-left select,
  #mb-left input[type="number"] {
    font-size: 14px !important;
    padding: 8px 28px 8px 10px !important;
    height: 40px !important;
  }
  /* Zahtevnost + Nalog v isti vrstici */
  #matbot-naloge-opts .mb-left-row2 {
    flex-direction: row !important;
    gap: 8px !important;
  }
  #matbot-naloge-opts .mb-left-row2 .mb-left-field {
    flex: 1 !important;
  }
  #matbot-naloge-opts .mb-left-row2 select,
  #matbot-naloge-opts .mb-left-row2 input {
    font-size: 14px !important;
    padding: 8px 10px !important;
    height: 40px !important;
  }
  /* Načini v eno vrstico */
  #mb-left .mb-mode-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #mb-left .mb-mode-btn {
    flex: 1 1 auto !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }
  /* Levi panel separator */
  #mb-left .mb-left-sep { margin: 2px 0 !important; }
  /* Desni panel polna višina */
  #mb-right { min-height: 300px !important; }
}


/* ════ POPRAVKI v28 ════════════════════════════════════════ */

/* 1. Vijolična obroba za VSE selecte in inpute */
#mb-left select,
#mb-left input[type="number"],
#mb-left .mb-left-field select,
#mb-left .mb-left-field input {
  border: 1.5px solid #7c6af7 !important;
  border-radius: 8px !important;
}
#mb-left select:focus,
#mb-left input[type="number"]:focus {
  outline: none !important;
  border-color: #a89cff !important;
  box-shadow: 0 0 0 2px rgba(124,106,247,.25) !important;
}

/* 2. PROGRAM / LETNIK oznaki – svetlejše */
.mb-left-label {
  color: rgba(255,255,255,.65) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* 3. Enotni stil za vse selecte (Program, Letnik, Zahtevnost, Nalog) */
#mb-left select {
  background: #1a1a2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237c6af7' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 7px center !important;
  padding-right: 24px !important;
  color: #c0b8ff !important;
  font-size: 12px !important;
}
#mb-left input[type="number"] {
  background: #1a1a2e !important;
  color: #c0b8ff !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* 4. Ikona za LaTeX → $ namesto vsote */
/* JS nastavi innerText, popravimo v PHP – tule pa overridamo display */
.mb-left-bottom .matbot-rte-btn[data-cmd="math-inline"] {
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: 'Times New Roman', Georgia, serif !important;
}

/* 5. Dropdown + vijolična obroba */
.mb-attach-plus-menu {
  border: 1.5px solid #7c6af7 !important;
}
.mb-attach-plus-btn {
  border: 1.5px solid #7c6af7 !important;
}

/* 6. Vnos polje vijolična obroba */
#mb-input-row #matbot-editor {
  border: 1.5px solid #7c6af7 !important;
}
#mb-input-row #matbot-editor:focus {
  outline: none !important;
  border-color: #a89cff !important;
  box-shadow: 0 0 0 2px rgba(124,106,247,.2) !important;
}
#mb-input-row #matbot-mic-btn {
  border: 1.5px solid #7c6af7 !important;
}

/* Light mode popravki za vijolične obrobe */
body.matbot-light-mode #mb-left select,
body.matbot-light-mode #mb-left input[type="number"] {
  border-color: #7c6af7 !important;
  background-color: #fff !important;
  color: #4433aa !important;
}
body.matbot-light-mode #mb-left select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237c6af7' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
}
body.matbot-light-mode .mb-left-label { color: rgba(0,0,0,.6) !important; }


/* ════ POPRAVKI v28b ════════════════════════════════════════ */

/* Zahtevnost select – enak stil kot Letnik */
#mb-level {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #1a1a2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237c6af7' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 7px center !important;
  border: 1.5px solid #7c6af7 !important;
  border-radius: 8px !important;
  color: #c0b8ff !important;
  font-size: 12px !important;
  padding: 5px 24px 5px 8px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Število nalog input – enak stil */
#mb-num-tasks {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #1a1a2e !important;
  border: 1.5px solid #7c6af7 !important;
  border-radius: 8px !important;
  color: #c0b8ff !important;
  font-size: 12px !important;
  padding: 5px 8px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  text-align: center !important;
}

/* Levi panel spodaj – večja višina, wrapping */
.mb-left-bottom {
  flex-wrap: wrap !important;
  gap: 3px !important;
  padding: 5px 7px !important;
}

/* Light mode za zahtevnost/nalog */
body.matbot-light-mode #mb-level,
body.matbot-light-mode #mb-num-tasks {
  background-color: #fff !important;
  color: #4433aa !important;
  border-color: #7c6af7 !important;
}
body.matbot-light-mode #mb-level {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237c6af7' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
}


/* Popup za donacije – skrit na mobilnih napravah */
@media (max-width: 600px) {
  #matbot-welcome-popup {
    display: none !important;
  }
}

/* Popup – drag cursor namig */
#matbot-welcome-popup {
  cursor: grab !important;
  user-select: none !important;
}
#matbot-welcome-popup:active {
  cursor: grabbing !important;
}
#matbot-welcome-close {
  cursor: pointer !important;
}

/* ════ MOBILNE OPTIMIZACIJE ════════════════════════════════ */

/* 1. Trije načini v eno vrstico */
@media (max-width: 480px) {
  #mb-left .mb-mode-group {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  #mb-left .mb-mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    font-size: 10px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #mb-left .mb-mode-icon { font-size: 13px !important; }
  #mb-left .mb-mode-label { font-size: 10px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* 2. Zahtevnost – daljši za ~100px */
  #matbot-naloge-opts .mb-left-row2 {
    flex-direction: column !important;
    gap: 6px !important;
  }
  #matbot-naloge-opts .mb-left-row2 .mb-left-field {
    width: 100% !important;
    flex: none !important;
  }
  #mb-level, #mb-num-tasks {
    width: 100% !important;
  }
}

/* 3. Mobilni toggle gumb */
#mb-mobile-toggle {
  display: none !important; /* skrit na desktopih */
}
@media (max-width: 480px) {
  #mb-mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    z-index: 100 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(124,106,247,.25) !important;
    border: 1px solid rgba(124,106,247,.5) !important;
    color: #c0b8ff !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  #mb-mobile-toggle:hover {
    background: rgba(124,106,247,.4) !important;
  }

  /* mb-right je relative za pozicioniranje toggle gumba */
  #mb-right { position: relative !important; }

  /* Stanje: levi panel skrit */
  #mb-layout.mb-left-collapsed #mb-left {
    display: none !important;
  }
  #mb-layout.mb-left-collapsed #mb-right {
    width: 100% !important;
    flex: 1 !important;
  }
}