/* ============================================================
   Index App Shell Styles
   Extracted from style.css without selector renames.
   ============================================================ */

.main-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    /* Default layout for Patient Consultation Mode. Rows for tools, resizer, and notes. */
    grid-template-rows: 1fr 4px 255px;
    grid-template-areas:
        "tools chat"
        "resizer-y chat"
        "notes chat";
    gap: 0 0.425rem; /* Only column gap */
    flex-grow: 1;
    padding: 0.425rem; /* Add padding here instead of body */
    overflow: hidden; /* Prevent the grid from overflowing the page */
}

/* NEW: Collapsed state for notes panel in patient consultation mode */
.main-container.notes-collapsed {
    /* Shrink the resizer and notes rows */
    grid-template-rows: 1fr 0px 45px; /* Reduced collapsed header height */
    transition: grid-template-rows 0.3s ease-in-out;
}

/* When collapsed, hide the content area of the notes panel completely */
.main-container.notes-collapsed #notes-panel .panel-content-collapsible {
    display: none;
}

/* When collapsed, adjust the entire panel and header */
.main-container.notes-collapsed #notes-panel {
    overflow: hidden;
    box-shadow: none;
    background: transparent;
    border: none;
    padding-top: 0.35rem;
}

.main-container.notes-collapsed #notes-panel .panel-header-mobile {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Apply same collapsed styling to pin board panel (in PBL mode) */
.main-container.notes-collapsed #pin-board-panel {
    overflow: hidden;
    box-shadow: none;
    background: transparent;
    border: none;
    padding-top: 0.35rem;
}

.main-container.notes-collapsed #pin-board-panel .panel-header-mobile {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

    /* PBL-specific override for the collapsed state */
    .main-container.pbl-mode-active.pbl-session-active.notes-collapsed {
        /* This rule has higher specificity to override the expanded state. */
        /* It resets the container's height management to allow it to shrink. */
        grid-template-rows: 1fr 0px 53px; /* 45px header + 8px top padding */
        min-height: 0; /* Remove the large min-height from the expanded state */
        height: 100%; /* Make the container fill its parent's height (the viewport) */
        overflow: hidden; /* Restore overflow containment */
    }

    /* In PBL mode collapsed, also adjust panel and header styling */
    .main-container.pbl-mode-active.pbl-session-active.notes-collapsed #notes-panel {
        overflow: hidden;
        box-shadow: none;
        background: transparent;
        border: none;
        padding-top: 0.35rem;
    }

    .main-container.pbl-mode-active.pbl-session-active.notes-collapsed #notes-panel .panel-header-mobile {
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* In PBL mode collapsed, also adjust pin board panel and header styling */
    .main-container.pbl-mode-active.pbl-session-active.notes-collapsed #pin-board-panel {
        overflow: hidden;
        box-shadow: none;
        background: transparent;
        border: none;
        padding-top: 0.35rem;
    }

    .main-container.pbl-mode-active.pbl-session-active.notes-collapsed #pin-board-panel .panel-header-mobile {
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* When collapsed, constrain the chat panel to viewport height */
    .main-container.pbl-mode-active.pbl-session-active.notes-collapsed #chat-panel.pbl-layout-active {
        max-height: 100vh; /* Prevent chat panel from exceeding viewport */
        overflow: hidden; /* Hide overflow instead of letting it extend */
    }

    /* Ensure chat messages scroll internally when collapsed */
    .main-container.pbl-mode-active.pbl-session-active.notes-collapsed #chat-panel.pbl-layout-active > .chat-messages {
        max-height: calc(100vh - 200px); /* Account for tabs, input, and other UI elements */
        overflow-y: auto; /* Enable scrolling for long content */
    }

    /* In PBL mode, also hide the pin board content when collapsed */
    .main-container.pbl-session-active.notes-collapsed #pin-board-panel .panel-content-collapsible {
        display: none;
    }

/* Layout override for PBL Mode (BEFORE session starts) */
.main-container.pbl-mode-active:not(.pbl-session-active) {
    grid-template-rows: 1fr; /* Full height for top panels */
    grid-template-areas:
        "tools chat";
    /* resizer, notes, and pin-board are hidden via JS, so they are not in the grid */
    overflow: visible; /* Override default 'hidden' to allow panels to fill height correctly. */
}

/* Layout override for PBL Session Active (after clicking Start) */
.main-container.pbl-mode-active.pbl-session-active {
    /* MODIFICATION: Set a total height larger than the viewport. */
    /* This allows the JS resizer to work correctly without being constrained to viewport height. */
    /* Using min-height is more robust in a flex context. It ensures the container */
    /* is at least this tall, allowing the resizer JS to calculate against this larger value. */
    min-height: calc(70vh + 50vh + 5px);
    grid-template-rows: 70vh 5px 50vh; /* Set initial sizes */
    grid-template-areas:
        "tools pbl-content"
        "resizer-y resizer-y"
        "notes pin-board";
    overflow: visible; /* Let the content overflow and be scrolled by the body. */
}
.dashboard-panel {
    background-color: var(--panel-bg);
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: auto; /* Allow individual panels to scroll if content overflows */
}

/* Resizer Styles */
.resizer {
    background: #d1d9e0; /* A visible default color (same as --border-color) */
    z-index: 10;
    /* Prevent content selection while dragging */
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

.resizer:hover {
    background: var(--primary-color); /* A more prominent color on hover */
}

.resizer-y {
    cursor: ns-resize;
    grid-area: resizer-y;
}

body.resizing-ns {
    cursor: ns-resize !important;
}
#tools-panel { grid-area: tools; }
#notes-panel { grid-area: notes; }
#pin-board-panel { grid-area: pin-board; }
#chat-panel {
    grid-area: chat;
    overflow: hidden; /* Contain content by default */
    display: flex; /* Ensure flexbox layout for children */
    flex-direction: column;
    position: relative; /* For floating timer positioning */
}

.main-container.notes-floating-active:not(.pbl-session-active):not(.ipe-session-active) {
    grid-template-rows: 1fr;
    grid-template-areas: "tools chat";
}

.main-container.notes-floating-active:not(.pbl-session-active):not(.ipe-session-active) #vertical-resizer,
.main-container.pbl-mode-active.pbl-session-active.notes-floating-active #vertical-resizer,
.main-container.ipe-mode-active.ipe-session-active.notes-floating-active #vertical-resizer {
    display: none !important;
}

.main-container.pbl-mode-active.pbl-session-active.notes-floating-active,
.main-container.ipe-mode-active.ipe-session-active.notes-floating-active {
    grid-template-rows: 70vh 50vh;
    grid-template-areas:
        "tools pbl-content"
        "pin-board pin-board";
}

/* PBL Content Area with Tabs */
#chat-panel.pbl-layout-active {
    grid-area: pbl-content;
    overflow: visible; /* Allow tabs to be visible */
}

/* PBL Tab Navigation */
.pbl-tab-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: 10px 10px 0 0;
    padding-right: 0.85rem;
}

