/* TiberHealth Brand Colors */
:root {
    /* Core brand colors */
    --tiber-primary: #00adbc;
    --tiber-primary-dark: #008a96;
    --tiber-primary-light: #33c4d0;
    --tiber-charcoal: #32373c;
    --tiber-blue-gray: #4b6171;
    --tiber-light-gray: #f8f9fa;
    --tiber-white: #ffffff;
    --tiber-black: #000000;

    /* Gradient colors from Tiber Health */
    --tiber-gradient-start: #00adbc;
    --tiber-gradient-end: #0693e3;
    --tiber-gradient-purple: #9b51e0;

    /* Status colors */
    --status-partial: #f0ad4e;
    --status-sufficient: #6c757d;
    --status-solid: #28a745;

    /* Theme-specific variables (Light Mode - Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f0f4f8 100%);
    --text-primary: #32373c;
    --text-secondary: #4b6171;
    --text-muted: #6c757d;
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --input-border: #dee2e6;
    --input-text: #32373c;
    --accordion-bg: transparent;
    --accordion-active-bg: rgba(0, 173, 188, 0.05);
    /* Logo is white/light - invert to make it dark for light backgrounds */
    --logo-filter: brightness(0) saturate(100%) invert(19%) sepia(10%) saturate(746%) hue-rotate(169deg) brightness(95%) contrast(89%);

    --slate-900: #0f172a;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-200: #e2e8f0;
    --slate-50: #f8fafc;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-50: #f0fdfa;
    --white: #ffffff;

    /* PHSU brand colors */
    --phsu-teal: #00999A;
    --phsu-dark-teal: #024748;
    --phsu-orange: #F7951D;

    /* Typography */
    --font-family-base: 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: Georgia, 'Times New Roman', serif;
}

/* Dark Mode */
/* "Dark mode" is a DIMMED LIGHT theme (data-theme="dim"), NOT a true dark theme: a soft
   whitesmoke background instead of harsh pure white, with the normal dark text and teal
   accents. The teal brand/graphics/icons are designed for light surfaces, so a real dark theme
   fights them. Only the page background is softened; everything else matches light mode, so the
   light-default component styles render correctly. The legacy [data-theme="dark"] component rules
   below are dormant (nothing sets data-theme="dark" anymore) — kept in case true dark is revived
   once the brand assets are redone. */
[data-theme="dim"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #eeeef0;
    --bg-tertiary: #e6e7ea;
    --bg-gradient: linear-gradient(135deg, #f2f3f5 0%, #eeeef0 50%, #f4f5f7 100%);
    --text-primary: #32373c;
    --text-secondary: #4b6171;
    --text-muted: #6c757d;
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --input-border: #dee2e6;
    --input-text: #32373c;
    --accordion-bg: transparent;
    --accordion-active-bg: rgba(0, 173, 188, 0.05);
    /* Logos render on a light background — same dark tint as light mode. */
    --logo-filter: brightness(0) saturate(100%) invert(19%) sepia(10%) saturate(746%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 0;
    font-family: var(--font-family-base);
    color: var(--tiber-charcoal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
}

/* Hide Freshworks help widget on mobile */
@media (max-width: 768px) {
    #freshworks-container,
    #freshworks-frame-wrapper,
    [id^="freshworks"] {
        display: none !important;
    }
}

/* Focus states */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tiber-primary);
}

/* Navigation */
.navbar-mdtutor {
    background: var(--tiber-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-mdtutor .navbar-brand {
    font-weight: 700;
    color: var(--tiber-charcoal);
    font-size: 1.5rem;
}

.navbar-mdtutor .navbar-brand span {
    color: var(--tiber-primary);
}

.navbar-mdtutor .nav-link {
    color: var(--tiber-charcoal);
    font-weight: 500;
    transition: color 0.2s ease;
}

.navbar-mdtutor .nav-link:hover {
    color: var(--tiber-primary);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--tiber-charcoal) 0%, var(--tiber-blue-gray) 100%);
    color: var(--tiber-white);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 173, 188, 0.1) 100%);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.hero-title span {
    color: var(--tiber-primary);
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 600px;
}

/* Buttons */
.btn-tiber-primary {
    background-color: var(--tiber-primary);
    border-color: var(--tiber-primary);
    color: var(--tiber-white);
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-tiber-primary:hover {
    background-color: var(--tiber-primary-dark);
    border-color: var(--tiber-primary-dark);
    color: var(--tiber-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 173, 188, 0.4);
}

.btn-tiber-outline {
    background-color: transparent;
    border: 2px solid var(--tiber-white);
    color: var(--tiber-white);
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-tiber-outline:hover {
    background-color: var(--tiber-white);
    color: var(--tiber-charcoal);
}

/* Features Section */
.features-section {
    padding: 80px 0;
    background-color: var(--tiber-white);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--tiber-charcoal);
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--tiber-blue-gray);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--tiber-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--tiber-primary) 0%, var(--tiber-primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.feature-icon svg {
    width: 30px;
    height: 30px;
    color: var(--tiber-white);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tiber-charcoal);
    margin-bottom: 0.75rem;
}

.feature-description {
    color: var(--tiber-blue-gray);
    line-height: 1.6;
}

/* Stats Section */
.stats-section {
    padding: 60px 0;
    background: var(--tiber-light-gray);
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--tiber-primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--tiber-blue-gray);
    font-weight: 500;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--tiber-primary) 0%, var(--tiber-primary-dark) 100%);
    color: var(--tiber-white);
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* Topic Input Section */
.topic-section {
    padding: 60px 0;
    background: var(--tiber-white);
}

.topic-input-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.topic-input {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.topic-input:focus {
    border-color: var(--tiber-primary);
    box-shadow: 0 0 0 4px rgba(0, 173, 188, 0.1);
}

/* Recent Conversations */
.conversations-section {
    padding: 40px 0 80px;
    background: var(--tiber-light-gray);
}

.conversation-item {
    background: var(--tiber-white);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--tiber-charcoal);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-item:hover {
    background: var(--tiber-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
    color: var(--tiber-charcoal);
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(0, 173, 188, 0.1);
    color: var(--tiber-primary);
}

.status-badge.ended {
    background: rgba(108, 117, 125, 0.1);
    color: var(--tiber-blue-gray);
}

/* Footer */
.footer-mdtutor {
    background: var(--tiber-charcoal);
    color: var(--tiber-white);
    padding: 40px 0 20px;
}

.footer-brand {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-brand span {
    color: var(--tiber-primary);
}

.footer-text {
    opacity: 0.7;
    font-size: 0.9rem;
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--tiber-primary);
}

/* Alerts */
.alert-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
    border-radius: 12px;
}

/* Utilities */
.text-tiber-primary {
    color: var(--tiber-primary) !important;
}

.text-tutor {
    color: var(--tiber-charcoal) !important;
}

[data-theme="dark"] .text-tutor {
    color: var(--tiber-white) !important;
}

.bg-tiber-primary {
    background-color: var(--tiber-primary) !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ============================
   Theme Toggle & Dark Mode
   ============================ */

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--card-shadow);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 173, 188, 0.3);
}

.theme-toggle svg,
.theme-toggle i {
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: var(--tiber-primary);
    transition: transform 0.3s ease;
}

.theme-toggle:hover svg,
.theme-toggle:hover i {
    transform: rotate(15deg);
}

/* Theme Toggle in Header (Conversation page) */
.theme-toggle-header {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle-header:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(0, 173, 188, 0.3);
}

.theme-toggle-header i {
    font-size: 16px;
    color: var(--tiber-primary);
    transition: transform 0.3s ease;
}

.theme-toggle-header:hover i {
    transform: rotate(15deg);
}

/* Sun/Moon icon visibility */
.theme-toggle .sun-icon,
.theme-toggle-header .sun-icon {
    display: none;
}

