/* ─────────────────────────────────────────────────────────────────────────
   LectureBot global styles. Colors and type come from the MudTheme
   (Theme/LectureBotTheme.cs) through MudBlazor's --mud-palette-* / --mud-typography-*
   variables — nothing here hard-codes a theme color, so light and dark stay in step.
   ───────────────────────────────────────────────────────────────────────── */

/* Brand marks that aren't theme roles. The coral "record dot" is the signature: the period in Lecture.Bot,
   the app icon, the Record button. The purple gradient is kept for heroes and the main button only. */
:root {
    --lb-dot: #FF5A5F;
    --lb-ink: #2E2390;
    --lb-gradient: linear-gradient(120deg, #4232C2 0%, #6266EA 100%);
}

html, body {
    margin: 0;
    font-family: var(--mud-typography-default-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--mud-palette-primary);
}

h1:focus {
    outline: none;
}

/* Counts, percentages and times line up when digits are equal width. */
.mud-chip, .tnum, .mud-table-cell {
    font-variant-numeric: tabular-nums;
}

/* Keyboard focus is always visible, in the brand color. */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.blazor-error-boundary {
    padding: 12px 16px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-error);
    color: #fff;
}

    .blazor-error-boundary::after {
        content: "Something went wrong showing this part of the page.";
    }

/* ── Small layout utilities ── */

.page-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.muted {
    color: var(--mud-palette-text-secondary);
}

/* ── App shell ────────────────────────────────────────────────────────────
   Flex column shell: header + scrollable middle + bottom nav. position:fixed so the shell itself can
   never scroll (on real iOS, a document-level scroll drags position:fixed bars along with it — this is
   the only layout that actually pins them). Sized with 100dvh, NOT inset:0/100vh: on iOS a fixed inset:0
   element fills the toolbar-*retracted* layout viewport, overshooting the visible area. Only .app-main
   scrolls, so the header and footer-bar never move. */

/* The fixed app-shell locks the document and scrolls an inner pane (.app-main) instead. Gated on the shell
   actually being present, so pages without it (sign-in) keep a normally scrolling document. */
html:has(.app-shell),
body:has(.app-shell) {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--mud-palette-background);
}

.app-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;    /* fallback for engines without dvh */
    height: 100dvh;   /* dynamic viewport height — tracks the iOS toolbar so the nav never overshoots */
    display: flex;
    flex-direction: column;   /* header / scrolling main / bottom bar (phones) */
    background: var(--mud-palette-background);
}

