.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 20px; line-height: 1; }

/* ── Accent color CSS variables — premium AI SaaS blue ── */
:root { --ac: #1D4ED8; --ac-h: #2563EB; }
.dark { --ac: #1D4ED8; --ac-h: #2563EB; }

/* ────────────────────────────────────────────────────────────────────
   Light-mode chat shell: clean, premium, "modern SaaS" feel.
   Soft warm-light grid background + cyan/blue glow at top, mirroring the
   dark-mode treatment. Same brand-blue accents on top. */
/* theme.css sets `html { color: #F8FAFC }` globally for the dark-first design.
   In the chat dashboard's light mode that cascades down and makes every
   un-styled child white-on-white. Override at the root + sidebar level
   here so everything inherits readable dark slate by default. */
html:not(.dark) { color: #0F172A; }
html:not(.dark) body { color: #0F172A !important; }
html:not(.dark) #sidebar { color: #475569; }
/* Icons inside the sidebar that inherit `currentColor` (Material Symbols
   chevrons, the collapse button, the search-icon variants) get a dimmer
   slate so they sit comfortably against white. */
html:not(.dark) #sidebar .material-symbols-outlined { color: inherit; }

html:not(.dark) body {
  background-color: #FAFBFD !important;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(56, 189, 248, 0.08), transparent 60%),
    radial-gradient(ellipse 800px 500px at 92% 105%, rgba(29, 78, 216, 0.05), transparent 60%),
    linear-gradient(rgba(15, 23, 42, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
  background-attachment: fixed;
}
html:not(.dark) #sidebar {
  background-color: #FFFFFF !important;
  border-right-color: rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px);
  border-color: rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #main-chat-pane { background: transparent !important; }

/* "Novi razgovor" CTA — premium blue gradient (looks great on light too). */
html:not(.dark) #sidebar button:has(#btn-new-chat) {
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
  background-color: #1D4ED8 !important;
  border-color: rgba(29, 78, 216, 0.30) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 18px rgba(29, 78, 216, 0.25);
  transition: transform 150ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 250ms cubic-bezier(0.25, 1, 0.5, 1);
}
html:not(.dark) #sidebar button:has(#btn-new-chat):hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 10px 26px rgba(29, 78, 216, 0.35);
}
html:not(.dark) #sidebar button:has(#btn-new-chat) span { color: #FFFFFF !important; }
/* Direct ID override on the new-chat label — wins over the phantom rule
   that was painting white-on-white. */
html:not(.dark) #sidebar #btn-new-chat,
.dark #sidebar #btn-new-chat {
  background: transparent !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
}

/* Sidebar brand text ("StudyBuddy") + user fullname at the bottom — both
   had Tailwind `text-white` / `text-white/80` from the dark-first design.
   Make them dark in light mode. Scoped tightly so we don't break the
   new-chat button text or any future white-on-blue chips. */
html:not(.dark) #sidebar > div:first-child .text-white,
html:not(.dark) #avatar-fullname {
  color: #0F172A !important;
}
html:not(.dark) #avatar-fullname { opacity: 1 !important; }

/* Plan badges (ADMIN / PRO / VIP) — readable on both themes. */
html:not(.dark) #pro-badge.text-purple-400 { color: #7C3AED !important; }
html:not(.dark) #pro-badge.text-yellow-300 { color: #B45309 !important; }
html:not(.dark) #pro-badge.text-red-400 { color: #DC2626 !important; }
.dark #pro-badge.text-purple-400 { color: #C084FC !important; }
.dark #pro-badge.text-yellow-300 { color: #FCD34D !important; }
.dark #pro-badge.text-red-400 { color: #F87171 !important; }

/* Active conv pill in light mode — soft blue tint with hairline border. */
html:not(.dark) #sidebar .conv-item .sb-bg-ter {
  background: rgba(29, 78, 216, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.18) !important;
  color: #0F172A !important;
}
html:not(.dark) #sidebar .conv-item > div:first-child:not(.sb-bg-ter):hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0F172A;
}

/* Subjects list — blue accent for the active item (Predmeti picker + "All
   conversations" pill), readable dark text for inactive items in light mode.
   The default .sb-bg-ter token resolves to a dark-navy fill that is invisible
   against a light surface and feels wrong even in dark mode for this picker. */