.theme-toggle .moon-icon,
.theme-toggle-header .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon,
[data-theme="dark"] .theme-toggle-header .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon,
[data-theme="dark"] .theme-toggle-header .moon-icon {
    display: none;
}

/* Smooth theme transitions */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.tutor-container,
.tutor-form,
.card,
.accordion,
.form-control,
.form-select,
.btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark mode specific overrides for Bootstrap components */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--tiber-primary);
    color: var(--input-text);
    box-shadow: 0 0 0 0.25rem rgba(0, 173, 188, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .form-text {
    color: var(--text-muted);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--tiber-primary);
    border-color: var(--tiber-primary);
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--accordion-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--accordion-active-bg);
    color: var(--tiber-primary);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--card-bg);
}

[data-theme="dark"] .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

/* ============================
   Conversation Page - Transcript Panel
   ============================ */

.conversation-header {
    background: var(--bg-secondary);
    min-height: 60px;
    position: relative;
    z-index: 100;
    flex-shrink: 0;
}

/* Header Logo (inline with flex layout) */
.header-logo img {
    height: 32px;
    width: auto;
    filter: var(--logo-filter);
    transition: filter 0.3s ease;
}

/* SignalR connection status indicator */
.signalr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    user-select: none;
}

.signalr-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.signalr-status--connected .signalr-status-dot {
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}
.signalr-status--connected {
    color: #22c55e;
}

.signalr-status--connecting .signalr-status-dot,
.signalr-status--reconnecting .signalr-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
    animation: signalr-pulse 1.2s ease-in-out infinite;
}
.signalr-status--connecting,
.signalr-status--reconnecting {
    color: #f59e0b;
}

.signalr-status--disconnected .signalr-status-dot {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}
.signalr-status--disconnected {
    color: #ef4444;
}

@keyframes signalr-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Status icon inside the SignalR pill — replaces the prior text label.
 * Color is inherited from the parent's state class so it tracks the dot. */
.signalr-status-icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* PubMed personal-key status pill — sibling of .signalr-status, same shape.
 * Rendered ONLY when the JWT carries a PubMed.ApiKey claim (positive
 * indicator). State is purely informational (set in the My Settings popup
 * on /select), so there's no JS-driven update — the badge re-renders on
 * next sign-in. */
.pubmed-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    line-height: 1;
    user-select: none;
    cursor: help;
    background: rgba(22, 163, 74, 0.15);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.4);
}

/* Move theme toggle below conversation header on conversation page */
body:has(.conversation-header) .theme-toggle {
    top: calc(60px + 1rem);
}

.conversation-content {
    overflow: hidden;
    position: relative;
}

.video-panel {
    min-width: 0;
    background: var(--bg-secondary);
}

/* Image reference overlay (SignalR ReceiveImageReference). z-index has to
   sit above every floating page element — quiz FAB (210), transcript bars
   (1050-1100), modal-grade UI (1200) — so the close button isn't occluded. */
.image-reference-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    animation: imageOverlayFadeIn 0.4s ease-out;
}

.image-reference-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease;
}

/* Hidden behind the loading placeholder until the bytes paint (see
   _renderImageOverlayContent); the placeholder is removed on the load event. */
.image-reference-img.is-loading {
    opacity: 0;
}

/* Publisher attribution under the enlarged figure. Absolutely positioned as a
   translucent caption bar at the bottom so it doesn't disturb the centered
   image. Real textbook figures only — generated images send no credit. */
.image-reference-credit {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 88%;
    text-align: center;
    color: #e5e7eb;
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 12px;
    border-radius: 6px;
}

.image-reference-credit-link {
    color: inherit;
    text-decoration: none;
}

.image-reference-credit-link:hover {
    text-decoration: underline;
}

/* "Open in new tab" on the enlarged view — generated (non-copyright) images only;
   textbook figures show their citation instead. Top-LEFT so it clears the close
   button (top-right). z-index above the image; click is stopped from dismissing. */
.image-reference-newtab {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 14px;
    border-radius: 20px;
    transition: background 0.15s ease;
}

.image-reference-newtab:hover {
    background: rgba(0, 0, 0, 0.85);
    text-decoration: underline;
}

@keyframes imageOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Pending placeholder shown inside .image-reference-overlay while we wait
   for the generated image bytes. Light gray panel with a dark gray bar that
   sweeps top-to-bottom like an old CRT scan line. */
.image-reference-placeholder {
    width: 320px;
    height: 320px;
    background: #d6d6d6;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.image-reference-placeholder-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    top: 0;
    background: linear-gradient(to bottom, transparent, #555 50%, transparent);
    animation: imageReferencePlaceholderScan 1.5s linear infinite;
    will-change: transform;
}

@keyframes imageReferencePlaceholderScan {
    from { transform: translateY(-8px); }
    to   { transform: translateY(320px); }
}

/* Progressive partial frame: the half-drawn image with the scan bar still sweeping
   across it, so a 45-second render visibly resolves rather than sitting behind an
   unchanging placeholder. The avatar used to drop these frames entirely; the chatbot
   always showed them. Sized like the final image (not the fixed 320px placeholder box)
   so the swap to the finished picture doesn't jump. */
.image-reference-partial {
    position: relative;
    display: inline-block;
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    line-height: 0;
}

.image-reference-partial img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Animates `top` rather than transform: a percentage transform resolves against the
   bar's own 10px height, while a percentage `top` resolves against the frame — which
   is the whole point, since the frame's height varies with the image's aspect ratio. */
.image-reference-partial-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.85) 50%, transparent);
    animation: imageReferencePartialScan 1.5s linear infinite;
    pointer-events: none;
}

@keyframes imageReferencePartialScan {
    from { top: -10px; }
    to   { top: 100%; }
}

.image-reference-failed {
    padding: 18px 26px;
    background: #fff5f5;
    color: #b91c1c;
    border: 1px dashed #f5c2c2;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Close (×) button on the image overlay. Top-right of the backdrop. */
.image-reference-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 11;
    transition: background 0.15s ease;
}

.image-reference-close:hover {
    background: rgba(0, 0, 0, 0.85);
}

/* ─── Avatar PIP mode ────────────────────────────────────────────────────
   When an image overlay opens, the daily-container STAYS full-size
   (so the .image-reference-overlay still fills the left video panel
   without overflowing onto the transcript on the right). The Daily.co
   <video> element INSIDE it shrinks to a small bottom-right tile with a
   very high z-index so it floats over the image. Toggled by
   UiController._enterAvatarPipMode / _exitAvatarPipMode tied to
   showImageOverlay / dismissImageOverlay.

   Transitions sit on the base video selector so both shrink and restore
   animate (a transition only on the active state would lose the
   animation on class removal). */
#daily-container > video {
    transition: width 0.4s ease,
                height 0.4s ease,
                top 0.4s ease,
                left 0.4s ease,
                bottom 0.4s ease,
                right 0.4s ease,
                border-radius 0.4s ease,
                box-shadow 0.4s ease;
}

#daily-container.avatar-pip > video {
    position: absolute !important;
    z-index: 1400;
    width: 200px !important;
    height: 158px !important;
    top: auto !important;
    left: auto !important;
    bottom: 10px;
    right: 10px;
    border-radius: 7px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    object-fit: cover;
}

/* Hidden state — video display:none, the show-pill takes its place. */
#daily-container.avatar-pip.avatar-hidden > video {
    display: none;
}

/* Hide (×) button — overlays the top-right corner of the shrunken video
   tile. Positioned relative to the daily-container at coordinates that
   land on the tile (tile is 300×200 at bottom:10 right:10, so the
   button sits at bottom: 10+200-28+2 ≈ 184px, right: 10+4 ≈ 14px). */
/* Single toggle button — × (hide) when the PIP video is visible, morphs
   into a "Show Dr. Olivia" pill at the bottom-right when avatar-hidden
   is on. Same DOM element, animated transitions on size/position. */