.pbl-tab-buttons {
    display: flex;
}

.pbl-tab-button {
    /* flex: 1; */
    padding: 10px 17px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.pbl-tab-button:first-child {
    border-top-left-radius: 12px;
}

.pbl-tab-button:last-child {
    border-top-right-radius: 12px;
}

.pbl-tab-button:hover {
    background-color: var(--table-color);
}

.pbl-tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: white;
}

.pbl-tab-button.active:first-child {
    border-top-left-radius: 12px;
}

.pbl-tab-button.active:last-child {
    border-top-right-radius: 12px;
}

/* PBL Tab Content */
.pbl-tab-content {
    flex-grow: 1; /* Let the content area fill remaining space */
    overflow: hidden; /* Keep this to contain the scrolling panes */
    /* The height is now managed by flexbox, so the explicit height is removed. */
    /* This also requires the parent (#chat-panel) to have a defined height or be a flex item that can grow, which it is. */
}

.pbl-tab-pane {
    height: 100%;
    display: none;
}

.pbl-tab-pane.active {
    display: flex;
    flex-direction: column;
}

/* Chat content within PBL tab */
.pbl-tab-pane .chat-messages {
    flex-grow: 1;
    overflow-y: auto;
}

#chat-panel.pbl-layout-active .chat-input-form {
    border-radius: 0 0 12px 12px;
}


/* Chat styles */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    background-color: #ffffff;
    overflow: hidden;
}

/* Responsive Chat Title */
#chat-title .mobile-title {
    display: none;
}

.chat-header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.chat-messages {
    flex-grow: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: #fafbfc;
}
.message-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 1rem;
    gap: 0.75rem;
}
/* The user-row alignment is handled by the ::before pseudo-element */
.user-row::before {
    content: '';
    flex-grow: 1;
}
.patient-row,
.bot-row {
    justify-content: flex-start;
}
/* Allow retry control to sit on its own row below the bubble + TTS */
.bot-row {
    flex-wrap: wrap;
}
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #e9ecef;
    border: 1px solid var(--border-color);
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This crops the image to fit, rather than stretching it */
    border-radius: 50%; /* Ensures the image itself is round */
}
.message {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    line-height: 1.4;
    overflow-wrap: break-word; /* Modern property for word-wrap */
    position: relative; /* For pin button positioning */
    display: inline-block; /* This makes the bubble only as wide as its content, up to max-width */
}
.message .rendered-markdown {
    white-space: normal;
    line-height: 1.6;
}
.message .rendered-markdown > *:first-child {
    margin-top: 0;
}
.message .rendered-markdown > *:last-child {
    margin-bottom: 0;
}
.review-data-container.rendered-markdown > *:first-child {
    margin-top: 0;
}
.review-data-container.rendered-markdown > *:last-child {
    margin-bottom: 0;
}

/* KaTeX math rendered inside message bubbles / markdown containers. */
.rendered-markdown .katex {
    font-size: 1em;
}
.rendered-markdown .katex-display {
    margin: 0.5em 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.rendered-markdown .math-fallback {
    font-family: "Courier New", monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 0 0.25em;
    border-radius: 3px;
}

.speaker-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.25rem;
}
.message .blinking-cursor {
    display: inline-block;
    background-color: #333;
    width: 8px;
    height: 1em;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}
.evaluation-message {
    background-color: #f0f8ff; /* A light alice blue */
    border: 1px solid #cce5ff;
    color: #004085;
}

.debriefing-message {
    background-color: #f0fdf4; /* A light forest green tint */
    border: 1px solid #cce5ff; /* Same border as evaluation message */
    color: #14532d; /* Dark forest green text */
}

.patient-message,
.bot-message {
    background-color: #e9ecef;
    border-bottom-left-radius: 5px;
}
.user-message {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 5px;
}
.user-message .speaker-name {
    color: white;
}
.user-row .avatar {
    background-color: var(--primary-color);
}

/* TTS Button Styles */
.tts-button {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    opacity: 0; /* Hidden by default */
    transition: all 0.2s ease;
    padding: 0;
    margin-bottom: 4px; /* Align with bottom of message bubble */
    flex-shrink: 0;
}

.patient-row:hover .tts-button,
.bot-row:hover .tts-button {
    opacity: 0.7; /* Show on hover of the whole row */
}

.tts-button:hover {
    opacity: 1;
    background-color: #e9ecef;
}

.tts-button.playing {
    opacity: 1;
    color: var(--primary-color);
    animation: timer-pulse 1.5s infinite;
}

.tts-button:disabled {
    cursor: not-allowed;
}

.tts-button svg {
    width: 18px;
    height: 18px;
}

/* This must come AFTER the main .tts-button rule to override opacity */
.roundtable-tts-button {
    position: absolute;
    bottom: 8px;
    right: 8px; /* Position to the left of pin button */
    transform: none;
    margin-left: 0;
    width: 24px;
    height: 24px;
    background: var(--speech-bubble-bg);
    border: 1px solid var(--table-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    opacity: 1;
    margin-bottom: 0;
    z-index: 15;
}

.roundtable-tts-button svg {
    width: 14px;
    height: 14px;
}

.roundtable-tts-button:hover {
    background-color: var(--table-color);
}

/* Retry Button Styles — flat secondary, matches chat / panel controls */
.retry-button-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-basis: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: calc(36px + 0.75rem); /* align with bubble (avatar + gap) */
    margin-top: 6px;
}

.retry-button {
    padding: 6px 12px;
    background-color: #ffffff;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: none;
}

.retry-button:hover:not(:disabled) {
    background-color: #f5f7fa;
    border-color: #c5cdd6;
    color: #004494;
}

.retry-button:active:not(:disabled) {
    background-color: #eef1f5;
}

.retry-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.retry-button svg {
    flex-shrink: 0;
}

/* Spin animation for retry button */
.retry-button svg.spinning {
    animation: spin 1s linear infinite;
}

.chat-input-form {
    display: flex;
    padding: 0.875rem 1rem;
    border-top: 1px solid #e5e7eb;
    background-color: #ffffff;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* Reorder chat panel elements for PBL mode */
#chat-panel.pbl-layout-active > .chat-input-form {
    order: 3;
}
#chat-panel.pbl-layout-active > .chat-messages {
    order: 4;
    max-height: 100vh; /* Allow chat message area to grow up to 100vh in PBL mode, but constrain overflow */
}
#chat-panel.pbl-layout-active {
    overflow: visible; /* Allow page to scroll only in PBL mode */
}