#subjects-list .sb-bg-ter {
  background: rgba(29, 78, 216, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.28) !important;
  color: #1D4ED8 !important;
}
#subjects-list .sb-bg-ter * { color: inherit !important; }
.dark #subjects-list .sb-bg-ter {
  background: rgba(56, 189, 248, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.30) !important;
  color: #7DD3FC !important;
}

/* Inactive subject rows are invisible in light mode (text-white/80 from JS).
   Override to slate grey, hover deepens to near-black. */
html:not(.dark) #subjects-list button {
  color: #475569;
}
html:not(.dark) #subjects-list button:hover,
html:not(.dark) #subjects-list .group:hover button {
  color: #0F172A;
}
html:not(.dark) #subjects-list .sb-c-mut { color: #64748B !important; }
html:not(.dark) #subjects-list .sb-hover-ter:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}

/* Section headers (PREDMETI / ISTORIJA) — clean and dim. */
html:not(.dark) #sidebar [data-i18n="subjectsSection"],
html:not(.dark) #sidebar [data-i18n="history"] {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #64748B !important;
  font-weight: 700;
}
/* Date group labels (DANAS / OVA NEDELJA / RANIJE). */
html:not(.dark) #history-list > p {
  color: #94A3B8 !important;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 9px;
  padding-top: 14px !important;
  padding-bottom: 6px !important;
  border-top-color: rgba(15, 23, 42, 0.04) !important;
}

/* Search input — soft surface, blue focus glow. */
html:not(.dark) #history-search {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: #0F172A !important;
}
html:not(.dark) #history-search:focus {
  border-color: rgba(29, 78, 216, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.10) !important;
  background: rgba(29, 78, 216, 0.04) !important;
}

/* Footer buttons (Studijske grupe / Beleške / Fajlovi) — soft elevated surface. */
html:not(.dark) #sidebar .sb-bg-ter[class*="px-3 py-2"]:not(:has(#btn-new-chat)) {
  background: rgba(15, 23, 42, 0.025) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  transition: background 150ms cubic-bezier(0.25, 1, 0.5, 1), border-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
}
html:not(.dark) #sidebar .sb-bg-ter[class*="px-3 py-2"]:not(:has(#btn-new-chat)):hover {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
html:not(.dark) #sidebar #profile-row {
  border-top-color: rgba(15, 23, 42, 0.06) !important;
}

/* Composer + model picker in light mode — no divider lines, soft focus glow. */
html:not(.dark) #main-input-bar, html:not(.dark) #group-input-bar {
  background: transparent !important;
  border-top: none !important;
}
html:not(.dark) #main-input-bar > div > div:first-of-type,
html:not(.dark) #group-input-bar > div > div:first-of-type {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  transition: border-color 150ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 150ms cubic-bezier(0.25, 1, 0.5, 1);
}
html:not(.dark) #main-input-bar > div > div:first-of-type:focus-within,
html:not(.dark) #group-input-bar > div > div:first-of-type:focus-within {
  border-color: rgba(29, 78, 216, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #model-picker-bar { background: transparent !important; border-top: none !important; }

/* AI bubble in light mode — soft elevated card. */
html:not(.dark) .chat-bubble-row:not(.flex-row-reverse) .msg-bubble {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* Code blocks in light mode — soft slate surface. */
html:not(.dark) .msg-bubble pre {
  background: #F8FAFC !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px !important;
  padding: 0.875rem 1rem !important;
}
html:not(.dark) .msg-bubble code {
  background: rgba(29, 78, 216, 0.08) !important;
  color: #1D4ED8;
  border-radius: 4px;
}
html:not(.dark) .msg-bubble pre code { background: none !important; color: inherit; }
/* ────────────────────────────────────────────────────────────────────

   Dark-mode chat shell continues below. */
.dark body {
  background-color: #020817;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(56, 189, 248, 0.05), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-attachment: fixed;
}
.dark #sidebar { background-color: #071226 !important; border-right-color: rgba(255,255,255,0.06) !important; }

/* Sidebar polish (dark mode): typography, hover states, active conv pill. */
.dark #sidebar .sb-c-sec { color: #94A3B8 !important; }
.dark #sidebar .sb-c-mut { color: #64748B !important; }

/* Section headers — tighter, more spaced, slightly dimmer. */
.dark #sidebar [data-i18n="subjectsSection"],
.dark #sidebar [data-i18n="history"] {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #64748B !important;
  font-weight: 700;
}

/* Date labels (DANAS / OVA NEDELJA / RANIJE) — sit comfortably above their lists. */
.dark #history-list > p {
  color: #475569 !important;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 9px;
  padding-top: 14px !important;
  padding-bottom: 6px !important;
  border-top-color: rgba(255, 255, 255, 0.04) !important;
}