.app-body {
    flex: 1 1 auto;
    min-height: 0;   /* let .app-main actually scroll */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Floating top layer ── the pill nav (and class bar) float over the page; each page's hero runs up
   behind them, so the pill sits on the purple gradient. Only .app-main scrolls, so the layer stays put. */

.app-body {
    position: relative;
}

.app-top {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;   /* only the pill and the class bar take clicks, not the gaps around them */
}

.app-top > * {
    pointer-events: auto;
}

/* Frosted strip behind the floating layer: from the very top of the screen (status bar included) to a
   little below the pill, blurring and tinting what scrolls under it. Invisible at the top of the page so
   the hero's gradient shows clean; uiScroll.js's watchScrolled fades it in once the page moves. Sized off
   .app-top, so it grows with the class bar, and its soft bottom edge avoids a hard cut-off line. */
.app-top > .app-top-scrim {
    position: absolute;
    z-index: -1;
    top: calc(-12px - env(safe-area-inset-top));
    left: -12px;
    right: -12px;
    bottom: -18px;
    pointer-events: none;
    background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.app-top > .app-top-scrim.is-visible {
    opacity: 1;
}

/* ── Header ── a rounded white pill: logo, centered links (desktop) and actions. */

.app-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 1240px;
    height: 60px;
    padding: 0 10px 0 18px;
    border-radius: 999px;
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    box-shadow: 0 10px 30px rgba(28, 16, 110, 0.18);
}

@media (max-width: 599px) {
    .app-top {
        top: calc(8px + env(safe-area-inset-top));
        left: 8px;
        right: 8px;
    }

    .app-top > .app-top-scrim {
        top: calc(-8px - env(safe-area-inset-top));
        left: -8px;
        right: -8px;
    }

    .app-header {
        height: 52px;
    }
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    flex-shrink: 0;
}

.app-wordmark {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.app-wordmark-accent {
    color: var(--mud-palette-primary);
}

/* The period in "Lecture.Bot" is the brand's record dot, wherever the name is set as a wordmark. A touch heavier
   so it reads as a dot, not punctuation. */
.lb-dot {
    color: var(--lb-dot);
    font-weight: 800;
}

/* Desktop links, centered in the bar. Hidden on phones (BottomNav takes over). */
.top-nav {
    display: none;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.top-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.top-nav-link:hover {
    color: var(--mud-palette-primary);
}

.top-nav-link.active {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    font-weight: 600;
}

/* The dropdown triggers look exactly like the plain links beside them. */
.top-nav-menu .mud-button-root {
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    font-size: 0.92rem;
    font-weight: 500;
    min-width: 0;
}

.top-nav-menu .mud-button-root .mud-button-icon-end {
    margin-left: 2px;
}

.top-nav-menu .mud-button-root:hover {
    color: var(--mud-palette-primary);
    background: transparent;
}

.top-nav-menu.active .mud-button-root {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    font-weight: 600;
}

.top-nav-popover .mud-menu-item {
    border-radius: 8px;
    margin: 0 4px;
}

.top-nav-popover.mud-popover {
    border-radius: 14px !important;
    padding: 6px 0;
    box-shadow: 0 16px 40px rgba(66, 50, 194, 0.16) !important;
}

/* ── Class context bar ── the class you're studying, a small pill under the nav on class-scoped pages. */

.class-context-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 6px 18px rgba(28, 16, 110, 0.14);
}

/* The class / event pickers read as compact chips, not form controls. */
.class-context-button .mud-button-root {
    text-transform: none;
    font-weight: 600;
    letter-spacing: normal;
    border-radius: 999px;
    padding: 3px 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ── Main content ── */

.app-main {
    flex: 1 1 auto;
    /* A flex item defaults to min-height:auto, which refuses to shrink below its content — min-height:0
       lets it shrink to the shell so its own overflow-y actually scrolls. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;   /* page banners span the full width */
    -webkit-overflow-scrolling: touch;
}

/* Room for the floating nav on pages without a hero; a hero pulls itself back up behind the nav. The nav
   sits below the status bar in the apps (edge to edge), so the room includes that inset too. */
.sticky-content {
    padding-top: calc(96px + env(safe-area-inset-top));
    padding-bottom: 48px;
}

@media (max-width: 599px) {
    .sticky-content {
        padding-top: calc(80px + env(safe-area-inset-top));
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── Surfaces ── rounded white cards on soft purple-tinted shadows; pill buttons and chips. */

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-card.mud-elevation-1,
.mud-card.mud-elevation-2 {
    border-radius: 18px !important;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px rgba(66, 50, 194, 0.07) !important;
}

.mud-paper-outlined {
    border-radius: 18px !important;
    border-color: var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface);
}

.mud-button-root {
    text-transform: none;
    letter-spacing: normal;
    border-radius: 999px !important;
}

.mud-button-filled {
    box-shadow: none !important;
}

/* Primary actions carry the brand gradient. */
.mud-button-filled.mud-button-filled-primary {
    background: var(--lb-gradient);
    color: #fff;
}

.mud-button-filled.mud-button-filled-primary:hover {
    filter: brightness(1.06);
}

/* The one main action on a screen: a pink pill with a soft glow. */
.btn-cta.mud-button-root {
    background: var(--mud-palette-secondary) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mud-palette-secondary) 45%, transparent) !important;
    padding-left: 22px;
    padding-right: 22px;
}

.btn-cta.mud-button-root:hover {
    filter: brightness(1.05);
}

/* A round purple badge for a card or section icon, as in the template's feature cards. */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #4232C2 0%, #6266EA 100%);
    box-shadow: 0 8px 18px rgba(66, 50, 194, 0.28);
}

.icon-badge.small {
    width: 36px;
    height: 36px;
    box-shadow: none;
}

.mud-button-outlined-primary {
    border-width: 1.5px;
}

.mud-chip {
    border-radius: 999px !important;
}

.mud-input-outlined-border {
    border-radius: 12px !important;
}

.mud-alert {
    border-radius: 14px !important;
}

/* ── Toasts ── frosted cards that drop in just under the floating nav pill (configured top-center in
   LectureBotTheme.ConfigureServices). Severity reads from a tinted icon badge, not a solid colored slab. */

/* A centered column as wide as a toast may get; each toast sizes to its message inside it. */
.mud-snackbar-location-top-center {
    top: calc(84px + env(safe-area-inset-top)) !important;
    width: min(460px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 599px) {
    .mud-snackbar-location-top-center {
        top: calc(66px + env(safe-area-inset-top)) !important;
    }
}

.mud-snackbar {
    min-width: 0 !important;
    width: fit-content;
    max-width: 100% !important;
    margin-top: 10px !important;
    padding: 6px 8px 6px 8px !important;
    border-radius: 18px !important;
    /* The dark theme's surface is translucent: lay it over the solid page color so nothing shows through. */
    background: linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)),
                var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 14px 34px rgba(28, 16, 110, 0.22) !important;
    font-size: 0.9rem;
    font-weight: 600;
}

