/* =============================================================================
   MOBILE STYLES — auto-applied on viewports ≤ 768 px
   -----------------------------------------------------------------------------
   These rules override the desktop layout in style.css for narrow screens.
   The browser fires them automatically on real mobile devices and on small
   browser windows; no opt-in flag, no JS bootstrapper. To preview on desktop,
   use Chrome DevTools' device toolbar (Ctrl+Shift+M).
   ============================================================================= */

@media (max-width: 768px) {

/* ============================================================================
   ONBOARDING / SETUP SCREEN
   ============================================================================ */

/* Make the setup card fill the whole viewport — no inset, no rounded card */
#setup-screen {
    padding: 0 !important;
}
#setup-screen > .max-w-4xl,
#setup-screen > .max-w-6xl,
#setup-screen > div:first-of-type {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex-direction: column !important;
}

/* --- Header: a touch more padding so it doesn't feel squished ------------ */
#setup-screen > div > div:first-child {
    padding: 0.85rem 0.85rem 0.7rem !important;
}
/* Step indicator dots — smaller so they read as a "progress bar" instead
   of competing with the title for attention. */
#setup-screen .border-b .flex.items-center.gap-1 > span {
    transform: scale(0.65) !important;
    transform-origin: center !important;
}
/* Force the renderSetupHeader outer flex to row on mobile so the HR/EN
   toggle sits on the RIGHT next to the title block (same as desktop),
   instead of stacking below the step indicator. Tailwind's setup.js
   markup uses `flex flex-col sm:flex-row` which would put it below at
   <640px — override that here. */
#setup-screen .border-b > div.flex {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}
#setup-screen .border-b h1 {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin: 0.15rem 0 0.2rem !important;
}
#setup-screen .border-b .text-xs.text-blue-100 {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
}
/* Step indicator row — keep "Korak X od 3 ●●●" on a single line
   below the title (default position from setup.js renderSetupHeader). */
#setup-screen .border-b .flex.items-center.gap-2.mt-1 {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
}
#setup-screen .border-b .flex.items-center.gap-2.mt-1 > span.text-xs {
    white-space: nowrap !important;
}

/* Hide the content-language picker (the second HR/EN switch). On mobile we
   keep only the UI language toggle — content language has its own field
   in settings. The selector targets the bg-blue-900/40 wrapper used in
   renderSetupHeader's contentLangPicker. */
#setup-screen [class*="bg-blue-900"] {
    display: none !important;
}

/* Right-side UI lang toggle on the header — make it visibly subtler so
   it doesn't dominate the slim mobile header. Drop the white wrapper
   bg, hide the globe icon, shrink the pill buttons, no border. */
#setup-screen .border-b .flex.justify-between {
    gap: 0.5rem !important;
}
#setup-screen .border-b .bg-white\/10 {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    gap: 0 !important;
}
#setup-screen .border-b .bg-white\/10 > span {
    display: none !important;   /* globe emoji */
}
#setup-screen .border-b .bg-white\/10 button {
    padding: 0.15rem 0.45rem !important;
    font-size: 0.68rem !important;
    border-radius: 0.3rem !important;
}

/* --- Layout C side panel: hidden on mobile. The mascot+bubble row at
   the top eats vertical space + the truncated bubble text wasn't
   readable enough to be worth it. Cards are what matter on a phone. */
#setup-mascot-side {
    display: none !important;
}

/* --- Sidebar (subject list + Mentor + Settings) — full-screen on mobile.
   Default Tailwind w-72 (288 px) leaves ~30 % of the right edge showing
   the dimmed main view, which can be misread as content. On a phone the
   menu is the user's whole context until they pick something, so cover
   the whole viewport. Desktop (md+) keeps the original sidebar width. */
#sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Hide the sidebar's X close button on the very first sidebar reveal
   after onboarding. setup.js#finalizeSetup adds .onboarding-just-finished
   to <body>; the first click inside the sidebar removes it again, so
   every subsequent reveal gets the normal close affordance back. */