.input-container {
    position: relative;
    flex-grow: 1;
    margin-right: 0.75rem;
}
.chat-input {
    width: 100%; /* This is already here */
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    /* Vertical padding + line-height + border = min-height so one line is not top-heavy */
    padding: 9px 0.875rem;
    font-size: 0.95rem;
    box-sizing: border-box; /* This is already here */
    font-family: var(--font-family); /* Inherit font for consistency */
    resize: none; /* Disable manual resizing by user */
    line-height: 22px; /* Matches inner box: 42px min-height − 2px border − 18px padding */
    max-height: 150px; /* Limit growth to prevent breaking layout */
    overflow-y: auto; /* Add scrollbar when max-height is reached */
    /* --- Custom Scrollbar (Firefox) --- */
    scrollbar-width: thin;
    scrollbar-color: #a8a8a8 transparent;
    background-color: #fafbfc; /* Subtle off-white background */
    min-height: 42px; /* Match STT / send button height */
    transition: all 0.2s ease;
}

/* Browsers wrap contenteditable lines in div/p; defaults can add top/bottom slack */
.chat-input > div,
.chat-input > p {
    margin: 0;
}

/* Placeholder for contenteditable div */
.chat-input:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
    display: block; /* For the placeholder to show */
    height: 0; /* So it doesn't take up space when there's content */
}
.chat-input:focus {
    outline: none;
    border-color: #d1d5db;
    box-shadow: none;
}

/* --- Custom Scrollbar for Chat Input (WebKit browsers like Chrome, Safari) --- */
.chat-input::-webkit-scrollbar {
    width: 8px; /* Width of the entire scrollbar */
}

.chat-input::-webkit-scrollbar-track {
    background: transparent; /* Make the track invisible */
}

.chat-input::-webkit-scrollbar-thumb {
    background-color: #c1c1c1; /* A subtle grey color for the scrollbar thumb */
    border-radius: 10px; /* Fully rounded corners for the thumb */
}
.chat-input::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8; /* A slightly darker grey on hover */
}

/* Mention Dropdown Styles */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
}
.mention-dropdown-header {
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    border-radius: 8px 8px 0 0;
}
.mention-dropdown-list {
    padding: 0.25rem 0;
}
.mention-dropdown-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
}
.mention-dropdown-item:hover,
.mention-dropdown-item.active {
    background-color: #f0f8ff;
}
.mention-dropdown-item .participant-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background-color: #e9ecef; /* Default background */
}
.mention-dropdown-item .participant-avatar svg {
    width: 16px;
    height: 16px;
    color: white;
}
/* Apply color schemes to mention dropdown avatars */
.mention-dropdown-item .participant-avatar.facilitator {
    background-color: var(--avatar-facilitator);
}
.mention-dropdown-item .participant-avatar.patient {
    background-color: var(--avatar-patient);
}
.mention-dropdown-item .participant-avatar.student_a { background-color: var(--avatar-student-1); }
.mention-dropdown-item .participant-avatar.student_b { background-color: var(--avatar-student-2); }
.mention-dropdown-item .participant-avatar.student_c { background-color: var(--avatar-student-3); }
.mention-dropdown-item .participant-avatar.student_d { background-color: var(--avatar-student-4); }
.mention-dropdown-item .participant-avatar.student_e { background-color: var(--avatar-student-5); }
.mention-dropdown-item .participant-avatar.student_f { background-color: var(--avatar-student-6); }
.mention-dropdown-item .participant-avatar.student_g { background-color: var(--avatar-student-7); }
.mention-dropdown-item .participant-avatar.student_h { background-color: var(--avatar-student-8); }
.mention-dropdown-item .participant-avatar.student_i { background-color: var(--avatar-student-9); }
.mention-dropdown-item .participant-avatar.student_j { background-color: var(--avatar-student-10); }
.mention-dropdown-item .participant-avatar.student_k { background-color: var(--avatar-student-11); }
.mention-dropdown-item .participant-avatar.student_l { background-color: var(--avatar-student-12); }
/* Fallback for any additional students */
.mention-dropdown-item .participant-avatar[class*="student_"]:not(.student_a):not(.student_b):not(.student_c):not(.student_d):not(.student_e):not(.student_f):not(.student_g):not(.student_h):not(.student_i):not(.student_j):not(.student_k):not(.student_l) {
    background-color: #95a5a6;
}
.mention-dropdown-item .participant-info {
    flex-grow: 1;
    line-height: 1.3;
}
.mention-dropdown-item .participant-name {
    font-weight: 600;
    color: #333;
    font-size: 0.875rem;
    border: none;
    padding: 0;
    background: none;
}
.mention-dropdown-item .participant-role {
    font-size: 0.75rem;
    color: #6c757d;
}
.send-button {
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 1.35rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Prevent button from shrinking */
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 86, 179, 0.2);
}

.send-button:hover:not(:disabled) {
    background-color: #004494;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
}
.send-button:disabled {
    background-color: #d1d5db;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* STT Button Styles */
.stt-button {
    border: 1px solid #f3f4f6;
    background-color: #fafbfc;
    color: #9ca3af;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: none;
}

.stt-button:hover:not(:disabled) {
    background-color: #f5f7fa;
    border-color: #e5e7eb;
    transform: none;
    box-shadow: none;
}

.stt-button.listening {
    background-color: #e74c3c; /* A clear red for recording */
    color: white;
    animation: pulse-stt 1.5s infinite;
}

.stt-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.stt-button svg {
    width: 20px;
    height: 20px;
}

/* PBL Mode Controls Layout */
#pbl-mode-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* NEW: Style for the stop generation button state */
.send-button.stop-generation-btn {
    background-color: var(--danger-color);
}

/* NEW: The white square icon for the stop button */
.send-button.stop-generation-btn .stop-icon-square {
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 2px; /* A subtle rounding for the square */
}

.send-button.stop-generation-btn:hover {
    background-color: #a51824; /* Darker red */
    transform: scale(1.1);
}

/* PBL and IPE Mode Control Buttons (Pass & Facilitator) */
#pass-turn-btn, #facilitator-btn, #ipe-pass-turn-btn, #ipe-facilitator-btn, #ipe-scriber-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#facilitator-btn, #ipe-facilitator-btn {
    background-color: #28a745; /* Green color to distinguish facilitator button */
    box-shadow: 0 1px 3px rgba(40, 167, 69, 0.2);
}

#ipe-scriber-btn {
    background-color: #5cb85c; /* Lighter green color for scriber button */
    box-shadow: 0 1px 3px rgba(92, 184, 92, 0.2);
}

#pass-turn-btn:hover, #facilitator-btn:hover, #ipe-pass-turn-btn:hover, #ipe-facilitator-btn:hover {
    transform: translateY(-1px);
}

#ipe-scriber-btn:hover {
    transform: translateY(-1px);
}

#pass-turn-btn:hover, #ipe-pass-turn-btn:hover {
    background-color: #5a6268;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#facilitator-btn:hover, #ipe-facilitator-btn:hover {
    background-color: #218838;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

#ipe-scriber-btn:hover {
    background-color: #4cae4c; /* Darker shade for hover */
    box-shadow: 0 2px 6px rgba(92, 184, 92, 0.3);
}

#pass-turn-btn:active, #facilitator-btn:active, #ipe-pass-turn-btn:active, #ipe-facilitator-btn:active, #ipe-scriber-btn:active {
    transform: translateY(0);
}