#daily-container.avatar-pip .avatar-pip-hide {
    position: absolute;
    bottom: 140px;
    right: 14px;
    z-index: 1401;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: bottom 0.3s ease,
                right 0.3s ease,
                width 0.3s ease,
                height 0.3s ease,
                border-radius 0.3s ease,
                padding 0.3s ease,
                font-size 0.3s ease,
                background 0.15s ease;
}

#daily-container.avatar-pip .avatar-pip-hide:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* When the avatar is hidden, the same button morphs into a wider pill at
   the bottom-right where the video used to be. Restores on click. */
#daily-container.avatar-pip.avatar-hidden .avatar-pip-hide {
    bottom: 10px;
    right: 10px;
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.85);
}

#daily-container.avatar-pip.avatar-hidden .avatar-pip-hide:hover {
    background: #000;
}

/* Inline image thumbnails inside transcript replica entries. Click to
   re-open the full overlay. */
.transcript-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.transcript-image {
    width: 80px;
    height: 80px;
    padding: 0;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    background: #2a2a2a;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.transcript-image:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.transcript-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.transcript-image--pending {
    background: #d6d6d6;
    cursor: default;
}

/* Bytes still downloading after the URL arrived — gray box + scan until the
   img's onload fires, so a slow fetch shows a loading state, never a blank tile.
   The tile is a fixed 80×80 so it can't collapse; the img is hidden until loaded. */
.transcript-image--loading {
    background: #d6d6d6;
}

.transcript-image--loading img {
    opacity: 0;
}

.transcript-image-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(to bottom, transparent, #555 50%, transparent);
    animation: transcriptImageScan 1.5s linear infinite;
    will-change: transform;
}

@keyframes transcriptImageScan {
    from { transform: translateY(-4px); }
    to   { transform: translateY(80px); }
}

.transcript-image--failed {
    background: #fff5f5;
    color: #b91c1c;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transcript-image-failed-mark {
    font-size: 28px;
    line-height: 1;
}

/* Transcript Panel - Base Styles (Desktop >1200px) */
.transcript-panel {
    width: 380px;
    min-width: 380px;
    max-width: 400px;
    background: var(--card-bg);
    border-left: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.transcript-panel.collapsed {
    width: 0;
    min-width: 0;
    border-left: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.transcript-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    flex-shrink: 0;
    gap: 0.5rem;
}

.transcript-header h6 {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transcript-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.transcript-actions .btn {
    padding: 0.25rem 0.5rem;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transcript-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Smooth scrolling */
    scroll-behavior: smooth;
}

.transcript-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 2rem;
}

/* Transcript Entry */
.transcript-entry {
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    border-left: 3px solid transparent;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0.5rem;
}

.transcript-entry.transcript-replica {
    border-left-color: var(--tiber-primary);
    background: rgba(0, 173, 188, 0.05);
    margin-right: 2rem;
}

.transcript-entry.transcript-user {
    border-left-color: var(--tiber-blue-gray);
    background: var(--bg-tertiary);
    margin-left: 2rem;
}

.transcript-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.transcript-speaker {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.transcript-entry.transcript-replica .transcript-speaker {
    color: var(--tiber-primary);
}

.transcript-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

.transcript-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Toggle button styling (collapse button in panel header) */
#toggle-transcript {
    transition: all 0.3s ease;
    flex-shrink: 0;
}

#toggle-transcript:hover {
    background-color: rgba(0, 173, 188, 0.1);
    border-color: var(--tiber-primary);
    color: var(--tiber-primary);
}

#toggle-transcript svg {
    transition: transform 0.3s ease;
}

/* Floating expand button (visible when panel is collapsed) */
.expand-transcript-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 88px;
    background: var(--tiber-primary);
    border: none;
    border-radius: 8px 0 0 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    /* Above the image overlay (1300) so a student who closed the transcript
       to get a bigger image view can reopen it without dismissing the image. */
    z-index: 1310;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, width 0.2s ease, background-color 0.2s ease;
}

.expand-transcript-btn.visible {
    opacity: 1;
    pointer-events: all;
}

.expand-transcript-btn:hover {
    width: 50px;
    background-color: var(--tiber-primary-dark);
}

.expand-transcript-btn svg {
    flex-shrink: 0;
}

/* Old hover style - keeping for reference */
#toggle-transcript.btn-outline-secondary:hover {
    background-color: rgba(0, 173, 188, 0.1);
    border-color: var(--tiber-primary);
}

/* Status indicator */
#status-indicator {
    text-transform: capitalize;
}

#status-indicator.status-active {
    color: var(--tiber-primary);
}

#status-indicator.status-ended {
    color: var(--text-muted);
}

/* ============================
   RESPONSIVE BREAKPOINTS
   ============================ */

/* Laptop: 992px - 1200px - Reduced panel width */
@media (max-width: 1200px) {
    .transcript-panel {
        width: 320px;
        min-width: 320px;
        max-width: 320px;
    }

    .transcript-header {
        padding: 0.875rem;
    }

    .transcript-content {
        padding: 0.875rem;
    }

    .transcript-text {
        font-size: 0.875rem;
    }
}