body.onboarding-just-finished #sidebar button[onclick="toggleSidebar()"] {
    display: none !important;
}

/* Centre the "INGENIKO™" title in the sidebar header. Default mobile
   layout is `flex justify-between` which pushes the title to the right
   when the info button sits on the left + X button on the far right.
   Pull BOTH side buttons (info on left, X on right) out of the flex
   flow with absolute positioning so the title span is the only normal
   child — and parent's justify-content: center then centres it dead-on
   regardless of which side button is visible. */
#sidebar > div:first-child {
    justify-content: center !important;
}
#sidebar > div:first-child > button:first-child {
    position: absolute !important;
    left: 1rem !important;
}
/* X close button — absolute on the right; without this, its `ml-auto`
   absorbed all leftover flex space and dragged the title out of centre,
   right on top of the absolute "i" button. */
#sidebar > div:first-child > button:last-child {
    position: absolute !important;
    right: 1rem !important;
    margin-left: 0 !important;
}

/* --- Setup main column container ----------------------------------------- */
#setup-main-col {
    flex: 1 !important;
    min-height: 0 !important;
}

/* --- Setup card list: vertically centred in the available scroll area
   so equal whitespace sits above the first card and below the last.
   Flex column instead of the default grid because Tailwind's grid
   classes were swallowing align-content: center.

   `safe center` falls back to flex-start when the content is taller
   than the container — without it, plain `center` pushes the top of
   the list ABOVE the scroll container's start position, leaving the
   first cards unreachable on short-screen phones (iPhone SE, older
   Androids). Modern browser support is universal (Chrome/Safari/FF). */
#setup-list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: safe center !important;
    padding: 0.55rem !important;
    gap: 0.4rem !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Step 3 (predmet picker) needs different flex behaviour: the year
   <select> must stay anchored at the top of the card no matter how
   many subjects the chosen semester has. justify-content: flex-start
   pins the dropdown there; align-items: stretch + width:100% on the
   children kills the "shrink to longest option text" effect that
   appearance-none selects + flex-col children fall into on WebKit. */
#setup-list[data-step="subjects"] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}
#setup-list[data-step="subjects"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
/* Programme/uni cards (createSelectionButton output) — icon ABSOLUTELY
   positioned on the left (top: 50% / translateY -50%) so it stays
   vertically centred no matter how tall the title block grows. Title
   + code stay in normal block flow on the right; the card reserves
   `padding-left: 3.4 rem` so they never slide under the icon. Solves
   the "icon glued to card top" issue on multi-line titles like
   DSE: "Znanost o podacima, UI i sistemsko inženjerstvo". */
#setup-list > div[data-module] {
    /* Card is a normal block with extra left padding to reserve room
       for the absolutely-positioned icon chip — guarantees the chip
       sits at the vertical centre of the card no matter how many lines
       the title wraps to (DSE wraps to 2 lines + a code subtitle).
       Scoped to [data-module] so this only hits programme/smjer cards
       on Step 2 — Step 3 (predmet) rows have their own chip styling. */
    display: block !important;
    position: relative !important;
    padding: 0.6rem 0.75rem 0.6rem 3.4rem !important;
    min-height: 3.4rem !important;
    border-width: 1px !important;
    border-left-width: 4px !important;
    border-right-width: 4px !important;
    border-left-color: #e2e8f0 !important;
    border-right-color: #e2e8f0 !important;
    border-radius: 0.6rem !important;
    text-align: center !important;
}
#setup-list > div[data-module] > div:first-child {          /* icon chip — absolute, vertically centred */
    position: absolute !important;
    left: 0.65rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.55rem !important;
    background: #f1f5f9 !important;
    flex-shrink: 0 !important;
}
/* Per-module icon-chip tint (Tailwind 50-shade range) — same hue as the
   border accent but ultra-soft so icon stays the visual focus. */