/* Style for disabled Pass/Facilitator buttons */
#pass-turn-btn:disabled, #facilitator-btn:disabled, #ipe-pass-turn-btn:disabled, #ipe-facilitator-btn:disabled, #ipe-scriber-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Tabbed Tools Panel */
.tab-nav { 
    display: flex; 
    gap: 0.25rem;
    padding: 0.5rem 0.5rem 0;
    background: transparent;
}
.tab-button {
    flex-grow: 1;
    padding: 0.625rem 0.75rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: #9ca3af;
    transition: all 0.2s ease;
    position: relative;
}
.tab-button:hover {
    background: #f3f4f6;
    color: #4b5563;
}
.tab-button.active {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
.tab-button.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
}
.tab-content { display: none; padding: 1rem; overflow-y: auto; flex-grow: 1; position: relative; }
.tab-content.active {
    display: flex; /* Use flex to ensure consistent layout behavior */
    flex-direction: column; /* Stack content vertically */
    /* This ensures the tab content area reliably fills the space given by flex-grow, preventing layout shifts when tab content changes. */
}

/* Floating "expand to modal" button used in the top-right corner of tab panels. */
.tab-expand-btn {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 5;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #d0d4d9;
    border-radius: 6px;
    color: #202124;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.tab-expand-btn:hover {
    background-color: #f1f3f5;
    border-color: #9aa0a6;
}
.tab-expand-btn:focus-visible {
    outline: 2px solid #202124;
    outline-offset: 2px;
}
.background-content-inner {
    /* Reserve space so the floating expand button does not overlap the heading. */
    padding-right: 2rem;
}
.tab-content h4 { margin-top: 0; }
.tab-content dl { margin: 0; }
.tab-content dt { font-weight: bold; color: #555; }
.tab-content dd { margin-left: 0; margin-bottom: 1rem; }

/* Lab-specific styles */
.lab-reference { font-size: 0.85em; color: #6c757d; margin-bottom: 0.5rem !important; }
.lab-notes { 
    background-color: #f8f9fa; 
    border-left: 4px solid var(--primary-color); 
    padding: 0.75rem; 
    margin-top: 1rem; 
    font-size: 0.9rem; 
    border-radius: 0 4px 4px 0;
}
.no-lab-results {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
    font-style: italic;
}
.no-lab-results p {
    margin: 0;
    font-size: 1rem;
}

/* NEW: Table for lab results */
.lab-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.lab-results-table th,
.lab-results-table td {
    border: 1px solid #e9ecef;
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: middle;
}

.lab-results-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.lab-results-table tbody tr:nth-child(odd) {
    background-color: #fdfdfe;
}

.lab-results-table tbody tr:hover {
    background-color: #f1f3f5;
}

/* Lab Test Panel in main UI */
.lab-test-panel {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #f8f9fa;
}
.lab-test-panel:last-child {
    margin-bottom: 0;
}
.lab-test-panel h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}
.lab-test-date {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Lab pills (shown inside the Background tab; click to open a modal) */
.background-labs-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}
.background-labs-heading {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #202124);
}
.background-labs-hint {
    margin: 0 0 0.75rem 0;
    font-size: 0.82rem;
    color: #6c757d;
}
.lab-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.lab-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background-color: #f1f3f5;
    border: 1px solid #d0d4d9;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    color: #202124;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
    line-height: 1.2;
    max-width: 100%;
    text-align: left;
}
.lab-pill:hover {
    background-color: #e4e7ea;
    border-color: #9aa0a6;
}
.lab-pill.lab-pill-inline {
    background-color: transparent;
}
.lab-pill.lab-pill-inline:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.lab-pill-inline-wrapper {
    display: block;
    margin: 0.35rem 0;
}
.lab-pill:active {
    transform: translateY(1px);
}
.lab-pill:focus-visible {
    outline: 2px solid #202124;
    outline-offset: 2px;
}
.lab-pill-icon {
    display: inline-flex;
    align-items: center;
    color: #202124;
    flex-shrink: 0;
}
.lab-pill-label {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}
.lab-pill-date {
    color: #6c757d;
    font-weight: 400;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Background Details Modal (opened from the Background tab expand button).
   The selectors chain `.app-modal.background-details-modal` to out-specify the
   generic `.app-modal { width: ... }` rule in modals.css (which is loaded
   after style.css). */
.app-modal.background-details-modal {
    width: min(1440px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
}
.app-modal.background-details-modal .app-modal-body {
    padding: 1.25rem 1.5rem;
}
/* When the Background content is moved into the modal, hide the outer h4
   heading (we already show the title in the modal header) and drop the extra
   right padding reserved for the floating expand button. */
.app-modal.background-details-modal .background-content-inner {
    padding-right: 0;
}
.app-modal.background-details-modal .background-content-inner > h4 {
    display: none;
}

/* Lab Details Modal (opened from a lab pill). Same specificity trick as the
   Background Details modal so the width override beats `.app-modal` in
   modals.css. */
.app-modal.lab-details-modal {
    width: min(900px, calc(100vw - 2rem));
}
.app-modal.lab-details-modal .app-modal-body {
    padding: 1.25rem 1.4rem;
}
.app-modal.lab-details-modal .lab-test-panel {
    margin-bottom: 0;
    background-color: #fff;
    border: none;
    padding: 0;
}
.app-modal.lab-details-modal .lab-test-panel h5 {
    margin-top: 0;
}
.app-modal.lab-details-modal .lab-results-table {
    margin-top: 0.5rem;
}

/* Background-specific styles */
.background-section {
    margin-bottom: 1.5rem;
}
.background-section h5 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}
.background-section p {
    margin: 0 0 1rem 0;
    line-height: 1.5;
    color: #555;
}
.background-section p:last-child {
    margin-bottom: 0;
}
.no-background-info {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
    font-style: italic;
}
.no-background-info p {
    margin: 0;
    font-size: 1rem;
}

.instructions-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333; /* black as requested */
    margin-top: 0;
    margin-bottom: 0.75rem;
}
.instructions-body {
    font-size: 0.9rem;
    color: #6c757d; /* light grey as requested */
    line-height: 1.5;
    margin: 0;
}

.action-button.disabled-feature {
    background-color: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

.action-button.disabled-feature:hover {
    background-color: #f8f9fa;
    transform: none;
    box-shadow: none;
}

/* ── EHR-style Action/Teacher Tab Section Cards ── */
.panel-action-section {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}

.panel-action-section-header {
    padding: 0.45rem 0.75rem;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.panel-action-section-header > span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
}

.panel-action-section-body {
    padding: 0.2rem 0;
}

.panel-action-list-btn {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background 0.15s, color 0.15s;
    text-align: left;
}

.panel-action-list-btn:hover:not(:disabled):not(.disabled-feature) {
    background: #f3f4f6;
}

.panel-action-list-btn:hover:not(:disabled):not(.disabled-feature) .panel-action-btn-icon {
    color: var(--primary-color);
}

.panel-action-list-btn:hover:not(:disabled):not(.disabled-feature) .panel-action-btn-arrow {
    color: var(--primary-color);
    opacity: 0.7;
}

.panel-action-list-btn-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.575rem 0.75rem;
}