/* Tablet: 768px - 992px - Smaller panel, collapsible by default */
@media (max-width: 992px) {
    .transcript-panel {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
    }

    .transcript-header {
        padding: 0.75rem;
    }

    .transcript-header h6 {
        font-size: 0.95rem;
    }

    .transcript-content {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .transcript-entry {
        padding: 0.625rem;
    }

    .transcript-text {
        font-size: 0.85rem;
    }

    /* On tablet, panel can be collapsed to save space */
    .transcript-panel.collapsed {
        width: 0;
        min-width: 0;
    }
}

/* Mobile: <768px - Slide-out overlay with backdrop */
@media (max-width: 768px) {
    .transcript-panel {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        width: 85%;
        min-width: 85%;
        max-width: 400px;
        z-index: 1000;
        transform: translateX(100%);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
        border-left: none;
    }

    .transcript-panel:not(.collapsed) {
        transform: translateX(0);
        opacity: 1;
        pointer-events: all;
    }

    .transcript-panel.collapsed {
        transform: translateX(100%);
        opacity: 0;
    }

    /* Backdrop overlay when panel is open on mobile */
    .transcript-panel:not(.collapsed)::before {
        content: '';
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Adjust conversation content for mobile overlay */
    .conversation-content {
        position: relative;
    }

    .video-panel {
        width: 100%;
    }

    /* Make header more compact on mobile */
    .conversation-header {
        padding: 0.75rem 1rem;
    }

    .conversation-header h4 {
        font-size: 1.1rem;
    }

    .conversation-header .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Adjust transcript for mobile */
    .transcript-header {
        padding: 0.875rem;
    }

    .transcript-content {
        padding: 0.875rem;
    }
}

/* Extra Small Mobile: <480px - Even more compact */
@media (max-width: 480px) {
    .transcript-panel {
        width: 90%;
        min-width: 90%;
    }

    .transcript-header h6 {
        font-size: 0.9rem;
    }

    .transcript-header h6 svg {
        width: 14px;
        height: 14px;
    }

    .transcript-actions .btn {
        padding: 0.25rem 0.4rem;
        min-width: 28px;
    }

    .transcript-actions .btn svg {
        width: 12px;
        height: 12px;
    }

    .transcript-entry {
        padding: 0.5rem;
    }

    .transcript-speaker {
        font-size: 0.8rem;
    }

    .transcript-time {
        font-size: 0.7rem;
    }

    .transcript-text {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Hide "Transcript" text on very small screens */
    #toggle-transcript .d-none.d-md-inline {
        display: none !important;
    }
}

/* Dark mode adjustments for transcript */
[data-theme="dark"] .transcript-entry.transcript-replica {
    background: rgba(0, 173, 188, 0.1);
}

[data-theme="dark"] .transcript-entry.transcript-user {
    background: var(--bg-tertiary);
}

/* Scrollbar styling for transcript */
.transcript-content::-webkit-scrollbar {
    width: 6px;
}

.transcript-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.transcript-content::-webkit-scrollbar-thumb {
    background: var(--tiber-primary);
    border-radius: 3px;
}

.transcript-content::-webkit-scrollbar-thumb:hover {
    background: var(--tiber-primary-dark);
}

/* ============================
   Mode Selection (Index Page)
   ============================ */

.mode-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.mode-option {
    position: relative;
}

.mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.mode-option label {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 2px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.mode-option label:hover {
    border-color: var(--tiber-primary-light);
    background: var(--bg-secondary);
}

.mode-option input[type="radio"]:checked + label {
    border-color: var(--tiber-primary);
    background: rgba(0, 173, 188, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 173, 188, 0.15);
}

.mode-option .mode-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.mode-option .mode-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.mode-option .mode-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Responsive mode selection */
@media (max-width: 576px) {
    .mode-selection {
        grid-template-columns: 1fr;
    }

    .mode-option label {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
        padding: 0.875rem;
    }

    .mode-option .mode-icon {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .mode-option .mode-info {
        flex: 1;
    }
}

/* Disabled mode option (at capacity) */
.mode-option.mode-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.mode-option.mode-disabled label {
    cursor: not-allowed;
    border-color: var(--card-border);
    background: var(--card-bg);
    box-shadow: none;
}

/* Stream status message (below Start button) */
.stream-message {
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.4;
    min-height: 1.4em;
    margin-top: 0.75rem;
}

.stream-message--info {
    color: var(--text-muted);
}

.stream-message--full {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #664d03;
    text-align: left;
}

.stream-message--full i {
    flex-shrink: 0;
    font-size: 1rem;
}

/* ============================
   Mode Badge (Conversation Header)
   ============================ */

.mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.75rem;
    vertical-align: middle;
}

.mode-badge.mode-video {
    background: rgba(0, 173, 188, 0.15);
    color: var(--tiber-primary);
}

.mode-badge.mode-audioonly {
    background: rgba(147, 51, 234, 0.15);
    color: #9333ea;
}

.mode-badge.mode-textavatar {
    background: rgba(234, 88, 12, 0.15);
    color: #ea580c;
}

.mode-badge.mode-puretext {
    background: rgba(22, 163, 74, 0.15);
    color: #16a34a;
}

/* ============================
   Faculty Mode pill
   ----------------------------
   Shown in the page header on every surface (Select, Avatar video,
   Audio-only, and the Angular text chatbot) when the current session is
   operating in Faculty mode. Students see nothing — the default Socratic
   experience carries no pill.
   ============================ */

.faculty-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(234, 88, 12, 0.15);
    color: #ea580c;
    border: 1px solid rgba(234, 88, 12, 0.35);
    user-select: none;
    white-space: nowrap;
}

.faculty-mode-pill i {
    font-size: 0.75rem;
}

/* ============================
   Impersonation Pill (Act-As override active)

   Shown alongside the Faculty pill on every client surface when the
   signed-in JWT carries an OriginalCanvasUserDimId claim. The admin (real)
   account is operating as another user; everything chat-side reflects the
   impersonated identity but admin audit logs still attribute the action to
   the real admin. Red/maroon palette so the screen-share viewer immediately
   sees they're not looking at a real student session.
   ============================ */

.impersonation-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(185, 28, 28, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.4);
    user-select: none;
    white-space: nowrap;
}

.impersonation-pill i {
    font-size: 0.75rem;
}

/* Below 1400px the Select-page header runs out of room and these pills wrap
   onto a second row. Collapse them to icon-only — native title= tooltips
   already explain each one, so the affordance is preserved. */
@media (max-width: 1399.98px) {
    .faculty-mode-pill,
    .impersonation-pill {
        padding: 0.3rem 0.45rem;
        gap: 0;
    }

    .faculty-mode-pill > span,
    .impersonation-pill > span {
        display: none;
    }
}

/* ============================
   Input Mode Toggle (Video/TextAvatar)
   ============================ */

.input-mode-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-radius: 20px;
    padding: 3px;
    margin-left: 1rem;
    gap: 2px;
}

