/* App-shell design system - the authenticated area (My Case, Chat, Account) intentionally
   looks and behaves like an application, distinct from the marketing site's page-style layout
   in app.css. Reuses --color-accent from app.css for brand continuity; everything else here is
   new. See memory: feedback_app_vs_website_ui - direction confirmed via mockup 2026-09-16. */
:root {
    --app-ink: #1B2430;
    --app-muted: #5C6B72;
    --app-paper: #F1F3F2;
    --app-card: #FFFFFF;
    --app-line: #DCE2E1;
    --app-sidebar: #16222B;
    --app-sidebar-line: #24333D;
    --app-sidebar-text: #C7D2D6;
    --app-sidebar-text-dim: #7E939C;
    --app-accent-wash: #FCE3DC;
    --app-success: #2F7D5A;
    --app-success-wash: #E4F1EA;
    --app-warning: #B9791E;
    --app-warning-wash: #FBF0DD;
    --app-critical: #C1392B;
    --app-critical-wash: #FAE6E3;
    --app-focus: #2C6FBB;
    /* Dedicated wash+ink pair for a "no status yet" chip - previously reused --app-line/--app-muted
       directly for background/text, which (a) failed contrast by itself (~4.2:1, under the 4.5:1
       minimum) and (b) went fully invisible in high-contrast mode, where both tokens collapse to
       pure black. Giving it its own pair, mirroring --app-success/--app-warning/--app-critical,
       fixes both at once. */
    --app-neutral: #3F4B52;
    --app-neutral-wash: #E7EAEA;
}

/* Accessible view: high contrast, toggled via the AccessibilityMenu component (same class app.css
   defines an override for - see app.css for how it's applied/persisted). */
:root.a11y-high-contrast {
    --app-ink: #000000;
    --app-muted: #000000;
    --app-paper: #FFFFFF;
    --app-card: #FFFFFF;
    --app-line: #000000;
    --app-sidebar: #000000;
    --app-sidebar-line: #333333;
    --app-sidebar-text: #FFFFFF;
    --app-sidebar-text-dim: #FFFFFF;
    --app-accent-wash: #FFFF00;
    --app-success: #006400;
    --app-success-wash: #FFFFFF;
    --app-warning: #7A4B00;
    --app-warning-wash: #FFFFFF;
    --app-critical: #8B0000;
    --app-critical-wash: #FFFFFF;
    --app-focus: #0000FF;
    --app-neutral: #000000;
    --app-neutral-wash: #FFFFFF;
}
:root.a11y-high-contrast .app-shell a:focus-visible,
:root.a11y-high-contrast .app-shell button:focus-visible {
    outline-width: 3px;
}

.app-shell, .app-shell * {
    box-sizing: border-box;
}

.app-shell {
    display: grid;
    grid-template-columns: 15.5rem 1fr;
    /* Fixed to the viewport, not just a minimum - the sidebar and topbar are meant to stay put
       while only .app-content (and, within it, .app-chat-messages) scroll internally. Without
       this, the whole document grows with page content and the browser window itself scrolls,
       which is how a chat/interview page's input row ended up able to drift below the fold on
       tall banner stacks - see .app-content's own comment below for the full fix. */
    height: 100vh;
    overflow: hidden;
    font-family: "Public Sans", var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--app-ink);
    background: var(--app-paper);
}

@media (max-width: 860px) {
    .app-shell { grid-template-columns: 1fr; }
}

.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4 { text-wrap: balance; margin: 0; font-weight: 700; }
.app-shell p { margin: 0; }
/* Deliberately NOT ".app-shell a { color: inherit; }" here - app.css already has a global,
   low-specificity "a { color: inherit }" (0,0,1) that plain row/nav links fall back to fine.
   A scoped ".app-shell a" rule is (0,1,1), which silently outranks every single-class
   component color rule below (.app-link, .app-cta, .app-btn-primary, .app-hero-cta, etc.),
   making every one of them render inherited dark ink text instead of their intended accent/
   light color - this exact bug shipped once and was only caught by a user screenshot. */
.app-shell button { font-family: inherit; }