.panel-action-btn-icon {
    flex-shrink: 0;
    color: #6b7280;
    transition: color 0.15s;
}

/* Label only — do not apply flex:1 to .coming-soon-badge or it stretches the pill */
.panel-action-list-btn-inner > span:not(.coming-soon-badge) {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: color 0.15s;
}

.panel-action-btn-arrow {
    flex-shrink: 0;
    color: #d1d5db;
    transition: color 0.15s, opacity 0.15s;
    margin-left: auto;
}

.panel-action-list-btn.disabled-feature {
    cursor: not-allowed;
    opacity: 0.45;
}

.panel-action-list-btn.disabled-feature .panel-action-btn-arrow {
    display: none;
}

.panel-action-list-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.panel-action-divider {
    border: none;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin: 0.2rem 0.75rem;
}

.coming-soon-badge {
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.6rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: none;
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: auto;
    white-space: nowrap;
    line-height: 1.45;
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
}

/* Notes Panel */
#notes-panel .panel-content-collapsible {
    padding: 0.5rem 0.5rem 0.5rem;
    background: transparent;
}

#notes-panel .panel-content {
    padding: 0;
    flex-grow: 1;
    display: flex;
    background: transparent;
    min-height: 0; /* Allow proper collapse */
}

/* Pin Board Panel - consistent with notes panel structure */
#pin-board-panel .panel-content-collapsible {
    padding: 0.5rem 0.5rem 0.5rem;
    background: transparent;
}
.notes-textarea {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: none;
    flex-grow: 1;
    background: white;
}
.notes-textarea:focus { 
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.08);
}

#notes-panel.notes-panel-floating {
    position: fixed;
    z-index: 1000;
    width: 380px;
    height: 320px;
    min-width: 280px;
    min-height: 220px;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    resize: both;
    overflow: hidden;
    border: 1px solid rgba(0, 86, 179, 0.15);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
}

#notes-panel.notes-panel-floating .panel-header-mobile {
    cursor: move;
    flex-shrink: 0;
    border-radius: 7px 7px 0 0;
    user-select: none;
}

#notes-panel.notes-panel-floating .panel-content-collapsible {
    display: flex !important;
    flex: 1;
    min-height: 0;
    max-height: none !important;
    padding: 0.5rem !important;
    overflow: hidden;
}

#notes-panel.notes-panel-floating .panel-toggle-icon {
    display: none;
}

#notes-panel.notes-panel-floating .notes-textarea {
    min-height: 0;
    height: 100%;
}

.notes-header-title {
    min-width: 0;
}

.notes-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.notes-float-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    color: var(--primary-color);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.notes-float-toggle:hover {
    background: #f0f7ff;
    box-shadow: 0 2px 8px rgba(0, 86, 179, 0.12);
    transform: translateY(-1px);
}

.notes-float-toggle:focus-visible {
    outline: 2px solid rgba(0, 86, 179, 0.4);
    outline-offset: 2px;
}

.notes-icon-pin,
#notes-panel.notes-panel-floating .notes-icon-float {
    display: none;
}

#notes-panel.notes-panel-floating .notes-icon-pin {
    display: block;
}

body.notes-floating-dragging {
    cursor: move !important;
    user-select: none;
}

/* NEW STYLES FOR PATIENT PROFILE */
.patient-profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.patient-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.patient-avatar svg {
    width: 32px;
    height: 32px;
    color: #333;
}
.patient-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.patient-name {
    font-size: 1.2rem;
    font-weight: 600;
}
/* Profile picture in Background Tab */
.background-profile-picture {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem auto; /* Center it and add margin below */
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    /* Ensure this flex item doesn't collapse or get overlapped by the heading */
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.background-profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Profile picture header in chat window */
.chat-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    margin-bottom: 1rem;
}

.chat-profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 0.75rem;
}

.chat-profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-profile-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
}


#upload-picture-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid #d1d5da;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f2f5;
    color: #333;
    margin-top: 0.5rem;
    align-self: flex-start;
}

#upload-picture-btn:hover:not(:disabled) {
    background-color: #e1e8ed;
}

.profile-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

.panel-section {
    padding: 1rem;
    background-color: white;
}
#case-selection-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
/* NEW: Add spacing between mode and case selectors when they are in the same panel */
#case-selection-container {
    margin-top: 1rem;
}

/* Modern Case Selector Styling */
#case-selector {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.9375rem;
    font-weight: 500;
    background-color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.2rem;
    padding-right: 2.75rem;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#case-selector:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

#case-selector:focus {
    outline: none;
    background-color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.08);
}

#case-selector option {
    padding: 0.625rem;
    font-weight: 500;
}

/* Enhanced Modern Mode Selector Styling - Hidden (replaced by custom dropdown) */
#mode-selector {
    display: none !important;
}

/* Custom Select Dropdown for Mode Selector */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    background-color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    transition: all 0.15s ease;
}

.custom-select-trigger:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.custom-select-trigger:focus {
    outline: none;
    background-color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.08);
}

.custom-select-trigger .mode-icon {
    flex-shrink: 0;
    color: var(--primary-color);
}

.custom-select-trigger .mode-text {
    flex: 1;
}

.custom-select-trigger .dropdown-arrow {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.custom-select-trigger.active .dropdown-arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.custom-select-dropdown.active {
    display: block;
}

.custom-select-option {
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
}

.custom-select-option:hover {
    background-color: #f8f9fa;
}

.custom-select-option.selected {
    background-color: rgba(0, 86, 179, 0.05);
    color: var(--primary-color);
}

.custom-select-option svg {
    flex-shrink: 0;
    color: var(--primary-color);
}

.custom-select-option span {
    flex: 1;
}

.panel-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
}

.panel-footer-action {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e9ecef;
    background-color: transparent;
}
.panel-footer-action .action-button:last-child {
    margin-bottom: 0;
}

.modal-textarea {
    width: 100%;
    min-height: 128px;
    padding: 0.65rem 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-family: var(--font-family);
    font-size: 0.9rem;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .comparison-panels {
        flex-direction: column;
    }
    
    .comparison-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 50%;
    }
    
    .comparison-panel:last-child {
        border-bottom: none;
    }
}

#timer-display {
    font-weight: 600;
    font-size: 1.1rem;
    background-color: #ffcdd2; /* A darker, low-saturation red */
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    color: #333;
    transition: all 0.3s ease;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; /* Monospaced for stable width */
}
#timer-display.warning {
    background-color: #fff5f5;
    color: #cb2431;
    font-weight: bold;
    animation: timer-pulse 1.5s infinite;
}