.input-mode-toggle .toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.input-mode-toggle .toggle-btn:hover:not(.active) {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.input-mode-toggle .toggle-btn.active {
    background: var(--tiber-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 173, 188, 0.3);
}

.input-mode-toggle .toggle-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Text panel show/hide transition for toggle */
.text-input-panel.hidden {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    pointer-events: none;
}

/* Responsive adjustments for toggle */
@media (max-width: 768px) {
    .input-mode-toggle {
        margin-left: 0.5rem;
    }

    .input-mode-toggle .toggle-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }

    .input-mode-toggle .toggle-btn span {
        display: none; /* Hide text on mobile, show only icons */
    }

    .input-mode-toggle .toggle-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .input-mode-toggle {
        padding: 2px;
    }

    .input-mode-toggle .toggle-btn {
        padding: 0.25rem 0.4rem;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .input-mode-toggle {
    background: var(--bg-secondary);
}

[data-theme="dark"] .input-mode-toggle .toggle-btn.active {
    background: var(--tiber-primary-dark);
}

/* ============================
   Pure Text Chat Mode
   ============================ */

.chat-container {
    background: var(--bg-primary);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.chat-messages {
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

.chat-welcome-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.chat-welcome h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Chat Message */
.chat-message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    animation: slideIn 0.2s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.chat-user {
    margin-left: auto;
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.chat-message.chat-assistant .chat-avatar {
    background: rgba(0, 173, 188, 0.15);
}

.chat-content {
    flex: 1;
    min-width: 0;
}

.chat-sender {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.chat-message.chat-user .chat-sender {
    text-align: right;
}

.chat-text {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    word-wrap: break-word;
}

.chat-message.chat-assistant .chat-text {
    background: rgba(0, 173, 188, 0.08);
    border: 1px solid rgba(0, 173, 188, 0.15);
}

.chat-message.chat-user .chat-text {
    background: var(--tiber-primary);
    color: white;
}

/* Streaming indicator */
.chat-message.streaming .chat-text::after {
    content: '▊';
    animation: blink 0.8s infinite;
    color: var(--tiber-primary);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Chat Input Area */
.chat-input-area {
    padding: 1rem 1.5rem 1.5rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
}

.chat-input-area .input-group {
    background: var(--card-bg);
    border-radius: 12px;
    border: 2px solid var(--card-border);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.chat-input-area .input-group:focus-within {
    border-color: var(--tiber-primary);
}

.chat-input-area textarea {
    border: none;
    resize: none;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    line-height: 1.4;
    background: transparent;
    color: var(--text-primary);
    max-height: 150px;
}

.chat-input-area textarea:focus {
    box-shadow: none;
    outline: none;
}

.chat-input-area textarea::placeholder {
    color: var(--text-muted);
}

.chat-input-area .btn {
    border-radius: 0;
    padding: 0.875rem 1.25rem;
    align-self: flex-end;
}

/* ============================
   TextAvatar Text Input Panel
   ============================ */

.text-input-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, var(--bg-primary) 30%);
    z-index: 50;
}

.text-input-panel .input-group {
    max-width: 600px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 25px;
    border: 2px solid var(--card-border);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.text-input-panel .input-group:focus-within {
    border-color: var(--tiber-primary);
    box-shadow: 0 4px 25px rgba(0, 173, 188, 0.2);
}

.text-input-panel input {
    border: none;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    background: transparent;
    color: var(--text-primary);
}

.text-input-panel input:focus {
    box-shadow: none;
    outline: none;
}

.text-input-panel input::placeholder {
    color: var(--text-muted);
}

.text-input-panel .btn {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjust video panel when text input is present */
.video-panel.with-text-input {
    padding-bottom: 80px;
}

/* ============================
   Dark Mode Adjustments for Chat
   ============================ */

[data-theme="dark"] .chat-message.chat-assistant .chat-text {
    background: rgba(0, 173, 188, 0.12);
    border-color: rgba(0, 173, 188, 0.2);
}

[data-theme="dark"] .chat-message.chat-user .chat-text {
    background: var(--tiber-primary-dark);
}

[data-theme="dark"] .mode-badge.mode-audioonly {
    background: rgba(147, 51, 234, 0.25);
}

[data-theme="dark"] .mode-badge.mode-textavatar {
    background: rgba(234, 88, 12, 0.25);
}

[data-theme="dark"] .mode-badge.mode-puretext {
    background: rgba(22, 163, 74, 0.25);
}

/* ============================
   Responsive Chat Adjustments
   ============================ */

@media (max-width: 768px) {
    .chat-messages {
        padding: 1rem;
    }

    .chat-message {
        max-width: 95%;
    }

    .chat-avatar {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .chat-text {
        padding: 0.625rem 0.875rem;
        font-size: 0.9rem;
    }

    .chat-input-area {
        padding: 0.75rem 1rem 1rem;
    }

    .text-input-panel {
        padding: 0.75rem;
    }

    .text-input-panel .input-group {
        border-radius: 20px;
    }

    .mode-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .chat-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .chat-text {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .chat-sender {
        font-size: 0.75rem;
    }
}

/* ============================
   Interrupt Button (Header)
   ============================ */

.btn-interrupt {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;

    background: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;

    opacity: 0.5;
    cursor: not-allowed;

    transition: all 0.2s ease;
}

.btn-interrupt:disabled {
    opacity: 0.7;
    background: #6c757d;
    border: 1px solid #5a6268;
}

.btn-interrupt.active {
    opacity: 1;
    cursor: pointer;
    background: #dc3545;
    animation: pulse-interrupt 1.5s ease-in-out infinite;
}

.btn-interrupt.active:hover {
    background: #c82333;
    transform: scale(1.02);
}

.btn-interrupt.active:active {
    transform: scale(0.98);
}

.btn-interrupt.interrupted {
    animation: flash-interrupt 0.4s ease;
}

.btn-interrupt svg {
    flex-shrink: 0;
}

@keyframes pulse-interrupt {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2);
    }
}

@keyframes flash-interrupt {
    0%, 100% {
        background: #dc3545;
    }
    50% {
        background: #fff;
        color: #dc3545;
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .btn-interrupt {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .btn-interrupt span {
        display: none;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .btn-interrupt.active {
        animation: none;
    }

    .btn-interrupt.interrupted {
        animation: none;
    }
}

/* ============================
   FontAwesome Icon Sizing
   ============================ */

/* Mode Selection Icons (Index.cshtml) */
.mode-icon i {
    font-size: 20px;
    line-height: 1;
}

/* Input Mode Toggle Icons */
.input-mode-toggle .toggle-btn i {
    font-size: 14px;
    line-height: 1;
}

/* Interrupt Button Icon */
.btn-interrupt i {
    font-size: 14px;
}

/* Send Button Icons */
.chat-input-area .btn i,
#send-btn i {
    font-size: 18px;
}

#send-text-btn i {
    font-size: 16px;
}

/* Transcript Panel Icons */
.expand-transcript-btn i {
    font-size: 20px;
}

#toggle-transcript i {
    font-size: 14px;
}

.transcript-header h6 i {
    font-size: 16px;
}

.transcript-actions .btn i {
    font-size: 14px;
}

/* Empty State Icon */
.transcript-empty i {
    font-size: 32px;
    display: block;
}

/* ========================================
   Mic Status Indicator
   ======================================== */
.mic-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.mic-indicator.mic-active {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    animation: pulse-mic 2s infinite;
}

.mic-indicator.mic-muted {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    animation: none;
}

@keyframes pulse-mic {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* ========================================
   Muted Window Glow Border
   ======================================== */
.mic-muted-glow {
    box-shadow: inset 0 0 0 3px rgba(239, 68, 68, 0.7),
                inset 0 0 24px rgba(239, 68, 68, 0.15);
    transition: box-shadow 0.4s ease;
}

.mic-muted-glow::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    border: 3px solid rgba(239, 68, 68, 0.7);
    box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.2),
                0 0 30px rgba(239, 68, 68, 0.15);
    animation: mute-glow-pulse 2s ease-in-out infinite;
}

@keyframes mute-glow-pulse {
    0%, 100% { border-color: rgba(239, 68, 68, 0.7); box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.2), 0 0 30px rgba(239, 68, 68, 0.15); }
    50% { border-color: rgba(239, 68, 68, 0.4); box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.1), 0 0 15px rgba(239, 68, 68, 0.08); }
}



.ribbon-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 48px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    color: #555;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ribbon-btn img {
    width: 20px;
    height: 20px;
}

.ribbon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

.ribbon-btn:active {
    background: rgba(0, 0, 0, 0.1);
}

.ribbon-btn.active {
    background: rgba(74, 158, 255, 0.12);
    border-color: rgba(74, 158, 255, 0.3);
    color: #4a9eff;
}

.ribbon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ribbon-btn-group {
    display: inline-flex;
    gap: 2px;
    padding: 2px 4px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: 4px;
}

.ribbon-btn-group:last-child {
    border-right: none;
    margin-right: 0;
}

.powered-by-footer {
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: var(--slate-500);
    animation: fadeDown 0.6s ease-out 0.4s both;
}

.tutor-ai-tiber {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    color: var(--tiber-charcoal);
    font-size: 1.5rem;
    margin-right: 0.5rem;
    margin-left: 0.25rem;
}

/* Brand rule: the "AI" in the TiberhealthAI mark is always teal #00999A (--phsu-teal). */
.tutor-ai-tiber > span {
    color: var(--phsu-teal);
    font-weight: 700;
}

/* ============================================================================
   Source materials overlay (avatar) — pushed via SignalR ReceiveMaterials at
   end-of-stream. Per-message link sits in the transcript entry header; the
   bottom button is rendered into the transcript panel by UiController.
   ============================================================================ */

.transcript-entry .transcript-materials-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    background: rgba(0, 153, 154, 0.12);
    color: #024748;
    border: 1px solid rgba(0, 153, 154, 0.35);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.transcript-entry .transcript-materials-link:hover {
    background: #00999A;
    color: #fff;
    border-color: #00999A;
}

.transcript-entry .transcript-materials-link i {
    font-size: 10px;
}

[data-theme="dark"] .transcript-entry .transcript-materials-link {
    background: rgba(0, 153, 154, 0.18);
    color: #b5e3e3;
    border-color: rgba(0, 153, 154, 0.55);
}

[data-theme="dark"] .transcript-entry .transcript-materials-link:hover {
    background: #00999A;
    color: #fff;
}

/* ============================================================================
   Per-response thumbs up/down rating (avatar transcript) — sits in the entry
   header next to the materials link. Rendered for every Olivia-spoken
   response once the server has pushed the ResponseId. Click submits via
   TutorHub.SubmitRating → ChatRequest.Rating (0=down, 1=up, null=cleared).
   ============================================================================ */

.transcript-entry .transcript-rating {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
}

.transcript-entry .transcript-rating-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary, #6b7d7d);
    border: 1px solid rgba(0, 153, 154, 0.35);
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.transcript-entry .transcript-rating-btn:hover {
    background: rgba(0, 153, 154, 0.18);
    color: #024748;
    border-color: #00999A;
}

.transcript-entry .transcript-rating-btn--active {
    background: #00999A;
    color: #fff;
    border-color: #00999A;
    transform: scale(1.05);
}

.transcript-entry .transcript-rating-btn--active:hover {
    background: #024748;
    border-color: #024748;
    color: #fff;
}

[data-theme="dark"] .transcript-entry .transcript-rating-btn {
    color: #b5e3e3;
    border-color: rgba(0, 153, 154, 0.55);
}

[data-theme="dark"] .transcript-entry .transcript-rating-btn:hover {
    background: rgba(0, 153, 154, 0.25);
    color: #fff;
}

[data-theme="dark"] .transcript-entry .transcript-rating-btn--active,
[data-theme="dark"] .transcript-entry .transcript-rating-btn--active:hover {
    background: #00999A;
    color: #fff;
    border-color: #00999A;
}

/* Thumbs-down: warning palette so it reads as "bad" instead of "more teal". */
.transcript-entry .transcript-rating-btn--down:hover {
    background: rgba(192, 57, 43, 0.18);
    color: #8b2918;
    border-color: #c0392b;
}

.transcript-entry .transcript-rating-btn--down.transcript-rating-btn--active,
.transcript-entry .transcript-rating-btn--down.transcript-rating-btn--active:hover {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

[data-theme="dark"] .transcript-entry .transcript-rating-btn--down:hover {
    background: rgba(216, 75, 75, 0.28);
    color: #ffb3a8;
    border-color: #d9534f;
}

[data-theme="dark"] .transcript-entry .transcript-rating-btn--down.transcript-rating-btn--active,
[data-theme="dark"] .transcript-entry .transcript-rating-btn--down.transcript-rating-btn--active:hover {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

.all-materials-bar {
    padding: 10px 16px 14px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    border-top: 1px solid var(--card-border);
    background: var(--bg-secondary);
}

.all-materials-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #024748 0%, #00999A 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(2, 71, 72, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}

.all-materials-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(2, 71, 72, 0.35);
}

.all-materials-btn i {
    font-size: 14px;
}

/* ── Guided assignment progress panel ────────────────────────────────────────
   Injected into .transcript-panel by RubricPanel.js, pinned between the header and
   the scrolling messages. Inline rather than an overlay: unlike the quiz and image
   overlays this is persistent reference the student glances at while working, not
   something they dismiss. Present only in guided assignments — open tutoring never
   receives ReceiveRubricProgress, so the element is never created.

   Class names mirror the chatbot's rubric-progress component so the two surfaces stay
   easy to keep in step. No dark-theme block: this surface's "dark" mode is the dimmed
   light theme, which reuses the same tokens. */
.rubric-panel {
    flex-shrink: 0;
    padding: 0.6rem 1rem 0.75rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--bg-secondary);
}

.rubric-panel--complete {
    border-bottom-color: var(--phsu-teal);
}

.rubric-panel__header {
    display: flex;
}

.rubric-panel__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.15rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
}

.rubric-panel__title {
    font-weight: 600;
    font-size: 0.9rem;
}

.rubric-panel__count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.rubric-panel__chevron {
    transition: transform 0.15s ease;
    color: var(--text-secondary);
}

.rubric-panel__chevron--collapsed {
    transform: rotate(-90deg);
}

.rubric-panel__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    overflow: hidden;
    margin: 0.4rem 0 0.6rem;
}

.rubric-panel__bar-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--phsu-dark-teal) 0%, var(--phsu-teal) 100%);
    border-radius: 3px;
    transition: width 0.35s ease;
}