.app-mono {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------- sidebar ---------- */
.app-sidebar {
    background: var(--app-sidebar);
    color: var(--app-sidebar-text);
    padding: 1.375rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.625rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 860px) {
    .app-sidebar {
        position: fixed;
        inset: 0 30% 0 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 2px 0 24px rgba(0,0,0,.35);
        min-width: 15rem;
    }
    .app-shell.nav-open .app-sidebar { transform: translateX(0); }
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    margin: -0.375rem -0.5rem 0;
    text-decoration: none;
    border-radius: 8px;
}
.app-brand:hover { background: var(--app-sidebar-line); }
.app-brand-mark {
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--color-accent);
    display: grid; place-items: center;
    color: #fff;
    font-weight: 800; font-size: 0.875rem;
    flex-shrink: 0;
}
.app-brand-name { font-weight: 800; letter-spacing: .02em; font-size: 0.90625rem; color: #fff; }
.app-brand-sub { font-size: 0.6875rem; color: var(--app-sidebar-text-dim); }

.app-nav-group { display: flex; flex-direction: column; gap: 0.125rem; }
.app-nav-label {
    font-size: 0.65625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--app-sidebar-text-dim);
    padding: 0 0.75rem; margin-bottom: 0.375rem;
}
.app-nav-item {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.84375rem; font-weight: 500;
    color: var(--app-sidebar-text);
    border-left: 3px solid transparent;
    margin-left: -3px;
}
.app-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.app-nav-item:hover { background: var(--app-sidebar-line); }
.app-nav-item.active {
    background: var(--app-sidebar-line);
    border-left-color: var(--color-accent);
    color: #fff;
}
.app-nav-item.active svg { opacity: 1; color: var(--color-accent); }
.app-nav-item .app-count {
    margin-left: auto;
    font-size: 0.6875rem;
    font-family: "IBM Plex Mono", monospace;
    color: var(--app-sidebar-text-dim);
}

.app-account-wrap { position: relative; margin-top: auto; }
.app-sidebar-foot {
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--app-sidebar-line);
    padding-top: 0.875rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex; align-items: center; gap: 0.625rem;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
}
.app-sidebar-foot:hover { opacity: .9; }
.app-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: #2E3E47; color: #fff;
    display: grid; place-items: center;
    font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
}
.app-sidebar-foot .app-who { font-size: 0.78125rem; font-weight: 600; color: #fff; }
.app-sidebar-foot .app-role { font-size: 0.6875rem; color: var(--app-sidebar-text-dim); overflow-wrap: anywhere; }

.app-account-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    padding: 0.375rem;
    z-index: 50;
}
.app-account-menu-item {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5625rem 0.625rem;
    border-radius: 7px;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--app-ink);
    text-decoration: none;
}
.app-account-menu-item svg { width: 16px; height: 16px; color: var(--app-muted); flex-shrink: 0; }
.app-account-menu-item:hover { background: var(--app-paper); }
.app-account-menu-item.danger { color: var(--app-critical); }
.app-account-menu-item.danger svg { color: var(--app-critical); }
.app-account-menu-divider { height: 1px; background: var(--app-line); margin: 0.25rem 0.375rem; }

/* ---------- main column ---------- */
.app-main { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }

.app-topbar {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 1rem 1.75rem;
    border-bottom: 1px solid var(--app-line);
    background: var(--app-card);
    position: sticky; top: 0; z-index: 10;
}
.app-menu-btn {
    display: none;
    width: 2.125rem; height: 2.125rem;
    border: 1px solid var(--app-line);
    background: var(--app-card);
    border-radius: 8px;
    align-items: center; justify-content: center;
    cursor: pointer;
}
@media (max-width: 860px) { .app-menu-btn { display: inline-flex; } }
.app-menu-btn svg { width: 17px; height: 17px; }

.app-topbar h1 { font-size: 1.1875rem; }
.app-topbar .app-crumb { font-size: 0.75rem; color: var(--app-muted); margin-top: 0.0625rem; }
.app-topbar-spacer { flex: 1; }

/* AccessibilityMenu.razor, restyled to match the app shell's own --app-* tokens instead of
   app.css's base --color-* styling (app.css still supplies the .a11y-menu/-toggle/-panel rules
   this overrides). */