/* Floating Timer Display */
#floating-timer-display {
    position: absolute;
    bottom: 100px; /* Will be dynamically updated by JavaScript */
    right: 20px;
    
    /* Transparency: 70% transparent = 30% opacity */
    opacity: 0.3;
    
    /* Visual styling - smaller on desktop */
    font-weight: 600;
    font-size: 1.1rem;
    background-color: #ffcdd2;
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    color: #333;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    
    /* Layering */
    z-index: 100;
    
    /* Smooth transitions */
    transition: opacity 0.3s ease, background-color 0.3s ease, bottom 0.2s ease;
    
    /* Allow clicking through when not interacting */
    pointer-events: none;
}

#floating-timer-display:hover {
    opacity: 1;
    pointer-events: auto;
}

#floating-timer-display.warning {
    background-color: #ef5350;
    color: white;
    animation: pulse-floating 1.5s infinite;
}

@keyframes pulse-floating {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Mobile adjustments for floating timer */
@media (max-width: 480px) {
    #floating-timer-display {
        bottom: 100px; /* Will be dynamically updated by JavaScript */
        right: 10px;
        font-size: 1rem;
        padding: 0.35rem 0.7rem;
    }
}

/* PBL Difficulty Dropdown */
#pbl-difficulty-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#pbl-difficulty-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    margin: 0;
}
#pbl-difficulty-dropdown {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
#pbl-difficulty-dropdown:hover {
    border-color: var(--primary-color);
}
#pbl-difficulty-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
}

#bot-selector {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}

@keyframes blink {
    from, to { background-color: transparent }
    50% { background-color: #333; }
}

/* Styles for code blocks */
.message .rendered-markdown pre {
    background-color: #282c34;
    color: #abb2bf;
    padding: 1em;
    border-radius: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 1em 0;
}

@keyframes pulse-stt {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

@keyframes timer-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* --- Mobile Accordion Styles --- */
.panel-header-mobile {
    display: none; /* Hidden on desktop */
}

/* Show the headers for the Notes and Pin Board panels on desktop, as they are collapsible. */
#notes-panel .panel-header-mobile,
#pin-board-panel .panel-header-mobile {
    display: flex;
    cursor: pointer; /* Allow collapsing on desktop */
}

/* Style the notes panel and pin board panel headers similar to tab buttons */
#notes-panel .panel-header-mobile,
#pin-board-panel .panel-header-mobile {
    background: white;
    padding: 0.55rem 0.85rem 0.65rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--primary-color);
    border-radius: 7px 7px 0 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    justify-content: space-between;
    align-items: center;
    transition: border-radius 0.3s ease, box-shadow 0.3s ease, background-color 0.2s ease;
}

/* Hover effect for collapsible panel headers */
#notes-panel .panel-header-mobile:hover,
#pin-board-panel .panel-header-mobile:hover {
    background: #f8f9fa;
}

/* Ensure the toggle icon is also visible for these desktop headers. */
#notes-panel .panel-toggle-icon,
#pin-board-panel .panel-toggle-icon {
    display: inline-block; /* Show toggle on desktop */
}

/* NEW: Ensure collapsible content fills the panel on desktop */
.panel-content-collapsible {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* This allows the .tab-content child with flex-grow: 1 to expand correctly. */
    /* On mobile, this is overridden by max-height for the accordion effect. */
    overflow: hidden; /* Contain scrolling children like tab content */
}