.rubric-panel__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* The transcript is the scroll surface; a long rubric must not push it off-screen. */
    max-height: 30vh;
    overflow-y: auto;
}

.rubric-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-primary);
}

.rubric-panel__marker {
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
    color: var(--text-muted);
}

/* Met items are de-emphasised rather than struck through: the student demonstrated
   them, and crossing them out reads as cancellation rather than completion. */
.rubric-panel__item--met .rubric-panel__text {
    color: var(--text-secondary);
}

.rubric-panel__item--met .rubric-panel__marker {
    color: var(--phsu-teal);
}

.rubric-panel__note {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--phsu-dark-teal);
}

.rubric-panel__stale {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: #8a6d3b;
}

/* Visible to screen readers only — the tick glyph is decorative, so the state needs a
   text equivalent. */
.rubric-panel__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Session sidebar ─────────────────────────────────────────────────────────
   The transcript panel in three regions: the study plan on top (assignments are planned to
   join it), the transcript in the middle, the files the tutor can see at the bottom. Painted
   by SessionSidebar.js and its panels. In audio-only mode the plan and files regions move into
   .session-rail beside the full-width transcript (UiController.detachSessionRegions).

   Class names mirror the chatbot's app-session-rail so the two surfaces stay easy to keep in
   step. Built on the shared tokens, so the dimmed "dark" theme needs no block of its own. */

/* The transcript keeps the space the regions do not use, and must be allowed to shrink — a
   column flex child defaults to min-height: auto and would push the files off-screen. The
   floor keeps it the largest region however much the plan and files hold; the two caps below
   (plan 30%, files 26%) are sized to leave it at least that. */
.transcript-panel > .transcript-content {
    min-height: 0;
    flex: 1 1 40%;
}

.session-region {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card-bg);
}

/* display:flex above would otherwise beat the hidden attribute. */
.session-region[hidden] {
    display: none !important;
}

.session-region__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1rem 0.5rem;
    flex-shrink: 0;
}

.session-region__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.session-region__title i {
    color: var(--phsu-teal);
    font-size: 0.8rem;
}

.session-region__count {
    min-width: 1.3rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(0, 153, 154, 0.12);
    color: var(--phsu-dark-teal);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.session-region__count.is-zero {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.session-region__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* The transcript's own sub-header, between the plan and the messages. */
.session-transcript-header {
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    background: var(--bg-secondary);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.session-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.session-icon-btn:hover {
    background: rgba(0, 153, 154, 0.1);
    color: var(--phsu-dark-teal);
}

.session-icon-btn--accent {
    background: var(--phsu-teal);
    color: var(--white);
}

.session-icon-btn--accent:hover {
    background: var(--phsu-dark-teal);
    color: var(--white);
}

.session-icon-btn:disabled {
    opacity: 0.5;
    cursor: progress;
}

.session-icon-btn:focus-visible,
.session-btn:focus-visible,
.session-link-btn:focus-visible {
    outline: 2px solid var(--phsu-teal);
    outline-offset: 2px;
}

/* Buttons shared by the regions and the session dialogs. */
.session-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.session-btn--primary {
    background: linear-gradient(135deg, var(--phsu-dark-teal) 0%, var(--phsu-teal) 100%);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(2, 71, 72, 0.25);
}

.session-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(2, 71, 72, 0.35);
}

.session-btn--secondary {
    background: var(--card-bg);
    border-color: rgba(0, 153, 154, 0.45);
    color: var(--phsu-dark-teal);
}

.session-btn--secondary:hover {
    background: rgba(0, 153, 154, 0.08);
    border-color: var(--phsu-teal);
}

.session-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.session-btn--ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.session-btn--sm {
    padding: 0.35rem 0.75rem;
    border-radius: 7px;
    font-size: 0.78rem;
}

.session-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.session-link-btn {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--phsu-teal);
    cursor: pointer;
}

.session-link-btn:hover {
    color: var(--phsu-dark-teal);
    text-decoration: underline;
}

.session-spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 2px solid rgba(0, 153, 154, 0.25);
    border-top-color: var(--phsu-teal);
    border-radius: 50%;
    animation: session-spin 0.8s linear infinite;
}

@keyframes session-spin {
    to { transform: rotate(360deg); }
}

/* ── Study plan (top region) ── */
.session-plan {
    max-height: 30%;
    overflow-y: auto;
}

.session-plan__empty {
    margin: 0 1rem 0.85rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.session-plan__card {
    margin: 0 0.75rem 0.75rem;
    padding: 0.7rem 0.8rem 0.75rem;
    border: 1px solid rgba(0, 153, 154, 0.22);
    border-left: 3px solid var(--phsu-teal);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 153, 154, 0.07) 0%, rgba(0, 153, 154, 0.02) 100%);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.session-plan__card:hover {
    box-shadow: 0 2px 10px rgba(2, 71, 72, 0.1);
}