#setup-list > div[data-module="BME"]      > div:first-child { background: #fef2f2 !important; } /* red-50 */
#setup-list > div[data-module="CCE"]      > div:first-child { background: #fff7ed !important; } /* orange-50 */
#setup-list > div[data-module="CPE"]      > div:first-child { background: #f0fdfa !important; } /* teal-50 */
#setup-list > div[data-module="DSE"]      > div:first-child { background: #faf5ff !important; } /* purple-50 */
#setup-list > div[data-module="EECS"]     > div:first-child { background: #fefce8 !important; } /* yellow-50 */
#setup-list > div[data-module="IEM"]      > div:first-child { background: #eff6ff !important; } /* blue-50 */
#setup-list > div[data-module="MAE"]      > div:first-child { background: #f8fafc !important; } /* slate-50 */
#setup-list > div[data-module="UNI"]      > div:first-child { background: #eef2ff !important; } /* indigo-50 */
#setup-list > div[data-module="PERSONAL"] > div:first-child { background: #ecfdf5 !important; } /* emerald-50 */
#setup-list > div[data-module] > div:nth-child(2) {         /* title — centered in the right area */
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
#setup-list > div[data-module] > div:nth-child(3) {         /* module code — under title, centered */
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 0 !important;
    margin-top: 0.15rem !important;
}
/* Per-module accent — both edges, softened (Tailwind 300-shade range)
   so the stripes are visible but quiet. data-module is set by setup.js
   createSelectionButton. */
#setup-list > div[data-module="BME"]      { border-left-color: #fca5a5 !important; border-right-color: #fca5a5 !important; }
#setup-list > div[data-module="CCE"]      { border-left-color: #fdba74 !important; border-right-color: #fdba74 !important; }
#setup-list > div[data-module="CPE"]      { border-left-color: #5eead4 !important; border-right-color: #5eead4 !important; }
#setup-list > div[data-module="DSE"]      { border-left-color: #d8b4fe !important; border-right-color: #d8b4fe !important; }
#setup-list > div[data-module="EECS"]     { border-left-color: #fde047 !important; border-right-color: #fde047 !important; }
#setup-list > div[data-module="IEM"]      { border-left-color: #93c5fd !important; border-right-color: #93c5fd !important; }
#setup-list > div[data-module="MAE"]      { border-left-color: #cbd5e1 !important; border-right-color: #cbd5e1 !important; }
#setup-list > div[data-module="UNI"]      { border-left-color: #a5b4fc !important; border-right-color: #a5b4fc !important; }
#setup-list > div[data-module="PERSONAL"] { border-left-color: #6ee7b7 !important; border-right-color: #6ee7b7 !important; }

/* Breadcrumb in the setup header — redundant on mobile (the dot
   indicator already shows the current step + lets you rewind). Drop
   it to recover one row of vertical space in the blue header. */
#setup-screen .border-b .text-xs.text-blue-100.flex.items-center.gap-1 {
    display: none !important;
}

/* --- Bottom action bar — selected counter LEFT, "Krenimo" button RIGHT.
   Button no longer full-width on mobile so the counter has room. */
#setup-screen .p-6.border-t {
    padding: 0.7rem 0.9rem !important;
}
#setup-screen .p-6.border-t button {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.9rem !important;
}
/* Counter visual identity (label-stack + Ingeniko-blue pill) lives in
   style.css — here we just tighten sizes for the cramped mobile footer
   so the two stacked label words + pill fit comfortably next to Krenimo. */
#setup-selected-counter {
    gap: 0.5rem !important;
}
#setup-selected-counter .setup-counter-label {
    font-size: 0.72rem !important;
}
#setup-selected-counter .setup-counter-num {
    min-width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.78rem !important;
    padding: 0 0.45rem !important;
}

/* --- Predmet rows (step 3) — each course in its own rounded "chip"
   card so the list reads as discrete items rather than a merged blob.
   Subtle border + tiny shadow give the chip shape without shouting.
   Selected rows still get their stronger blue card from setup.js
   (border-blue-200 + bg-blue-50). */