.app-shell .a11y-menu-toggle { border-color: var(--app-line); background: var(--app-card); color: var(--app-ink); }
.app-shell .a11y-menu-toggle:hover { border-color: var(--app-muted); }
.app-shell .a11y-menu-toggle:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.app-shell .a11y-menu-panel { background: var(--app-card); color: var(--app-ink); border-color: var(--app-line); font-family: "Public Sans", var(--font-sans); }
.app-shell .a11y-menu-option input:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }

.app-content {
    padding: 1.625rem 1.75rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    /* The single scroll region for every authenticated page, now that .app-shell/.app-main are
       clipped to the viewport above - keeps the sidebar and topbar genuinely fixed instead of
       scrolling away with the page. Chat/interview pages lean on this directly: .app-chat-pane
       below is a flex:1 child here, so it always fills exactly whatever room is left after that
       page's own toolbar/banner cards, however many there are, with no fixed-height guess to
       get wrong - only .app-chat-messages inside it needs to scroll for a long conversation. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ---------- hero ---------- */
.app-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    /* Without this, this card's own overflow:hidden (below, for clipping ::before's accent
       bar to the border radius) gives it an automatic flex minimum size of 0 per the CSS
       sizing spec - since it's a direct child of .app-content's flex column, that makes it
       the one card that flex-shrinks below its own content height instead of just letting
       .app-content scroll, once enough other cards push the column past the viewport. */
    flex-shrink: 0;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: 14px;
    padding: 1.375rem 1.625rem;
    position: relative;
    overflow: hidden;
}
.app-hero::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--app-warning);
}
.app-hero.critical::before { background: var(--app-critical); }
.app-hero.critical .app-hero-count { background: var(--app-critical-wash); }
.app-hero.critical .app-hero-count .app-num,
.app-hero.critical .app-hero-count .app-unit { color: var(--app-critical); }
.app-hero.neutral::before { background: var(--app-line); }
.app-hero.neutral .app-hero-count { background: var(--app-paper); }
.app-hero.neutral .app-hero-count .app-num,
.app-hero.neutral .app-hero-count .app-unit { color: var(--app-muted); }
@media (max-width: 640px) { .app-hero { grid-template-columns: 1fr; text-align: left; } }
.app-hero-count {
    display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
    background: var(--app-warning-wash);
    border-radius: 10px;
    padding: 0.75rem 1.125rem;
    min-width: 5.25rem;
}
.app-hero-count .app-num { font-size: 1.875rem; font-weight: 600; color: var(--app-warning); line-height: 1; }
.app-hero-count .app-unit { font-size: 0.65625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--app-warning); font-weight: 600; }
.app-hero-label { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); font-weight: 700; margin-bottom: 0.25rem; }
.app-hero-title { font-size: 1.125rem; margin-bottom: 0.375rem; }
.app-hero-meta { font-size: 0.78125rem; color: var(--app-muted); display: flex; gap: 0.875rem; flex-wrap: wrap; }
.app-hero-cta {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.5625rem 1rem;
    background: var(--app-ink);
    color: var(--app-paper);
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* ---------- generic card ---------- */
.app-card {
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: 14px;
    padding: 1.25rem 1.375rem;
}
.app-card-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.625rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.app-card-head h2 { font-size: 0.9375rem; }
.app-link {
    font-size: 0.78125rem; font-weight: 600; color: var(--color-accent);
    text-decoration: none; white-space: nowrap;
    background: none; border: none; cursor: pointer; padding: 0;
}

/* ---------- stepper ---------- */
.app-stepper { display: flex; gap: 0; overflow-x: auto; padding-bottom: 0.25rem; }
.app-stepper:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; }
.app-step { flex: 1; min-width: 8rem; display: flex; flex-direction: column; gap: 0.5rem; padding-right: 0.875rem; position: relative; }
.app-step:not(:last-child)::after {
    content: ""; position: absolute; top: 10px; left: 24px; right: -6px; height: 2px;
    background: var(--app-line);
}
.app-step.done:not(:last-child)::after { background: var(--app-success); }
.app-step-dot {
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.6875rem; font-weight: 700;
    border: 2px solid var(--app-line);
    background: var(--app-card);
    color: var(--app-muted);
    z-index: 1;
}
.app-step.done .app-step-dot { background: var(--app-success); border-color: var(--app-success); color: #fff; }
.app-step.active .app-step-dot { border-color: var(--app-warning); color: var(--app-warning); background: var(--app-warning-wash); }
/* Guided Pathways - a step locked behind an incomplete prerequisite (see PathwaysController's
   server-side lock check). Reuses the --app-neutral/-wash pair the "no status yet" chip already
   established, rather than introducing a new color. */
.app-step.locked .app-step-dot { background: var(--app-neutral-wash); border-color: var(--app-neutral); color: var(--app-neutral); }
.app-step.locked .app-step-name { color: var(--app-muted); }
.app-step-name { font-size: 0.78125rem; font-weight: 600; }
.app-step-date { font-size: 0.6875rem; color: var(--app-muted); }

/* ---------- grids ---------- */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: 1.125rem; }
.app-grid-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); gap: 1.125rem; }