/* The student asked to work on it this session — the "highlight". */
.session-plan__card.is-active {
    border-color: rgba(247, 149, 29, 0.45);
    border-left-color: var(--phsu-orange);
    background: linear-gradient(180deg, rgba(247, 149, 29, 0.09) 0%, rgba(247, 149, 29, 0.02) 100%);
    box-shadow: 0 0 0 3px rgba(247, 149, 29, 0.12);
}

.session-plan__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.session-plan__name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.session-plan__badge {
    flex-shrink: 0;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--phsu-orange);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.session-plan__meta {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Collapsed to a two-line preview that fades out; expanded it scrolls in place. */
.session-plan__body {
    margin-top: 0.45rem;
    max-height: 2.9em;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.session-plan__body.is-expanded {
    max-height: 30vh;
    overflow-y: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.session-plan__body h6 {
    margin: 0.55rem 0 0.2rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.session-plan__body h6:first-child {
    margin-top: 0;
}

.session-plan__body p {
    margin: 0 0 0.35rem;
}

.session-plan__body ul,
.session-plan__body ol {
    margin: 0 0 0.35rem;
    padding-left: 1.1rem;
}

.session-plan__body li {
    margin: 0.1rem 0;
}

.session-plan__actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.65rem;
}

/* ── Files (bottom region) ── */
.session-files {
    max-height: 26%;
    overflow: hidden;
    border-top: 1px solid var(--card-border);
}

/* Scrolls the uploads and the mind-map section below them together. */
.session-files__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0.6rem;
}

.session-files__list {
    list-style: none;
    margin: 0;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.session-files__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.session-files__item:hover {
    background: var(--bg-secondary);
}

.session-files__item.is-pending,
.session-files__item--uploading {
    opacity: 0.75;
}

.session-files__item.is-warn .session-files__meta {
    color: #a86400;
}

.session-files__item.is-failed .session-files__meta {
    color: #c0392b;
}

.session-files__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.session-files__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
}

.session-files__meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.session-files__empty {
    padding: 0.2rem 0.5rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Revealed on hover so a long list stays calm; always shown where there is no hover. */
.session-files__remove {
    opacity: 0;
}

.session-files__item:hover .session-files__remove,
.session-files__remove:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .session-files__remove {
        opacity: 1;
    }
}

.session-files__remove:hover {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

/* File-type tile, tinted by kind so a PDF reads as a PDF at a glance. */
.session-file-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 0.85rem;
}

.session-file-icon--pdf    { background: rgba(192, 57, 43, 0.1);  color: #c0392b; }
.session-file-icon--word   { background: rgba(43, 87, 154, 0.12); color: #2b579a; }
.session-file-icon--slides { background: rgba(196, 62, 28, 0.12); color: #c43e1c; }
.session-file-icon--sheet  { background: rgba(33, 115, 70, 0.12); color: #217346; }
.session-file-icon--image  { background: rgba(111, 66, 193, 0.12); color: #6f42c1; }
.session-file-icon--text   { background: rgba(75, 97, 113, 0.12); color: var(--tiber-blue-gray); }

/* Mind maps — the session's generate_mindmap results under the uploads (MindMapLibrary.js).
   Rows reuse .session-files__item; each is a button that opens the full-screen overlay. */
.session-mindmaps {
    margin-top: 0.4rem;
    padding: 0 0.5rem;
}

.session-mindmaps[hidden] {
    display: none;
}

.session-mindmaps__heading {
    padding: 0.35rem 0.5rem 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.session-mindmaps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.session-mindmaps__card {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.session-mindmaps__card:hover .session-files__name {
    color: #0f766e;
}

.session-mindmaps__card:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: -2px;
}

.session-file-icon--mindmap { background: rgba(15, 118, 110, 0.12); color: #0f766e; }

/* "Made this session" (SessionGeneratedFiles.js) — the session's documents and images, laid out
   as the mind maps above it. Its rows are links (download / open), not buttons. */
.session-made .session-mindmaps__card {
    color: inherit;
    text-decoration: none;
}

/* ── Audio-only rail ── */
.session-rail {
    flex: 0 0 340px;
    width: 340px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card-bg);
    border-left: 1px solid var(--card-border);
}

.session-rail .session-plan {
    flex: 0 1 auto;
    max-height: 55%;
    padding-top: 0.25rem;
    border-bottom: 1px solid var(--card-border);
}

.session-rail .session-files {
    flex: 1 1 auto;
    max-height: none;
    padding-top: 0.25rem;
    border-top: none;
}

@media (max-width: 1200px) {
    .session-rail {
        flex-basis: 300px;
        width: 300px;
    }
}

/* ── Session dialogs (carry-over, archive) ── */
.session-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: session-dialog-fade 0.2s ease-out;
}

@keyframes session-dialog-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes session-dialog-rise {
    from { transform: translateY(8px) scale(0.98); }
    to { transform: none; }
}

.session-dialog {
    width: 100%;
    max-width: 520px;
    max-height: min(86vh, 680px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    animation: session-dialog-rise 0.2s ease-out;
}

.session-dialog__header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.25rem 1.25rem 0.9rem;
}

.session-dialog__badge {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--phsu-dark-teal) 0%, var(--phsu-teal) 100%);
    color: var(--white);
    font-size: 1.05rem;
}

.session-dialog__headings {
    flex: 1;
    min-width: 0;
}

.session-dialog__title {
    font-family: 'DM Sans', var(--font-family-base);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.session-dialog__subtitle {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.session-dialog__close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.session-dialog__close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.session-dialog__body {
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem;
}

.session-dialog__files {
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.session-dialog__file {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: var(--card-bg);
}

label.session-dialog__file {
    cursor: pointer;
}

label.session-dialog__file:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 153, 154, 0.35);
}

.session-dialog__empty {
    padding: 1.1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.session-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--phsu-teal);
    cursor: pointer;
}

.session-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
}

/* The way out sits apart from the two ways forward. */
.session-dialog__footer .session-btn--ghost {
    margin-right: auto;
}

@media (max-width: 480px) {
    .session-dialog__footer {
        flex-direction: column-reverse;
    }

    .session-dialog__footer .session-btn {
        width: 100%;
        margin-right: 0;
    }
}

/* ── Materials overlay modal ─────────────────────────────────────────────── */
.materials-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.5);
}

.materials-card {
    background: #fff;
    border-radius: 12px;
    width: 92%;
    max-width: 760px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.materials-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, #024748 0%, #00999A 100%);
    color: #fff;
    flex-shrink: 0;
}

.materials-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.materials-header h3 i {
    font-size: 18px;
}

.materials-close-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.materials-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.materials-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
    flex: 1;
}

.materials-empty {
    text-align: center;
    padding: 48px 16px;
    color: #888;
}

.materials-empty i {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}

.materials-empty p {
    margin: 0;
    font-size: 14px;
}

.materials-group {
    margin-bottom: 20px;
}

.materials-group:last-child {
    margin-bottom: 0;
}

.materials-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 2px solid #00999A;
}

.materials-group-header i {
    color: #00999A;
    font-size: 16px;
}

.materials-group-title {
    font-weight: 700;
    color: #024748;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}

.materials-group-count {
    background: #e6f4f4;
    color: #024748;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.materials-group-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.materials-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafa;
    border: 1px solid #e0e8e8;
    border-radius: 8px;
    border-left: 3px solid #00999A;
}

.materials-item-main {
    flex: 1;
    min-width: 0;
}

.materials-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #024748;
    line-height: 1.3;
}

.materials-item-subtitle {
    font-size: 12px;
    color: #5a6363;
    margin-top: 2px;
}

.materials-item-reason {
    font-size: 12px;
    color: #555;
    margin-top: 6px;
    line-height: 1.45;
    font-style: italic;
}

/* Outbound links to the source (e.g. PubMed abstract + PMC full text).
 * Compact pill-style links sit at the bottom of each item. Mirrors the
 * chatbot's materials-overlay.css for visual consistency. */
.materials-item-links {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.materials-item-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 153, 154, 0.1);
    color: #00777a;
    border: 1px solid rgba(0, 153, 154, 0.3);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.materials-item-link:hover {
    background: rgba(0, 153, 154, 0.18);
    color: #005d5e;
    text-decoration: none;
}