#setup-list .p-2.space-y-2 > * + * {
    margin-top: 0.5rem !important;
}
#setup-list .p-2.space-y-2 > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Setup tip block (Ingeniko hint) — keep snug */
#setup-tip {
    padding: 0 0.9rem 0.5rem !important;
    font-size: 0.78rem !important;
}


/* ============================================================================
   APP HEADER (subject name + mode/mentor selectors)
   ============================================================================ */
header.bg-white {
    height: auto !important;
    min-height: 3.4rem !important;
    padding: 0.4rem 0.6rem !important;
    gap: 0.4rem !important;
}
header #current-subject {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    /* Allow 2 lines instead of single-line truncate */
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
header .px-3.py-1\.5 {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.75rem !important;
}


/* ============================================================================
   SUBJECT DASHBOARD (dash-rich)
   ============================================================================ */

#view-dashboard.dash-rich {
    /* Generous top padding so the first section breathes below the
       sticky page header (especially when the subject name wraps to
       2 lines). Bottom padding is a regular gutter — the chatbar
       now flows inline so nothing needs to be reserved. */
    padding: 1.4rem 0.7rem 1.5rem !important;
    /* The Tailwind classes on #view-dashboard include
       justify-center items-center text-center — fine on desktop where
       the dashboard fits in one viewport, but on mobile they vertically
       centre an overflowing column, which pushes the first row of
       Brzi-pristup tiles ABOVE the scroll origin and they get clipped
       by the page header. Force top-anchored stacking instead. */
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
}
.dash-rich-wrap {
    gap: 0.65rem !important;
}

/* --- Hero: hidden on mobile entirely. The course name is already in
   the page header above; the AI greeting bubble + decorative deco
   were eating screen space without adding info on a phone. */
.dash-hero {
    display: none !important;
}

/* --- Brzi pristup on mobile: 3-col × 2-row icon-only grid.
   Title + description hidden — just the colored icon tile. The icon
   itself communicates the action (book = Skripta, lightning = Kviz,
   etc.) and a long-press / hover tooltip carries the title for
   accessibility. */
.dash-quick {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.55rem !important;
}
.dash-quick-card {
    padding: 0.25rem !important;         /* tighter — icon dominates the card */
    gap: 0 !important;
    border-radius: 0.7rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 5.5rem !important;       /* hard cap so cards stay small */
    justify-self: center !important;     /* centre the card within its grid cell so
                                            the empty room is split evenly L / R */
    width: 100% !important;
    max-width: 5.5rem !important;        /* keeps cards square + symmetrical */
}
.dash-quick-icon {
    /* Icon should visually FILL the card with only a hairline of breathing
       room. With 5.5rem card + 0.25rem padding = 5rem inner; the icon is
       sized at 4.6rem so the die-cut sticker reads at a glance. */
    width: 4.6rem !important;
    height: 4.6rem !important;
    margin: 0 auto !important;           /* horizontal centre */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dash-quick-icon > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}
.dash-quick-text {
    display: none !important;
}
.dash-quick-arrow {
    display: none !important;
}

/* --- Section titles ------------------------------------------------------ */
.dash-section-title {
    font-size: 0.88rem !important;
    margin-bottom: 0.35rem !important;
}
.dash-section-bolt {
    width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.75rem !important;
}

/* --- Widgets: simplified for mobile.
   - Nastavi gdje si stao: hide the empty "Lekcije završene: 0/—"
     subtitle and the empty grey progress bar. Keep just the chapter
     number badge + title + "Nastavi" / "Pregledaj poglavlja" actions.
   - Tvoj napredak: hide the 3-row stats list (Lekcije / Kvizovi /
     Zadaci all "0/—" on a fresh course). Big % ring + the "Pogledaj
     detaljan napredak" link is enough until the user has data.
*/
.dash-widgets {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
}
.dash-widget {
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.7rem !important;
}
.dash-widget h3 {
    font-size: 0.78rem !important;
    margin-bottom: 0.35rem !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
}