/* ---------- chips ---------- */
.app-chip { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.71875rem; font-weight: 600; padding: 0.1875rem 0.5625rem; border-radius: 100px; }
.app-chip.on-track { background: var(--app-success-wash); color: var(--app-success); }
.app-chip.needs-action { background: var(--app-warning-wash); color: var(--app-warning); }
.app-chip.none { background: var(--app-neutral-wash); color: var(--app-neutral); }
.app-chip.overdue { background: var(--app-critical-wash); color: var(--app-critical); }

/* ---------- board cards (drag-and-drop) ---------- */
/* Without this, a mouse-driven drag started on top of a card's own text is captured by the
   browser as a text selection instead of ever reaching SortableJS's pointer-based drag (a
   native HTML5 draggable="true" element gets this suppression for free; a JS-driven "fallback"
   drag like this one does not - it has to be told explicitly). */
.app-board-card {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}
.app-board-card:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.35; }
.sortable-chosen { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); cursor: grabbing; }
.sortable-drag { opacity: 0.92; }

/* ---------- lists ---------- */
.app-list { display: flex; flex-direction: column; }
.app-row {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5625rem 0;
    border-top: 1px solid var(--app-line);
    text-decoration: none;
    color: var(--app-ink);
}
.app-row:first-child { border-top: none; }
.app-row-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--app-paper);
    display: grid; place-items: center;
    flex-shrink: 0;
    color: var(--app-muted);
}
.app-row-icon svg { width: 15px; height: 15px; }
.app-row-title { font-size: 0.8125rem; font-weight: 600; }
.app-row-sub { font-size: 0.71875rem; color: var(--app-muted); }
.app-row-date { margin-left: auto; font-size: 0.6875rem; color: var(--app-muted); flex-shrink: 0; white-space: nowrap; }

.app-cta {
    margin-top: 0.875rem;
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.78125rem; font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    background: none; border: none; cursor: pointer; padding: 0;
}

.app-stat-row { display: flex; gap: 1.125rem; flex-wrap: wrap; }
.app-stat { display: flex; flex-direction: column; gap: 0.125rem; }
.app-stat .app-n { font-size: 1.375rem; font-weight: 600; font-family: "IBM Plex Mono", monospace; }
.app-stat .app-l { font-size: 0.6875rem; color: var(--app-muted); text-transform: uppercase; letter-spacing: .05em; }

.app-empty { font-size: 0.8125rem; color: var(--app-muted); }

.app-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,14,17,.4); z-index: 30; }
.app-shell.nav-open .app-backdrop { display: block; }
@media (min-width: 861px) { .app-backdrop { display: none !important; } }

.app-shell a:focus-visible, .app-shell button:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}

/* ---------- forms inside the app shell ---------- */
.app-shell form.stack { max-width: 40rem; }
.app-shell form.stack label { font-size: 0.78125rem; font-weight: 700; color: var(--app-muted); text-transform: uppercase; letter-spacing: .03em; }
.app-shell form.stack input,
.app-shell form.stack select,
.app-shell form.stack textarea {
    border: 1px solid var(--app-line);
    border-radius: 8px;
    background: var(--app-paper);
    color: var(--app-ink);
    font-family: "Public Sans", var(--font-sans);
}
.app-shell form.stack input:focus-visible,
.app-shell form.stack select:focus-visible,
.app-shell form.stack textarea:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 1px;
}