.materials-item-link i {
    font-size: 9px;
    opacity: 0.75;
}

.materials-item-strength {
    flex-shrink: 0;
    background: #00999A;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 10px;
    align-self: center;
}

@media (max-width: 600px) {
    .materials-card {
        width: 96%;
        max-height: 92vh;
    }
    .materials-header {
        padding: 14px 18px;
    }
    .materials-body {
        padding: 16px 18px 20px;
    }
}

/* Subtle build-version label, pinned to the bottom-right corner of the
   selection page. Faint and non-interactive — present for QA/support, not
   meant to draw the student's eye. */
.vt-build-version {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    line-height: 1;
    color: var(--slate-500);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Model badges — which models are driving this session, for QA and support.
   Parked in the bottom-left of the avatar panel: bottom-RIGHT is taken by the avatar PIP tile
   that appears while an image overlay is open, and a badge that moves depending on whether a
   diagram happens to be on screen is a badge nobody can find twice.
   pointer-events: none so this can never intercept a click meant for the video. */
/* Standardized-patient role-play badge (RolePlayBadge.js), over the video while the tutor plays a
   patient. Top-left: the quiz button holds top-right and the text button bottom-left. Dark backing
   so it reads over any video frame in every theme. Just the pill until hovered or focused, then the
   how-to-stop note drops beneath it. Twin of the chatbot's roleplay-badge styles. */
.roleplay-badge {
    position: absolute;
    top: 16px;
    left: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: min(420px, calc(100% - 140px));
    outline: none;
}

.roleplay-badge__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--tiber-primary);
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: help;
}

.roleplay-badge:focus-visible .roleplay-badge__pill {
    box-shadow: 0 0 0 3px rgba(0, 153, 154, 0.45);
}

.roleplay-badge__pill i {
    color: var(--tiber-primary-light);
}

/* Controls that make no sense mid-interview (the Quiz buttons), marked in the markup. */
body.roleplay-active [data-roleplay-hidden] {
    display: none !important;
}

.roleplay-badge__note {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.75rem;
    line-height: 1.35;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s, visibility 0.15s;
}

.roleplay-badge:hover .roleplay-badge__note,
.roleplay-badge:focus-within .roleplay-badge__note {
    visibility: visible;
    opacity: 1;
}

.model-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 1200;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 60%;
    pointer-events: none;
    user-select: none;
}

.model-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
}

.model-badge-key {
    color: #7fd4d4;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Near-white rather than white: legible when zoomed into a screenshot, quiet in peripheral
   vision during an actual session. */
.model-badge-value { color: #e8e8e8; }

/* generate_document download cards inside transcript replica entries. */
.transcript-documents {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.transcript-document {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}

.transcript-document--failed {
    background: #fff5f5;
    border: 1px dashed #f5c2c2;
}

.transcript-document-badge {
    flex-shrink: 0;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--tiber-primary);
    color: var(--tiber-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.transcript-document--failed .transcript-document-badge {
    background: #b91c1c;
}

.transcript-document-body {
    flex: 1;
    min-width: 0;
}

.transcript-document-title {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transcript-document-status {
    font-size: 12px;
    color: var(--text-muted);
}

.transcript-document--failed .transcript-document-status {
    color: #b91c1c;
}

.transcript-document-progress {
    position: relative;
    height: 4px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-tertiary);
}

.transcript-document-progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    border-radius: 2px;
    background: var(--tiber-primary);
    animation: transcriptDocumentProgress 1.6s ease-in-out infinite;
}

@keyframes transcriptDocumentProgress {
    from { left: -35%; }
    to   { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .transcript-document-progress-bar { animation: none; left: 0; width: 100%; opacity: 0.4; }
}

.transcript-document-download {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--tiber-primary);
    color: var(--tiber-white);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.transcript-document-download:hover {
    background: var(--tiber-primary-dark);
    color: var(--tiber-white);
}

/* View sits before Download, outlined so Download stays the primary action's colour. */
.transcript-document-view {
    border: 1px solid var(--tiber-primary);
    background: transparent;
    color: var(--tiber-primary);
    cursor: pointer;
}

/* generate_mindmap cards inside transcript replica entries (MindMapCard.js). Label styling
   lives in the SVG's own <style> so an exported PNG keeps it. */
.transcript-mindmaps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.transcript-mindmap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.transcript-mindmap-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.transcript-mindmap-badge {
    flex-shrink: 0;
    padding: 4px 6px;
    border-radius: 4px;
    background: #0f766e;
    color: var(--tiber-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.transcript-mindmap-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transcript-mindmap-preview {
    height: 240px;
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    background: #ffffff;
}

.mindmap-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.transcript-mindmap-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
}

.mindmap-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid rgba(15, 118, 110, 0.35);
    border-radius: 6px;
    background: transparent;
    color: #0f766e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.mindmap-btn:hover {
    background: #0f766e;
    color: var(--tiber-white);
}

/* Full-screen view. Fixed to the viewport and above the image overlay's tier (1300) and the
   transcript bars, so it covers the video in both layouts. */
.mindmap-overlay {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: imageOverlayFadeIn 0.3s ease-out;
}

.mindmap-overlay-panel {
    display: flex;
    flex-direction: column;
    width: 94vw;
    height: 90vh;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.mindmap-overlay-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #024748 0%, #0f766e 100%);
    color: var(--tiber-white);
    flex-shrink: 0;
}

.mindmap-overlay-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mindmap-overlay-header .mindmap-btn {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--tiber-white);
}

.mindmap-overlay-header .mindmap-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.mindmap-overlay-close {
    border: none;
    background: transparent;
    color: var(--tiber-white);
    font-size: 28px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.mindmap-overlay-body {
    flex: 1;
    min-height: 0;
}

/* Off-screen host for the full-size render the PNG export rasterises. Laid out (so markmap can
   measure labels) but never visible. */
.mindmap-export-host {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 2000px;
    height: 1500px;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    .mindmap-overlay-panel { width: 100vw; height: 100vh; border-radius: 0; }
}

/* Read-only document viewer (DocumentViewer.js). The mind map overlay's frame, with the
   browser's PDF viewer filling the body. */
.document-viewer .mindmap-btn {
    text-decoration: none;
}

.document-viewer-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tiber-light-gray);
}

.document-viewer-frame {
    width: 100%;
    height: 100%;
    border: 0;
}

.document-viewer-status {
    margin: 0;
    padding: 24px;
    max-width: 60ch;
    text-align: center;
    color: var(--text-muted);
}

/* Session activity panel (ActivityPanel.js) — bottom region of the Session sidebar, shown only
   while background jobs are running or just finished. Twin of the chatbot's activity-panel. */
.session-activity {
    flex-shrink: 0;
    max-height: 30%;
    border-top: 1px solid var(--card-border);
    background: var(--bg-secondary);
}

.session-activity__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--tiber-primary);
}

.session-activity__list {
    list-style: none;
    margin: 0;
    padding: 0 12px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.session-activity__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.session-activity__item.is-failed {
    background: #fff5f5;
    border-color: #f5c2c2;
}

.session-activity__status {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.session-activity__item.is-done .session-activity__status { color: var(--tiber-primary); }
.session-activity__item.is-failed .session-activity__status { color: #b91c1c; }

.session-activity__spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-tertiary);
    border-top-color: var(--tiber-primary);
    animation: sessionActivitySpin 0.9s linear infinite;
}

@keyframes sessionActivitySpin {
    to { transform: rotate(360deg); }
}

.session-activity__body {
    flex: 1;
    min-width: 0;
}

.session-activity__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.session-activity__label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-activity__kind {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.session-activity__step {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.session-activity__item.is-failed .session-activity__step { color: #b91c1c; }

.session-activity__elapsed {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .session-activity__spinner { animation: none; }
}