/* "Nastavi gdje si stao" — Ingeniko-blue tint + 2-column grid:
   chapter info LEFT, action stack (Nastavi / Pregledaj) RIGHT. */
.dash-widgets > .dash-widget:nth-child(1) {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1px solid #bfdbfe !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.6rem !important;
    row-gap: 0.35rem !important;
}
.dash-widgets > .dash-widget:nth-child(1) > h3 {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}
.dash-widgets > .dash-widget:nth-child(1) > .flex.items-center.gap-3.mt-1 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    align-self: center !important;
}
.dash-widgets > .dash-widget:nth-child(1) > .mt-3.flex.items-center.justify-between {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.3rem !important;
}
.dash-widgets > .dash-widget:nth-child(1) .w-12.h-12 {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.78rem !important;
    border-radius: 0.5rem !important;
    background: #ffffff !important;
    border: 1px solid #bfdbfe !important;
}
.dash-widgets > .dash-widget:nth-child(1) .font-semibold.text-slate-800 {
    font-size: 0.88rem !important;
    color: #1e3a8a !important;
}
.dash-widgets > .dash-widget:nth-child(1) .dash-resume-btn {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.68rem !important;
    border-radius: 0.4rem !important;
    text-align: center !important;
}
.dash-widgets > .dash-widget:nth-child(1) .dash-browse-btn {
    font-size: 0.65rem !important;
    text-align: center !important;
}

/* "Tvoj napredak" — Ingeniko-blue tint + 2-column grid: progress
   ring LEFT, "Pogledaj detaljan napredak →" link RIGHT. */
.dash-widgets > .dash-widget:nth-child(2) {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.7rem !important;
    row-gap: 0.35rem !important;
}
.dash-widgets > .dash-widget:nth-child(2) > h3 {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}
.dash-widgets > .dash-widget:nth-child(2) > .flex.items-center.gap-4 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
}
.dash-widgets > .dash-widget:nth-child(2) > .mt-3.text-xs.text-blue-600 {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    align-self: center !important;
    text-align: right !important;
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
}
.dash-widgets > .dash-widget:nth-child(2) .dash-progress-ring {
    width: 56px !important;
    height: 56px !important;
}
.dash-widgets > .dash-widget:nth-child(2) .dash-progress-ring::before {
    inset: 5px !important;
}
.dash-widgets > .dash-widget:nth-child(2) .dash-progress-ring > span {
    font-size: 0.85rem !important;
}
/* "Nastavi gdje si stao" widget — hide noise:
   - the "Lekcije završene: 0 / —" subtitle (text-xs text-slate-500)
   - the empty grey progress bar (h-1.5 mt-3 wrapper) */
.dash-widgets > .dash-widget:nth-child(1) .text-xs.text-slate-500 {
    display: none !important;
}
.dash-widgets > .dash-widget:nth-child(1) .h-1\.5.rounded-full {
    display: none !important;
}
/* "Tvoj napredak" widget — hide the 3-row stats list while values
   are all 0, keep just the % ring + the "Pogledaj detaljan napredak"
   link on its own row. */
.dash-widgets > .dash-widget:nth-child(2) .flex-1.min-w-0.text-xs {
    display: none !important;
}
.dash-progress-ring {
    width: 70px !important;
    height: 70px !important;
}
.dash-progress-ring::before {
    inset: 7px !important;
}
.dash-progress-ring > span {
    font-size: 0.95rem !important;
}
.dash-faq-chip {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.75rem !important;
}

/* --- Dashboard chatbar — flows inline immediately under the
   "Tvoj napredak" widget instead of being pinned to the viewport
   bottom. Earlier we used position:fixed but the user prefers it
   sitting with the rest of the content so the dashboard reads as
   one coherent column. */