/* Conv items: subtle hover surface, smooth transitions. */
.dark #sidebar .conv-item > div:first-child:not(.sb-bg-ter):hover {
  background: rgba(255, 255, 255, 0.04);
  color: #F8FAFC;
}

/* Active conv pill — replaces the banned inset stripe with a tinted blue
   background + soft 1px border, Linear-style. */
.dark #sidebar .conv-item .sb-bg-ter {
  background: rgba(29, 78, 216, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.20) !important;
  color: #F8FAFC !important;
}

/* Sidebar search input — refined focus state. */
.dark #history-search {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.dark #history-search:focus {
  border-color: rgba(29, 78, 216, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18) !important;
  background: rgba(29, 78, 216, 0.05) !important;
}

/* "Novi razgovor" CTA — premium gradient button, the visual anchor of the sidebar.
   :has(#btn-new-chat) targets the parent button of the inner span, giving us
   an ID-level specificity boost that wins over the footer-button rule. */
.dark #sidebar button:has(#btn-new-chat) {
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
  background-color: #1D4ED8 !important;
  border-color: rgba(56, 189, 248, 0.20) !important;
  color: #F8FAFC !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 18px rgba(29, 78, 216, 0.30);
  transition: transform 150ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 250ms cubic-bezier(0.25, 1, 0.5, 1);
}
.dark #sidebar button:has(#btn-new-chat):hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 10px 26px rgba(29, 78, 216, 0.42);
}
.dark #sidebar button:has(#btn-new-chat) span { color: #F8FAFC !important; }

/* Footer buttons (Studijske grupe / Beleške / Fajlovi) — subtle elevated surface.
   Explicitly excludes the new-chat button via :not(:has(...)). */
.dark #sidebar .sb-bg-ter[class*="px-3 py-2"]:not(:has(#btn-new-chat)) {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  transition: background 150ms cubic-bezier(0.25, 1, 0.5, 1), border-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
}
.dark #sidebar .sb-bg-ter[class*="px-3 py-2"]:not(:has(#btn-new-chat)):hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Profile row at the very bottom — clean hairline divider. */
.dark #sidebar #profile-row {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
.dark header { background-color: rgba(2, 8, 23, 0.70) !important; backdrop-filter: blur(12px); border-color: rgba(255,255,255,0.06) !important; }
.dark #main-chat-pane { background: transparent; }

/* Premium composer: dark surface, smooth blue focus glow, larger radius.
   No top divider — chat blends smoothly into the composer area. */
.dark #main-input-bar, .dark #group-input-bar { background: transparent !important; border-top: none !important; }
.dark #main-input-bar > div > div:first-of-type,
.dark #group-input-bar > div > div:first-of-type {
  background: #0F172A !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  transition: border-color 150ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 150ms cubic-bezier(0.25, 1, 0.5, 1);
}
.dark #main-input-bar > div > div:first-of-type:focus-within,
.dark #group-input-bar > div > div:first-of-type:focus-within {
  border-color: rgba(29, 78, 216, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.16), 0 8px 24px rgba(0,0,0,0.40) !important;
}
.dark #model-picker-bar { background-color: transparent !important; border-top: none !important; }