@media (max-width: 900px) {
    html {
        font-size: 15px; /* Use a slightly smaller base font for mobile */
    }

    /* Hide the "Language:" label on mobile to save space */
    #language-selection-container label {
        display: none;
    }

    .app-header {
        padding: 0.75rem 1rem 0.35rem;
    }

    .app-header h1 {
        font-size: 0.95rem;
        /* Truncate long text on small screens if needed */
        word-break: break-word;
        max-width: 60vw;
    }

    /* Mobile: hide full title, show shorter title */
    .desktop-header-title {
        display: none;
    }
    
    .mobile-header-title {
        display: inline;
    }

    .contact-admin {
        display: none;
    }

    .chat-header {
        padding: 0.75rem 1rem; /* Reduce vertical padding */
    }
    
    .chat-input-form {
        padding: 0.75rem 1rem;
    }

    #user-avatar {
        width: 20px;
        height: 20px;
    }

    /* --- NEW: Responsive Chat Title --- */
    #chat-title .desktop-title {
        display: none;
    }
    #chat-title .mobile-title {
        display: inline;
    }

    #user-display-name,
    #sign-out-btn {
        display: none;
    }

    /* Responsive changes for the roundtable */
    #pbl-roundtable-container {
        height: auto; /* Let it grow with content */
        max-height: none; /* Remove height restriction for better visibility */
        overflow-y: visible;
        padding: 15px 10px;
    }
    .virtual-table { display: none; }
    .pbl-environment {
        flex-direction: column;
        justify-content: flex-start; /* Align to top */
        gap: 15px;
        padding: 0;
        height: auto; /* Let it grow */
    }
    
    /* Create a chat-like row layout for mobile */
    .character-rig {
        position: relative !important; /* Use important to override inline styles */
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start; /* Align items to top */
        gap: 12px;
        min-height: 70px; /* Minimum height when no bubble visible - ensures consistent spacing */
    }
    
    /* Character container - now part of horizontal flex layout */
    .character {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        justify-items: start !important;
        position: relative !important;
    }
    
    /* Avatar column wrapper on the left - keeps avatar and name together */
    .character .icon-wrapper {
        position: relative;
        order: 1;
        width: 50px;
        height: 50px;
        flex-shrink: 0; /* Don't shrink */
    }
    
    .character .person-icon {
        width: 50px;
        height: 50px;
    }
    
    /* Name positioned below the avatar within the wrapper */
    .character .character-name {
        position: absolute;
        top: 60px; /* Position below the 50px icon with 10px gap */
        left: 0;
        width: 50px;
        text-align: center;
        font-size: 0.75em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
    }
    
    /* Speech bubble takes remaining space on the right */
    .character .speech-bubble {
        position: relative !important;
        order: 2;
        flex: 1; /* Take remaining space */
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        transform: none !important;
        max-width: calc(100vw - 100px) !important; /* Leave space for avatar and padding */
        width: auto !important;
        font-size: 1.1rem !important; /* Even larger font size for better mobile readability */
        line-height: 1.7 !important;
        padding: 16px 18px !important;
        display: none !important; /* Hide completely when not visible - don't take up space */
    }
    
    .character .speech-bubble.visible {
        display: block !important; /* Show when visible */
        transform: scale(1) !important; /* No scaling on mobile */
    }
    
    /* Remove the speech bubble tail on mobile for cleaner look */
    .character .speech-bubble::after {
        display: none !important;
    }
    
    /* Facilitator bubble should follow same layout on mobile */
    #rig-facilitator .speech-bubble {
        position: relative !important;
        order: 2;
        flex: 1;
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        max-width: calc(100vw - 100px) !important;
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
        padding: 16px 18px !important;
        display: none !important; /* Hide completely when not visible */
    }
    
    #rig-facilitator .speech-bubble.visible {
        display: block !important; /* Show when visible */
    }
    
    /* Scriber bubble should also follow same mobile layout but with scrollbar for long content */
    #rig-scriber .speech-bubble {
        position: relative !important;
        order: 2;
        flex: 1;
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        max-width: calc(100vw - 100px) !important;
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
        padding: 16px 18px !important;
        display: none !important; /* Hide completely when not visible */
    }
    
    #rig-scriber .speech-bubble.visible {
        display: block !important; /* Show when visible */
    }
    
    #rig-scriber .speech-bubble-content {
        max-height: 40vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Typing indicator positioned to the right of avatar */
    .character .typing-indicator {
        position: absolute !important;
        bottom: auto !important;
        top: 15px !important; /* Fixed position from top, aligned with avatar center */
        left: 62px !important; /* Position to the right of avatar (50px width + 12px gap) */
        margin: 0 !important;
        transform: none !important;
    }
    
    /* When speech bubble is visible, typing indicator should not be shown */
    .character:has(.speech-bubble.visible) .typing-indicator {
        display: none !important;
    }
    
    /* Hide inactive characters on mobile to reduce clutter */
    .character-rig:has(.character:not(.active)) {
        opacity: 0.3;
    }
    
    /* Active character is fully visible */
    .character-rig:has(.character.active) {
        opacity: 1;
    }
    
    /* Adjust active character styling for mobile */
    .character.active {
        transform: none !important; /* No transform on mobile */
    }
    .main-container {
        display: flex;
        flex-direction: column;
        overflow-y: auto; /* Allow the main area to scroll if content overflows */
        height: 100%; /* Use full height of parent */
        padding: 0.25rem;
        gap: 0.25rem;
        /* Remove grid properties that are no longer needed */
        grid-template-columns: 1fr;
        grid-template-areas:
            "chat"
            "tools"
            "notes";
    }

    #vertical-resizer { display: none; }

    .dashboard-panel {
        flex-shrink: 0; /* Prevent panels from shrinking */
        border-radius: 0; /* Remove border radius on mobile for full width */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        margin-bottom: 0.5rem;
    }
    
    /* Ensure tools, notes, and pin board panels have consistent styling */
    #tools-panel,
    #notes-panel,
    #pin-board-panel {
        background-color: #ffffff;
    }

    /* Re-order panels for mobile and guarantee chat window is always visible */
    #chat-panel {
        order: 1; /* 1. Place chat panel at the top */
        flex-grow: 1; /* 2. Allow it to take available space */
        min-height: 60vh; /* 3. Ensure it's always at least 60% of the screen height */
    }

    #tools-panel {
        order: 2; /* Place tools panel below chat */
    }

    #notes-panel {
        order: 3; /* Place notes panel third */
    }

    #pin-board-panel {
        order: 4; /* Place pin board panel at the bottom in PBL mode */
    }

    .panel-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
        background-color: #ffffff;
        font-size: 0.9rem;
        color: #333;
    }
    
    /* Add border only when panel is not expanded */
    .dashboard-panel:not(.active) .panel-header-mobile {
        border-bottom: 1px solid #e5e7eb;
    }
    
    /* Ensure the notes panel header is clickable on mobile for the accordion */
    /* Reset flex properties for mobile accordion to work correctly */
    .panel-content-collapsible {
        display: block;
        flex-grow: 0;
        background-color: #ffffff;
    }
    #notes-panel .panel-header-mobile {
        cursor: pointer;
    }

    .panel-toggle-icon {
        font-size: 1.5rem;
        font-weight: 600; /* Bolder to look more like a button */
        line-height: 1; /* Better vertical alignment */
        /* Ensure toggle icon is visible on mobile, overriding the desktop hide rule */
        display: inline-block;
        transition: transform 0.3s ease;
    }
    
    /* Rotate icon when panel is active/expanded */
    .dashboard-panel.active .panel-toggle-icon {
        transform: rotate(45deg); /* Rotates plus to X */
    }

    .panel-content-collapsible {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }

    .dashboard-panel.active .panel-content-collapsible {
        max-height: 5000px; /* Large value to allow full content expansion while maintaining animation */
        overflow-y: visible; /* No scrollbar on the panel itself, content scrolls with page */
    }
    
    /* Ensure all panels start collapsed on mobile by default */
    #tools-panel .panel-content-collapsible,
    #notes-panel .panel-content-collapsible,
    #pin-board-panel .panel-content-collapsible {
        max-height: 0 !important; /* Force collapsed state */
        padding: 0 !important; /* Remove all padding when collapsed */
        border: none;
    }
    
    /* When active, expand the content */
    #tools-panel.active .panel-content-collapsible,
    #notes-panel.active .panel-content-collapsible {
        max-height: 5000px !important; /* Allow expansion */
        padding: 0.75rem 1rem !important; /* Add padding when expanded */
    }
    
    /* Pin board panel needs different padding to maintain glass board design */
    #pin-board-panel.active .panel-content-collapsible {
        max-height: 5000px !important; /* Allow expansion */
        padding: 0.5rem !important; /* Less padding to preserve board design */
    }
    
    /* Specific styling for notes panel content on mobile */
    #notes-panel .panel-content {
        padding: 0;
        min-height: 0; /* Allow full collapse */
    }
    
    #notes-panel .notes-textarea {
        border-radius: 0;
        min-height: 150px;
    }
    
    /* Ensure panel has no extra spacing when collapsed */
    #notes-panel:not(.active),
    #tools-panel:not(.active),
    #pin-board-panel:not(.active) {
        min-height: auto;
    }

    /* On mobile, tab content should not have its own scrollbar */
    .tab-content {
        overflow-y: visible; /* Remove nested scrollbar */
        max-height: none; /* Allow full expansion */
        padding: 0.75rem 0; /* Vertical padding for tab content */
    }
    
    /* Tools panel specific adjustments */
    #tools-panel .panel-section {
        padding: 0 0 0.5rem 0;
    }

    /* --- MODIFICATION START --- */
    .chat-input-form {
        flex-wrap: wrap;
        row-gap: 0.5rem; /* Add space between input and button rows */
    }

    .input-container {
        margin-right: 0; /* Remove margin, let gap handle spacing */
    }

    #pbl-mode-controls {
        flex-basis: 100%; /* Force this container to a new line */
        justify-content: flex-end; /* Push buttons to the right */
    }
    /* --- MODIFICATION END --- */

    /* --- Mobile Button Size Adjustments --- */
    .stt-button,
    .send-button {
        width: 38px;
        height: 38px;
    }
    .stt-button {
        margin-right: 0.25rem; /* Reduce margin for smaller button */
    }
    .send-button {
        font-size: 1.25rem; /* Reduce icon size */
    }
    .stt-button svg {
        width: 18px; /* Reduce icon size */
        height: 18px;
    }

    /* Speech bubble width handled by character-rig flex layout on mobile */

    /* --- Mobile Modal Improvements --- */
    #user-management-modal,
    #review-case-modal {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    /* User Management: Make table horizontally scrollable */
    #user-list-container {
        overflow-x: auto;
    }
    .user-management-table {
        min-width: 950px; /* Force horizontal scroll on small screens (increased for name/cohort columns) */
    }

    /* --- Course Management Mobile Improvements --- */
    .modal-back-btn {
        display: none; /* Hidden by default, shown by JS on mobile */
        background: none;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        color: var(--primary-color);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .enrollment-columns {
        grid-template-columns: 1fr; /* Stack columns */
    }
    
    /* Mobile tab styles */
    .cm-tab-nav {
        padding: 0.5rem 0.5rem 0;
        gap: 0.15rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .cm-tab-button {
        padding: 0.625rem 0.75rem 0.75rem;
        font-size: 0.875rem;
        flex-shrink: 0;
        flex-grow: 0;
        min-width: auto;
    }
    
    /* Ensure tab content is scrollable on mobile */
    #cm-tab-content-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .typing-indicator { 
        bottom: 110px; 
    }
}