.dash-chatbar {
    padding: 0.65rem 0.8rem !important;
    gap: 0.55rem !important;
    border-radius: 0.85rem !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.10) !important;
    border: 1px solid #e2e8f0 !important;
}
/* Hide the small "Tutor je tu da ti pomogne …" footer on mobile —
   redundant noise below a tight inline bar. */
.dash-chatbar-footer {
    display: none !important;
}
.dash-chatbar-avatar {
    width: 2.1rem !important;
    height: 2.1rem !important;
}
.dash-chatbar input {
    font-size: 0.9rem !important;
}
.dash-chatbar-desc {
    font-size: 0.66rem !important;
}
.dash-chatbar-send {
    width: 2.1rem !important;
    height: 2.1rem !important;
}
.dash-chatbar-footer {
    font-size: 0.66rem !important;
}


/* ============================================================================
   GENERIC: tighter chat input + inputs
   ============================================================================ */
#input-area {
    padding: 0.4rem 0.5rem 0.7rem !important;
}
#input-area input {
    font-size: 0.92rem !important;
}


/* ============================================================================
   ONBOARDING HEADER (Natrag · Korak 3 od 3) — keep slim
   ============================================================================ */
#onboarding-header {
    padding: 0.5rem 0.7rem !important;
}
#onboarding-header .text-xs {
    font-size: 0.7rem !important;
}

/* ============================================================================
   TUTOR / MENTOR INTRO CARD + SUGGESTED QUESTIONS
   ----------------------------------------------------------------------------
   The tutor- and mentor-intro cards (.chat-intro-card) render a 14rem mascot
   circle + a speech bubble + a list of starter questions. On a phone the
   14rem mascot eats the whole viewport before the bubble even shows; shrink
   the mascot, the bubble padding/text, and the suggestion buttons so the
   whole intro fits cleanly above the input bar.
   ============================================================================ */
.chat-intro-card {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
/* Mascot wrapper — first direct child, has inline width:14rem;height:14rem.
   Kept deliberately subtle on mobile (was 8.5rem, then user asked for it
   smaller still — 6rem now reads as a chat-style avatar, not a hero). */
.chat-intro-card > div:first-child {
    width: 6rem !important;
    height: 6rem !important;
    margin-bottom: 0.7rem !important;
}
/* Halo + border + shadow scaled down to match — at 6rem the original
   12px shadow + 3px white border felt overweight. */
.chat-intro-card > div:first-child > div:first-child {
    inset: -6px !important;
    filter: blur(14px) !important;
}
.chat-intro-card > div:first-child > div:nth-child(2) {
    border-width: 2px !important;
    box-shadow: 0 6px 14px -4px rgba(30, 41, 59, 0.25) !important;
}
/* Online status dot — smaller to match the smaller circle. */
.chat-intro-card > div:first-child > span {
    width: 12px !important;
    height: 12px !important;
    border-width: 2px !important;
    bottom: 6px !important;
    right: 6px !important;
}
/* Speech bubble — second direct child, the .bg-white p-5 ... block */
.chat-intro-card > div:nth-child(2) {
    padding: 0.9rem 1rem !important;
    max-width: 92% !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}
.chat-intro-card > div:nth-child(2) h3 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
}
.chat-intro-card > div:nth-child(2) p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

/* Tutor "Predloženo:" suggestion buttons — tighten padding + font so
   each chip is roughly half the height it has on desktop. */
.tutor-suggestion-btn {
    padding: 0.55rem 0.7rem !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    border-radius: 0.7rem !important;
}
.tutor-suggestion-btn > span:first-child {
    font-size: 1rem !important;
    margin-right: 0.45rem !important;
}

/* --- Once the user enters chat (first message sent), strip the
   frosted-glass wrapper around the message history and hide the
   sticky mini-mascot at the top. On a phone, both add visual weight
   without value — the chat reads better as plain message bubbles
   on the white background. */
.chat-history-wrap {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}
.chat-mascot-sticky {
    display: none !important;
}

}