/* AI bubble: subtle elevated surface with soft border. */
.dark .chat-bubble-row:not(.flex-row-reverse) .msg-bubble {
  background-color: #0F172A !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
}
/* Code blocks inside AI bubbles: deeper surface + cleaner border. */
.dark .msg-bubble pre { background: rgba(2, 8, 23, 0.70) !important; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px !important; padding: 0.875rem 1rem !important; }
.dark .msg-bubble code { background: rgba(56, 189, 248, 0.10) !important; color: #BAE6FD; border-radius: 4px; }
.dark .msg-bubble pre code { background: none !important; color: inherit; }

body { font-family: 'Inter', sans-serif; }
#chat-messages { scroll-behavior: smooth; }
.msg-bubble { line-height: 1.65; }
.msg-bubble p { margin-bottom: 0.5rem; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.msg-bubble code { background: rgba(0,0,0,0.06); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.875em; }
.msg-bubble pre { background: rgba(0,0,0,0.06); padding: 0.75rem; border-radius: 8px; overflow-x: auto; margin-bottom: 0.5rem; }
.msg-bubble pre code { background: none; padding: 0; }
.dark .msg-bubble code { background: rgba(255,255,255,0.1); }
.dark .msg-bubble pre { background: rgba(255,255,255,0.08); }

/* ── Accent-colored elements ── */
.user-bubble { background-color: var(--ac) !important; }
.accent-btn { background-color: var(--ac) !important; }
.accent-btn:hover { background-color: var(--ac-h) !important; }
#sidebar { background-color: #F8FAFC; border-right: 1px solid #E2E8F0; transition: transform 0.2s ease; }
/* Old sidebar bg rule retired — new premium navy is set in the dark-mode
   block above (#071226 with hairline white/[0.06] border-right). */
#conversation-title[title]:hover { color: var(--ac); }

@media (max-width: 640px) {
  #sidebar.hidden-mobile { transform: translateX(-100%); }
}
.conv-item .del-btn { opacity: 0; transition: opacity 0.15s; }
.conv-item:hover .del-btn { opacity: 1; }
.chat-bubble-row .copy-btn { opacity: 0; transition: opacity 0.15s; }
.chat-bubble-row:hover .copy-btn { opacity: 1; }

/* ── Typing dots ── */
.typing-indicator { display: flex; flex-direction: column; gap: 4px; }
.thinking-label { font-size: 10px; color: #94a3b8; font-style: italic; }
.dark .thinking-label { color: #6B7A90; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing-dots span { width: 7px; height: 7px; background: currentColor; border-radius: 50%; animation: tdot 1.2s ease-in-out infinite; opacity: 0.4; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tdot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-6px); opacity: 1; } }

/* ── Bubble animations ── */
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-bubble-row { animation: bubbleIn 0.2s ease forwards; }

#conversation-title { transition: color 0.15s; }
.chat-bubble-row .bubble-actions { opacity: 0; transition: opacity 0.15s; }
.chat-bubble-row:hover .bubble-actions { opacity: 1; }

/* ── Message timestamp ── */
.msg-timestamp { font-size: 9px; color: #94a3b8; opacity: 0; transition: opacity 0.15s; margin-top: 2px; }
.chat-bubble-row:hover .msg-timestamp { opacity: 1; }
.dark .msg-timestamp { color: #6B7A90; }

/* ── Follow-up chips ── */
.followup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.followup-chip { font-size: 11px; padding: 6px 10px; border-radius: 99px; border: 1px solid #cbd5e1; color: #475569; background: white; cursor: pointer; transition: all 0.15s; white-space: normal; max-width: 100%; text-align: left; display: inline-flex; align-items: center; min-height: 28px; }
.dark .followup-chip { border-color: rgba(255,255,255,0.06); color: #A8B3C7; background: #131E36; }
.followup-chip:hover { border-color: var(--ac); color: var(--ac); background: #eff6ff; }
.dark .followup-chip:hover { border-color: #4DA3FF; color: #4DA3FF; background: #1e3a5f; }
@media (hover: none) and (pointer: coarse) {
  .followup-chip { min-height: 44px; padding: 10px 14px; font-size: 13px; gap: 8px; }
  .followup-chips { gap: 8px; }
}

/* ── Flashcard ── */
.flashcard { cursor: pointer; user-select: none; }
.flashcard-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.flashcard-progress { height: 3px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.dark .flashcard-progress { background: #2A3A52; }
.flashcard-progress-bar { height: 100%; background: var(--ac); border-radius: 99px; transition: width 0.2s ease; }

/* ── Profile avatar ── */
.profile-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background-color: var(--ac); color: white; flex-shrink: 0; }

/* ── Code copy button ── */
.code-copy-btn { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.85); border: none; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.code-copy-btn:hover { background: rgba(0,0,0,0.35); }
.dark .code-copy-btn { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.dark .code-copy-btn:hover { background: rgba(255,255,255,0.25); }

/* ── Continue banner ── */
.continue-banner { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #94a3b8; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px 12px; align-self: center; max-width: 420px; }
.dark .continue-banner { background: rgba(34,48,72,0.4); border-color: rgba(255,255,255,0.06); color: #6B7A90; }

/* ── Note cards ── */
.note-card { cursor: pointer; transition: all 0.15s; }
.note-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.note-card .note-delete { opacity: 0; transition: opacity 0.15s; }
.note-card:hover .note-delete { opacity: 1; }
.dark .note-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* ── Quiz option buttons ── */
.quiz-option { width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #e2e8f0; font-size: 13px; background: white; cursor: pointer; transition: all 0.15s; color: #334155; }
.dark .quiz-option { background: #131E36; border-color: rgba(255,255,255,0.06); color: #FFFFFF; }
.quiz-option:hover:not(:disabled) { border-color: var(--ac); color: var(--ac); }
.quiz-option.correct { border-color: #16a34a !important; background: #f0fdf4 !important; color: #166534 !important; }
.dark .quiz-option.correct { background: #14532d !important; color: #86efac !important; border-color: #16a34a !important; }
.quiz-option.wrong { border-color: #dc2626 !important; background: #fef2f2 !important; color: #991b1b !important; }
.dark .quiz-option.wrong { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #dc2626 !important; }
.tool-bubble-icon { color: var(--ac); }
.dark .tool-bubble-icon { color: #60a5fa; }
.conv-item .sb-bg-ter { box-shadow: inset 3px 0 0 var(--ac); }

/* Starter cards (Objasni, Priprema za ispit, etc.) */
.starter-card { border: 1px solid #E2E8F0; background: #FFFFFF; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.starter-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); border-color: #2563EB; }
.dark .starter-card { background: #0F172A; border-color: rgba(255,255,255,0.06); }
.dark .starter-card:hover { border-color: #60a5fa; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transform: translateY(-2px); }

/* ── Mobile polish ─────────────────────────────────────────────────── */
/* iOS safe-area support for the bottom input bar */
#main-input-bar, #group-input-bar {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
/* Attach panel pops up ABOVE the model picker + study tools row,
   not between it and the input. Uses flex order on the parent column. */
#main-chat-pane > #attach-panel     { order: 1; }
#main-chat-pane > #conv-files-bar   { order: 2; }
#main-chat-pane > #model-picker-bar { order: 3; }
#main-chat-pane > #main-input-bar   { order: 4; }
#main-chat-pane > #group-input-bar  { order: 4; }
/* Prevent iOS Safari from auto-zooming when focusing inputs (font-size must be >=16px on iOS).
   The sidebar search (#history-search) is intentionally small (text-xs) and
   gets its own zoom-prevent treatment further down so it doesn't blow up to
   16px and look chunky in the narrow sidebar. */
@media (max-width: 640px) {
  #message-input, #group-input, #note-content-input, #note-title-input,
  input[type="email"], input[type="password"], input[type="tel"], textarea {
    font-size: 16px !important;
  }
  /* Generic text inputs except the sidebar search. Sidebar search keeps its
     compact 12px size and tighter padding. */
  input[type="text"]:not(#history-search) {
    font-size: 16px !important;
  }
  /* Sidebar search on mobile: keep small but bump font on focus only — that
     stops iOS from zooming when the user actually taps to type, while leaving
     the resting state compact. */
  #history-search {
    padding-top: 4px; padding-bottom: 4px;
    line-height: 1.2;
  }
  #history-search:focus { font-size: 16px; }
}
/* Long content in chat bubbles never overflows horizontally — but normal
   short words must NOT be broken letter-by-letter. Use `break-word` (only
   splits a word when it's longer than the container) instead of `anywhere`. */
.msg-bubble { word-wrap: break-word; overflow-wrap: break-word; }
.msg-bubble pre, .msg-bubble code { overflow-wrap: anywhere; max-width: 100%; overflow-x: auto; }
.msg-bubble a { overflow-wrap: anywhere; }
.msg-bubble table { display: block; overflow-x: auto; max-width: 100%; }
/* Remove tap delay + remove tap highlight on common interactive elements */
button, a, [role="button"], .conv-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Better scroll on iOS */
#chat-messages, #history-list, .overflow-y-auto { -webkit-overflow-scrolling: touch; }
/* Scroll perf: contain bubble layout so they don't trigger full-page reflow on scroll */
.chat-bubble-row { contain: layout style; }

/* ═════════════════════════════════════════════════════════════════════
   Legacy "LIGHT MODE PREMIUM POLISH" block removed — it conflicted with
   the Phase 3 light-mode treatment (banned inset-stripe accent on active
   conv, white bg on #btn-new-chat span, etc.). All of those concerns are
   now handled cleanly in the html:not(.dark) block earlier in this file.
   ═════════════════════════════════════════════════════════════════════ */

/* Keep a few useful light-mode utilities here. */
html:not(.dark) #footer-disclaimer { color: #94A3B8 !important; }
html:not(.dark) .followup-chip {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}
html:not(.dark) .followup-chip:hover {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background: rgba(37, 99, 235, 0.04) !important;
}
html:not(.dark) .quiz-option { border-color: #E2E8F0; color: #334155; transition: all 0.15s; }
html:not(.dark) .quiz-option:hover:not(:disabled) {
  border-color: #2563EB; color: #2563EB; background: rgba(37, 99, 235, 0.04);
}
html:not(.dark) .tool-bubble-icon { color: #2563EB; }
html:not(.dark) .note-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.note-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
html:not(.dark) .continue-banner {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #94A3B8;
}
/* Light-mode modal panels — clean white card with soft shadow. */
html:not(.dark) #profile-modal > div,
html:not(.dark) #settings-modal > div,
html:not(.dark) #groups-modal > div,
html:not(.dark) #notes-modal > div,
html:not(.dark) #library-modal > div,
html:not(.dark) #help-modal > div,
html:not(.dark) #name-modal > div,
html:not(.dark) #flashcard-modal > div,
html:not(.dark) #deck-review-modal > div,
html:not(.dark) #quiz-modal > div {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06) !important;
}
/* User bubble (both themes) — premium rounded with subtle blue glow. */
.user-bubble {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.18);
}
html:not(.dark) .user-bubble { box-shadow: 0 2px 12px rgba(37, 99, 235, 0.22); }

/* Pin the disclaimer to the absolute bottom of the chat pane so it stays
   at the page edge in both empty-state (input centered) and chat mode. */
#main-chat-pane { position: relative; }
#footer-disclaimer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  margin: 0 !important;
  pointer-events: none;
  z-index: 1;
}
/* Reserve a bit of space below the input bar so the disclaimer doesn't
   collide with the send button area when input is pinned-bottom. */
#main-input-bar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px) !important; }

/* Scroll-bottom button */
html:not(.dark) #scroll-bottom-btn {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Smooth focus rings for inputs in light mode */
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus { outline: none; border-color: rgba(37, 99, 235, 0.5); }

/* Center chat column in the available space, ChatGPT-style. The scroll
   container (#chat-messages) stays full-width so the scrollbar sits on the
   panel edge; only the bubble rows are constrained and centered. */
.chat-bubble-row { max-width: 48rem; width: 100%; margin-left: auto; margin-right: auto; }

/* ChatGPT-style empty state: greeting + composer are vertically centered in
   the chat panel until the user sends the first message. The `.empty-chat-mode`
   class is toggled by a MutationObserver at the bottom of this file based on
   whether #empty-state is visible AND #chat-messages is not hidden. Once the
   first message is sent, the class is removed and the layout snaps back to
   the normal pinned-bottom composer. */
#main-chat-pane.empty-chat-mode::before,
#main-chat-pane.empty-chat-mode::after {
  content: '';
  flex: 1 1 auto;
}
#main-chat-pane.empty-chat-mode::before { order: 1; }
#main-chat-pane.empty-chat-mode > #chat-messages   { order: 2; flex: 0 0 auto; overflow: visible; padding-top: 0; padding-bottom: 0; }
#main-chat-pane.empty-chat-mode > #chat-messages > #empty-state { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; }
#main-chat-pane.empty-chat-mode > #attach-panel     { order: 3; }
#main-chat-pane.empty-chat-mode > #conv-files-bar   { order: 4; }
/* Empty-chat-mode keeps the same backgrounds as the normal layout so
   button pills (Study tools / model picker) don't lose contrast. We only
   drop the top borders for a cleaner centered look. */
#main-chat-pane.empty-chat-mode > #model-picker-bar { order: 5; border-top: none; }
#main-chat-pane.empty-chat-mode > #main-input-bar   { order: 6; border-top: none; padding-top: 0.75rem; }
#main-chat-pane.empty-chat-mode::after { order: 7; }

/* Collapsible sidebar sections (Subjects + History). When collapsed, only
   the header row shows; the body is hidden and the section shrinks to its
   intrinsic header height so the other section takes the freed space. The
   chevron rotates from ▼ (expanded) to ▶ (collapsed). */
.sidebar-section.section-collapsed > .section-body { display: none; }
.sidebar-section.section-collapsed .section-chevron { transform: rotate(-90deg); }
.sidebar-section .section-header:hover .section-chevron { color: #fff; }
/* History exception: when collapsed, keep the body visible but show ONLY
   the currently active conversation (the one the user is in). Date labels
   and the search input are hidden too. */
#history-section.section-collapsed > .section-body { display: flex; }
#history-section.section-collapsed #history-list > p,
#history-section.section-collapsed #history-list > .conv-item:not(.is-active) { display: none; }
#chat-messages { contain: layout style paint; overscroll-behavior: contain; }
/* Hint the browser that the scrolling container is a separate composite layer */
/* will-change: scroll-position was creating a stacking context on
   #chat-messages, which made the empty-state bot avatar render ABOVE modals at
   z-50 — modals appeared transparent because their content was occluded by the
   chat. Removed. Chrome auto-promotes scrolling containers without the hint. */
#notes-list-view, #history-list { will-change: scroll-position; }

/* ──────────────────────────────────────────────────────────────────────
   UI/UX polish — added in May 2026 launch prep round.
   ────────────────────────────────────────────────────────────────────── */

/* Modal entrance: quick fade + scale-in so modals don't appear out of nowhere.
   Targets any modal panel (the inner card) of the standard fixed-overlay modals.
   `animation` runs whenever the modal becomes visible (hidden class removed). */
@keyframes sbModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#profile-modal:not(.hidden) > div,
#settings-modal:not(.hidden) > div,
#groups-modal:not(.hidden) > div,
#notes-modal:not(.hidden) > div,
#library-modal:not(.hidden) > div,
#share-modal:not(.hidden) > div,
#quiz-modal:not(.hidden) > div,
#glossary-modal:not(.hidden) > div,
#summary-modal:not(.hidden) > div,
#flashcard-modal:not(.hidden) > div,
#deck-review-modal:not(.hidden) > div,
#help-modal:not(.hidden) > div,
#name-modal:not(.hidden) > div,
#paywall-modal:not(.hidden) > div,
#confirm-modal:not(.hidden) > div,
#rename-group-modal:not(.hidden) > div {
  animation: sbModalIn 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Composer focus glow — currently the input only changes border color on focus.
   Add a soft blue ring so the active state reads as clearly active without
   shifting layout. Scoped to the inner composer cards (light + dark). */
#main-input-bar > div > div:first-of-type:focus-within,
#group-input-bar > div > div:first-of-type:focus-within {
  box-shadow:
    0 0 0 3px rgba(29, 78, 216, 0.18),
    0 8px 24px rgba(29, 78, 216, 0.10);
}

/* Conversation list hover polish — tighter visual hierarchy. The active row
   already has its own treatment; inactive rows get a subtle hover background
   that's clearer than the previous near-invisible one. */
#history-list .conv-item:not(.is-active):hover > div:first-child {
  background: rgba(255, 255, 255, 0.04);
  color: #F8FAFC;
  transform: translateX(1px);
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
html:not(.dark) #history-list .conv-item:not(.is-active):hover > div:first-child {
  background: rgba(15, 23, 42, 0.05);
  color: #0F172A;
}
#history-list .conv-item > div:first-child {
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

/* Loading skeleton — used while history/subjects/devices are being fetched.
   Animates a subtle horizontal shimmer on a gray bar. Add class `.sb-skeleton`
   to any element to make it shimmer. */
@keyframes sbShimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.sb-skeleton {
  display: block;
  background-color: rgba(255, 255, 255, 0.04);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: sbShimmer 1.4s ease-in-out infinite;
}
html:not(.dark) .sb-skeleton {
  background-color: rgba(15, 23, 42, 0.05);
  background-image: linear-gradient(90deg,
    rgba(15, 23, 42, 0) 0,
    rgba(15, 23, 42, 0.08) 50%,
    rgba(15, 23, 42, 0) 100%);
}

/* Mobile spacing — the chat composer pill could feel cramped on narrow
   viewports because the inner padding compounds with the input padding.
   Slightly tighten so the placeholder doesn't truncate. Also bump model-picker
   bar bottom padding so it doesn't kiss the composer on touch devices. */
@media (max-width: 480px) {
  #main-input-bar > div > div:first-of-type,
  #group-input-bar > div > div:first-of-type {
    border-radius: 14px;
  }
  #model-picker-bar { padding-bottom: 4px; }
  /* Slightly larger tap targets for sidebar section toggle chevrons */
  .sidebar-section .section-header { padding-top: 6px; padding-bottom: 6px; }
}
/* Modal close-buttons (×) — give them a real touch target on mobile without changing visuals on desktop */
@media (max-width: 640px) {
  button.text-xl.leading-none,
  button.text-2xl.leading-none {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* Modals: cap content height + leave room for browser chrome on mobile */
.modal-content { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (max-width: 640px) {
  .modal-content { max-height: calc(100dvh - 1rem); }
}
/* Sidebar: bottom safe-area padding so user-avatar stays above iOS home bar */
#sidebar { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
/* Top bar: side safe-area padding for iPhone landscape notches */
header { padding-left: calc(1rem + env(safe-area-inset-left, 0px)); padding-right: calc(1rem + env(safe-area-inset-right, 0px)); }
/* Conversation title truncates with ellipsis instead of wrapping awkwardly */
#conversation-title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Header inner container needs min-width:0 so the title can shrink */
header > div:first-child { min-width: 0; flex: 1; }

/* Desktop sidebar collapse — slides the sidebar away, reveals an expand button in the top bar */
@media (min-width: 640px) {
  .sidebar-collapsed #sidebar { display: none; }
  .sidebar-collapsed #sidebar-expand-btn { display: inline-flex; }
}

/* Drag-and-drop overlay for files */
#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(31,78,121,0.35);
  pointer-events: none;
}
#drop-overlay.active { display: flex; }
#drop-overlay .drop-card {
  background: white;
  color: #1F4E79;
  padding: 24px 32px;
  border-radius: 16px;
  border: 2px dashed #1F4E79;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.dark #drop-overlay .drop-card { background: #0F172A; color: #60a5fa; border-color: #60a5fa; }

/* ── Design system static classes (avoids Tailwind CDN arbitrary-value processing) ── */
.sb-c-sec { color: #94A3B8; }
.sb-c-mut { color: #64748B; }
.sb-bg-ter { background-color: #131E36; }
.sb-bg-ter-t { background-color: rgba(19, 30, 54, 0.50); }
.sb-border { border-color: rgba(255, 255, 255, 0.06); }
.sb-bg-ac { background-color: #1D4ED8; }
.sb-hover-ter:hover { background-color: #131E36; }
.sb-hover-ter2:hover { background-color: #1A2742; }
.sb-hover-sec:hover { color: #94A3B8; }
.sb-hover-mut:hover { color: #64748B; }
.sb-placeholder::placeholder { color: #64748B; }
.sb-focus-ac:focus { border-color: #1D4ED8; outline: none; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18); }