/* ===================================================================
   IPE MODE SPECIFIC STYLES
   =================================================================== */

/* IPE Mode Active State */
.main-container.ipe-mode-active {
    --mode-accent-color: #9B59B6; /* Purple for IPE */
}

.main-container.pbl-mode-active {
    --mode-accent-color: #4A90E2; /* Blue for PBL */
}

/* IPE Profession Selector Container */
#ipe-profession-selector-container {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

#ipe-profession-selector-container label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #9B59B6;
    margin: 0;
    white-space: nowrap;
}

#ipe-user-profession-selector {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

#ipe-user-profession-selector:focus {
    outline: none;
    border-color: #9B59B6;
    box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.1);
}

#ipe-user-profession-selector:hover {
    border-color: #9B59B6;
}

/* IPE Difficulty Container */
#ipe-difficulty-container {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

#ipe-difficulty-container label {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

#ipe-difficulty-selector {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
}

/* IPE Mode (BEFORE session starts) */
.main-container.ipe-mode-active:not(.ipe-session-active) {
    grid-template-rows: 1fr;
    grid-template-areas:
        "tools chat";
    overflow: visible;
}

.main-container.ipe-mode-active:not(.ipe-session-active) #vertical-resizer,
.main-container.ipe-mode-active:not(.ipe-session-active) #pin-board-panel,
.main-container.ipe-mode-active:not(.ipe-session-active) #notes-panel {
    display: none !important;
}

/* IPE Session Active Layout - Same as PBL */
.main-container.ipe-mode-active.ipe-session-active {
    min-height: calc(70vh + 50vh + 5px);
    grid-template-rows: 70vh 5px 50vh;
    grid-template-areas:
        "tools pbl-content"
        "resizer-y resizer-y"
        "notes pin-board";
    overflow: visible;
}

/* IPE collapsed state overrides */
.main-container.ipe-mode-active.ipe-session-active.notes-collapsed #notes-panel {
    overflow: hidden;
    box-shadow: none;
    background: transparent;
    border: none;
    padding-top: 0.35rem;
}

.main-container.ipe-mode-active.ipe-session-active.notes-collapsed #notes-panel .panel-header-mobile {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.main-container.ipe-mode-active.ipe-session-active.notes-collapsed #pin-board-panel {
    overflow: hidden;
    box-shadow: none;
    background: transparent;
    border: none;
    padding-top: 0.35rem;
}

.main-container.ipe-mode-active.ipe-session-active.notes-collapsed #pin-board-panel .panel-header-mobile {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.main-container.ipe-mode-active.ipe-session-active.notes-collapsed #chat-panel.pbl-layout-active {
    max-height: 100vh;
    overflow: hidden;
}

.main-container.ipe-mode-active.ipe-session-active.notes-collapsed #chat-panel.pbl-layout-active > .chat-messages {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.main-container.ipe-session-active.notes-collapsed #pin-board-panel .panel-content-collapsible {
    display: none;
}

/* IPE Mode Controls */
#ipe-mode-controls {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

/* Start IPE Container */
#start-ipe-container {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    margin: 1rem 0;
}

#start-ipe-container button {
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

#start-solo-ipe-btn {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    color: white;
}

#start-solo-ipe-btn:hover {
    opacity: 0.9;
}

#start-solo-ipe-btn:active {
    opacity: 1;
}

/* Apply accent color to IPE mode elements */
.main-container.ipe-mode-active .pbl-tab-button.active {
    border-bottom: 2px solid var(--mode-accent-color);
    color: var(--mode-accent-color);
}

.main-container.ipe-mode-active #timer-display {
    color: var(--mode-accent-color);
    border-color: var(--mode-accent-color);
}

.main-container.ipe-mode-active #timer-display.warning {
    color: #e74c3c;
    border-color: #e74c3c;
}

/* Responsive adjustments for IPE profession selector */
@media (max-width: 768px) {
    #ipe-profession-selector-container {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    
    #ipe-user-profession-selector {
        width: 100%;
    }
}

/* ===================================================================
   Integrated Attachment Links (in Chat)
   =================================================================== */

/* Style for attachment links generated from PROVIDE_ATTACHMENT:X */
.bot-message a,
.message-bubble a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.bot-message a:hover,
.message-bubble a:hover {
    color: #004085;
    border-bottom-color: var(--primary-color);
}

/* Special styling for attachment links (those with 📎 emoji) */
.bot-message a[title^="Download"],
.message-bubble a[title^="Download"] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.8rem;
    background-color: #f0f7ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    color: var(--primary-color);
    font-weight: 600;
    margin: 0.25rem 0;
    transition: all 0.2s ease;
}

.bot-message a[title^="Download"]:hover,
.message-bubble a[title^="Download"]:hover {
    background-color: #e0f0ff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 86, 179, 0.2);
}

/* Ensure rendered markdown links also get styled */
.rendered-markdown a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.rendered-markdown a:hover {
    color: #004085;
    border-bottom-color: var(--primary-color);
}

.rendered-markdown a[title^="Download"] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.8rem;
    background-color: #f0f7ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    color: var(--primary-color);
    font-weight: 600;
    margin: 0.25rem 0;
    transition: all 0.2s ease;
}

.rendered-markdown a[title^="Download"]:hover {
    background-color: #e0f0ff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 86, 179, 0.2);
}

/* === Language Switcher Styles === */
#language-switcher {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.lang-btn {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.lang-btn:hover {
    background: var(--bg-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.lang-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.lang-btn.active:hover {
    background: #004494;
    border-color: #004494;
}

/* Auth modal language switcher */
#auth-language-switcher {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#auth-language-switcher .lang-btn {
    min-width: 60px;
}

/* Mobile adjustments for language switcher */
@media (max-width: 768px) {
    #language-switcher {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
    }
    
    .lang-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
    
    #auth-language-switcher .lang-btn {
        min-width: 50px;
    }
}