.app-btn-outline {
    display: inline-flex; align-items: center; gap: 0.4375rem;
    padding: 0.5625rem 1rem;
    border: 1px solid var(--app-line);
    background: var(--app-card);
    color: var(--app-ink);
    border-radius: 8px;
    font-size: 0.8125rem; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.app-btn-outline:hover { border-color: var(--app-muted); }
.app-btn-outline.danger { color: var(--app-critical); border-color: var(--app-critical-wash); }

.app-btn-primary {
    display: inline-flex; align-items: center; gap: 0.4375rem;
    padding: 0.5625rem 1rem;
    background: var(--app-ink);
    color: var(--app-paper);
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.app-btn-primary:disabled { opacity: .6; cursor: default; }

.app-segmented { display: inline-flex; background: var(--app-paper); border: 1px solid var(--app-line); border-radius: 9px; padding: 0.1875rem; gap: 0.125rem; }
.app-segmented a, .app-segmented button, .app-segmented span {
    display: inline-block;
    border: none; background: none; padding: 0.4375rem 0.875rem; border-radius: 7px;
    font-size: 0.78125rem; font-weight: 600; color: var(--app-muted); cursor: pointer; text-decoration: none;
}
.app-segmented a.active, .app-segmented button.active, .app-segmented span.active { background: var(--app-card); color: var(--app-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: default; }

.app-filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.app-filter-chip {
    border: 1px solid var(--app-line); background: var(--app-card); color: var(--app-muted);
    font-size: 0.75rem; font-weight: 600; padding: 0.375rem 0.8125rem; border-radius: 100px; cursor: pointer;
}
.app-filter-chip.active { background: var(--app-ink); border-color: var(--app-ink); color: var(--app-paper); }

.app-info-tile { background: var(--app-paper); border: 1px solid var(--app-line); border-radius: 10px; padding: 0.875rem 1rem; }
.app-info-tile h3 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); font-weight: 700; margin-bottom: 0.375rem; }
.app-info-tile p { font-size: 0.84375rem; line-height: 1.55; }

.app-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.625rem; padding: 2.75rem 1.25rem; }
.app-empty-state .app-icon-wrap {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--app-paper);
    display: grid; place-items: center;
    color: var(--app-muted);
    margin-bottom: 0.25rem;
}
.app-empty-state .app-icon-wrap svg { width: 24px; height: 24px; }
.app-empty-state h3 { font-size: 0.9375rem; }
.app-empty-state p { font-size: 0.8125rem; color: var(--app-muted); max-width: 23.75rem; }

.app-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.25rem; }

/* ---------- account settings rows ---------- */
.app-profile-card { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; }
.app-avatar-lg {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--app-sidebar);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.1875rem; font-weight: 700;
    flex-shrink: 0;
}
.app-profile-name { font-size: 1.0625rem; font-weight: 700; }
.app-profile-email { font-size: 0.8125rem; color: var(--app-muted); overflow-wrap: anywhere; }
.app-profile-meta { margin-left: auto; display: flex; gap: 1.375rem; text-align: right; flex-wrap: wrap; }
@media (max-width: 560px) { .app-profile-meta { margin-left: 0; text-align: left; } }