.mud-snackbar .mud-snackbar-icon {
    --tone: var(--mud-palette-primary);
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-inline-end: 12px;
    border-radius: 50%;
    opacity: 1;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 16%, transparent);
    flex-shrink: 0;
}

.mud-snackbar .mud-snackbar-icon .mud-icon-root { font-size: 20px; }

.mud-snackbar.mud-alert-text-success .mud-snackbar-icon { --tone: var(--mud-palette-success); }
.mud-snackbar.mud-alert-text-info .mud-snackbar-icon { --tone: var(--mud-palette-info); }
.mud-snackbar.mud-alert-text-warning .mud-snackbar-icon { --tone: var(--mud-palette-warning); }
.mud-snackbar.mud-alert-text-error .mud-snackbar-icon { --tone: var(--mud-palette-error); }

.mud-snackbar .mud-snackbar-content-action {
    padding-inline-start: 8px;
    margin-inline-end: 0;
}

.mud-snackbar .mud-snackbar-content-action > button {
    color: var(--mud-palette-text-secondary) !important;
}

/* Search-match highlight in transcripts/captures — legible in both themes. */
mark.search-hl {
    background-color: #ffe08a;
    color: #1f1f1f;
    border-radius: 3px;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ── Bottom tab bar (phone) ── a normal flow element at the bottom of the flex column (not fixed),
   so it stays pinned regardless of content height or iOS scroll quirks. */

.sticky-bottom-nav {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-bottom: env(safe-area-inset-bottom);   /* clear the home indicator */
}

.sticky-bottom-nav .sbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0 6px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
    transition: color 120ms ease;
    background: none;   /* the "More" tab is a <button>; match the <a> tabs */
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.sticky-bottom-nav .sbn-item .mud-icon-root {
    font-size: 24px;
}

.sticky-bottom-nav .sbn-item.active {
    color: var(--mud-palette-primary);
}

/* Record is the app's main action: a raised coral button (the brand's record dot) in the middle of the bar. */
.sticky-bottom-nav .sbn-item.sbn-primary .sbn-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border-radius: 16px;
    background: var(--lb-dot);
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--lb-dot) 40%, transparent);
}

.sticky-bottom-nav .sbn-item.sbn-primary .mud-icon-root {
    font-size: 22px;
}

/* ── "More" bottom sheet (phone overflow nav) ── */

.more-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1200;
    animation: more-fade 0.18s ease-out;
}

/* Bottom sheet: centered and capped in width so a narrow desktop window doesn't get a full-width slab, and
   tall enough (nearly the whole screen) that every item shows without scrolling on a phone. */
.more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1201;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: var(--mud-palette-surface);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
    padding: 4px 14px calc(14px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    animation: more-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes more-up {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes more-fade {
    from { opacity: 0; }
}

.more-grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    margin: 6px auto 2px;
}

.more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 6px;
}

.more-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.more-group {
    padding: 8px 6px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Four across on a phone, more when the window is wider. */
.more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 2px;
}

.more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 2px 8px;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    border-radius: 14px;
    transition: background-color 0.12s ease;
}

.more-item:hover,
.more-item:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

/* A soft tinted tile behind each icon, like the Settings sections. */
.more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.more-icon .mud-icon-root {
    font-size: 22px;
    color: var(--mud-palette-primary);
}

.more-item.active .more-icon {
    background: var(--mud-palette-primary);
}

.more-item.active .more-icon .mud-icon-root {
    color: var(--mud-palette-primary-text);
}

.more-item.active .more-label {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* ── Desktop layout (>=900px): links in the top bar replace the bottom tab bar ──
   Pure CSS (not a JS breakpoint probe) so there's no flash and it works in the MAUI WebView. */
@media (min-width: 900px) {
    .top-nav {
        display: flex;
    }

    .sticky-bottom-nav {
        display: none;
    }

    .sticky-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ── Print ── the app shell is a fixed, inner-scrolling frame; for print, let the page flow and drop the
   chrome (nav, tab bar, plan bar, hero buttons) so only the content prints. */
@media print {
    html:has(.app-shell), body:has(.app-shell) { height: auto; overflow: visible; }
    .app-shell { position: static; height: auto; display: block; }
    .app-body, .app-main { display: block; overflow: visible; height: auto; }
    .app-top, .sticky-bottom-nav, .plan-bar, .page-hero-actions, .page-hero-art, .page-hero-wave, #blazor-error-ui { display: none !important; }
    .page-hero { background: none !important; color: #000 !important; padding-top: 0 !important; }
    .page-highlights { display: none !important; }
    body { background: #fff !important; }
}