.app-setting-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 0; border-top: 1px solid var(--app-line); flex-wrap: wrap; }
.app-setting-row:first-child { border-top: none; padding-top: 0.125rem; }
.app-setting-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--app-paper);
    display: grid; place-items: center;
    color: var(--app-muted);
    flex-shrink: 0;
}
.app-setting-icon svg { width: 17px; height: 17px; }
.app-setting-title { font-size: 0.84375rem; font-weight: 600; }
.app-setting-sub { font-size: 0.75rem; color: var(--app-muted); margin-top: 0.0625rem; }
.app-setting-action { margin-left: auto; display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.app-chev { color: var(--app-muted); flex-shrink: 0; }
.app-chev svg { width: 15px; height: 15px; }

/* ---------- chat pane ---------- */
.app-chat-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.app-chat-toolbar .app-about { font-size: 0.75rem; color: var(--color-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.app-chat-toolbar .app-disclaimer { font-size: 0.78125rem; color: var(--app-muted); margin-top: 0.1875rem; }
.app-chat-toolbar-actions { margin-left: auto; display: flex; gap: 0.625rem; flex-wrap: wrap; }

.app-chat-pane {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    /* Fills whatever vertical room .app-content (now the page's own scroll region - see its
       comment) has left after this page's toolbar/banner cards, instead of a fixed height
       guess - the earlier calc(100vh - 260px) assumed a fixed amount of chrome above the pane,
       which undercounted the extra readiness/eligibility-context banners the Eligibility/IPE/
       Accommodations pages stack above it, leaving the input row below the fold on those pages
       even though Chat itself looked fine. flex:1 + min-height:0 self-adjusts regardless of
       how many banners a given page has; only .app-chat-messages below needs to scroll for a
       long conversation. */
    flex: 1;
    min-height: 20rem;
}
.app-chat-messages { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.5rem 1.5rem 0.375rem; overflow-y: auto; flex: 1; min-height: 0; }
.app-msg { display: flex; gap: 0.75rem; max-width: 40rem; }
.app-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.app-msg-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 0.75rem; font-weight: 700;
}
.app-msg.theirs .app-msg-avatar { background: var(--app-sidebar); color: #fff; }
.app-msg.mine .app-msg-avatar { background: var(--app-accent-wash); color: var(--color-accent); }
.app-msg-body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.app-msg-bubble { padding: 0.6875rem 0.875rem; border-radius: 12px; font-size: 0.84375rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.app-msg.theirs .app-msg-bubble { background: var(--app-paper); border: 1px solid var(--app-line); border-top-left-radius: 3px; }
.app-msg.mine .app-msg-bubble { background: var(--color-accent); color: #fff; border-top-right-radius: 3px; }
.app-msg-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.app-msg.mine .app-msg-actions { justify-content: flex-end; }
.app-msg-actions button {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 0.6875rem; color: var(--app-muted); font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: "Public Sans", var(--font-sans);
}
.app-msg-actions button:hover { color: var(--app-ink); }
.app-msg-actions button.flagged { color: var(--color-accent); }

.app-citation-card {
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: 0.5625rem 0.6875rem;
    font-size: 0.75rem;
}
.app-citation-card .app-cite-src {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65625rem; color: var(--app-muted);
    text-transform: uppercase; letter-spacing: .03em;
    margin-bottom: 0.1875rem;
}
.app-citation-card .app-cite-text { color: var(--app-muted); font-style: italic; }
.app-citations { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.125rem; }

.app-chat-input-row { display: flex; gap: 0.625rem; align-items: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--app-line); background: var(--app-card); }
.app-chat-input-row textarea {
    flex: 1; resize: none;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
    font: inherit;
    font-size: 0.84375rem;
    background: var(--app-paper);
    color: var(--app-ink);
    min-height: 2.625rem;
    max-height: 8.75rem;
    font-family: "Public Sans", var(--font-sans);
}
.app-chat-input-row textarea:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 1px; }
.app-chat-input-row .app-btn-primary { height: 2.625rem; }

.dictation-btn.listening { background: var(--app-critical-wash); border-color: var(--app-critical); color: var(--app-critical); }
.dictation-btn.listening svg { animation: dictation-pulse 1.4s ease-in-out infinite; }
@keyframes dictation-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
    .dictation-btn.listening svg { animation: none; }
}

/* Visually hides content while keeping it in the accessibility tree, e.g. an aria-live status
   announcement that shouldn't also take up visible space next to the mic button. Deliberately
   left in px (not converted to rem): this is the standard WCAG "visually hidden" technique,
   which depends on collapsing to an exact near-zero box regardless of text-scale settings. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-chat-typing .app-msg-bubble { display: flex; gap: 0.25rem; align-items: center; padding: 0.875rem 1rem; }
.app-chat-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); opacity: 0.6; }