/* Cross-Platform Responsive Foundation */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

button:focus,
button:active {
    outline: none !important;
    box-shadow: none !important;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Prevent font scaling in mobile browsers */
    -ms-text-size-adjust: 100%;
    /* Prevent font scaling in mobile browsers */
    text-size-adjust: 100%;
}

/* ===========================================
   CSS CUSTOM PROPERTIES FOR FONT SIZING
   Three text size modes: small (default), medium, large
   =========================================== */
:root {
    /* Base font sizes - Small (default) - INCREASED for better readability */
    --font-size-2xs: 0.75rem;
    /* 12px */
    --font-size-xs: 0.875rem;
    /* 14px */
    --font-size-sm: 1rem;
    /* 16px */
    --font-size-base: 1.1rem;
    /* 17.6px */
    --font-size-lg: 1.2rem;
    /* 19.2px */
    --font-size-xl: 1.35rem;
    /* 21.6px */
    --font-size-2xl: 1.6rem;
    /* 25.6px */
    --font-size-3xl: 2rem;
    /* 32px */

    /* Chat-specific font sizes - increased for visibility */
    --font-size-chat-message: 1rem;
    --font-size-chat-input: 1rem;
    --font-size-chat-placeholder: 1rem;
    --font-size-input-icon: 1.1rem;
    --font-size-welcome: clamp(1.35rem, 3.2vw, 1.6rem);

    /* Sidebar font sizes */
    --font-size-sidebar-logo: 1.375rem;
    --font-size-sidebar-label: 0.75rem;
    --font-size-sidebar-agent-name: 0.9rem;
    --font-size-sidebar-agent-desc: 0.75rem;
    --font-size-sidebar-icon: 1rem;
    --font-size-sidebar-resource: 0.9rem;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
}

/* Global textarea auto-expand: no scrollbars, grows with content */
textarea {
    overflow-y: hidden;
    resize: vertical;
}

/* Transparent resize handle background - keep the grip icon visible */
textarea::-webkit-resizer {
    background-color: transparent;
    border: none;
}

/* Visible diagonal resize handle for template textareas - small corner triangle */
.template-input::-webkit-resizer,
.cell-input::-webkit-resizer,
.inline-fillin-input::-webkit-resizer {
    background-image: linear-gradient(135deg, transparent 70%, #9ca3af 70%, #9ca3af 73%, transparent 73%),
        linear-gradient(135deg, transparent 80%, #9ca3af 80%, #9ca3af 83%, transparent 83%);
    background-color: transparent;
}

/* Medium text mode */
body.medium-text {
    --font-size-2xs: 0.875rem;
    /* 14px */
    --font-size-xs: 1rem;
    /* 16px */
    --font-size-sm: 1.125rem;
    /* 18px */
    --font-size-base: 1.25rem;
    /* 20px */
    --font-size-lg: 1.375rem;
    /* 22px */
    --font-size-xl: 1.5rem;
    /* 24px */
    --font-size-2xl: 1.75rem;
    /* 28px */
    --font-size-3xl: 2.25rem;
    /* 36px */

    --font-size-chat-message: clamp(1.125rem, 2.8vw, 1.35rem);
    --font-size-chat-input: clamp(1.125rem, 2.8vw, 1.35rem);
    --font-size-chat-placeholder: clamp(1.35rem, 3vw, 1.5rem);
    --font-size-input-icon: 1.35rem;
    --font-size-welcome: clamp(1.5rem, 3.5vw, 1.8rem);

    --font-size-sidebar-logo: 1.625rem;
    --font-size-sidebar-label: 0.9rem;
    --font-size-sidebar-agent-name: 1.125rem;
    --font-size-sidebar-agent-desc: 1rem;
    --font-size-sidebar-icon: 1.2rem;
    --font-size-sidebar-resource: 1.125rem;
}

/* Large text mode */
body.large-text {
    --font-size-2xs: 1rem;
    /* 16px */
    --font-size-xs: 1.125rem;
    /* 18px */
    --font-size-sm: 1.25rem;
    /* 20px */
    --font-size-base: 1.375rem;
    /* 22px */
    --font-size-lg: 1.5rem;
    /* 24px */
    --font-size-xl: 1.625rem;
    /* 26px */
    --font-size-2xl: 2rem;
    /* 32px */
    --font-size-3xl: 2.5rem;
    /* 40px */

    --font-size-chat-message: clamp(1.25rem, 3vw, 1.5rem);
    --font-size-chat-input: clamp(1.25rem, 3vw, 1.5rem);
    --font-size-chat-placeholder: clamp(1.5rem, 3.2vw, 1.75rem);
    --font-size-input-icon: 1.5rem;
    --font-size-welcome: clamp(1.65rem, 3.8vw, 2rem);

    --font-size-sidebar-logo: 2rem;
    --font-size-sidebar-label: 1rem;
    --font-size-sidebar-agent-name: 1.25rem;
    --font-size-sidebar-agent-desc: 1.15rem;
    --font-size-sidebar-icon: 1.35rem;
    --font-size-sidebar-resource: 1.25rem;
}

/* ============================================
   FEATURE TOGGLE HIDE RULES
   ============================================ */

/* Hide voice input button when toggled off */
body.voice-input-hidden .voice-input-btn,
body.voice-input-hidden #voiceButton,
body.voice-input-hidden .dictation-btn {
    display: none !important;
}

/* Hide add content button when toggled off */
body.add-content-hidden .add-btn,
body.add-content-hidden #addButton,
body.add-content-hidden .chat-add-btn {
    display: none !important;
}

/* Hide AI recommendations when toggled off */
body.ai-recommend-hidden .ai-chip,
body.ai-recommend-hidden .recommendation-chip,
body.ai-recommend-hidden .recommendation-chips-container,
body.ai-recommend-hidden .ai-suggestion {
    display: none !important;
}

/* Ensure proper box model for all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Smooth scrolling for mobile devices */
html,
body {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Mobile browser fixes */
    position: relative;
    width: 100%;
}

/* Export button animation */
#exportButton:hover i {
    transform: translateY(2px);
    transition: transform 0.2s ease;
}

#exportButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#exportButton:disabled:hover i {
    transform: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Agent Suggestion Styles (Hybrid Approach) */
.agent-suggestion {
    margin: 15px 20px;
    padding: 15px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    animation: slideDown 0.3s ease-out;
    transition: opacity 0.3s ease;
}

.dark-mode .agent-suggestion {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    border-color: #60a5fa;
}

.suggestion-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.suggestion-icon {
    font-size: var(--font-size-2xl);
    color: #f59e0b;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.suggestion-text {
    flex: 1;
}

.suggestion-text p {
    margin: 0 0 12px 0;
    color: #1e40af;
    font-weight: 500;
}

.dark-mode .suggestion-text p {
    color: #dbeafe;
}

.suggestion-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.suggestion-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.suggestion-accept {
    background: #3b82f6;
    color: white;
}

.suggestion-accept:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.suggestion-dismiss {
    background: #e5e7eb;
    color: #4b5563;
}

.suggestion-dismiss:hover {
    background: #d1d5db;
}

.dark-mode .suggestion-dismiss {
    background: #374151;
    color: #9ca3af;
}

.dark-mode .suggestion-dismiss:hover {
    background: #4b5563;
}

/* System message style */
.system-message {
    padding: 8px 15px;
    margin: 10px 0;
    background: #f3f4f6;
    color: #4b5563;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
}

.dark-mode .system-message {
    background: #1f2937;
    color: #9ca3af;
}

/* Enhanced Timeline Styles for Validation */
.timeline-container {
    padding: 10px;
}

.timeline-item {
    margin-bottom: 20px;
    position: relative;
    padding-left: 40px;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-sm);
}

.timeline-content {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
}

.dark-mode .timeline-content {
    background: #1f2937;
    border-color: #374151;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.timeline-title {
    font-weight: 600;
    color: #111827;
}

.dark-mode .timeline-title {
    color: #f3f4f6;
}

.timeline-time {
    font-size: var(--font-size-2xs);
    color: #4b5563;
}

.timeline-message {
    margin: 8px 0;
    color: #4b5563;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.dark-mode .timeline-message {
    color: #d1d5db;
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.dark-mode .timeline-meta {
    border-top-color: #374151;
}

.meta-item {
    font-size: var(--font-size-2xs);
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i {
    font-size: var(--font-size-2xs);
    opacity: 0.7;
}

.suggestion-reason {
    margin-top: 8px;
    padding: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    color: #4b5563;
}

.dark-mode .suggestion-reason {
    background: #111827;
    color: #d1d5db;
}

.suggestion-accepted {
    margin-top: 8px;
    padding: 6px 10px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dark-mode .suggestion-accepted {
    background: #064e3b;
    color: #6ee7b7;
}

.timeline-validation-summary {
    margin-top: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 2px solid #3b82f6;
    border-radius: 12px;
}

.dark-mode .timeline-validation-summary {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    border-color: #60a5fa;
}

.timeline-validation-summary h4 {
    margin: 0 0 15px 0;
    color: #1e40af;
    font-size: var(--font-size-base);
}

.dark-mode .timeline-validation-summary h4 {
    color: #93c5fd;
}

.validation-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: var(--font-size-2xs);
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: #1f2937;
}

.dark-mode .stat-value {
    color: #f3f4f6;
}

.stat-value.good {
    color: #10b981;
}

.stat-value.low {
    color: #f59e0b;
}

.timeline-details {
    display: block;
    margin-top: 8px;
    font-size: var(--font-size-2xs);
    color: #9ca3af;
    font-style: italic;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===========================================
   SIDEBAR STYLES
   =========================================== */

:root {
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 72px;
    --sidebar-transition: 0.3s ease;
}

/* Sidebar Container */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: #f9fafb;
    border-right: 0;
    outline: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform var(--sidebar-transition), width var(--sidebar-transition);
    overflow: hidden;
}

/* Sidebar nav area - scrollable */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar-nav::-webkit-scrollbar {
    width: 0;
    display: none;
}

@supports (height: 100dvh) {
    .sidebar {
        height: 100dvh;
    }
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar.collapsed .sidebar-agent-info,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-setting-btn span,
.sidebar.collapsed .sidebar-language-select,
.sidebar.collapsed .sidebar-export-menu {
    display: none;
}

.sidebar.collapsed .sidebar-agent {
    padding: 6px;
    justify-content: center;
    border: none;
    background: none;
}

.sidebar.collapsed .sidebar-agent:hover {
    background: none;
}

.sidebar.collapsed .sidebar-agent.active {
    background: none;
    border: none;
}

.sidebar.collapsed .sidebar-agent-avatar {
    margin: 0;
}

.sidebar.collapsed .sidebar-setting-btn {
    justify-content: center;
    padding: 12px;
}

.sidebar.collapsed .sidebar-section {
    padding: 2px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar.collapsed .sidebar-agents {
    width: 100%;
    align-items: center;
}

.sidebar.collapsed .sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    overflow: visible;
}

.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    min-height: 52px;
    gap: 10px;
    flex-shrink: 0;
}

.sidebar-logo-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.sidebar-logo-img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.sidebar-logo {
    font-family: "Bubblegum Sans", sans-serif;
    font-weight: 600;
    color: #276FFF;
    font-size: var(--font-size-sidebar-logo);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-logo {
    display: none;
}

.sidebar.collapsed .sidebar-logo-group {
    flex: 0;
    justify-content: center;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 12px 8px;
    gap: 0;
    flex-direction: row;
    align-items: center;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}

.sidebar.collapsed .sidebar-logo-group {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.sidebar.collapsed .sidebar-logo-img {
    width: 32px;
    height: 32px;
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-toggle {
    display: none;
}

.sidebar.collapsed .sidebar-toggle i {
    font-size: var(--font-size-2xs);
}

.sidebar-toggle {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover {
    background: #f3f4f6;
    color: #374151;
}

.sidebar-toggle i {
    font-size: var(--font-size-sm);
    transition: transform 0.3s ease;
}

/* Sidebar Sections */
.sidebar-section {
    padding: 3px 12px;
}

.sidebar-section-label {
    font-size: var(--font-size-sidebar-label);
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    padding-left: 4px;
}

/* Case Study Selector in Sidebar — match .sidebar-resource-btn exactly */
#caseStudySelectorContainer .student-profile-selector {
    margin: 0;
}

#caseStudySelectorContainer .student-profile-trigger {
    padding: 5px 16px;
    gap: 8px;
    font-size: var(--font-size-sidebar-agent-name);
    font-weight: 400;
    border-radius: 4px;
    min-height: 26px;
    border: 0;
    outline: 0;
}

#caseStudySelectorContainer .student-profile-trigger i {
    font-size: var(--font-size-sm);
    width: 24px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#caseStudySelectorContainer .trigger-text {
    font-size: var(--font-size-sidebar-agent-name);
    font-weight: 400;
}

/* Collapsed sidebar hides case study section */
.sidebar.collapsed #caseStudySelectorContainer {
    display: none;
}

body.dark-mode #caseStudySelectorContainer {
    border-bottom-color: #374151;
}

/* ==================== CASE STUDY INTEGRATION STYLES ==================== */

/* Enhanced Case Study Banner */
.student-profile-banner {
    margin: 15px 20px 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.9));
    border: 1px solid rgba(191, 219, 254, 0.8);
    border-radius: 16px;
    box-shadow:
        0 4px 6px -1px rgba(59, 130, 246, 0.1),
        0 2px 4px -1px rgba(59, 130, 246, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: slideDown 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.dark-mode .student-profile-banner {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4), rgba(30, 64, 175, 0.3));
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.student-profile-banner.hidden {
    display: none;
}

.banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-label-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banner-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
}

.banner-title {
    font-size: var(--font-size-2xs);
    font-weight: 700;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

body.dark-mode .banner-title {
    color: #818cf8;
}

.banner-actions {
    display: flex;
    gap: 8px;
}

.banner-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-2xs);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.banner-btn.view-btn {
    background: rgba(255, 255, 255, 0.8);
    color: #4f46e5;
    border: 1px solid rgba(199, 210, 254, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.banner-btn.view-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

body.dark-mode .banner-btn.view-btn {
    background: rgba(30, 41, 59, 0.6);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

body.dark-mode .banner-btn.view-btn:hover {
    background: rgba(49, 46, 129, 0.5);
}

.banner-btn.edit-btn {
    background: #4f46e5;
    color: white;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25);
}

.banner-btn.edit-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35);
}

/* Student Chips Container */
.banner-students-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 42px;
    /* Align with text start, offset by icon width + gap */
}

/* Individual Student Chip */
.banner-student-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}

.banner-student-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

body.dark-mode .banner-student-chip {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(75, 85, 99, 0.5);
}

.chip-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-size: var(--font-size-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chip-name {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #374151;
}

body.dark-mode .chip-name {
    color: #d1d5db;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .student-profile-banner {
        margin: 10px 15px;
        padding: 12px 15px;
    }

    .banner-students-container {
        padding-left: 0;
        /* Reset indentation on mobile for space */
    }

    .banner-btn span {
        display: none;
        /* Hide text on very small screens if needed, or keep */
    }
}

/* Case Study Modal */
.student-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.student-profile-modal .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.student-profile-modal .modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    width: 90vw;
    max-width: 700px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease;
}

.student-profile-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.student-profile-modal .modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-profile-modal .modal-header h3 i {
    color: #2563eb;
}

.student-profile-modal .modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: white;
    border-radius: 8px;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.student-profile-modal .modal-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.student-profile-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.student-profile-modal .student-detail-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

.student-profile-modal .detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.student-profile-modal .student-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.student-profile-modal .detail-header h4 {
    margin: 0 0 4px 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #111827;
}

.student-profile-modal .disability-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 4px;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    margin-right: 6px;
}

.student-profile-modal .extra-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    font-size: var(--font-size-2xs);
    font-weight: 500;
}

.student-profile-modal .detail-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.student-profile-modal .detail-section h5 {
    margin: 0 0 8px 0;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
}

.student-profile-modal .detail-section h5 i {
    color: #2563eb;
    font-size: var(--font-size-2xs);
}

.student-profile-modal .detail-section ul {
    margin: 0;
    padding-left: 16px;
}

.student-profile-modal .detail-section li {
    font-size: var(--font-size-xs);
    color: #374151;
    line-height: 1.5;
    margin-bottom: 4px;
}

.student-profile-modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    justify-content: flex-end;
}

.student-profile-modal .btn-use-info {
    padding: 10px 20px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.student-profile-modal .btn-use-info:hover {
    background: #4f46e5;
}

/* Dark mode for banner */
body.dark-mode .student-profile-banner {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
    border-color: #3b82f6;
}

body.dark-mode .banner-title {
    color: #93c5fd;
}

body.dark-mode .banner-students {
    color: #bfdbfe;
}

body.dark-mode .banner-btn.view-btn {
    background: #1f2937;
    color: #93c5fd;
    border-color: #3b82f6;
}

body.dark-mode .banner-btn.view-btn:hover {
    background: #374151;
}

/* Dark mode for modal */
body.dark-mode .student-profile-modal .modal-content {
    background: #1f2937;
}

body.dark-mode .student-profile-modal .modal-header {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .student-profile-modal .modal-header h3 {
    color: #f9fafb;
}

body.dark-mode .student-profile-modal .modal-close {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .student-profile-modal .modal-close:hover {
    background: #4b5563;
    color: #f9fafb;
}

body.dark-mode .student-profile-modal .student-detail-card {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .student-profile-modal .detail-header h4 {
    color: #f9fafb;
}

body.dark-mode .student-profile-modal .disability-tag {
    background: #312e81;
    color: #a5b4fc;
}

body.dark-mode .student-profile-modal .detail-section li {
    color: #d1d5db;
}

body.dark-mode .student-profile-modal .modal-footer {
    background: #111827;
    border-color: #374151;
}

/* Responsive */
@media (max-width: 768px) {
    .student-profile-banner {
        margin: 0 12px 12px;
        padding: 10px 12px;
    }

    .banner-content {
        flex-wrap: wrap;
    }

    .banner-info {
        flex: 1 1 calc(100% - 60px);
    }

    .banner-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .student-profile-modal .modal-content {
        width: 95vw;
        max-height: 90vh;
    }

    .student-profile-modal .modal-body {
        padding: 16px;
    }

    .student-profile-modal .detail-sections {
        grid-template-columns: 1fr;
    }
}

/* ==================== DIFFERENTIATION HIGHLIGHTING IN AI RESPONSES ==================== */
/* Visual highlighting for differentiation sections mentioned by AI */

/* Highlight the Differentiation section header */
#output .assistant strong:has(+ ul li strong),
#output .assistant-message strong:contains("Differentiation") {
    color: #3b82f6;
}

/* Style differentiation list items with student names */
#output .assistant ul li,
#output .assistant-message ul li {
    position: relative;
}

/* Differentiation section container - applied via JS or when AI uses markdown */
.differentiation-section {
    margin: 16px 0;
    padding: 16px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 8px;
}

.differentiation-section::before {
    content: "📚 ";
}

.differentiation-section h4,
.differentiation-section strong:first-child {
    color: #3b82f6;
    margin-bottom: 12px;
}

/* Per-student accommodation cards in responses */
.student-accommodation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 8px 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.student-accommodation .student-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.student-accommodation .accommodation-text {
    flex: 1;
    color: #374151;
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

/* Dark mode for differentiation highlighting */
body.dark-mode .differentiation-section {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(99, 102, 241, 0.08));
    border-color: rgba(139, 92, 246, 0.3);
    border-left-color: #60a5fa;
}

body.dark-mode .differentiation-section h4,
body.dark-mode .differentiation-section strong:first-child {
    color: #a78bfa;
}

body.dark-mode .student-accommodation {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .student-accommodation .accommodation-text {
    color: #e5e7eb;
}

/* Sidebar Agents - Clean Simple Design */
.sidebar-agents {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-agent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
    min-height: 28px;
    font-size: var(--font-size-sidebar-agent-name);
    font-weight: 400;
    color: #374151;
}

.sidebar-agent:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.sidebar-agent:hover .sidebar-agent-name {
    /* Keep original color */
}

.sidebar-agent.active {
    background: #f3f4f6;
    /* Same grey background as hover for selected state */
    color: #374151;
}

.sidebar-agent-avatar {
    width: 24px;
    /* Smaller avatar */
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-2xs);
    /* Smaller font for initials */
    flex-shrink: 0;
}

.sidebar-agent-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Vertically align text */
}

.sidebar-agent-name {
    font-weight: 400;
    font-size: var(--font-size-sidebar-agent-name);
    color: #374151;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sidebar-agent.active .sidebar-agent-name {
    font-weight: 400;
}

/* Hide description for cleaner look */
.sidebar-agent-desc {
    display: none;
}

.sidebar-agent-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
}

.sidebar-agent.active .sidebar-agent-dot {
    background: #3b82f6;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

body.dark-mode .sidebar-agent-dot {
    background: #4b5563;
}

body.dark-mode .sidebar-agent.active .sidebar-agent-dot {
    background: #60a5fa;
}


/* ==================== WORKFLOW PROGRESS STYLES ==================== */

/* Progress bar in sidebar */
.workflow-progress-container {
    padding: 2px 8px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px solid #bae6fd;
}

.dark-mode .workflow-progress-container {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e3a5f 100%);
    border-color: #2563eb;
}

.workflow-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: var(--font-size-xs, 0.85rem);
}

.workflow-progress-label .phase-name {
    font-weight: 600;
    color: #0369a1;
}

.dark-mode .workflow-progress-label .phase-name {
    color: #7dd3fc;
}

.workflow-progress-label .phase-progress {
    font-weight: 500;
    color: #64748b;
}

.dark-mode .workflow-progress-label .phase-progress {
    color: #94a3b8;
}

.workflow-progress-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.dark-mode .workflow-progress-bar {
    background: #334155;
}

.workflow-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Agent phase status indicators - simplified */
.sidebar-agent .phase-check {
    display: none;
}

/* Agent switch suggestion in chat */
.agent-switch-suggestion {
    margin: 16px 0;
    animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.switch-suggestion-content {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
}

.dark-mode .switch-suggestion-content {
    background: #1f2937;
    border-color: #374151;
}

.switch-suggestion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
}

.dark-mode .switch-suggestion-header {
    color: #f3f4f6;
}

.switch-suggestion-header i {
    color: #4b5563;
}

.switch-suggestion-message {
    margin: 0 0 12px 0;
    color: #4b5563;
    font-size: var(--font-size-xs);
}

.dark-mode .switch-suggestion-message {
    color: #d1d5db;
}

.switch-suggestion-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.switch-suggestion-actions button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.switch-suggestion-actions .switch-accept {
    background: #3b82f6;
    color: white;
    border: none;
}

.switch-suggestion-actions .switch-accept:hover {
    background: #2563eb;
}

.switch-suggestion-actions .switch-stay {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #4b5563;
}

.switch-suggestion-actions .switch-stay:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.dark-mode .switch-suggestion-actions .switch-stay {
    border-color: #4b5563;
    color: #9ca3af;
}

.dark-mode .switch-suggestion-actions .switch-stay:hover {
    background: #374151;
}

.agent-switch-suggestion.dismissed {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* System message for agent switch confirmation */
.system-message.agent-switched {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 10px 16px;
    border-radius: 8px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
}

.dark-mode .system-message.agent-switched {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border-color: #10b981;
    color: #a7f3d0;
}

.system-message.agent-switched i {
    color: #10b981;
}

/* ==================== END WORKFLOW PROGRESS STYLES ==================== */

/* Sidebar Resources Section */
.sidebar-resources-section {
    padding: 5px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-resources-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
}

.sidebar-resource-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 16px;
    border: 0;
    outline: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4b5563;
    font-size: var(--font-size-sidebar-agent-name);
    text-align: left;
    font-weight: 400;
    min-height: 26px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sidebar-resource-btn:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.sidebar-resource-btn:hover i {
    color: #2563eb;
}

.sidebar-resource-btn i {
    font-size: var(--font-size-sm);
    width: 24px;
    height: 20px;
    text-align: center;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Progress display items - display-only, not clickable */
.sidebar-resource-btn.progress-display {
    cursor: default;
    pointer-events: none;
}

.sidebar-resource-btn.progress-display:hover {
    background: transparent;
}

.sidebar-resource-btn.progress-display:hover i {
    color: inherit;
}

/* Progress value - styled number with subtle animation */
.progress-value {
    font-weight: 600;
    color: #3b82f6;
    transition: transform 0.3s ease;
    display: inline;
    vertical-align: baseline;
}

/* Analytics button icon - grey default, blue hover */
#analyticsButton i {
    color: #4b5563;
    transition: color 0.15s;
}

#analyticsButton:hover i {
    color: #3b82f6;
}

/* Custom SVG icons for sidebar resources */
.sidebar-resource-btn .sidebar-custom-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-resource-btn .sidebar-custom-icon {
    width: 24px;
    height: 24px;
}

/* SVG resource icons (Word Problems, Math Progressions, etc.) */
.sidebar-resource-btn .resource-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-resource-btn .resource-icon {
    width: 24px;
    height: 24px;
}

.sidebar-resource-btn span {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Collapsed sidebar - hide text, show only icons */
.sidebar.collapsed .sidebar-resources-section {
    padding: 2px 0;
}

.sidebar.collapsed .sidebar-resources-list {
    align-items: center;
    gap: 0;
}

.sidebar.collapsed .sidebar-resource-btn {
    width: 44px;
    height: 36px;
    padding: 0;
    justify-content: center;
}

.sidebar.collapsed .sidebar-resource-btn span {
    display: none;
}

.sidebar.collapsed .sidebar-resource-btn i {
    font-size: var(--font-size-lg);
}

/* Dark mode resources */
body.dark-mode .sidebar-resources-section {
    border-top-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .sidebar-resource-btn {
    color: #e5e7eb;
}

body.dark-mode .sidebar-resource-btn:hover {
    background: #2a2a2a;
    color: #d1d5db;
}

body.dark-mode .sidebar-resource-btn i {
    color: #d1d5db;
}

body.dark-mode .sidebar-resource-btn:hover i {
    color: #818cf8;
}

body.dark-mode .sidebar-resource-btn.progress-display:hover i {
    color: inherit;
}

body.dark-mode .sidebar-resource-btn.progress-display:hover {
    background: transparent;
}

body.dark-mode .progress-value {
    color: #60a5fa;
}

body.dark-mode #analyticsButton i {
    color: #9ca3af;
}

body.dark-mode #analyticsButton:hover i {
    color: #60a5fa;
}

/* Sidebar Resource Item with link */
.sidebar-resource-item {
    display: flex;
    align-items: center;
    width: 100%;
}

.sidebar-resource-item .sidebar-resource-btn {
    flex: 1;
    margin-bottom: 0;
}

.sidebar-resource-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: #9ca3af;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar-resource-link:hover {
    background: #f3f4f6;
    color: #2563eb;
}

.sidebar-resource-link i {
    font-size: 11px;
}

body.dark-mode .sidebar-resource-link {
    color: #4b5563;
}

body.dark-mode .sidebar-resource-link:hover {
    background: #374151;
    color: #60a5fa;
}

/* Collapsed sidebar - hide resource links */
.sidebar.collapsed .sidebar-resource-link {
    display: none;
}

.sidebar.collapsed .sidebar-resource-item {
    justify-content: center;
}

/* Sidebar Settings - Icon buttons */
.sidebar-settings-section {
    margin-top: auto;
    padding: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

body.dark-mode .sidebar-settings-section {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.sidebar-settings-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    overflow: visible;
}

.sidebar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4b5563;
}

.sidebar-icon-btn:hover {
    background: none;
    color: #2563eb;
}

.sidebar-icon-btn i {
    font-size: var(--font-size-sidebar-icon, 18px);
}

/* AI Toggle active state - blue icon when enabled */
.sidebar-icon-btn#aiRecommendToggle.active {
    color: #3b82f6;
    background: none;
}

.sidebar-icon-btn#aiRecommendToggle.active:hover {
    color: #2563eb;
    background: none;
}

/* Voice input toggle active state - blue icon when enabled */
.sidebar-icon-btn#voiceInputToggle.active {
    color: #3b82f6;
    background: none;
}

.sidebar-icon-btn#voiceInputToggle.active:hover {
    color: #2563eb;
    background: none;
}

/* Add content toggle active state - blue icon when enabled */
.sidebar-icon-btn#addContentToggle.active {
    color: #3b82f6;
    background: none;
}

.sidebar-icon-btn#addContentToggle.active:hover {
    color: #2563eb;
    background: none;
}

/* Language icon - same size as others now */
#language i {
    font-size: var(--font-size-sidebar-icon, 18px);
}

/* Second row for AI toggles */
.sidebar-ai-toggles {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

body.dark-mode .sidebar-ai-toggles {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Collapsed sidebar: stack buttons vertically, include in scroll */
.sidebar.collapsed .sidebar-settings-section {
    margin-top: 0;
    padding: 2px 0;
    border-top: none;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-settings-row {
    flex-direction: column;
    gap: 4px;
    width: 100%;
    align-items: center;
}

.sidebar.collapsed .sidebar-icon-btn {
    width: 44px;
    height: 36px;
}

/* Hidden language select (kept for voice mapping compatibility) */
.hidden-language-select {
    display: none;
}

/* Language menu popup (custom dropdown) */
.language-menu-popup {
    position: fixed;
    /* Position set dynamically via JS to center above translate icon */
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
    min-width: 160px;
}

.language-menu-popup.hidden {
    display: none;
}

.language-menu-popup button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-align: left;
}

.language-menu-popup button:hover {
    background: #f3f4f6;
}

.language-menu-popup button i {
    font-size: 11px;
    color: transparent;
    width: 14px;
}

.language-menu-popup button.active {
    background: #f3f4f6;
    color: #374151;
}

.language-menu-popup button.active i {
    color: #374151;
}

/* Scrollbar styling for language menu */
.language-menu-popup::-webkit-scrollbar {
    width: 6px;
}

.language-menu-popup::-webkit-scrollbar-track {
    background: transparent;
}

.language-menu-popup::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.language-menu-popup::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Google Translate attribution in language menu */
.language-menu-attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    margin-top: 4px;
    border-top: 1px solid #e5e7eb;
    font-size: 10px;
    color: #9ca3af;
    background: #f9fafb;
    border-radius: 0 0 6px 6px;
}

.language-menu-attribution img {
    height: 12px;
}

/* Export menu popup */
.export-menu-popup {
    position: fixed;
    bottom: 60px;
    left: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.export-menu-popup.hidden {
    display: none;
}

.export-menu-popup button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: #374151;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.export-menu-popup button:hover {
    background: #f3f4f6;
}

.export-menu-popup button i {
    font-size: var(--font-size-base);
    color: #4b5563;
}

/* Hamburger Button (Mobile) */
.hamburger-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.hamburger-btn:hover {
    background: #f3f4f6;
}

.hamburger-btn i {
    font-size: var(--font-size-lg);
    color: #374151;
}

/* Sidebar Overlay (Mobile) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    transition: margin-left var(--sidebar-transition), width var(--sidebar-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

/* Dark Mode Sidebar */
body.dark-mode .sidebar {
    background: #1f1f1f;
}

/* Dark mode sidebar header - no border */

body.dark-mode .sidebar-logo {
    color: #60a5fa;
}

body.dark-mode .sidebar-toggle:hover {
    background: #333;
    color: #e5e7eb;
}

body.dark-mode .sidebar-section-label {
    color: #9ca3af;
}

body.dark-mode .sidebar-agent {
    color: #e5e7eb;
}

body.dark-mode .sidebar-agent:hover {
    background: #2a2a2a;
    color: #d1d5db;
}

body.dark-mode .sidebar-agent:hover .sidebar-agent-name {
    /* Keep original color */
}

body.dark-mode .sidebar-agent.active {
    background: #2a2a2a;
}

body.dark-mode .sidebar-agent.active .sidebar-agent-name {
    font-weight: 600;
}

body.dark-mode .sidebar-agent-name {
    color: #e5e7eb;
}

body.dark-mode .sidebar-agent-desc {
    color: #9ca3af;
}

/* Dark mode sidebar settings - no border needed */

body.dark-mode .sidebar-icon-btn {
    color: #d1d5db;
}

body.dark-mode .sidebar-icon-btn:hover {
    background: none;
    color: #60a5fa;
}

body.dark-mode .export-menu-popup {
    background: #1f1f1f;
    border-color: #333;
}

body.dark-mode .export-menu-popup button {
    color: #e5e7eb;
}

body.dark-mode .export-menu-popup button:hover {
    background: #2a2a2a;
}

body.dark-mode .language-menu-popup {
    background: #1f1f1f;
    border-color: #333;
}

body.dark-mode .language-menu-popup button {
    color: #e5e7eb;
}

body.dark-mode .language-menu-popup button:hover {
    background: #2a2a2a;
}

body.dark-mode .language-menu-popup button.active {
    background: #2a2a2a;
    color: #e5e7eb;
}

body.dark-mode .language-menu-popup button.active i {
    color: #e5e7eb;
}

body.dark-mode .language-menu-popup::-webkit-scrollbar-thumb {
    background: #444;
}

body.dark-mode .language-menu-popup::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body.dark-mode .language-menu-attribution {
    background: #1a1a1a;
    border-color: #333;
    color: #4b5563;
}

body.dark-mode .hamburger-btn {
    background: #1f1f1f;
    border-color: #333;
}

body.dark-mode .hamburger-btn:hover {
    background: #2a2a2a;
}

body.dark-mode .hamburger-btn i {
    color: #e5e7eb;
}

/* Responsive Sidebar */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
    }

    .hamburger-btn {
        display: flex;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .main-content.sidebar-collapsed {
        margin-left: 0;
        width: 100%;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}

/* Embedded iframe overrides moved to end of file for cascade priority */

@media (max-width: 767px) {
    .sidebar {
        width: 280px;
    }

    .sidebar-logo {
        font-size: var(--font-size-lg);
    }

    .sidebar-logo-img {
        width: 32px;
        height: 32px;
    }

    .sidebar-agent {
        padding: 6px 10px;
    }

    .sidebar-agent-avatar {
        width: 26px;
        height: 26px;
        font-size: var(--font-size-2xs);
    }

    .sidebar-agent-name {
        font-size: var(--font-size-sidebar-agent-name);
    }

    .sidebar-agent-desc {
        font-size: var(--font-size-sidebar-agent-desc);
    }

    .sidebar-icon-btn {
        width: 38px;
        height: 38px;
    }

    .sidebar-icon-btn i {
        font-size: var(--font-size-sm);
    }

    #language i {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 479px) {
    .sidebar {
        width: 100%;
    }

    .sidebar-logo {
        font-size: var(--font-size-base);
    }

    .sidebar-logo-img {
        width: 28px;
        height: 28px;
    }

    .sidebar-agent-avatar {
        width: 24px;
        height: 24px;
        font-size: var(--font-size-2xs);
    }

    .sidebar-agent-name {
        font-size: var(--font-size-sidebar-agent-name);
    }

    .sidebar-agent-desc {
        font-size: var(--font-size-sidebar-agent-desc);
    }

    .sidebar-icon-btn {
        width: 36px;
        height: 36px;
    }

    .sidebar-icon-btn i {
        font-size: var(--font-size-sm);
    }

    #language i {
        font-size: var(--font-size-lg);
    }
}

/* Large text mode for sidebar - CSS custom properties now set in default rule */

/* ===========================================
   END SIDEBAR STYLES
   =========================================== */

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: #ffffff;
    color: #1f2937;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.2rem;
}

/* Legacy containers - hidden (moved to sidebar) */
#top_left_container,
#top_right_container {
    display: none !important;
}

/* #language button now uses .sidebar-icon-btn styles */

/* Chat Input Container - Fixed at bottom of main content */

.icon-button {
    margin-top: 0px;
    background: none;
    color: #276FFF;
    border: none;
    font-size: var(--font-size-2xl, 1.6rem);
    cursor: pointer;
    padding: 10px;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Workflow button now uses .sidebar-icon-btn styles */

.icon-button:hover {
    color: #276FFF;
}

/* Export Dropdown Styles - Match media-options */
.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 5px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    z-index: 2000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    flex-direction: column;
}

.export-menu.show {
    display: flex;
}

.export-menu button {
    display: block;
    width: 100%;
    padding: 5px 5px;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    font-size: var(--font-size-xs);
    color: #000000;
    transition: background-color 0.2s ease;
}

.export-menu button:hover {
    background-color: #d9d7d7;
    color: inherit;
}

.export-menu button i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* Dark mode support for export menu */
body.dark-mode .export-menu {
    background-color: #1F1F1F;
    border-color: #3C4043;
}

body.dark-mode .export-menu button {
    color: inherit;
}

body.dark-mode .export-menu button:hover {
    background-color: #3C4043;
    color: #ffffff;
}

/* Medium and large text mode for export menu */
body.medium-text .export-menu button {
    font-size: var(--font-size-base);
    padding: 8px 8px;
}

body.medium-text .export-menu button i {
    font-size: var(--font-size-lg);
    margin-right: 10px;
}

body.medium-text .export-menu {
    padding: 8px;
    min-width: 180px;
}

body.large-text .export-menu button {
    font-size: var(--font-size-lg);
    padding: 8px 8px;
}

body.large-text .export-menu button i {
    font-size: var(--font-size-xl);
    margin-right: 10px;
}

body.large-text .export-menu {
    padding: 8px;
    min-width: 200px;
}

h1 {
    font-family: "Bubblegum Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #276FFF;
    text-shadow: 2px 2px "";
    font-size: var(--font-size-3xl);
    margin-top: 5px;
    text-align: center;
    padding: auto;
}

body.dark-mode {
    background-color: #171717;
    color: #ffffff;
}

body.dark-mode h1 {
    color: #ffffff;
}

body.dark-mode footer {
    color: #9ca3af;
}

body.dark-mode footer a,
body.dark-mode footer span {
    color: #9ca3af;
    font-size: inherit;
}

body.dark-mode footer a:hover {
    color: #d1d5db;
}

#select_language {
    color: black;
}

body.dark-mode #select_language {
    color: white;
}

body.dark-mode #select_language option {
    color: black;
}

body.dark-mode * .placeholder,
body.dark-mode * .assistant {
    background-color: transparent;
}

body.dark-mode * {
    background-color: transparent;
}

body.dark-mode #output .user {
    background-color: transparent;
    color: white;
}

body.dark-mode #output .placeholder,
body.dark-mode #output .assistant {
    background-color: transparent;
    color: white;
}

body.dark-mode .agent-badge {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

body.dark-mode .agent-avatar-small {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .chat-input input {
    background: #222;
    color: #eee;
}

#content {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

/* Text size modes now use CSS custom properties defined at :root, body.medium-text, body.large-text */
/* Input text inherits from body font size */
body.large-text input[type="text"],
body.medium-text input[type="text"] {
    font-size: inherit;
}

body.large-text input[type="text"]::placeholder,
body.medium-text input[type="text"]::placeholder {
    font-size: inherit !important;
}

body.dark-mode.large-text input[type="text"]::placeholder,
body.dark-mode.medium-text input[type="text"]::placeholder {
    font-size: inherit !important;
}

input[type="text"] {
    background-color: #ffffff;
    color: #000;
    border: 2px solid #000;
    padding: 0.5rem;
    font-size: inherit;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

body.dark-mode input[type="text"] {
    background-color: #333333;
    color: #ffffff;
    border: 2px solid #ffffff;
}

body.dark-mode input[type="text"]::placeholder {
    color: #C2C2C2;
    font-size: inherit;
}

/* Agent Selector Bar - hidden (moved to sidebar) */
.agent-selector-container {
    display: none !important;
}

.agent-selector-container label {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.agent-select {
    padding: 8px 15px;
    border-radius: 8px;
    border: 2px solid #ddd;
    background: white;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.agent-select:hover {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.agent-select:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Dark mode support for agent selector */
body.dark-mode .agent-selector-container {
    background: transparent;
}

body.dark-mode .agent-selector-container label {
    color: #e0e0e0;
}

body.dark-mode .agent-select {
    background: #2a2a3a;
    color: #e0e0e0;
    border-color: #444;
}

body.dark-mode .agent-select:hover {
    border-color: #3B82F6;
}

.conversation-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px;
    height: calc(100vh - 80px);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}


@media (min-width: 1024px) {

    .agent-selector-container,
    .conversation-container {
        padding: 15px;
    }

    /* Desktop placeholder font size - uses CSS custom properties */
    .chat-input .placeholder {
        font-size: var(--font-size-chat-placeholder);
    }

    .chat-input .placeholder span {
        font-size: var(--font-size-chat-placeholder);
    }

    /* Desktop header and footer sizing */
    h1 {
        font-size: var(--font-size-3xl);
    }

    .icon-button {
        font-size: var(--font-size-2xl);
    }

    footer {
        font-size: var(--font-size-sm);
        padding: 8px 15px;
    }
}

/* Medium screens (Tablets) */
@media (min-width: 768px) and (max-width: 1023px) {

    .agent-selector-container,
    .conversation-container {
        padding: 12px;
        max-width: 100%;
    }

    .agent-selector-container {
        gap: 12px;
    }
}

/* Small screens (Large phones) */
@media (min-width: 480px) and (max-width: 767px) {

    .agent-selector-container,
    .conversation-container {
        padding: 10px;
        max-width: 100%;
    }

    .agent-selector-container {
        gap: 10px;
        flex-direction: row;
        justify-content: space-between;
    }

    .agent-selector-container label {
        font-size: var(--font-size-xs);
        margin-right: 5px;
    }

    .agent-select {
        flex: 1;
        min-width: 150px;
        font-size: var(--font-size-xs);
    }
}

/* Extra small screens (Small phones) */
@media (max-width: 479px) {

    .agent-selector-container,
    .conversation-container {
        padding: 8px;
        max-width: 100%;
        margin: 0 5px;
    }

    .agent-selector-container {
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
    }

    .agent-selector-container label {
        font-size: var(--font-size-xs);
        text-align: center;
        margin-bottom: 5px;
    }

    .agent-select {
        width: 100%;
        max-width: none;
        padding: 10px;
        font-size: var(--font-size-xs);
    }

    /* Touch targets at least 44px on mobile */
    .button-row button,
    .input-content>button {
        width: 44px;
        height: 44px;
    }
}

/* Ultra narrow screens (Very small phones) */
@media (max-width: 320px) {

    .agent-selector-container,
    .conversation-container {
        padding: 5px;
        margin: 0 3px;
    }

    .agent-selector-container {
        gap: 5px;
    }

    .agent-selector-container label {
        font-size: var(--font-size-xs);
    }

    .agent-select {
        font-size: var(--font-size-xs);
        padding: 8px;
    }
}

/* Short or very narrow screens: adjust positioning */
@media (max-width: 480px),
(max-height: 600px) {
    .chat-input:not(.bottom-position) {
        top: 150px !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
    }

    .chat-input.bottom-position {
        top: auto !important;
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 auto;
        justify-content: flex-end !important;
        padding-bottom: 10px;
    }

    .chat-footer-buttons {
        left: 0 !important;
    }

    #output {
        padding: 12px 12px 120px 12px;
        /* space for fixed input */
    }
}

.embed-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.embed-container iframe {
    width: 100%;
    height: auto;
    border: none;
}

.input-group {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border: 1.5px solid #d1d5db;
    border-radius: 28px;
    background-color: #ffffff;
    position: relative;
    padding: 6px 8px 6px 0;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    min-height: 48px;
    height: auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s, height 0.2s;
}

/* Input controls row - keeps original horizontal layout */
.input-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex: 1;
    gap: 4px;
}

.input-controls>button {
    flex: 0 0 auto;
}

.input-controls>#plus-container {
    flex: 0 0 auto;
}

/* Chat input expandable icons */
.chat-icons-expandable {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 8px;
    gap: 2px;
}

.chat-icons-expandable .icons-expand-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #4b5563;
    cursor: pointer;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    padding: 0;
    transition: color 0.2s;
}

.chat-icons-expandable .icons-expand-trigger:hover {
    color: #3b82f6;
}

.chat-icons-expandable .icons-expand-trigger i {
    transition: transform 0.2s ease;
}

.chat-icons-expandable .icons-hidden-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.chat-icons-expandable.expanded .icons-expand-trigger i {
    transform: rotate(180deg);
}

.chat-icons-expandable.expanded .icons-hidden-group {
    display: flex;
}

body.dark-mode .chat-icons-expandable .icons-expand-trigger {
    color: #94a3b8;
}

body.dark-mode .chat-icons-expandable .icons-expand-trigger:hover {
    color: #60a5fa;
}

.input-controls>textarea {
    flex: 1 1 0%;
    width: 100%;
}

/* Chat attachments inside input-group */
.input-group .chat-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 4px;
    margin: 0;
}

.input-group .chat-attachments:has(.chat-attachment-item) {
    display: flex;
}

.input-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    gap: 4px;
}

.button-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ============================================
   INLINE TOOLBAR - Voice/Add/AI inside textarea
   ============================================ */
.textarea-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.textarea-wrapper textarea {
    padding-right: 110px;
    /* Space for inline toolbar */
}

.inline-toolbar {
    position: absolute;
    bottom: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
}

.inline-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #4b5563;
    opacity: 1;
    transition: all 0.2s ease;
}

.inline-toolbar-btn:hover {
    color: #3b82f6;
    opacity: 1;
    background: rgba(59, 130, 246, 0.1);
}

.inline-toolbar-btn i {
    font-size: var(--font-size-xs);
}

.inline-toolbar-btn.active i,
.inline-toolbar-btn#record i.active {
    color: #3b82f6;
    opacity: 1;
}

.inline-toolbar-container {
    position: relative;
}

/* Dark mode inline toolbar */
body.dark-mode .inline-toolbar-btn {
    color: #94a3b8;
}

body.dark-mode .inline-toolbar-btn:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.2);
}

/* Dark mode record button - light gray (matches sidebar footer) */
body.dark-mode #record,
body.dark-mode #record i,
body.dark-mode .input-group #record,
body.dark-mode .input-group #record i,
body.dark-mode .input-controls #record,
body.dark-mode .input-controls #record i,
body.dark-mode .chat-input button#record i.inactive {
    color: #d1d5db !important;
}

body.dark-mode #record:hover,
body.dark-mode #record:hover i,
body.dark-mode .input-group #record:hover,
body.dark-mode .input-group #record:hover i,
body.dark-mode .input-controls #record:hover,
body.dark-mode .input-controls #record:hover i,
body.dark-mode .chat-input button#record:hover i,
body.dark-mode .chat-input button#record:hover i.inactive {
    color: #60a5fa !important;
}

.input-group:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    outline: none;
}

.input-group textarea:focus {
    outline: none;
    border: none;
}

.input-group textarea,
.input-controls textarea {
    flex: 1 1 0%;
    min-width: 0;
    padding: 2px 4px;
    border: none;
    -webkit-appearance: none;
    /* Remove mobile default styling */
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
    /* Prevent zoom on double-tap */
    font-family: inherit;
    font-size: var(--font-size-chat-input);
    resize: none;
    overflow-y: auto;
    /* Show scrollbar when content overflows */
    min-height: 20px;
    max-height: none;
    /* Remove max-height limit for auto-expand */
    line-height: var(--line-height-normal);
    word-wrap: break-word;
    background-color: transparent;
    color: #000000;
    outline: none;
    box-sizing: border-box;
    text-align: left;
}

.input-group.multiline .input-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    align-items: end;
    gap: 4px 6px;
}

.input-group.multiline .input-controls textarea {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.input-group.multiline .input-controls #send {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* When chat-input-content is present, keep buttons fixed in second row */
.input-group:has(.chat-input-content) .input-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 4px 6px;
}

.input-group:has(.chat-input-content) .input-controls .chat-input-content {
    grid-column: 1 / -1;
    grid-row: 1;
}

.input-group:has(.chat-input-content) .input-controls #send {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

body.dark-mode .input-group {
    background-color: #2b2b2b;
    border: 1.5px solid #444444;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .input-group:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
    outline: none;
}

body.dark-mode .input-group textarea {
    color: #ffffff;
}

/* Placeholder in chat-input (not in output) */
.chat-input .placeholder {
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: var(--font-size-chat-placeholder);
    margin: 5px 5px 10px 5px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    color: #000000;
    border: none !important;
    box-shadow: none !important;
}

.chat-input .placeholder img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.chat-input .placeholder span {
    font-size: var(--font-size-chat-placeholder);
}

body.dark-mode .chat-input .placeholder {
    background: none !important;
    background-color: transparent !important;
    color: white;
    border: none !important;
    box-shadow: none !important;
}

/* Placeholder container - flex row for placeholder and stop button */
.placeholder-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* Stop button in chat-input (to the right of placeholder) */
.chat-input #stop {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.chat-input #stop i.inactive {
    color: #949494 !important;
}

.chat-input #stop i.active {
    color: #276FFF !important;
}

body.dark-mode .chat-input #stop i.inactive {
    color: #949494 !important;
}

body.dark-mode .chat-input #stop i.active {
    color: #FFCC02 !important;
}

.button-row button,
.input-content>button {
    padding: 2px;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: #4b5563;
}

/* Input group icon font size - scales with text size mode */
.input-group #record i,
.input-group #plus i,
.input-group #send i,
#output #stop i,
#stop i {
    font-size: var(--font-size-input-icon, 1.1rem);
}

/* AI wand icon slightly smaller to match visual weight of other icons */
.input-group .ai-wand-btn i {
    font-size: calc(var(--font-size-input-icon, 1.25rem) * 0.9);
    line-height: 1;
    vertical-align: middle;
}

/* Input group icons - consistent spacing */
.input-group #plus-container {
    display: inline-flex;
    position: relative;
}

.input-group #record,
.input-group #plus-container,
.input-group .ai-wand-btn {
    margin-right: 0;
}

/* Record button - dark gray default, blue on hover */
#record,
#record i,
.input-group #record,
.input-group #record i,
.input-controls #record,
.input-controls #record i,
.chat-input button#record i,
.chat-input button#record i.inactive {
    color: #4b5563 !important;
}

#record:hover,
#record:hover i,
.input-group #record:hover,
.input-group #record:hover i,
.input-controls #record:hover,
.input-controls #record:hover i,
.chat-input button#record:hover i,
.chat-input button#record:hover i.inactive {
    color: #3b82f6 !important;
}

/* Send button - blue accent */
.input-group #send {
    color: #3b82f6;
}

.input-group #send:hover {
    color: #2563eb;
}

/* AI Wand Button - dark gray default (matches sidebar footer) */
.input-group .ai-wand-btn {
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: #4b5563;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.input-group .ai-wand-btn:hover,
.input-group .ai-wand-btn:focus,
.input-group .ai-wand-btn:active {
    background: none !important;
    color: #3b82f6;
}

/* AI wand gray when AI recommendations are disabled */
body.ai-disabled .ai-wand-btn {
    color: #9ca3af;
}

body.ai-disabled .ai-wand-btn:hover {
    color: #4b5563;
}

/* Dark mode AI wand button - light gray default, light blue on hover */
body.dark-mode .input-group .ai-wand-btn {
    color: #d1d5db;
}

body.dark-mode .input-group .ai-wand-btn:hover,
body.dark-mode .input-group .ai-wand-btn:focus,
body.dark-mode .input-group .ai-wand-btn:active {
    color: #60a5fa;
}

/* Hide cell/field AI assists when disabled */
body.ai-disabled .cell-ai-assist,
body.ai-disabled .field-ai-assist {
    display: none !important;
}

/* AI Guidance Toggle - hide all AI UI when off */
body.ai-guidance-off .inline-ai-assist,
body.ai-guidance-off .ai-wand-btn,
body.ai-guidance-off .magic-wand-chip,
body.ai-guidance-off .magic-wand-chip-wrapper,
body.ai-guidance-off #chatAiWand,
body.ai-guidance-off .cell-ai-assist,
body.ai-guidance-off .field-ai-assist,
body.ai-guidance-off .recommendation-chips,
body.ai-guidance-off .template-ai-assist,
body.ai-guidance-off .memo-action-btn.ai-btn {
    display: none !important;
}

/* AI Guidance Toggle button states */
#aiGuidanceToggle.ai-off {
    color: #4b5563;
    /* Dark grey - matches other footer icons */
}

#aiGuidanceToggle.ai-minimal {
    color: #10b981;
    /* Green for on-demand */
}

#aiGuidanceToggle.ai-full {
    color: #3b82f6;
    /* Blue for auto */
}

body.dark-mode #aiGuidanceToggle.ai-off {
    color: #d1d5db;
}

body.dark-mode #aiGuidanceToggle.ai-minimal {
    color: #34d399;
    /* Light green for dark mode */
}

body.dark-mode #aiGuidanceToggle.ai-full {
    color: #60a5fa;
}

/* Chat Completion Dropdown (Real-time AI predictions) */
.chat-completion-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 4px;
    z-index: 1000;
    overflow: hidden;
}

.chat-completion-item {
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s;
}

.chat-completion-item:last-child {
    border-bottom: none;
}

.chat-completion-item:hover,
.chat-completion-item.highlighted {
    background-color: #f3f4f6;
}

.chat-completion-item::before {
    content: '→ ';
    color: #9ca3af;
    margin-right: 4px;
}

.chat-completion-item.loading {
    color: #9ca3af;
    cursor: default;
    pointer-events: none;
    font-size: 13px;
}

.chat-completion-item.loading::before {
    content: '';
}

body.dark-mode .chat-completion-dropdown {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .chat-completion-item {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

body.dark-mode .chat-completion-item:hover,
body.dark-mode .chat-completion-item.highlighted {
    background-color: #334155;
}

/* History (Undo/Redo) buttons */
.history-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.history-btn:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.06);
    color: #374151;
}

.history-btn:disabled,
.history-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.history-btn i {
    font-size: var(--font-size-xs);
}

body.dark-mode .history-btn {
    color: #9ca3af;
}

body.dark-mode .history-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
}

.button-row button:hover,
.input-content>button:hover {
    background: none;
    color: #2563eb;
}

body.dark-mode .button-row button:hover,
body.dark-mode .input-content>button:hover {
    background: none;
    color: #60a5fa;
}


.chat-input {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    top: 150px;
    bottom: auto;
    width: calc(100% - var(--sidebar-width));
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    background: transparent;
    z-index: 100;
    transition: top 0.15s ease-out, bottom 0.15s ease-out, left var(--sidebar-transition), width var(--sidebar-transition);
    gap: 10px;
    box-sizing: border-box;
}

.chat-input .welcome-placeholder,
.chat-input .input-group {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Recommendation chips */
.recommendation-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 8px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* When chat-input is centered (initial state), position chips closer to input */
.chat-input:not(.bottom-position) .recommendation-chips {
    margin-top: 0;
    margin-bottom: 12px;
}

.recommendation-chip {
    padding: 8px 16px;
    background: transparent !important;
    border: 1px solid #d1d5db !important;
    border-radius: 24px;
    font-size: var(--font-size-sm, 1rem) !important;
    font-weight: 400 !important;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recommendation-chip:hover {
    color: #1f2937;
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    font-weight: 400 !important;
}

.recommendation-chip:focus,
.recommendation-chip:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-color: #d1d5db !important;
}

/* Prevent Google Translate styling on chips */
.recommendation-chip *,
.recommendation-chip font,
.recommendation-chip span {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dark mode */
body.dark-mode .recommendation-chip {
    background: #2d2d2d;
    border-color: #4b5563;
    color: #f3f4f6;
}

body.dark-mode .recommendation-chip:hover {
    background: #3d3d3d !important;
    border-color: #9ca3af !important;
    color: #f3f4f6 !important;
    font-weight: 400 !important;
}

body.dark-mode .recommendation-chip:focus,
body.dark-mode .recommendation-chip:active {
    outline: none !important;
    box-shadow: none !important;
    background: #2d2d2d !important;
    border-color: #4b5563 !important;
}

/* Responsive recommendation chips */
@media (max-width: 768px) {
    .recommendation-chip {
        padding: 6px 14px;
    }
}

@media (max-width: 480px) {
    .recommendation-chip {
        padding: 6px 12px;
    }
}

/* Custom topic input - appears alongside recommendation chips */
.custom-topic-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.custom-topic-input {
    padding: 8px 16px;
    background: transparent;
    border: 1px dashed #d1d5db;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 400;
    color: #4b5563;
    outline: none;
    min-width: 160px;
    max-width: 300px;
    transition: all 0.2s ease;
}

.custom-topic-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

.custom-topic-input:focus {
    border-style: solid;
    border-color: #9ca3af;
    background: #f9fafb;
}

.custom-topic-submit {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #3b82f6;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-topic-submit:hover {
    background: #2563eb;
}

.custom-topic-submit i {
    font-size: 12px;
}

/* Dark mode */
body.dark-mode .custom-topic-input {
    background: transparent;
    border-color: #4b5563;
    color: #f3f4f6;
}

body.dark-mode .custom-topic-input::placeholder {
    color: #6b7280;
}

body.dark-mode .custom-topic-input:focus {
    border-color: #9ca3af;
    background: #2d2d2d;
}

/* Responsive custom topic input */
@media (max-width: 768px) {
    .custom-topic-input {
        padding: 6px 14px;
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .custom-topic-input {
        padding: 6px 12px;
        min-width: 120px;
        max-width: 200px;
    }
}

/* Active Student Profiles Indicator - Compact with Toggle */
.active-profiles-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide names and clear button by default (compact mode) */
.active-profiles-indicator .indicator-names,
.active-profiles-indicator .indicator-clear {
    display: none;
}

/* Show names and clear button when expanded */
.active-profiles-indicator.expanded .indicator-names,
.active-profiles-indicator.expanded .indicator-clear {
    display: flex;
}

.active-profiles-indicator.expanded {
    gap: 8px;
    padding: 6px 12px;
}

/* Footer placement for active profiles indicator */
.active-profiles-indicator.footer-profiles {
    margin: 0;
    padding: 4px 8px;
    font-size: 11px;
    max-width: none;
    animation: none;
    order: -1;
}

.active-profiles-indicator.footer-profiles.expanded {
    padding: 8px 16px;
}

.active-profiles-indicator .indicator-avatars {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.active-profiles-indicator .indicator-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 9px;
    font-weight: 700;
    border: 2px solid white;
    margin-left: -6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.active-profiles-indicator .indicator-avatar:first-child {
    margin-left: 0;
}

.active-profiles-indicator .indicator-names {
    font-weight: 400;
    color: #4b5563;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-size: 11px;
}

.active-profiles-indicator .indicator-clear {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s;
}

.active-profiles-indicator .indicator-clear:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

/* Dark mode for active profiles indicator */
body.dark-mode .active-profiles-indicator {
    background: transparent;
    border: none;
    color: inherit;
}

body.dark-mode .active-profiles-indicator .indicator-names {
    color: #9ca3af;
}

body.dark-mode .active-profiles-indicator .indicator-avatar {
    border-color: #1f2937;
}

body.dark-mode .active-profiles-indicator .indicator-clear {
    color: #9ca3af;
}

body.dark-mode .active-profiles-indicator .indicator-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #d1d5db;
}

/* Responsive active profiles indicator */
@media (max-width: 768px) {
    .active-profiles-indicator {
        padding: 6px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .active-profiles-indicator .indicator-names {
        max-width: 150px;
    }
}

/* AI Help Chip */
.magic-wand-chip-wrapper {
    position: relative;
    display: inline-block;
}

.magic-wand-chip {
    font-size: var(--font-size-sm, 1rem) !important;
    color: #F59E0B !important;
    border-color: #F59E0B !important;
}

.magic-wand-chip:hover {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: #D97706 !important;
    color: #D97706 !important;
}

/* AI Help Dropdown Menu (matches media-options styling exactly) */
.magic-wand-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 4px;
    display: none;
    min-width: 180px;
    z-index: 2000;
}

.magic-wand-menu.visible {
    display: block;
}

.magic-wand-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #374151;
    transition: background 0.15s ease;
}

.magic-wand-menu-item:hover {
    background: #f3f4f6;
}

.magic-wand-menu-item i {
    width: 18px;
    text-align: center;
    color: #F59E0B;
}

/* Arrow pointing down from menu */
.magic-wand-menu::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    transform: translateX(-50%) rotate(45deg);
}

/* Responsive font sizing for AI Help menu (matches media-options) */
body.medium-text .magic-wand-menu-item {
    font-size: var(--font-size-base);
    padding: 8px 8px;
}

body.medium-text .magic-wand-menu-item i {
    font-size: var(--font-size-lg);
    margin-right: 10px;
}

body.medium-text .magic-wand-menu {
    padding: 8px;
    min-width: 180px;
}

body.large-text .magic-wand-menu-item {
    font-size: var(--font-size-lg);
    padding: 8px 8px;
}

body.large-text .magic-wand-menu-item i {
    font-size: var(--font-size-xl);
    margin-right: 10px;
}

body.large-text .magic-wand-menu {
    padding: 8px;
    min-width: 200px;
}

/* Dark mode */
body.dark-mode .magic-wand-chip {
    color: #FBBF24 !important;
    border-color: #FBBF24 !important;
}

body.dark-mode .magic-wand-chip:hover {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: #FCD34D !important;
    color: #FCD34D !important;
}

body.dark-mode .magic-wand-menu {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .magic-wand-menu::after {
    background: #1f2937;
    border-right-color: #374151;
    border-bottom-color: #374151;
}

body.dark-mode .magic-wand-menu-item {
    color: #e5e7eb;
}

body.dark-mode .magic-wand-menu-item:hover {
    background: #374151;
}

body.dark-mode .magic-wand-menu-item i {
    color: #FBBF24;
}

/* ============================================
   INTERACTIVE RESPONSE ELEMENTS
   ============================================ */

/* Fill-in Template */
.fill-in-template {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    font-size: var(--font-size-base);
    line-height: 1.8;
}

.fill-in-blank {
    display: inline-block;
    min-width: 120px;
    padding: 6px 12px;
    border: 2px dashed #3b82f6;
    border-radius: 6px;
    background: #fff;
    font-size: inherit;
    font-family: inherit;
    color: #1f2937;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.fill-in-blank:focus {
    outline: none;
    border-color: #2563eb;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.fill-in-blank::placeholder {
    color: #9ca3af;
    font-style: italic;
}

.fill-in-blank.error {
    border-color: #ef4444;
    background: #fef2f2;
}

body.dark-mode .fill-in-template {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .fill-in-blank {
    background: #374151;
    border-color: #60a5fa;
    color: #f3f4f6;
}

body.dark-mode .fill-in-blank:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Inline Fill-in-the-Blank (seamless within message) */
.inline-fillin-container {
    margin: 4px 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.inline-fillin-sentence {
    font-size: inherit;
    font-family: inherit;
    line-height: 2.2;
    color: inherit;
}

/* Inline input wrapper - contains input and ghost text */
/* Border is on wrapper; icons are flex items (not absolute) so they're always inside */
.inline-fillin-wrapper {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    vertical-align: baseline;
    overflow: visible;
    margin: 0 1px 0 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    transition: all 0.15s ease;
    min-height: 24px;
    flex-shrink: 0;
}

.inline-fillin-wrapper:focus-within {
    /* Focus styling moved to .inline-fillin-input:focus */
}

/* Hide icons that are direct children of wrapper (legacy) - they should be in .inline-fillin-icons */
.inline-fillin-wrapper>.inline-stt-btn,
.inline-fillin-wrapper>.inline-media-btn,
.inline-fillin-wrapper>.inline-ai-assist {
    display: none !important;
}

/* Hide orphan icons that are siblings of wrappers (outside any wrapper) */
.inline-fillin-sentence>.inline-stt-btn,
.inline-fillin-sentence>.inline-media-btn,
.inline-fillin-sentence>.inline-ai-assist,
.inline-fillin-container .inline-stt-btn:not(.inline-fillin-icons .inline-stt-btn),
.inline-fillin-container .inline-media-btn:not(.inline-fillin-icons .inline-media-btn),
.inline-fillin-container .inline-ai-assist:not(.inline-fillin-icons .inline-ai-assist) {
    display: none !important;
}

/* Icon container for buttons inside inline fill-in input */
/* Uses flex flow (not absolute) so icons are always inside the wrapper border */
.inline-fillin-icons {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: center;
    gap: 4px;
    padding: 0 4px;
    flex-shrink: 0;
    z-index: 5;
    background: transparent;
}

.inline-fillin-icons .inline-stt-btn,
.inline-fillin-icons .inline-media-btn,
.inline-fillin-icons .inline-ai-assist {
    margin: 0;
    width: 20px;
    height: 20px;
    font-size: var(--font-size-2xs);
    flex-shrink: 0;
    position: static !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Inline fillin icon colors - all buttons use same colors */
.inline-fillin-icons .inline-media-btn,
.inline-fillin-icons .inline-stt-btn,
.inline-fillin-icons .inline-ai-assist {
    color: #4b5563;
}

.inline-fillin-icons .inline-media-btn:hover,
.inline-fillin-icons .inline-stt-btn:hover,
.inline-fillin-icons .inline-ai-assist:hover {
    color: #3b82f6;
}

body.dark-mode .inline-fillin-icons .inline-media-btn,
body.dark-mode .inline-fillin-icons .inline-stt-btn,
body.dark-mode .inline-fillin-icons .inline-ai-assist {
    color: #d1d5db;
}

body.dark-mode .inline-fillin-icons .inline-media-btn:hover,
body.dark-mode .inline-fillin-icons .inline-stt-btn:hover,
body.dark-mode .inline-fillin-icons .inline-ai-assist:hover {
    color: #60a5fa;
}

/* Expand/collapse for inline-fillin-icons */
.inline-fillin-icons .icons-hidden-group {
    display: none !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

.inline-fillin-icons.expanded .icons-hidden-group {
    display: inline-flex !important;
}

.inline-fillin-icons .icons-expand-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: #4b5563;
    cursor: pointer;
    font-size: var(--font-size-2xs);
    flex-shrink: 0;
    transition: color 0.2s;
}

.inline-fillin-icons .icons-expand-trigger:hover {
    color: #3b82f6;
}

.inline-fillin-icons .icons-expand-trigger i {
    transition: transform 0.2s ease;
}

.inline-fillin-icons.expanded .icons-expand-trigger i {
    transform: rotate(180deg);
}

body.dark-mode .inline-fillin-icons .icons-expand-trigger {
    color: #94a3b8;
}

body.dark-mode .inline-fillin-icons .icons-expand-trigger:hover {
    color: #60a5fa;
}

/* Loading state inside autocomplete dropdown */
.inline-autocomplete-loading {
    padding: 8px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: var(--font-size-2xs);
    font-style: italic;
}

.inline-autocomplete-loading i {
    margin-right: 4px;
}

body.dark-mode .inline-autocomplete-loading {
    color: #4b5563;
}

/* Expandable icons container - ellipsis collapse pattern */
.icons-expandable {
    position: relative;
    display: flex;
    align-items: center;
}

.icons-expand-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #4b5563;
    cursor: pointer;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    padding: 0;
    transition: color 0.2s, background 0.2s;
}

.icons-expand-trigger:hover {
    color: #3b82f6;
}

.icons-expand-trigger i {
    transition: transform 0.2s ease;
}

.icons-hidden-group {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

/* When expanded: show icons and rotate chevron */
.icons-expandable.expanded .icons-expand-trigger i {
    transform: rotate(180deg);
}

.icons-expandable.expanded .icons-hidden-group {
    display: flex;
}

/* Dark mode for expandable icons */
body.dark-mode .icons-expand-trigger {
    color: #94a3b8;
}

body.dark-mode .icons-expand-trigger:hover {
    color: #60a5fa;
}

/* The editable textarea element - fits within wrapper */
/* Border is on wrapper, textarea is borderless; flex: 1 to fill space before icons */
.inline-fillin-input {
    display: block;
    flex: 1 1 auto;
    min-width: 200px;
    width: 100%;
    padding: 4px 8px;
    margin: 0;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: #1e293b;
    outline: none !important;
    line-height: 1.4;
    min-height: 24px;
    max-height: none;
    box-sizing: border-box;
    caret-color: #1e293b;
    cursor: text;
    overflow-y: hidden;
    resize: vertical;
    white-space: pre-wrap;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
}

.inline-fillin-input:focus,
.inline-fillin-input:focus-visible {
    outline: none !important;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    caret-color: #1e293b;
}

/* Standards fields: wider inline inputs to fit sentence-length values */
.inline-fillin-wrapper[data-blank-type="content_standard"],
.inline-fillin-wrapper[data-blank-type="practice_standard"],
.inline-fillin-wrapper[data-blank-type="learningGoal"],
.inline-fillin-wrapper[data-blank-type="lessonObjective"],
.inline-fillin-wrapper[data-blank-type="assessment"],
.inline-fillin-wrapper[data-blank-type="commonErrors"] {
    display: inline-flex !important;
    width: calc(100% - 220px);
    min-width: 250px;
}

.inline-fillin-wrapper[data-blank-type="content_standard"] .inline-fillin-input,
.inline-fillin-wrapper[data-blank-type="practice_standard"] .inline-fillin-input,
.inline-fillin-wrapper[data-blank-type="learningGoal"] .inline-fillin-input,
.inline-fillin-wrapper[data-blank-type="lessonObjective"] .inline-fillin-input,
.inline-fillin-wrapper[data-blank-type="assessment"] .inline-fillin-input,
.inline-fillin-wrapper[data-blank-type="commonErrors"] .inline-fillin-input {
    min-width: 0;
    width: 100%;
}

.inline-fillin-input.filled {
    font-style: normal;
    color: #1e293b;
    border-color: #3b82f6;
}

@media (max-width: 768px) {
    .inline-fillin-wrapper[data-blank-type="content_standard"],
    .inline-fillin-wrapper[data-blank-type="practice_standard"],
    .inline-fillin-wrapper[data-blank-type="learningGoal"],
    .inline-fillin-wrapper[data-blank-type="lessonObjective"],
    .inline-fillin-wrapper[data-blank-type="assessment"],
    .inline-fillin-wrapper[data-blank-type="commonErrors"] {
        width: calc(100% - 120px);
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    .inline-fillin-wrapper[data-blank-type="content_standard"],
    .inline-fillin-wrapper[data-blank-type="practice_standard"],
    .inline-fillin-wrapper[data-blank-type="learningGoal"],
    .inline-fillin-wrapper[data-blank-type="lessonObjective"],
    .inline-fillin-wrapper[data-blank-type="assessment"],
    .inline-fillin-wrapper[data-blank-type="commonErrors"] {
        width: 100%;
        min-width: 0;
    }

    .inline-fillin-input {
        min-width: 120px;
    }

    .inline-fillin-icons {
        flex-wrap: wrap;
    }
}

/* Pre-filled suggestion text - lighter color like placeholder */
.inline-fillin-input.has-suggestion {
    color: #94a3b8;
    font-style: normal;
}

/* Placeholder styling for input elements */
.inline-fillin-input::placeholder {
    color: #94a3b8;
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* When focused - lighter placeholder */
.inline-fillin-input:focus::placeholder {
    color: #cbd5e1;
}

/* Error state - on textarea directly */
.inline-fillin-input.error {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Ghost text prediction - hidden by default, shown inline when user types */
.inline-fillin-ghost {
    display: none;
    color: #9ca3af;
    pointer-events: none;
    font-style: normal;
    white-space: nowrap;
}

/* Ghost text display is controlled by JavaScript based on typing state */

/* Send button - icon only, inline at end of sentence */
.inline-fillin-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-height: 28px;
    margin-left: 6px;
    padding: 0;
    background: transparent !important;
    color: #3b82f6 !important;
    /* Blue by default */
    border: none;
    font-size: var(--font-size-sm) !important;
    cursor: pointer;
    transition: color 0.15s ease;
    vertical-align: bottom;
    /* Align to bottom of line to match speaker button */
}

.inline-fillin-send:hover {
    color: #2563eb !important;
    /* Darker blue on hover */
    background: transparent !important;
}

.inline-fillin-send i {
    font-size: var(--font-size-sm) !important;
    color: inherit !important;
}

/* Dark mode inline-fillin-send button */
body.dark-mode .inline-fillin-send {
    color: #60a5fa !important;
    /* Light blue in dark mode */
}

body.dark-mode .inline-fillin-send:hover {
    color: #93c5fd !important;
    /* Lighter blue on hover */
}

.inline-fillin-sent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    margin-left: 12px;
    padding: 8px 12px;
    background: #dcfce7;
    color: #166534;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.inline-fillin-sent i {
    color: #22c55e;
}

/* Hint text - hidden */
.inline-fillin-hint {
    display: none;
}

.inline-fillin-hint i,
.inline-fillin-hint kbd {
    display: none;
}

/* Dark mode inline fill-in */
body.dark-mode .inline-fillin-container {
    background: transparent;
    border: none;
}

body.dark-mode .inline-fillin-sentence {
    color: #e2e8f0;
}

body.dark-mode .inline-fillin-wrapper {
    background: transparent;
    border-color: #475569;
}

body.dark-mode .inline-fillin-wrapper:focus-within {
    border-color: #60a5fa;
}

body.dark-mode .inline-fillin-wrapper:has(.inline-fillin-input.filled) {
    border-color: #60a5fa;
}

body.dark-mode .inline-fillin-input {
    background: transparent;
    color: #94a3b8;
    caret-color: #60a5fa !important;
    -webkit-caret-color: #60a5fa !important;
}

body.dark-mode .inline-fillin-input:focus,
body.dark-mode .inline-fillin-input:focus-visible {
    caret-color: #60a5fa !important;
    -webkit-caret-color: #60a5fa !important;
}

body.dark-mode .inline-fillin-input.filled {
    color: #e2e8f0;
    font-style: normal;
}

/* Dark mode: has-suggestion uses same lighter color as placeholder */
body.dark-mode .inline-fillin-input.has-suggestion {
    color: #64748b;
}

body.dark-mode .inline-fillin-input::placeholder {
    color: #94a3b8;
}

body.dark-mode .inline-fillin-sent {
    background: #14532d;
    color: #86efac;
}

/* Large text mode for inline fill-in */
body.large-text .inline-fillin-container {
    font-size: clamp(1rem, 2.2vw, 1.1rem);
    /* Reduced */
}

body.large-text .inline-fillin-sentence {
    font-size: clamp(1rem, 2.2vw, 1.1rem);
    /* Reduced */
    line-height: 2.2;
}

body.large-text .inline-fillin-input {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    /* Reduced */
    padding: 6px 72px 6px 10px;
    min-width: 100px;
}

body.large-text .inline-fillin-send {
    font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
    /* Reduced */
    padding: 8px 14px;
}

body.large-text .inline-fillin-send i {
    font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
    /* Reduced */
}

/* ============================================
   INLINE AI ASSIST BUTTON (Gray default, blue on hover)
   ============================================ */
.inline-ai-assist {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #4b5563;
    /* Dark gray like sidebar footer */
    cursor: pointer;
    padding: 2px;
    font-size: var(--font-size-2xs);
    opacity: 1;
    transition: opacity 0.2s, color 0.2s;
    z-index: 5;
}

.inline-ai-assist:hover {
    opacity: 1;
    color: #4b5563;
}

.inline-ai-assist.loading {
    animation: pulse 1s infinite;
}

body.dark-mode .inline-ai-assist {
    color: #d1d5db;
    /* Light gray like sidebar footer in dark mode */
}

body.dark-mode .inline-ai-assist:hover {
    color: #9ca3af;
}

/* ============================================
   STT (SPEECH-TO-TEXT) BUTTON
   ============================================ */
.inline-stt-btn,
.cell-stt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #4b5563;
    /* Dark gray like sidebar footer */
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: var(--font-size-input-icon);
}

.inline-stt-btn:hover,
.cell-stt-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.inline-stt-btn.listening,
.cell-stt-btn.listening {
    color: #ef4444;
    animation: stt-pulse 1s infinite;
}

@keyframes stt-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

body.dark-mode .inline-stt-btn,
body.dark-mode .cell-stt-btn {
    color: #d1d5db;
    /* Light gray like sidebar footer in dark mode */
}

body.dark-mode .inline-stt-btn:hover,
body.dark-mode .cell-stt-btn:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

body.dark-mode .inline-stt-btn.listening,
body.dark-mode .cell-stt-btn.listening {
    color: #f87171;
}

/* ============================================
   STT STREAMING PREVIEW (Ghost text inside input)
   ============================================ */
.stt-ghost-text {
    color: #9ca3af;
    font-style: italic;
    pointer-events: none;
}

body.dark-mode .stt-ghost-text {
    color: #6b7280;
}

/* STT interim text (gray italic) - used by main recognition */
.stt-interim {
    font-style: italic;
    color: #888;
    pointer-events: none;
}

body.dark-mode .stt-interim {
    color: #aaa;
}

/* Hide placeholder when STT is recording */
textarea.stt-recording::placeholder,
input.stt-recording::placeholder {
    color: transparent !important;
}

/* Overlay ghost for textareas */
.stt-textarea-ghost {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: inherit;
    color: #9ca3af;
    font-style: italic;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    pointer-events: none;
    white-space: pre-wrap;
    overflow: hidden;
}

body.dark-mode .stt-textarea-ghost {
    color: #6b7280;
}

/* Hide placeholder when STT is active or typing */
textarea.stt-active::placeholder,
input.stt-active::placeholder {
    color: transparent;
}

/* ============================================
   INLINE MEDIA/PLUS BUTTON
   ============================================ */
.inline-media-btn,
.cell-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #4b5563;
    /* Dark gray like sidebar footer */
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: var(--font-size-input-icon);
}

.inline-media-btn:hover,
.cell-media-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

body.dark-mode .inline-media-btn,
body.dark-mode .cell-media-btn {
    color: #d1d5db;
    /* Light gray like sidebar footer in dark mode */
}

body.dark-mode .inline-media-btn:hover,
body.dark-mode .cell-media-btn:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

/* Inline media menu dropdown - reuses .media-option button styles */
.inline-media-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 4px;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    gap: 0;
}

.inline-media-menu.visible {
    display: flex;
}

/* Button styling for inline menu - matches main chat */
.inline-media-menu .media-option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #374151;
    transition: background 0.15s ease;
}

.inline-media-menu .media-option:hover {
    background: #f3f4f6;
}

.inline-media-menu .media-option i {
    width: 18px;
    text-align: center;
    color: #4b5563;
}

body.dark-mode .inline-media-menu {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .inline-media-menu .media-option {
    color: #e5e7eb;
}

body.dark-mode .inline-media-menu .media-option:hover {
    background: #374151;
}

body.dark-mode .inline-media-menu .media-option i {
    color: #9ca3af;
}

/* Inline dropdown action buttons (Regenerate, Refine) */
.inline-dropdown-actions {
    margin-top: 0;
    padding: 0;
}

.dropdown-actions-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 8px;
}

.dropdown-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 4px;
}

.dropdown-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: #64748b;
    transition: background 0.15s ease;
}

.dropdown-action-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.dropdown-action-btn i {
    width: 14px;
    color: inherit;
}

body.dark-mode .dropdown-actions-divider {
    background: #374151;
}

body.dark-mode .dropdown-action-btn {
    color: #94a3b8;
}

body.dark-mode .dropdown-action-btn:hover {
    background: #334155;
    color: #e2e8f0;
}

/* Image reference badge in inline fill-in */
.inline-image-ref {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    color: #1e40af;
    margin: 0 2px;
}

.inline-image-ref i {
    font-size: var(--font-size-2xs);
}

.inline-image-ref .remove-image {
    cursor: pointer;
    margin-left: 4px;
    opacity: 0.6;
}

.inline-image-ref .remove-image:hover {
    opacity: 1;
    color: #dc2626;
}

body.dark-mode .inline-image-ref {
    background: #1e3a5f;
    border-color: #3b82f6;
    color: #93c5fd;
}

/* ============================================
   CELL ACTIONS (Template mode STT/Media buttons)
   ============================================ */
.cell-wrapper {
    position: relative;
}

/* cell-input border styling moved to template-panel.css */

.cell-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cell-wrapper:hover .cell-actions,
.cell-wrapper:focus-within .cell-actions {
    opacity: 1;
}

body.dark-mode .cell-actions {
    background: rgba(30, 41, 59, 0.9);
}

/* ============================================
   TEMPLATE AI DROPDOWN (Cell-input suggestions)
   ============================================ */
.template-ai-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.template-ai-dropdown.visible {
    display: block;
}

.template-ai-dropdown-item {
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    color: #334155;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.4;
    transition: background 0.1s ease;
}

.template-ai-dropdown-item:last-child {
    border-bottom: none;
}

.template-ai-dropdown-item:hover {
    background: #f1f5f9;
}

.template-ai-dropdown-loading {
    padding: 12px;
    text-align: center;
    color: #64748b;
    font-size: var(--font-size-sm);
}

/* Dark mode */
body.dark-mode .template-ai-dropdown {
    background: #1e293b;
    border-color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .template-ai-dropdown-item {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

body.dark-mode .template-ai-dropdown-item:hover {
    background: #334155;
}

body.dark-mode .template-ai-dropdown-loading {
    color: #94a3b8;
}


/* Cell image thumbnails */
.cell-image-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 4px;
    background: #f8fafc;
    border-radius: 4px;
}

.cell-image-thumb {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.cell-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cell-image-thumb .thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: var(--font-size-2xs);
    text-align: center;
    padding: 1px 0;
}

.cell-image-thumb .thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: var(--font-size-2xs);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cell-image-thumb:hover .thumb-remove {
    opacity: 1;
}

body.dark-mode .cell-image-thumbs {
    background: #1e293b;
}

body.dark-mode .cell-image-thumb {
    border-color: #475569;
}

/* ============================================
   INLINE AUTOCOMPLETE DROPDOWN
   ============================================ */
.inline-autocomplete {
    display: none;
    /* Position is set dynamically by JS for fixed positioning */
    min-width: 200px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
    .inline-autocomplete {
        min-width: 150px;
        max-width: calc(100vw - 24px);
    }
}

.inline-autocomplete.visible {
    display: block;
}

.inline-autocomplete-item {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    color: #334155;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.3;
    transition: background 0.1s ease;
}

.inline-autocomplete-item:last-child {
    border-bottom: none;
}

.inline-autocomplete-item:hover,
.inline-autocomplete-item.highlighted {
    background: #f1f5f9;
}

.inline-autocomplete-item.selected {
    background: #f1f5f9;
    color: #334155;
}

/* Dark mode autocomplete */
body.dark-mode .inline-autocomplete {
    background: #1e293b;
    border-color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .inline-autocomplete-item {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

body.dark-mode .inline-autocomplete-item:hover,
body.dark-mode .inline-autocomplete-item.highlighted {
    background: #334155;
}

body.dark-mode .inline-autocomplete-item.selected {
    background: #334155;
    color: #e2e8f0;
}

/* Chat AI wand dropdown - compact, consistent with media-options menu */
.chat-ai-wand-dropdown {
    min-width: auto;
    width: auto !important;
    border-radius: 10px;
    padding: 4px;
    border-color: #e5e7eb;
    white-space: nowrap;
}

body.dark-mode .chat-ai-wand-dropdown {
    border-color: #374151;
}

.chat-ai-wand-dropdown .inline-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-weight: 500;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #374151;
}

.chat-ai-wand-dropdown .inline-autocomplete-item i {
    width: 18px;
    text-align: center;
    color: #4b5563;
}

body.dark-mode .chat-ai-wand-dropdown .inline-autocomplete-item {
    color: #e5e7eb;
}

body.dark-mode .chat-ai-wand-dropdown .inline-autocomplete-item i {
    color: #9ca3af;
}

/* Large text mode */
body.large-text .inline-autocomplete-item {
    font-size: var(--font-size-xs);
    padding: 6px 10px;
}


/* Tool Suggestions */
.tool-suggestions {
    margin: 12px 0;
    padding: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

.tools-label {
    display: block;
    font-size: var(--font-size-xs);
    color: #166534;
    margin-bottom: 8px;
    font-weight: 500;
}

.tools-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tool-suggestion-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #22c55e;
    border-radius: 20px;
    color: #166534;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.2s;
}

.tool-suggestion-btn:hover {
    background: #22c55e;
    color: #fff;
}

.tool-suggestion-btn i {
    font-size: var(--font-size-xs);
}

body.dark-mode .tool-suggestions {
    background: #14532d;
    border-color: #166534;
}

body.dark-mode .tools-label {
    color: #86efac;
}

body.dark-mode .tool-suggestion-btn {
    background: #1f2937;
    border-color: #22c55e;
    color: #86efac;
}

body.dark-mode .tool-suggestion-btn:hover {
    background: #22c55e;
    color: #fff;
}

/* ==================== EMBEDDED EXTERNAL TOOLS ==================== */
/* Container for embedded tools (GeoGebra, Desmos, Polypad, MLC) with inline input */

.embedded-tool-container {
    margin: 16px 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.embedded-tool-container:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.embedded-tool-container.expanded {
    position: fixed;
    top: 10vh;
    left: 5vw;
    right: 5vw;
    bottom: 10vh;
    z-index: 1000;
    margin: 0;
    border-radius: 16px;
}

.embedded-tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.tool-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-info i {
    color: #2563eb;
    font-size: var(--font-size-sm);
}

.tool-name {
    font-weight: 600;
    color: #1e293b;
    font-size: var(--font-size-xs);
}

.tool-provider {
    font-size: var(--font-size-xs);
    color: #64748b;
    padding: 2px 8px;
    background: #e2e8f0;
    border-radius: 10px;
}

.tool-actions {
    display: flex;
    gap: 6px;
}

.tool-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tool-action-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.tool-action-btn.tool-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

.embedded-tool-iframe-container {
    background: #f8fafc;
}

.embedded-tool-iframe-container iframe {
    display: block;
    width: 100%;
    border: none;
}

/* Inline input section */
.embedded-tool-input-section {
    padding: 12px 14px;
    background: #fafafa;
    border-top: 1px solid #e2e8f0;
}

.tool-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tool-inline-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    font-size: var(--font-size-xs);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tool-inline-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.tool-inline-input::placeholder {
    color: #9ca3af;
}

.tool-input-send {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease;
}

.tool-input-send:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.tool-input-send i {
    font-size: var(--font-size-sm);
}

.tool-input-hints {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.hint-chip {
    padding: 6px 12px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 16px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.hint-chip:hover {
    background: #c7d2fe;
    transform: translateY(-1px);
}

/* Dark mode for embedded tools */
body.dark-mode .embedded-tool-container {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .embedded-tool-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-bottom-color: #334155;
}

body.dark-mode .tool-name {
    color: #f1f5f9;
}

body.dark-mode .tool-provider {
    background: #334155;
    color: #94a3b8;
}

body.dark-mode .tool-action-btn {
    color: #94a3b8;
}

body.dark-mode .tool-action-btn:hover {
    background: #334155;
    color: #f1f5f9;
}

body.dark-mode .embedded-tool-iframe-container {
    background: #0f172a;
}

body.dark-mode .embedded-tool-input-section {
    background: #1e293b;
    border-top-color: #334155;
}

body.dark-mode .tool-inline-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .tool-inline-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

body.dark-mode .tool-inline-input::placeholder {
    color: #64748b;
}

body.dark-mode .hint-chip {
    background: #312e81;
    color: #a5b4fc;
}

body.dark-mode .hint-chip:hover {
    background: #3730a3;
}

/* Responsive for embedded tools */
@media (max-width: 768px) {
    .embedded-tool-container.expanded {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }

    .embedded-tool-header {
        padding: 8px 12px;
    }

    .tool-info {
        gap: 6px;
    }

    .tool-name {
        font-size: var(--font-size-xs);
    }

    .tool-provider {
        display: none;
    }

    .tool-action-btn {
        width: 36px;
        height: 36px;
    }

    .embedded-tool-input-section {
        padding: 10px 12px;
    }

    .tool-inline-input {
        padding: 8px 12px;
        font-size: var(--font-size-xs);
    }

    .tool-input-send {
        width: 44px;
        height: 44px;
    }

    .hint-chip {
        padding: 5px 10px;
        font-size: var(--font-size-2xs);
    }
}

@media (max-width: 480px) {
    .embedded-tool-container {
        margin: 8px -4px;
        border-radius: 8px;
    }

    .embedded-tool-header {
        padding: 6px 10px;
    }

    .embedded-tool-iframe-container iframe {
        min-height: 300px;
    }

    .tool-action-btn {
        width: 44px;
        height: 44px;
    }
}

/* External tools suggestion cards */
.external-tools-suggestions {
    margin: 12px 0;
    padding: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}

.external-tools-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #15803d;
    margin-bottom: 10px;
}

.external-tools-header i {
    font-size: var(--font-size-sm);
}

.external-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.external-tool-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #dcfce7;
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.external-tool-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.tool-card-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.tool-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-card-name {
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: #1e293b;
}

.tool-card-provider {
    font-size: var(--font-size-2xs);
    color: #64748b;
}

.tool-embed-btn {
    padding: 6px 12px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s ease;
}

.tool-embed-btn:hover {
    background: #059669;
}

.tool-suggestion-btn.external-tool {
    background: #ecfdf5;
    border-color: #10b981;
    color: #059669;
}

.tool-suggestion-btn.external-tool:hover {
    background: #10b981;
    color: white;
}

/* Dark mode for external tools */
body.dark-mode .external-tools-suggestions {
    background: #052e16;
    border-color: #166534;
}

body.dark-mode .external-tools-header {
    color: #86efac;
}

body.dark-mode .external-tool-card {
    background: #14532d;
    border-color: #166534;
}

body.dark-mode .tool-card-name {
    color: #f0fdf4;
}

body.dark-mode .tool-card-provider {
    color: #86efac;
}

body.dark-mode .tool-suggestion-btn.external-tool {
    background: #14532d;
    border-color: #22c55e;
    color: #86efac;
}

body.dark-mode .tool-suggestion-btn.external-tool:hover {
    background: #22c55e;
    color: #fff;
}

/* Workflow Indicator */
.workflow-indicator {
    margin: 12px 0;
    padding: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.workflow-progress-bar {
    height: 6px;
    background: #dbeafe;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.workflow-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.workflow-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
}

.workflow-current {
    color: #1e40af;
    font-weight: 500;
}

.workflow-current i {
    margin-right: 4px;
}

.workflow-next {
    color: #4b5563;
}

.workflow-next i {
    margin: 0 4px;
}

body.dark-mode .workflow-indicator {
    background: #1e3a5f;
    border-color: #1e40af;
}

body.dark-mode .workflow-progress-bar {
    background: #1e40af;
}

body.dark-mode .workflow-current {
    color: #93c5fd;
}

body.dark-mode .workflow-next {
    color: #9ca3af;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fill-in-template {
        padding: 12px;
        font-size: var(--font-size-sm);
    }

    .fill-in-blank {
        min-width: 80px;
        padding: 4px 8px;
    }

    .tool-suggestions,
    .workflow-indicator {
        padding: 10px;
    }

    .workflow-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .inline-quick-reply-btn {
        padding: 6px 12px;
        font-size: var(--font-size-xs);
    }
}

body.sidebar-collapsed-mode .chat-input {
    left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

@media (max-width: 1023px) {
    .chat-input {
        left: 0;
        width: 100%;
    }
}

/* Default: centered in viewport before messages */
.chat-input:not(.bottom-position) {
    top: 40% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* After first message: positioned at bottom above chat-footer-buttons */
.chat-input.bottom-position {
    top: auto !important;
    bottom: 60px !important;
    transform: none !important;
    justify-content: flex-end !important;
    padding-bottom: 5px;
}

.chat-input.bottom-position .input-group {
    width: 100%;
}

/* Medium and large text mode adjustments - font sizes use CSS custom properties */
body.medium-text .chat-input:not(.bottom-position),
body.large-text .chat-input:not(.bottom-position) {
    top: auto;
    bottom: 50px;
}

body.medium-text .chat-input.bottom-position,
body.large-text .chat-input.bottom-position {
    bottom: 55px;
}

body.medium-text .conversation-container {
    height: calc(100vh - 240px);
}

body.large-text .conversation-container {
    height: calc(100vh - 260px);
}

body.medium-text .input-group,
body.large-text .input-group {
    min-height: 52px;
    padding: 12px 16px;
    font-size: var(--font-size-chat-input);
}

body.medium-text .input-group textarea,
body.large-text .input-group textarea {
    font-size: var(--font-size-chat-input);
    line-height: 1.3;
    min-height: auto;
    height: auto;
}

body.medium-text .input-controls,
body.large-text .input-controls {
    align-items: center;
}

body.medium-text .input-group textarea::placeholder,
body.large-text .input-group textarea::placeholder {
    font-size: var(--font-size-chat-input);
}

body.medium-text .chat-input .placeholder,
body.large-text .chat-input .placeholder {
    font-size: var(--font-size-chat-placeholder);
    line-height: var(--line-height-relaxed);
    padding: 0 !important;
}

body.medium-text #output .placeholder,
body.large-text #output .placeholder {
    font-size: var(--font-size-chat-placeholder);
    line-height: var(--line-height-relaxed);
    padding: 30px;
}

body.medium-text #output {
    padding: 25px 25px 90px 25px;
}

body.large-text #output {
    padding: 30px 30px 100px 30px;
}

/* Responsive fixes for medium and large text modes */
/* Tablets and medium screens */
@media (max-width: 1024px) {

    body.medium-text .chat-input:not(.bottom-position),
    body.large-text .chat-input:not(.bottom-position) {
        top: auto;
        bottom: 50px;
    }

    body.medium-text .chat-input.bottom-position,
    body.large-text .chat-input.bottom-position {
        top: auto;
        bottom: 50px;
    }

    body.medium-text .conversation-container {
        height: calc(100vh - 260px);
    }

    body.large-text .conversation-container {
        height: calc(100vh - 280px);
    }
}

/* Small screens and phones */
@media (max-width: 768px) {

    body.medium-text .chat-input:not(.bottom-position),
    body.large-text .chat-input:not(.bottom-position) {
        top: auto;
        bottom: 40px;
    }

    body.medium-text .chat-input.bottom-position,
    body.large-text .chat-input.bottom-position {
        top: auto;
        bottom: 40px;
    }

    body.medium-text .chat-input .placeholder,
    body.large-text .chat-input .placeholder {
        font-size: var(--font-size-chat-placeholder);
        padding: 0 !important;
    }

    body.medium-text #output .placeholder,
    body.large-text #output .placeholder {
        font-size: var(--font-size-chat-placeholder);
        padding: 20px;
    }

    body.medium-text #output,
    body.large-text #output {
        padding: 20px 20px 140px 20px;
    }

    body.medium-text .conversation-container {
        height: calc(100vh - 180px);
    }

    body.large-text .conversation-container {
        height: calc(100vh - 200px);
    }
}

/* Very small screens */
@media (max-width: 480px) {

    body.medium-text .chat-input:not(.bottom-position),
    body.large-text .chat-input:not(.bottom-position) {
        top: auto;
        bottom: 30px;
    }

    body.medium-text .chat-input.bottom-position,
    body.large-text .chat-input.bottom-position {
        top: auto;
        bottom: 30px;
    }

    body.medium-text .chat-input .placeholder,
    body.large-text .chat-input .placeholder {
        font-size: var(--font-size-chat-placeholder);
        padding: 0 !important;
    }

    body.medium-text #output .placeholder,
    body.large-text #output .placeholder {
        font-size: var(--font-size-chat-placeholder);
        padding: 15px;
    }

    body.medium-text .input-group,
    body.large-text .input-group {
        min-height: 48px;
        padding: 10px 15px;
    }

    body.medium-text #output #stop,
    body.large-text #output #stop {
        margin-bottom: 10px;
    }
}

/* Short screens (landscape phones) */
@media (max-height: 600px) {

    body.medium-text .chat-input:not(.bottom-position),
    body.large-text .chat-input:not(.bottom-position) {
        top: auto;
        bottom: 20px;
    }

    body.medium-text .chat-input.bottom-position,
    body.large-text .chat-input.bottom-position {
        top: auto;
        bottom: 20px;
    }

    body.medium-text .chat-input .placeholder,
    body.large-text .chat-input .placeholder {
        font-size: var(--font-size-chat-placeholder);
        padding: 0 !important;
    }

    body.medium-text #output .placeholder,
    body.large-text #output .placeholder {
        font-size: var(--font-size-chat-placeholder);
        padding: 10px 20px;
    }

    body.medium-text #output,
    body.large-text #output {
        padding: 15px 20px 100px 20px;
    }

    body.medium-text #output #stop,
    body.large-text #output #stop {
        margin-bottom: 5px;
    }
}

/* Scale icons in medium and large text mode */
body.medium-text #record i,
body.medium-text #plus i,
body.medium-text #send i,
body.medium-text #stop i {
    font-size: var(--font-size-input-icon) !important;
}

body.large-text #record i,
body.large-text #plus i,
body.large-text #send i,
body.large-text #stop i {
    font-size: var(--font-size-input-icon) !important;
}

body.medium-text .input-group #record,
body.medium-text .input-group #plus,
body.medium-text .input-group #send,
body.medium-text #output #stop {
    width: 40px;
    height: 40px;
}

body.large-text .input-group #record,
body.large-text .input-group #plus,
body.large-text .input-group #send,
body.large-text #output #stop {
    width: 44px;
    height: 44px;
}

body.medium-text #output #stop {
    margin-bottom: 10px;
}

body.large-text #output #stop {
    margin-bottom: 12px;
}

/* Adjust icon buttons in header for medium and large text - sizes now use CSS variables */

/* Language icon - removed old styles, now uses sidebar-icon-btn */

.chat-input input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #a7a9ad;
    border-radius: 2px;
    margin-right: 5px;
    font-family: "Inter", sans-serif;
    font-size: var(--font-size-lg);
}

.chat-input button {
    padding: 8px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-2xs);
}

.chat-input button#send {
    color: #276FFF;
    transition: color 0.2s;
}

.chat-input button#send:hover {
    color: #1a5acc;
}

body.dark-mode .chat-input button#send {
    color: #ffffff !important;
}

body.dark-mode .chat-input button#send:hover {
    color: #FFCC02 !important;
}

.chat-input button#record i.active {
    color: #ef4444 !important;
    animation: stt-pulse 1s infinite;
}

@keyframes pulse-mic {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

body.dark-mode .chat-input button#record i.active {
    color: #f87171 !important;
    animation: stt-pulse 1s infinite;
}

.input-group button#type {
    color: #276FFF;
}

#output {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 20px 20px 20px;
    margin-bottom: 70px;
    position: relative;
    background-color: transparent;
    max-width: 100%;
    width: 100%;
}

/* Hide empty elements in output to prevent white boxes */
#output>*:empty:not(#stop) {
    display: none;
}

#output>div:empty,
#output>p:empty:not(.placeholder) {
    display: none;
}


#output button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-2xs);
    padding-bottom: 7px;
}

#output button#stop {
    display: block;
    margin-left: 0px;
    margin-top: 4px;
    margin-bottom: 8px;
    padding: 0;
}

#output button#stop i.active {
    color: #276FFF !important;
    background: none !important;
    border: none !important;
}

body.dark-mode #output button#stop i.active {
    color: #FFCC02 !important;
}

#output button#stop i.inactive {
    color: #949494 !important;
    background: none !important;
    border: none !important;
}

body.dark-mode #output button#stop i.inactive {
    color: #ffffff !important;
}

#output .placeholder,
#output .assistant,
#output .user {
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: var(--font-size-chat-message);
    margin: 5px 5px 5px 0px;
    padding: 3px;
    border-radius: 28px;
}

#output .placeholder img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

#output .assistant img {
    width: 30px;
    height: 30px;
    margin-right: 0px;
}

/* Agent Avatar Small for Chat Messages */
.agent-avatar-small {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    margin-right: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Message Wrapper for Agent Responses */
.message-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Agent Badge for Identifying Responder */
.agent-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 4px;
}

/* Update assistant message layout */
#output .assistant {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
    box-sizing: border-box;
}

#output .assistant > .message-wrapper {
    flex: 1 1 100%;
}

/* Ensure remote messages (synced from collaborators) have same styling */
#output .assistant.remote-message {
    width: 100%;
    box-sizing: border-box;
}

#output .user.remote-message {
    /* Don't override width - let inline max-width:80% and margin-left:auto work for right alignment */
    box-sizing: border-box;
}

/* Remote message content should match local styling */
#output .remote-message .message-wrapper {
    flex: 1;
    min-width: 0;
    /* Allow shrinking within flex container */
}

#output .remote-message .message-content-container {
    flex: 1;
    min-width: 0;
}

/* Prevent horizontal scrolling in AI messages */
#output .assistant .message-wrapper,
#output .assistant .message-content-container,
#output .assistant span {
    overflow-x: hidden;
    max-width: 100%;
}

#output .placeholder,
#output .assistant {
    background-color: transparent;
    align-self: flex-start;
    font-size: var(--font-size-chat-message);
    color: #1f2937;
    margin-top: 12px;
    margin-bottom: 16px;
}

#output .user {
    background-color: transparent;
    align-self: flex-end;
    font-size: var(--font-size-chat-message);
    color: #1f2937;
    display: flex;
    align-items: center;
    max-width: 80%;
    margin-top: 12px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

#output .user .user-icon {
    flex-shrink: 0;
}

#output .user span {
    flex: 1;
    word-break: break-word;
}

/* Remote indicator should not flex-expand */
#output .user .remote-indicator {
    flex: none;
    flex-shrink: 0;
}

#output .placeholder span,
#output .assistant span,
#output .user span {
    display: inline;
    font-size: var(--font-size-chat-message);
    margin: 0;
    white-space: pre-wrap;
}

.user-icon {
    color: #276FFF;
    font-size: var(--font-size-xl);
    margin-right: 13px;
}

.conversation-container,
.chat-input {
    font-size: inherit;
}

.footer {
    margin-top: auto;
    padding: 0.5rem 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #276FFF;
    font-size: var(--font-size-sm);
}

.footer>span {
    margin: 0 0.5rem;
    color: #4b5563;
    font-size: var(--font-size-sm);
}

.footer a {
    color: #4b5563;
    text-decoration: none;
    margin: 0 0.2rem;
    font-size: var(--font-size-sm);
}

.footer a:hover {
    color: #4b5563;
    text-decoration: underline;
}

.left,
.center,
.right,
.far-right {
    float: none;
    padding-top: 0;
    color: #4b5563;
    display: inline-block;
}

.left {
    margin-right: 0;
}

.center {
    margin: 0;
}

.right,
.far-right {
    margin-left: 0;
}

.right a,
.center a,
.far-right a {
    text-decoration: none;
    color: #4b5563;
}

.footer button i {
    font-size: 1.2em;
    color: #4b5563;
}

body.medium-text footer,
body.medium-text footer span,
body.medium-text footer a,
body.medium-text footer .left,
body.medium-text footer .center,
body.medium-text footer .right,
body.medium-text footer .far-right {
    font-size: var(--font-size-base) !important;
}

body.large-text footer,
body.large-text footer span,
body.large-text footer a,
body.large-text footer .left,
body.large-text footer .center,
body.large-text footer .right,
body.large-text footer .far-right {
    font-size: var(--font-size-lg) !important;
}

#loader {
    font-size: var(--font-size-3xl);
    text-align: center;
    color: #276FFF;
}

a {
    text-decoration: none;
    color: #276FFF;
    font-size: var(--font-size-sm);
}

a:hover {
    text-decoration: underline;
}

.language-select,
#select_language {
    margin-top: 0.4375rem;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #1f2937;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 44px;
    /* Minimum touch target */
    touch-action: manipulation;
    /* Add dropdown arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    padding-right: 35px;
}

#select_language option {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-size-sm);
    padding: 8px;
    color: #1f2937;
}

.assistant-img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.hidden {
    display: none;
}

.main-view button:hover,
.chat-view button:hover {
    color: inherit;
}

.icon-button:hover {
    color: #276FFF;
}

#plus-container {
    position: relative;
    display: inline-flex;
    overflow: visible;
    margin: 0;
    padding: 0;
}

#plus {
    background: none;
    border: none;
    color: #4b5563;
    /* Dark gray like sidebar footer */
    cursor: pointer;
    margin-left: 0;
    font-size: var(--font-size-xs);
    transition: color 0.2s ease;
}

#plus:hover {
    color: #3b82f6;
    /* Blue on hover */
}

.media-options {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 4px;
    /* Reduced padding */
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Cone pointer for media options */
.media-options::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 22px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e5e7eb;
}

.media-options::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 23px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
}

/* When chat input is at bottom, show media options above the plus button */
.chat-input.bottom-position .media-options {
    top: auto;
    bottom: calc(100% - 4px);
    margin-top: 0;
    margin-bottom: 0;
}

body.dark-mode .media-options {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .media-options::before {
    border-bottom-color: #374151;
}

body.dark-mode .media-options::after {
    border-bottom-color: #1f2937;
}

.media-options button.media-option {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Reduced gap */
    width: 100%;
    padding: 6px 10px;
    /* Reduced padding */
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    font-size: var(--font-size-xs);
    /* Consistent with other dropdowns */
    font-weight: 500;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #374151;
    transition: background 0.15s ease;
}

.media-options button.media-option:hover {
    background: #f3f4f6;
}

.media-options button.media-option i {
    width: 18px;
    text-align: center;
    color: #4b5563;
}

/* Ensure clicks on icons and text bubble up to button */
.media-options button.media-option * {
    pointer-events: none;
}

body.medium-text .media-options button.media-option {
    font-size: var(--font-size-sm);
    padding: 8px 8px;
}

body.medium-text .media-options button.media-option i {
    font-size: var(--font-size-lg);
    margin-right: 10px;
}

body.medium-text .media-options {
    padding: 8px;
    min-width: 180px;
}

body.large-text .media-options button.media-option {
    font-size: var(--font-size-base);
    padding: 8px 8px;
}

body.large-text .media-options button.media-option i {
    font-size: var(--font-size-xl);
    margin-right: 10px;
}

body.large-text .media-options {
    padding: 8px;
    min-width: 200px;
}

body.dark-mode .media-options button.media-option {
    color: #e5e7eb;
}

body.dark-mode .media-options button.media-option:hover {
    background: #374151;
}

body.dark-mode .media-options button.media-option i {
    color: #9ca3af;
}

body.dark-mode #plus {
    color: #d1d5db;
    /* Light gray like sidebar footer in dark mode */
}

body.dark-mode #plus:hover {
    color: #60a5fa;
    /* Light blue on hover */
}

.writing-options {
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
}

.writing-options button {
    padding: 8px 12px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
}

.writing-options button:hover {
    background-color: #f0f0f0;
    font-size: var(--font-size-xs);
}

.hidden {
    display: none;
}

.chat-input-content {
    flex-grow: 1;
    padding: 5px;
    border: none;
    border-radius: 2px;
    margin-right: 5px;
    font-family: "Inter", sans-serif;
    font-size: var(--font-size-lg);
    min-height: 28px;
    max-height: 200px;
    overflow-y: auto;
    background-color: transparent;
    color: #000;
}

body.dark-mode .chat-input-content {
    background-color: transparent;
    color: #ffffff;
    border: none;
}

.chat-input-content[placeholder]:empty:before {
    content: attr(placeholder);
    color: #666;
}

body.dark-mode .chat-input-content[placeholder]:empty:before {
    color: #C2C2C2;
}

.footer,
.footer>*,
.footer span,
.footer a,
.footer .left,
.footer .center,
.footer .right,
.footer .far-right {
    font-size: var(--font-size-sm) !important;
}

[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: #1f2937;
    color: #ffffff;
    border: 1px solid #374151;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10001;
    cursor: pointer;
}

[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
}

/* Dark mode tooltip */
body.dark-mode [data-tooltip]:before {
    background-color: #374151;
    color: #ffffff;
    border-color: #4b5563;
}

/* Sidebar tooltips - show to the right only when collapsed */
.sidebar [data-tooltip]:before {
    left: 100%;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
}

/* Expanded sidebar: hide tooltips on items with visible text labels */
.sidebar:not(.collapsed) .sidebar-agents [data-tooltip]:before,
.sidebar:not(.collapsed) .sidebar-resources-list [data-tooltip]:before {
    display: none;
}

/* Settings row icon tooltips — show below (icon-only, need tooltips) */
.sidebar:not(.collapsed) .sidebar-settings-row [data-tooltip]:before {
    display: block;
    left: 50%;
    bottom: auto;
    top: 100%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-top: 5px;
}

/* First icon (Collaborate) tooltip - shift right to avoid left cutoff */
.sidebar:not(.collapsed) #collabButton[data-tooltip]:before {
    left: 0;
    transform: none;
}

/* Last icons tooltip - shift left to avoid right cutoff */
.sidebar:not(.collapsed) #toggleTextSizeButton[data-tooltip]:before,
.sidebar:not(.collapsed) #aiGuidanceToggle[data-tooltip]:before,
.sidebar:not(.collapsed) #supportBtn[data-tooltip]:before {
    left: auto;
    right: 0;
    transform: none;
}

/* Collab panel tooltips — show below (panel is at top of page) */
.collab-users-panel [data-tooltip]:before {
    bottom: auto;
    top: 100%;
    margin-top: 5px;
    margin-bottom: 0;
}

/* Leave Room tooltip — right-align to prevent right-edge overflow */
.collab-header-buttons [data-tooltip]:last-child::before {
    left: auto;
    right: 0;
    transform: none;
}

.collab-room-code [data-tooltip]:before {
    left: auto;
    right: 0;
    transform: none;
}

/* View toggle area tooltips — show below */
.view-toggle-container [data-tooltip]:before {
    bottom: auto;
    top: 100%;
    margin-top: 5px;
    margin-bottom: 0;
}

.sidebar.collapsed [data-tooltip]:before {
    left: 100%;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-resource-btn.progress-display {
    display: none;
}

/* Position tooltips below for header elements (at top of modal) */
.manipulative-embed-header [data-tooltip]:before,
.manipulative-embed-toolbar [data-tooltip]:before {
    bottom: auto;
    top: 100%;
    margin-top: 5px;
}

/* Position tooltips below for whiteboard toolbar and header */
.whiteboard-toolbar [data-tooltip]:before,
.whiteboard-header [data-tooltip]:before,
.whiteboard-header-actions [data-tooltip]:before,
.whiteboard-header-clean [data-tooltip]:before {
    bottom: auto;
    top: 100%;
    margin-top: 5px;
}
.whiteboard-header-clean .header-right [data-tooltip]:before {
    left: auto;
    right: 0;
    transform: none;
}

/* Hide tooltips when menus/pickers are open */
#plus-container:has(.media-options:not(.hidden)) #plus[data-tooltip]:before,
#plus-container.menu-open #plus[data-tooltip]:before,
.ai-wand-btn.menu-open[data-tooltip]:before,
#chatAiWand.menu-open[data-tooltip]:before,
.tool-btn.picker-open[data-tooltip]:before,
.tool-btn.active[data-tooltip]:before {
    opacity: 0 !important;
    visibility: hidden !important;
}

#plus[data-tooltip]:before {
    left: 0;
    transform: none;
}

#send[data-tooltip]:before {
    right: 0;
    left: auto;
    transform: none;
}

#record[data-tooltip]:before {
    left: 0;
    transform: none;
}

/* Consistent button height in icons-hidden-group for uniform tooltip positioning */
.icons-hidden-group>button,
.icons-hidden-group #plus {
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stop[data-tooltip]:before {
    left: 0;
    right: auto;
    transform: none;
    bottom: auto;
    top: 100%;
    margin-top: 5px;
}

#stop {
    position: relative;
    z-index: 1001;
}

.math-input-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.math-input-container {
    position: relative;
    width: 70%;
    aspect-ratio: 16/8;
    max-width: 700px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.math-input-title {
    color: white;
    margin-bottom: 10px;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: var(--font-size-lg);
}

.math-input-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.math-input-result {
    margin-top: 10px;
    display: none;
    flex-direction: column;
    align-items: center;
}

.math-input-result.active {
    display: flex;
}

.math-input-container canvas {
    background-color: white;
    cursor: crosshair;
    touch-action: none;
}

.math-input-overlay .quick-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.math-input-overlay .quick-buttons button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f8f8;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: var(--font-size-lg);
    transition: background-color 0.2s;
}

.math-input-overlay .quick-buttons button:hover {
    background: #e0e0e0;
}

.math-input-toolbar button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: var(--font-size-sm);
    transition: background-color 0.2s;
}

.math-input-toolbar button.clear {
    background-color: #f44336;
    color: white;
}

.math-input-toolbar button.scan {
    background-color: #2196F3;
    color: white;
}

.math-input-toolbar button.cancel {
    background-color: #9e9e9e;
    color: white;
}

.math-input-toolbar button:hover {
    opacity: 0.9;
}

.math-input-result .result-display {
    background-color: white;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 90%;
    max-width: 900px;
    min-height: 200px;
    font-size: var(--font-size-2xl);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    font-family: "Inter", sans-serif;
}

.math-input-result .button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.math-input-result .button-container button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: var(--font-size-sm);
    transition: background-color 0.2s;
}

.math-input-result .button-container button.insert {
    background-color: #4CAF50;
    color: white;
}

.math-input-result .button-container button:hover {
    opacity: 0.9;
}

.chat-input,
.chat-input-content {
    min-height: 2.8rem !important;
    line-height: 1.4 !important;
}

/* Remove focus border/outline for chat inputs */
.chat-input textarea:focus,
.chat-input input:focus,
.chat-input-content:focus,
.token-edit-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.token {
    display: inline-block;
    padding: 0;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}

.token:hover {
    background-color: #fcfcfc;
}

.token-edit-container {
    width: auto !important;
    display: inline-flex;
    max-width: max-content;
    white-space: nowrap;
    align-items: center;
    background: white;
    padding: 0;
}

.token-edit-input {
    border: 1px solid #ddd;
    padding: 0;
    font-family: "Inter", sans-serif;
    width: auto;
    font-size: 1em;
    box-sizing: content-box;
}

.token-edit-buttons {
    display: flex;
    gap: 4px;
}

.token-edit-button {
    border: none;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.token-edit-button.done {
    background-color: #4CAF50;
    color: white;
    font-size: 0.9em;
}


.token-edit-button:hover {
    opacity: 0.9;
}

#output {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

.user,
.assistant {
    white-space: pre-wrap;
    word-break: break-word;
}

.typing-indicator {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 4px 0;
    background: #f0f0f0;
    border-radius: 10px;
    width: fit-content;
}

.dark-mode .typing-indicator {
    background: #2a2a2a;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: #888;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.dictation-indicator {
    background: #f5f5f5;
    color: #333;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 12px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    animation: slideIn 0.3s ease;
    width: fit-content;
}

.dictation-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sound-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    position: relative;
    z-index: 95;
}

.sound-wave .wave {
    width: 3px;
    height: 100%;
    background: #276FFF;
    border-radius: 3px;
    animation: wave-animation 1.2s ease-in-out infinite;
}

.sound-wave .wave:nth-child(1) {
    animation-delay: 0s;
    height: 40%;
}

.sound-wave .wave:nth-child(2) {
    animation-delay: 0.1s;
    height: 60%;
}

.sound-wave .wave:nth-child(3) {
    animation-delay: 0.2s;
    height: 100%;
}

.sound-wave .wave:nth-child(4) {
    animation-delay: 0.3s;
    height: 60%;
}

.sound-wave .wave:nth-child(5) {
    animation-delay: 0.4s;
    height: 40%;
}

@keyframes wave-animation {

    0%,
    100% {
        transform: scaleY(0.5);
        opacity: 0.5;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.dictation-text {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.interim-text {
    font-style: italic;
    opacity: 0.9;
    margin-left: 5px;
}

/* Document Extraction Status - matches typing indicator pattern */
.extraction-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 8px 0;
    color: #4b5563;
    font-size: var(--font-size-sm);
    width: fit-content;
    animation: fadeIn 0.2s ease;
    transition: opacity 0.5s ease;
}

.extraction-status.fade-out {
    opacity: 0;
}

.extraction-icon {
    display: flex;
    align-items: center;
    color: #9ca3af;
}

.extraction-text {
    color: #4b5563;
}

.extraction-check {
    color: #10b981;
    font-weight: 500;
}

.dark-mode .extraction-status {
    color: #9ca3af;
}

.dark-mode .extraction-icon {
    color: #4b5563;
}

.dark-mode .extraction-text {
    color: #9ca3af;
}

.dark-mode .extraction-check {
    color: #34d399;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.dark-mode .dictation-indicator {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #e0e0e0;
}

.dark-mode .sound-wave .wave {
    background: #5a8fff;
}

/* Remove multiline specific positioning - handled by main .bottom-position rule */

/* Modern Agent Cards and Chain of Thought Styles */
/* Modern Agent Cards and Chain of Thought Styles */

/* Modal Overlay for Agent Reasoning */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-overlay.hidden {
    display: none;
}

.modal-container {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 1200px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
    animation: modalSlideIn 0.3s ease;
    position: relative;
    z-index: 100000;
    isolation: isolate;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(to right, #f9fafb, #ffffff);
}

.modal-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: #1f2937;
    font-weight: 600;
}

.modal-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Workflow Control Panel */
.workflow-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-right: auto;
    margin-left: 20px;
}

.workflow-btn {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: #4b5563;
    font-size: var(--font-size-xs);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.workflow-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #1f2937;
}

.workflow-btn.active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

/* Manual Mode - Yellow highlight */
.workflow-btn.manual-mode {
    background: #fbbf24;
    color: #000000;
    border-color: #f59e0b;
    font-weight: normal;
}

.workflow-btn.manual-mode:hover {
    background: #f59e0b;
    color: #000000;
    border-color: #d97706;
}

/* Auto Mode - Green highlight */
.workflow-btn.auto-mode {
    background: #10b981;
    color: white;
    border-color: #059669;
    font-weight: normal;
}

.workflow-btn.auto-mode:hover {
    background: #059669;
    color: white;
    border-color: #047857;
}

.workflow-btn i {
    font-size: var(--font-size-2xs);
}

/* Mode Toggle Button */
.workflow-mode-toggle {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    cursor: pointer;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.workflow-mode-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.workflow-mode-toggle.auto-mode {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.workflow-mode-toggle.auto-mode:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.mode-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-icon {
    font-size: var(--font-size-sm);
}

.mode-label {
    font-size: var(--font-size-2xs);
    letter-spacing: 0.5px;
    font-weight: 700;
}

.workflow-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: var(--font-size-2xs);
    color: #4b5563;
}

.workflow-status.executing {
    background: #fef3c7;
    color: #92400e;
}

.workflow-status.completed {
    background: #d1fae5;
    color: #065f46;
}

.workflow-status.paused {
    background: #fce7f3;
    color: #831843;
}

/* Human-in-the-loop Controls */
.human-loop-btn {
    background: linear-gradient(135deg, #4b5563 0%, #4b5563 100%);
    color: white;
    border: 1px solid #4b5563;
    transition: all 0.3s ease;
}

.human-loop-btn.active {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.human-interrupt-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: min(400px, calc(100vw - 40px));
    max-width: min(500px, calc(100vw - 40px));
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.interrupt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.interrupt-header i {
    color: #f59e0b;
    font-size: var(--font-size-2xl);
}

.interrupt-header span {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #1f2937;
}

.interrupt-content {
    margin-top: 15px;
}

.interrupt-query {
    color: #4b5563;
    margin-bottom: 20px;
    line-height: 1.6;
}

.interrupt-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.interrupt-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.approve-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.approve-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modify-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.modify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.reject-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.reject-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.modify-input {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--font-size-sm);
    resize: vertical;
    transition: border-color 0.3s ease;
}

.modify-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.dark-mode .human-interrupt-panel {
    background: #1f2937;
    color: #e5e7eb;
}

.dark-mode .interrupt-header {
    border-bottom-color: #374151;
}

.dark-mode .interrupt-header span {
    color: #e5e7eb;
}

.dark-mode .interrupt-query {
    color: #9ca3af;
}

.dark-mode .modify-input {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

.dark-mode .modify-input:focus {
    border-color: #60a5fa;
}

.export-btn {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
}

.export-btn:hover {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #d1d5db;
}

.close-modal {
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    color: #4b5563;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #ef4444;
}

.modal-body {
    flex: 1;
    padding: 20px;
    overflow: auto;
    background: #f9fafb;
}

/* Split view for graph and timeline */
.graph-split-view {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 20px;
}

.graph-container {
    flex: 2;
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 10px;
    overflow: auto;
}

/* Simplified Workflow Progress Modal */
.workflow-progress-modal {
    max-width: 600px;
    height: auto;
    max-height: 90vh;
}

.workflow-progress-container {
    padding: 10px 20px 20px;
}

.workflow-description {
    color: #4b5563;
    margin-bottom: 24px;
    text-align: center;
    font-size: var(--font-size-xs);
}

.workflow-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.workflow-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.workflow-step.visited {
    opacity: 1;
}

.workflow-step.current {
    opacity: 1;
}

.workflow-step.current .step-circle {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    transform: scale(1.1);
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-xs);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.step-connector {
    width: 2px;
    height: 24px;
    background: #e5e7eb;
    margin: 4px 0;
}

.workflow-step.visited .step-connector {
    background: #10B981;
}

.workflow-step:last-child .step-connector {
    display: none;
}

.step-content {
    padding: 8px 0 16px;
    flex: 1;
}

.step-content h4 {
    margin: 0 0 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #1f2937;
}

.step-content p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: #4b5563;
}

.workflow-step.visited .step-content h4 {
    color: #059669;
}

.workflow-step.visited .step-circle::after {
    content: '\2713';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #10B981;
    border-radius: 50%;
    font-size: var(--font-size-2xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.step-circle {
    position: relative;
}

.workflow-summary {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.progress-text {
    color: #4b5563;
    font-size: var(--font-size-xs);
}

#completedCount {
    font-weight: 600;
    color: #2563eb;
}

/* Dark mode for workflow progress */
body.dark-mode .workflow-progress-modal .modal-body {
    background: #1f2937;
}

body.dark-mode .workflow-description {
    color: #9ca3af;
}

body.dark-mode .step-content h4 {
    color: #f3f4f6;
}

body.dark-mode .step-content p {
    color: #9ca3af;
}

body.dark-mode .step-connector {
    background: #374151;
}

body.dark-mode .workflow-summary {
    border-top-color: #374151;
}

body.dark-mode .progress-text {
    color: #9ca3af;
}

/* Responsive workflow progress */
@media (max-width: 480px) {
    .workflow-progress-modal {
        max-width: 100%;
        margin: 10px;
    }

    .step-circle {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-2xs);
    }

    .step-content h4 {
        font-size: var(--font-size-xs);
    }

    .step-content p {
        font-size: var(--font-size-xs);
    }
}

/* Mermaid Container */
.mermaid-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 20px;
}

.mermaid {
    max-width: 100%;
    overflow: visible;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Active node highlighting */
.mermaid .active-node {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Graph Instructions */
.graph-instructions {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--font-size-2xs);
    color: #4b5563;
    max-width: 250px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 10;
}

.graph-instructions h4 {
    margin: 0 0 8px 0;
    font-size: var(--font-size-xs);
    color: #1f2937;
    font-weight: 600;
}

.graph-instructions ul {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.graph-instructions li {
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.graph-instructions li::before {
    content: '\2022';
    color: #2563eb;
    font-weight: bold;
}

.graph-instructions .workflow-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-style: italic;
    color: #4b5563;
    line-height: 1.4;
}

.dark-mode .graph-instructions .workflow-note {
    border-top-color: #374151;
    color: #9ca3af;
}

#langGraphCanvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 5;
}

/* Conversation Timeline Panel */
.conversation-timeline {
    flex: 1;
    height: 100%;
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 300px;
}

.timeline-header {
    padding: 20px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #f9fafb, #ffffff);
}

.timeline-header h3 {
    margin: 0;
    font-size: var(--font-size-base);
    color: #1f2937;
    font-weight: 600;
}

.timeline-count {
    font-size: var(--font-size-2xs);
    color: #4b5563;
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 12px;
}

.timeline-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    position: relative;
}

.timeline-welcome {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}

.timeline-welcome i {
    font-size: var(--font-size-3xl);
    margin-bottom: 12px;
    opacity: 0.5;
}

.timeline-welcome p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Timeline Items */
.timeline-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    animation: slideInRight 0.3s ease;
    position: relative;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 2;
}

.timeline-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 28px;
    background: #e5e7eb;
    transform: translateX(-50%);
}

.timeline-item:last-child .timeline-dot::after {
    display: none;
}

.timeline-card {
    flex: 1;
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
    cursor: pointer;
}

.timeline-card:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-agent {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.timeline-time {
    font-size: var(--font-size-2xs);
    color: #9ca3af;
    margin-bottom: 8px;
}

.timeline-message {
    font-size: var(--font-size-xs);
    color: #4b5563;
    line-height: 1.4;
}

.timeline-pattern {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: var(--font-size-2xs);
    color: #4b5563;
}

.timeline-pattern span {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
}

/* Agent Selector Container */
.agent-selector-container {
    width: 100%;
    max-width: 1600px;
    margin: 10px auto;
    padding: 0 20px;
    position: relative;
    z-index: 50;
}

.agent-cards-wrapper {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;
}

.agent-cards-wrapper::-webkit-scrollbar {
    height: 6px;
}

.agent-cards-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.agent-cards-wrapper::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 3px;
}

/* Agent Card Styles */
.agent-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    position: relative;
}

.agent-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.agent-card.active {
    border-color: #3b82f6;
    background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.02));
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

/* Agent Avatar */
.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* Agent Info */
.agent-info {
    flex: 1;
}

.agent-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: #1f2937;
    margin-bottom: 2px;
}

.agent-description {
    font-size: var(--font-size-base);
    color: #4b5563;
}

/* Agent Status Dot */
.agent-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    position: absolute;
    top: 10px;
    right: 10px;
}

.agent-status-dot.active {
    animation: pulse 2s infinite;
}

/* Agent-specific dot colors - Educational color scheme */
.agent-card[data-agent="instructionalPlanning"] .agent-status-dot.active {
    background: #1E40AF;
    /* Deep Blue - foundation, planning */
    animation: pulse-blue 2s infinite;
}

.agent-card[data-agent="openingLesson"] .agent-status-dot.active {
    background: #059669;
    /* Teal Green - engagement, growth */
    animation: pulse-green 2s infinite;
}

.agent-card[data-agent="explicitInstruction"] .agent-status-dot.active {
    background: #3b82f6;
    /* Violet - teaching, creativity */
    animation: pulse-purple 2s infinite;
}

.agent-card[data-agent="guidedInquiry"] .agent-status-dot.active {
    background: #D97706;
    /* Amber - exploration, discovery */
    animation: pulse-amber 2s infinite;
}

.agent-card[data-agent="closingLesson"] .agent-status-dot.active {
    background: #DC2626;
    /* Red - conclusion, importance */
    animation: pulse-red 2s infinite;
}

.agent-card[data-agent="dataDecisions"] .agent-status-dot.active {
    background: #475569;
    /* Slate - analysis, reflection */
    animation: pulse-slate 2s infinite;
}

/* Pulse animations for each color - Educational color scheme */
@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.7);
        /* #1E40AF */
    }

    70% {
        box-shadow: 0 0 0 10px rgba(30, 64, 175, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(30, 64, 175, 0);
    }
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
        /* #059669 */
    }

    70% {
        box-shadow: 0 0 0 10px rgba(5, 150, 105, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
    }
}

@keyframes pulse-purple {
    0% {
        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7);
        /* #3b82f6 */
    }

    70% {
        box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
    }
}

@keyframes pulse-amber {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(217, 119, 6, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

@keyframes pulse-slate {
    0% {
        box-shadow: 0 0 0 0 rgba(71, 85, 105, 0.7);
        /* #475569 */
    }

    70% {
        box-shadow: 0 0 0 10px rgba(71, 85, 105, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(71, 85, 105, 0);
    }
}




/* Dark mode support */
.dark-mode .agent-card {
    background: #1f2937;
    border-color: #374151;
}

.dark-mode .agent-card:hover {
    border-color: #4b5563;
}

.dark-mode .agent-card.active {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
}

.dark-mode .agent-name {
    color: #f3f4f6;
}

.dark-mode .agent-description {
    color: #9ca3af;
}

.dark-mode .chain-of-thought-panel {
    background: #111827;
    border-left-color: #374151;
}

.dark-mode .panel-header {
    background: #1f2937;
    border-bottom-color: #374151;
}

.dark-mode .panel-header h3 {
    color: #f3f4f6;
}

.dark-mode .thought-step {
    background: #1f2937;
}

.dark-mode .thought-content {
    color: #d1d5db;
}

/* Dark mode - Modal and Timeline */
.dark-mode .modal-container {
    background: #1f2937;
    color: #f3f4f6;
}

.dark-mode .modal-header {
    background: linear-gradient(to right, #1f2937, #111827);
    border-bottom-color: #374151;
}

.dark-mode .modal-header h2 {
    color: #f3f4f6;
}

.dark-mode .conversation-timeline {
    background: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .timeline-header {
    background: linear-gradient(to right, #1f2937, #111827);
    border-bottom-color: #374151;
}

.dark-mode .timeline-header h3 {
    color: #f3f4f6;
}

.dark-mode .timeline-count {
    background: #374151;
    color: #e5e7eb;
}

.dark-mode .timeline-card {
    background: #1f2937;
}

.dark-mode .timeline-card:hover {
    background: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .timeline-agent {
    color: #f9fafb;
    font-weight: 700;
}

.dark-mode .timeline-time {
    color: #9ca3af;
}

.dark-mode .timeline-message {
    color: #e5e7eb;
    font-weight: 500;
}

.dark-mode .timeline-dot::after {
    background: #374151;
}

.dark-mode .timeline-welcome {
    color: #4b5563;
}

.dark-mode .graph-container {
    background: #1f2937;
}

.dark-mode .graph-instructions {
    background: rgba(31, 41, 55, 0.95);
    border-color: #374151;
    color: #9ca3af;
}

.dark-mode .graph-instructions h4 {
    color: #f3f4f6;
}

.dark-mode .workflow-btn {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.dark-mode .workflow-btn:hover {
    background: #374151;
    color: #f3f4f6;
}

.dark-mode .workflow-btn.active {
    background: #3b82f6;
    color: white;
}

.dark-mode .workflow-btn.manual-mode {
    background: #d97706;
    color: #fef3c7;
    border-color: #b45309;
}

.dark-mode .workflow-btn.manual-mode:hover {
    background: #b45309;
    color: #fffbeb;
    border-color: #92400e;
}

.dark-mode .workflow-btn.auto-mode {
    background: #059669;
    color: white;
    border-color: #047857;
}

.dark-mode .workflow-btn.auto-mode:hover {
    background: #047857;
    color: white;
    border-color: #065f46;
}

.dark-mode .workflow-mode-toggle {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.dark-mode .workflow-mode-toggle.auto-mode {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.dark-mode .workflow-status {
    background: #374151;
    color: #e5e7eb;
}

.dark-mode .close-modal {
    color: #9ca3af;
}

.dark-mode .close-modal:hover {
    color: #ef4444;
}

/* Large Text Mode Support */
body.large-text .agent-selector-container {
    margin: 20px auto;
    padding: 0 20px;
}

body.large-text .agent-cards-wrapper {
    gap: 20px;
    padding: 12px 0;
}

body.large-text .agent-card {
    min-width: 250px;
    padding: 16px 20px;
    gap: 15px;
}

body.large-text .agent-avatar {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-base);
    border-radius: 12px;
}

body.large-text .agent-name {
    font-size: var(--font-size-lg);
}

body.large-text .agent-description {
    font-size: var(--font-size-sm);
}

body.large-text .agent-status-dot {
    width: 10px;
    height: 10px;
}

body.large-text .modal-header h2 {
    font-size: var(--font-size-2xl);
}

body.large-text .timeline-header h3 {
    font-size: var(--font-size-xl);
}

body.large-text .timeline-count {
    font-size: var(--font-size-sm);
}

body.large-text .timeline-agent {
    font-size: var(--font-size-sm);
}

body.large-text .timeline-time {
    font-size: var(--font-size-xs);
}

body.large-text .timeline-message {
    font-size: var(--font-size-base);
}

body.large-text .workflow-btn {
    font-size: var(--font-size-sm);
    padding: 8px 16px;
}

body.large-text .workflow-status {
    font-size: var(--font-size-sm);
}

body.large-text .graph-instructions h4 {
    font-size: var(--font-size-base);
}

body.large-text .graph-instructions {
    font-size: var(--font-size-sm);
}

/* Responsive Design with Large Text Support */
@media (max-width: 768px) {
    body.large-text .agent-card {
        min-width: 180px;
        padding: 12px 14px;
    }

    body.large-text .agent-avatar {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-sm);
    }

    body.large-text .agent-name {
        font-size: var(--font-size-sm);
    }

    body.large-text .agent-description {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    body.large-text .agent-selector-container {
        margin: 10px auto;
        padding: 0 10px;
    }

    body.large-text .agent-cards-wrapper {
        gap: 10px;
        padding: 5px 0;
    }

    body.large-text .agent-card {
        min-width: 140px;
        padding: 10px 12px;
    }
}

/* Standard Responsive Design */
@media (max-width: 1200px) {
    .chain-of-thought-panel {
        width: 350px;
    }
}

@media (max-width: 968px) {
    .main-content-wrapper {
        flex-direction: column;
        height: auto;
        padding-bottom: 0;
    }

    .conversation-container {
        height: 50vh;
        margin-bottom: 20px;
    }

    .chain-of-thought-panel {
        width: 100%;
        height: 40vh;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        margin-bottom: 80px;
        /* Space for footer */
    }

    #output {
        padding-bottom: 80px;
    }

    .agent-cards-wrapper {
        justify-content: flex-start;
    }

    .agent-card {
        min-width: 150px;
    }
}

/* Responsive Design Fixes for COLAB Math */

/* ============================================
   BASE LAYOUT FIXES
   ============================================ */

/* Fix overlapping header elements */
@media (max-width: 480px) {
    .header {
        padding: 0.8rem;
        margin-bottom: 50px;
        /* Space for fixed position elements */
    }

    h1 {
        font-size: var(--font-size-2xl);
        margin-top: 25px;
    }

    #top_left_container {
        top: 5px;
        left: 5px;
    }

    #top_right_container {
        top: 5px;
        right: 5px;
    }

    .icon-button {
        font-size: var(--font-size-xl);
        padding: 2px;
    }
}

/* ============================================
   AGENT CARDS RESPONSIVE
   ============================================ */

/* Prevent agent cards from overlapping on narrow screens */
@media (max-width: 768px) {
    .agent-selector-container {
        padding: 10px;
        margin: 5px auto 10px;
    }

    .agent-cards-wrapper {
        gap: 8px;
        padding: 5px 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agent-card {
        min-width: 160px;
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .agent-avatar {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-2xs);
    }

    .agent-name {
        font-size: var(--font-size-2xs);
    }

    .agent-description {
        font-size: var(--font-size-2xs);
    }
}

@media (max-width: 480px) {
    .agent-cards-wrapper {
        gap: 5px;
    }

    .agent-card {
        min-width: 140px;
        padding: 8px 10px;
        gap: 8px;
    }

    .agent-avatar {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-2xs);
    }

    .agent-name {
        font-size: var(--font-size-2xs);
    }

    .agent-description {
        display: none;
        /* Hide description on very small screens */
    }
}

/* ============================================
   CONVERSATION CONTAINER & OUTPUT
   ============================================ */

/* Fix conversation container height calculation */
@media (max-width: 768px) {
    .conversation-container {
        height: calc(100vh - 200px);
        padding: 10px;
        margin-bottom: 0;
    }

    #output {
        padding: 15px 10px 100px 10px;
        margin-bottom: 0;
    }

    /* Responsive placeholder font size for tablets */
    .chat-input .placeholder {
        font-size: var(--font-size-base) !important;
    }

    .chat-input .placeholder span {
        font-size: var(--font-size-base) !important;
    }

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

    /* Tablet header and footer sizing */
    h1 {
        font-size: var(--font-size-3xl);
    }

    .icon-button {
        font-size: var(--font-size-2xl);
    }

    footer {
        font-size: var(--font-size-xs);
        padding: 7px 12px;
    }

    /* Ensure placeholder doesn't overflow */
    #output .placeholder {
        padding: 15px;
        max-width: 100%;
        font-size: var(--font-size-sm);
        word-wrap: break-word;
    }

    #output .placeholder img {
        width: 25px;
        height: 25px;
    }

    #output #stop {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 10;
    }
}

@media (max-width: 480px) {
    .conversation-container {
        height: calc(100vh - 180px);
        padding: 5px;
    }

    /* Responsive placeholder font size for mobile */
    .chat-input .placeholder {
        font-size: var(--font-size-base) !important;
    }

    .chat-input .placeholder span {
        font-size: var(--font-size-base) !important;
    }

    .chat-input {
        max-width: 98%;
    }

    /* Mobile header and footer sizing */
    h1 {
        font-size: var(--font-size-2xl);
    }

    .icon-button {
        font-size: var(--font-size-xl);
    }

    footer {
        font-size: var(--font-size-2xs);
        padding: 5px 8px;
    }

    #output {
        padding: 10px 5px 90px 5px;
    }

    #output .placeholder {
        padding: 10px;
        font-size: var(--font-size-xs);
    }

    #output .placeholder span {
        word-break: break-word;
        white-space: normal;
    }
}

/* ============================================
   INPUT GROUP FIXES
   ============================================ */

/* Fix input group positioning and sizing */
@media (max-width: 768px) {
    .chat-input {
        width: calc(100% - 20px);
        padding: 0 10px;
        max-width: none;
    }

    .chat-input.bottom-position {
        top: auto !important;
        bottom: 60px !important;
    }

    .input-group {
        min-height: 44px;
        padding: 4px 6px;
        margin: 0;
        width: 100%;
    }

    .input-group textarea {
        font-size: var(--font-size-base);
        padding: 8px 4px;
        min-height: 28px;
    }

    /* Ensure buttons are touch-friendly */
    .input-group button {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .input-group #send i,
    .input-group #record i,
    .input-group #plus i {
        font-size: var(--font-size-lg) !important;
    }
}

@media (max-width: 480px) {
    .chat-input {
        bottom: 45px;
        width: calc(100% - 16px);
        padding: 0 8px;
    }

    .input-group {
        min-height: 42px;
        padding: 3px 5px;
    }

    .input-group textarea {
        font-size: var(--font-size-base);
        padding: 6px 3px;
    }

    /* Multiline input adjustments */
    .input-group.multiline {
        padding: 8px 6px;
        gap: 3px 4px;
    }

    .input-group.multiline textarea {
        margin-bottom: 4px;
    }
}

/* Very narrow screens */
@media (max-width: 320px) {
    .chat-input {
        width: calc(100% - 10px);
        padding: 0 5px;
    }

    /* Responsive placeholder font size for very small phones */
    .chat-input .placeholder {
        font-size: var(--font-size-base) !important;
    }

    .chat-input .placeholder span {
        font-size: var(--font-size-base) !important;
    }

    /* Very small phone header and footer sizing */
    h1 {
        font-size: var(--font-size-xl);
    }

    .icon-button {
        font-size: var(--font-size-lg);
    }

    footer {
        font-size: var(--font-size-2xs);
        padding: 4px 5px;
    }

    .input-group {
        min-height: 40px;
        padding: 2px 4px;
    }

    .input-group button {
        width: 36px;
        height: 36px;
    }

    .input-group textarea {
        font-size: var(--font-size-base);
    }
}

/* ============================================
   FOOTER FIXES
   ============================================ */

/* Footer at bottom of main page - hidden after first message */
footer {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    background: white;
    padding: 8px 15px;
    z-index: 90;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-sm);
    color: #949494;
    white-space: nowrap;
    transition: left var(--sidebar-transition), opacity 0.3s ease;
}

footer a,
footer span {
    color: #949494;
    text-decoration: none;
    font-size: inherit;
}

footer a:hover {
    color: #4b5563;
    text-decoration: underline;
}

footer.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Show full version by default, hide short version */
footer .footer-full {
    display: inline;
    color: #4b5563;
    font-size: inherit;
}

footer .footer-full a {
    color: #4b5563;
    font-size: inherit;
}

footer .footer-short {
    display: none;
    color: #4b5563;
    font-size: inherit;
}

footer .footer-short a {
    color: #4b5563;
    font-size: inherit;
}

body.sidebar-collapsed-mode footer {
    left: var(--sidebar-collapsed-width);
}

body.dark-mode footer {
    background: #1f1f1f;
}

@media (max-width: 1023px) {
    footer {
        left: 0;
    }
}

/* Narrow view: show short version */
@media (max-width: 600px) {
    footer {
        font-size: var(--font-size-xs);
        padding: 6px 10px;
    }

    footer .footer-full {
        display: none;
    }

    footer .footer-short {
        display: inline;
    }
}

/* Very narrow: hide footer completely */
@media (max-width: 350px) {
    footer {
        display: none;
    }
}

/* ============================================
   MODAL & OVERLAY FIXES
   ============================================ */

/* Android Multi-Window Mode Support */
@media (max-width: 400px),
(max-height: 400px) {
    .modal-container {
        height: 100vh;
        width: 100vw;
        border-radius: 0;
        padding: 5px;
    }

    .agent-cards-wrapper {
        flex-wrap: wrap;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .agent-card {
        min-width: 100%;
        margin-bottom: 8px;
    }

    .graph-container {
        min-height: 200px;
    }

    #langGraphCanvas {
        min-height: 200px;
    }
}

@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        height: 90vh;
        margin: 5vh auto;
    }

    .modal-header {
        padding: 15px 20px;
    }

    .modal-header h2 {
        font-size: var(--font-size-lg);
    }

    .workflow-controls {
        flex-wrap: wrap;
        gap: 5px;
    }

    .workflow-btn {
        font-size: var(--font-size-2xs);
        padding: 5px 8px;
    }

    .workflow-btn span {
        display: none;
        /* Hide text, show only icons */
    }

    .graph-split-view {
        flex-direction: column;
        gap: 10px;
    }

    .graph-container {
        min-height: 300px;
        flex: 1;
        width: 100%;
        position: relative;
    }

    #langGraphCanvas {
        width: 100% !important;
        height: 100% !important;
        min-height: 300px;
    }

    .conversation-timeline {
        min-width: 100%;
        height: 300px;
    }

    .graph-instructions {
        bottom: 10px;
        left: 10px;
        right: 10px;
        max-width: none;
        padding: 8px;
        font-size: var(--font-size-2xs);
    }

    .graph-instructions h4 {
        font-size: var(--font-size-2xs);
        margin: 0 0 5px 0;
    }

    .graph-instructions ul {
        padding-left: 15px;
    }

    .graph-instructions li {
        margin: 2px 0;
    }
}

@media (max-width: 480px) {
    .modal-container {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .graph-container {
        min-height: 250px;
    }

    #langGraphCanvas {
        min-height: 250px;
    }

    .graph-instructions {
        font-size: var(--font-size-2xs);
        padding: 6px;
    }

    .graph-instructions h4 {
        font-size: var(--font-size-2xs);
    }

    .modal-header {
        padding: 10px 15px;
    }

    .modal-header h2 {
        font-size: var(--font-size-base);
    }

    .modal-body {
        padding: 10px;
    }

    .timeline-card {
        padding: 8px;
    }

    .timeline-agent {
        font-size: var(--font-size-2xs);
    }

    .timeline-message {
        font-size: var(--font-size-2xs);
    }
}

/* ============================================
   PLUS MENU (MEDIA OPTIONS) FIXES
   ============================================ */

@media (max-width: 480px) {
    .media-options {
        top: 100%;
        left: 0;
        margin-top: 4px;
        min-width: 150px;
    }

    .media-options button.media-option {
        font-size: var(--font-size-xs);
        padding: 8px 10px;
    }

    .media-options button.media-option i {
        font-size: var(--font-size-sm);
        margin-right: 8px;
    }

    /* Export menu mobile adjustments */
    .export-menu {
        right: -10px;
        min-width: 150px;
    }

    .export-menu button {
        font-size: var(--font-size-xs);
        padding: 8px 10px;
    }

    .export-menu button i {
        font-size: var(--font-size-sm);
        margin-right: 8px;
    }
}

/* ============================================
   LANGUAGE SELECTOR FIXES
   ============================================ */

@media (max-width: 480px) {
    #select_language {
        max-width: 120px;
        font-size: var(--font-size-xs);
        padding: 2px;
    }

}

/* ============================================
   LARGE TEXT MODE RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
    body.large-text h1 {
        font-size: var(--font-size-2xl);
    }

    body.large-text .conversation-container {
        height: calc(100vh - 220px);
    }

    body.large-text #output {
        padding: 15px 10px 120px 10px;
    }

    body.large-text .input-group {
        min-height: 50px;
        font-size: var(--font-size-base);
    }

    body.large-text .chat-input .placeholder {
        font-size: var(--font-size-base);
        padding: 0 !important;
    }

    body.large-text #output .placeholder {
        font-size: var(--font-size-base);
        padding: 15px;
    }
}

@media (max-width: 480px) {
    body.large-text h1 {
        font-size: var(--font-size-xl);
        margin-top: 30px;
    }

    body.large-text .conversation-container {
        height: calc(100vh - 200px);
    }

    body.large-text #output {
        padding: 10px 8px 110px 8px;
    }

    body.large-text .chat-input {
        bottom: 45px !important;
    }

    body.large-text .input-group {
        min-height: 46px;
        padding: 8px 10px;
        font-size: var(--font-size-sm);
    }

    body.large-text .input-group textarea {
        font-size: var(--font-size-sm);
    }

    body.large-text .input-group textarea::placeholder {
        font-size: var(--font-size-sm);
    }

    body.large-text .chat-input .placeholder {
        font-size: var(--font-size-sm);
        padding: 0 !important;
    }

    body.large-text #output .placeholder {
        font-size: var(--font-size-sm);
        padding: 12px;
    }

    body.large-text .agent-card {
        min-width: 150px;
    }

    body.large-text .agent-name {
        font-size: var(--font-size-xs);
    }

    body.large-text .agent-description {
        font-size: var(--font-size-2xs);
    }
}

/* ============================================
   Z-INDEX HIERARCHY FIX
   ============================================ */

/* Ensure proper stacking order */
.modal-overlay {
    z-index: 99999;
}

.modal-container {
    z-index: 100000;
}

#top_left_container,
#top_right_container {
    z-index: 1000;
}

.media-options {
    z-index: 2000;
}

.chat-input {
    z-index: 100;
}

#output #stop {
    z-index: 95;
}

/* ============================================
   ANDROID & MOBILE DEVICE SPECIFIC FIXES
   ============================================ */

/* Android-specific responsive breakpoints for better compatibility */

/* Android budget phones (280px - 360px) */
@media screen and (min-width: 280px) and (max-width: 359px) {
    .header h1 {
        font-size: var(--font-size-2xl);
    }

    .conversation-container {
        padding: 5px;
        margin: 5px;
        width: calc(100% - 10px);
    }

    .agent-card {
        padding: 8px;
        font-size: var(--font-size-xs);
    }

    .input-group textarea {
        font-size: var(--font-size-sm) !important;
        min-height: 36px;
    }
}

/* Android standard phones (360px - 412px) */
@media screen and (min-width: 360px) and (max-width: 412px) {
    .conversation-container {
        width: 95%;
        padding: 10px;
    }

    /* Fix for Android browser address bar */
    #output {
        max-height: calc(100vh - 200px);
        max-height: calc(var(--vh, 1vh) * 100 - 200px);
    }
}

/* Android large phones (412px - 480px) */
@media screen and (min-width: 412px) and (max-width: 480px) {
    .conversation-container {
        width: 92%;
        max-width: 460px;
    }

    .agent-card {
        flex: 0 1 calc(50% - 8px);
    }
}

/* Android tablets portrait (600px - 768px) */
@media screen and (min-width: 600px) and (max-width: 767px) {
    .conversation-container {
        width: 85%;
        max-width: 650px;
    }

    .modal-container {
        width: 90%;
        max-width: 700px;
    }
}

/* Android and mobile browser specific classes */
body.android-browser {
    /* Use CSS custom property for viewport height */
    min-height: calc(var(--vh, 1vh) * 100);
}

body.mobile-device .conversation-container {
    /* Ensure proper scrolling on mobile devices */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

body.android-browser .input-group textarea,
body.android-browser input,
body.android-browser select,
body.ios-device .input-group textarea,
body.ios-device input,
body.ios-device select {
    /* Prevent zoom on focus in mobile browsers */
    font-size: var(--font-size-base) !important;
}

/* Android flagship phones */
@media only screen and (min-device-width: 360px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3) {

    /* Fix Android browser viewport height issue */
    body {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
        min-height: -webkit-fill-available;
    }

    .conversation-container {
        max-height: calc(100vh - 150px);
    }

    /* Ensure proper touch targets on Android devices */
    button,
    .icon-button,
    .agent-card {
        min-height: 48px;
        /* Android recommended touch target */
        min-width: 48px;
    }

    /* Fix input zoom on Samsung Internet */
    input,
    textarea,
    select {
        font-size: var(--font-size-base) !important;
        /* Prevents zoom on focus */
    }
}

/* Foldable devices */
@media only screen and (min-device-width: 280px) and (max-device-width: 653px) {

    .modal-container {
        width: 100%;
        padding: 10px;
    }

    .agent-cards-wrapper {
        flex-wrap: wrap;
        gap: 8px;
    }

    .agent-card {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
    }
}

/* Android tablets and notebooks */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {

    /* Optimize for Android tablets */
    .conversation-container {
        max-width: 90%;
    }

    .agent-selector-container {
        padding: 15px;
    }
}

/* Android desktop mode (DeX, desktop experience) */
@media (min-width: 1920px) {
    .conversation-container {
        max-width: 1400px;
    }

    .modal-container {
        max-width: 1600px;
    }

    /* Optimize layout for DeX mode */
    .agent-cards-wrapper {
        justify-content: center;
        gap: 20px;
    }

    .agent-card {
        min-width: 200px;
        max-width: 250px;
    }

}

/* ============================================
   HIGH-DPI DISPLAY SUPPORT (Retina, etc.)
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {

    /* Ensure crisp borders */
    .agent-card,
    .modal-container,
    .conversation-container,
    .input-group,
    button {
        border-width: 0.5px;
    }

    /* Optimize font rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Ensure images are crisp */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Canvas optimization for high-DPI */
    canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

.loader {
    z-index: 9999;
}

/* ============================================
   VIEWPORT HEIGHT FIXES
   ============================================ */

/* Use dvh for dynamic viewport height on mobile */
@supports (height: 100dvh) {
    @media (max-width: 768px) {
        body {
            height: 100dvh;
        }

        .conversation-container {
            height: calc(100dvh - 200px);
        }
    }
}

/* ============================================
   SCROLL BEHAVIOR IMPROVEMENTS
   ============================================ */

/* Improve scrolling on mobile */
@media (max-width: 768px) {
    #output {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .agent-cards-wrapper {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .agent-card {
        scroll-snap-align: start;
    }
}

/* ============================================
   ORIENTATION FIXES
   ============================================ */

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 0.5rem;
    }

    h1 {
        font-size: var(--font-size-lg);
        margin: 5px;
    }

    .agent-selector-container {
        display: none;
        /* Hide agent cards in landscape */
    }

    .conversation-container {
        height: calc(100vh - 120px);
    }

    #output {
        padding: 10px 10px 80px 10px;
    }

    .chat-input.bottom-position {
        bottom: 50px;
    }

    footer {
        padding: 4px;
    }

    .view-toggle-container {
        margin-top: 4px;
        padding: 2px 8px;
    }

    .view-toggle-btn {
        padding: 4px 8px;
        font-size: var(--font-size-xs);
    }

    .view-toggle-btn span {
        display: none;
    }

    .view-toggle-btn i {
        font-size: var(--font-size-sm);
    }
}

/* Privacy Footer */
/* Privacy footer removed - consolidated into main footer */

/* ============================================
   RESOURCE SIDEBAR & SUGGESTIONS
   ============================================ */

.resource-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    /* Hidden by default */
    width: min(320px, 100vw);
    height: 100%;
    background-color: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.resource-sidebar.open {
    left: 0;
}

.sidebar-header {
    padding: 15px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
}

.sidebar-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: #1f2937;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.resource-section {
    margin-bottom: 25px;
}

.section-title {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: #4b5563;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resource-item {
    padding: 10px;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-xs);
    color: #374151;
}

.resource-item:hover {
    background: #e5e7eb;
}

.resource-item i {
    color: #3b82f6;
    width: 20px;
    text-align: center;
}

/* Dark mode for sidebar */
body.dark-mode .resource-sidebar {
    background-color: #1f2937;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .sidebar-header {
    background: #111827;
    border-bottom-color: #374151;
}

body.dark-mode .sidebar-header h3 {
    color: #f3f4f6;
}

body.dark-mode .resource-item {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .resource-item:hover {
    background: #4b5563;
}

/* Suggestion Chips - now inside .chat-input */

.suggestion-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
    min-height: 32px;
    scrollbar-width: none;
    /* Firefox */
}

/* Hide suggestion chips when empty */
.suggestion-chips:empty {
    display: none;
    min-height: 0;
}

.suggestion-chips::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.suggestion-chip {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    animation: fadeIn 0.3s ease-out;
}

.suggestion-chip:hover {
    background: #dbeafe;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.suggestion-chip i {
    font-size: var(--font-size-xs);
}

body.dark-mode .suggestion-chip {
    background: #1e3a8a;
    border-color: #1e40af;
    color: #bfdbfe;
}

body.dark-mode .suggestion-chip:hover {
    background: #1e40af;
}


/* Privacy footer styles removed - no longer used */

/* Add padding to conversation container so messages aren't hidden */
.conversation-container {
    padding-bottom: 180px !important;
    /* Space for input + suggestions */
}

/* Resource Embed Styles */
.resource-embed-container {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #f9fafb;
}

.resource-embed-header {
    padding: 8px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

.open-new-window-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: #4b5563;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.open-new-window-btn:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}

/* ============================================
   WELCOME PLACEHOLDER
   ============================================ */

.welcome-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.welcome-placeholder.hidden {
    display: none;
}

@media (max-height: 500px) {
    .welcome-placeholder {
        display: none;
    }
}

.welcome-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.welcome-text {
    font-size: var(--font-size-welcome);
    font-weight: 500;
    color: #1f2937;
    text-align: center;
    white-space: nowrap;
}

body.dark-mode .welcome-text {
    color: #e5e7eb;
}

.welcome-content #stop {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.welcome-content #stop i {
    font-size: var(--font-size-input-icon, 1.1rem);
    color: #4b5563;
}

.welcome-content #stop:hover i {
    color: #2563eb;
}


@media (max-width: 768px) {
    .welcome-text {
        font-size: var(--font-size-welcome);
        white-space: normal;
    }

    .welcome-content {
        flex-wrap: wrap;
        gap: 4px;
    }

    .welcome-content #stop i {
        font-size: var(--font-size-input-icon, 1.1rem);
    }

}

@media (max-width: 480px) {
    .welcome-text {
        font-size: var(--font-size-welcome);
    }

    .welcome-content {
        gap: 6px;
    }

    .welcome-content #stop i {
        font-size: var(--font-size-input-icon, 1.1rem);
    }
}

/* Message Speaker Button - positioned at bottom-left of AI message */
.message-speaker-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    height: 28px;
    min-height: 28px;
    margin-left: auto;
    color: #4b5563;
    transition: color 0.2s ease;
    display: none;
}

.message-speaker-btn:hover {
    color: #4b5563;
    /* Gray on hover */
}

.message-speaker-btn.active {
    color: #2563eb;
    /* Blue when playing */
}

.message-speaker-btn i {
    font-size: clamp(0.875rem, 1.8vw, 1rem);
}

/* Dark mode message speaker button */
body.dark-mode .message-speaker-btn {
    color: #d1d5db;
    /* Light gray like sidebar footer in dark mode */
}

body.dark-mode .message-speaker-btn:hover {
    color: #9ca3af;
    /* Light gray on hover */
}

body.dark-mode .message-speaker-btn.active {
    color: #60a5fa;
    /* Light blue when playing in dark mode */
}

/* Speaker button tooltip - below, right-aligned */
.message-speaker-btn[data-tooltip]::before {
    bottom: auto;
    top: 100%;
    margin-top: 5px;
    left: auto;
    right: 0;
    transform: none;
}

/* ============================================
   LOADER & SPINNER
   ============================================ */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader.hidden {
    display: none;
}

.loader i {
    font-size: var(--font-size-3xl);
    color: white;
}

body.dark-mode .loader {
    background: rgba(0, 0, 0, 0.7);
}

/* Chat Attachments - image thumbnails */
.chat-attachment-item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-attachment-item:hover {
    border-color: #3b82f6;
    transform: scale(1.05);
}

.chat-attachment-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-attachment-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #ef4444;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-size-2xs);
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.chat-attachment-item:hover .chat-attachment-remove {
    opacity: 1;
}

.chat-attachment-remove:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* File attachment (non-image) styles */
.chat-attachment-item.file-attachment {
    width: auto;
    min-width: 80px;
    max-width: 140px;
    height: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.chat-attachment-item.file-attachment .file-icon-wrapper {
    font-size: var(--font-size-2xl);
    color: #4b5563;
}

.chat-attachment-item.file-attachment .file-icon-wrapper .fa-file-pdf {
    color: #ef4444;
}

.chat-attachment-item.file-attachment .file-icon-wrapper .fa-file-word {
    color: #2563eb;
}

.chat-attachment-item.file-attachment .file-icon-wrapper .fa-file-excel {
    color: #16a34a;
}

.chat-attachment-item.file-attachment .file-icon-wrapper .fa-file-csv {
    color: #16a34a;
}

.chat-attachment-item.file-attachment .file-icon-wrapper .fa-file-powerpoint {
    color: #ea580c;
}

.chat-attachment-item.file-attachment .file-name {
    font-size: var(--font-size-2xs);
    color: #4b5563;
    text-align: center;
    word-break: break-all;
    line-height: 1.2;
}

body.dark-mode .chat-attachment-item.file-attachment {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .chat-attachment-item.file-attachment .file-icon-wrapper {
    color: #9ca3af;
}

body.dark-mode .chat-attachment-item.file-attachment .file-name {
    color: #d1d5db;
}

/* Image preview modal */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: zoom-out;
}

.image-preview-modal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.image-preview-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: var(--font-size-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.image-preview-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* User message with image */
.user-message-image {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.user-message-image:hover {
    transform: scale(1.02);
}

/* User message with file (documents) */
.user-message-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    color: #374151;
    max-width: 200px;
}

.user-message-file i {
    font-size: var(--font-size-lg);
}

.user-message-file i.fa-file-pdf {
    color: #ef4444;
}

.user-message-file i.fa-file-word {
    color: #2563eb;
}

.user-message-file i.fa-file-excel,
.user-message-file i.fa-file-csv {
    color: #16a34a;
}

.user-message-file i.fa-file-powerpoint {
    color: #ea580c;
}

.user-message-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-mode .user-message-file {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* Dark mode for attachments */
body.dark-mode .chat-attachment-item {
    border-color: #374151;
    background: #1f2937;
}

body.dark-mode .chat-attachment-item:hover {
    border-color: #60a5fa;
}

/* ========================================
   Resource Panel (Right Sidebar)
   ======================================== */

.resource-panel {
    position: fixed;
    top: 0;
    right: -360px;
    width: min(360px, 100vw);
    height: 100vh;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.resource-panel.open {
    right: 0;
}

.resource-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.resource-panel-header h3 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.resource-panel-header h3 i {
    color: #3b82f6;
}

.resource-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: #4b5563;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.resource-panel-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.resource-panel-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.resource-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.resource-tab:hover {
    color: #3b82f6;
    background: #eff6ff;
}

.resource-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: #ffffff;
}

.resource-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.resource-tab-content {
    display: none;
    padding: 12px;
}

.resource-tab-content.active {
    display: block;
}

.resource-search {
    position: relative;
    margin-bottom: 12px;
}

.resource-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    background: #f9fafb;
    transition: all 0.2s ease;
}

.resource-search input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.resource-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: var(--font-size-sm);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.resource-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    background: #ffffff;
    text-align: center;
}

.resource-item:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.resource-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.resource-item-icon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    color: #3b82f6;
}

.resource-item-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.resource-item-icon svg {
    width: 44px;
    height: 44px;
    fill: currentColor;
}

.guide-svg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-svg-icon svg {
    width: 44px;
    height: 44px;
}

.resource-item-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #374151;
    text-align: center;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0;
}

.resource-item-grade {
    font-size: var(--font-size-2xs);
    color: #4b5563;
    margin-top: 2px;
}

body.dark-mode .resource-item-grade {
    color: #9ca3af;
}

.resource-item-actions {
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin-top: 8px;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.resource-item:hover .resource-item-actions {
    opacity: 1;
}

/* Action buttons that appear on hover */
.resource-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resource-action-btn:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.resource-action-btn:nth-child(1):hover {
    background: #10b981;
    /* Green for Save Draft */
    border-color: #10b981;
}

.resource-action-btn:nth-child(2):hover {
    background: #3b82f6;
    /* Blue for Send to Chat */
    border-color: #3b82f6;
}

.resource-action-btn:nth-child(3):hover {
    background: #8b5cf6;
    /* Purple for Send to Template */
    border-color: #8b5cf6;
}

/* Resource item main content area */
.resource-item-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Dark mode for action buttons */
body.dark-mode .resource-action-btn {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

body.dark-mode .resource-action-btn:hover {
    color: white;
}

.resource-item-btn {
    padding: 4px 10px;
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resource-item-btn:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.resource-item-btn.attach {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.resource-item-btn.attach:hover {
    background: #059669;
    border-color: #059669;
}

/* OER Image specific styles */
.oer-image-preview {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Dark Mode for Resource Panel */
body.dark-mode .resource-panel {
    background: #1f2937;
    border-left-color: #374151;
}

body.dark-mode .resource-panel-header {
    background: #111827;
    border-bottom-color: #374151;
}

body.dark-mode .resource-panel-header h3 {
    color: #f9fafb;
}

body.dark-mode .resource-panel-close {
    color: #9ca3af;
}

body.dark-mode .resource-panel-close:hover {
    background: #374151;
    color: #f9fafb;
}

body.dark-mode .resource-panel-tabs {
    background: #111827;
    border-bottom-color: #374151;
}

body.dark-mode .resource-tab {
    color: #9ca3af;
}

body.dark-mode .resource-tab:hover {
    color: #60a5fa;
    background: #1e3a5f;
}

body.dark-mode .resource-tab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
    background: #1f2937;
}

body.dark-mode .resource-search input {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

body.dark-mode .resource-search input:focus {
    border-color: #60a5fa;
    background: #1f2937;
}

body.dark-mode .resource-search i {
    color: #4b5563;
}

body.dark-mode .resource-item {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .resource-item:hover {
    background: #1e3a5f;
    border-color: #60a5fa;
}

body.dark-mode .resource-item-icon {
    color: #60a5fa;
}

body.dark-mode .resource-item-name {
    color: #f9fafb;
}

body.dark-mode .resource-item-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

body.dark-mode .resource-item-btn:hover {
    background: #60a5fa;
    border-color: #60a5fa;
}

/* ========================================
   Sidebar Resources Section
   ======================================== */

.sidebar-resources-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.sidebar-resources-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
}

.sidebar-resources-toggle span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-resources-toggle .toggle-icon {
    font-size: var(--font-size-2xs);
    transition: transform 0.3s ease;
}

.sidebar-resources-section.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.sidebar-resources-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 200px;
}

.sidebar-resources-section.collapsed .sidebar-resources-content {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

/* ========================================
   Image Picker Modal
   ======================================== */

.image-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.image-picker-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    position: relative;
    animation: slideDown 0.3s ease;
}

.image-picker-content h3 {
    margin: 0 0 20px;
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1f2937;
}

.image-picker-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: #4b5563;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.image-picker-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.image-picker-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.image-picker-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.image-picker-option:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.image-picker-option i {
    font-size: var(--font-size-2xl);
    color: #3b82f6;
    width: 32px;
    text-align: center;
}

.image-picker-option span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #1f2937;
    display: block;
}

.image-picker-option small {
    font-size: var(--font-size-xs);
    color: #4b5563;
    font-weight: 400;
}

body.dark-mode .image-picker-content {
    background: #1f2937;
}

body.dark-mode .image-picker-content h3 {
    color: #f9fafb;
}

body.dark-mode .image-picker-close {
    color: #9ca3af;
}

body.dark-mode .image-picker-close:hover {
    background: #374151;
    color: #f9fafb;
}

body.dark-mode .image-picker-option {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .image-picker-option:hover {
    border-color: #3b82f6;
    background: #1e3a5f;
}

body.dark-mode .image-picker-option span {
    color: #f9fafb;
}

body.dark-mode .image-picker-option small {
    color: #9ca3af;
}

/* ========================================
   Resources Modal
   ======================================== */

.resources-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.resources-modal-content {
    background: white;
    border-radius: 16px;
    width: 95%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

.resources-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.resources-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1f2937;
}

/* Custom SVG icons in modal titles */
.modal-title-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.resources-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: #4b5563;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.resources-modal-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.resources-modal-search {
    position: relative;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.resources-modal-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    transition: all 0.2s;
}

.resources-modal-search input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.resources-modal-search .resources-search-icon {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

/* Resources modal search input controls - matches cell-wrapper pattern */
.resources-input-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
}

.resources-input-controls .icons-hidden-group {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.resources-input-controls.expanded .icons-hidden-group {
    display: flex;
}

.resources-input-controls.expanded .icons-expand-trigger i {
    transform: rotate(180deg);
}

.resources-input-controls .icons-expand-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: #4b5563;
    cursor: pointer;
    border-radius: 4px;
    font-size: var(--font-size-2xs);
    padding: 0;
    transition: color 0.2s;
}

.resources-input-controls .icons-expand-trigger:hover {
    color: #3b82f6;
}

.resources-input-controls .icons-expand-trigger i {
    transition: transform 0.2s ease;
}

/* Teaching Resources Tabs */
.teaching-resources-tabs {
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.teaching-resources-tab-buttons {
    display: flex;
    gap: 4px;
    flex: 1;
}

.teaching-tab-btn {
    padding: 8px 16px;
    border: none;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.teaching-tab-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.teaching-tab-btn.active {
    background: #3b82f6;
    color: white;
}

.teaching-tab-btn i {
    font-size: var(--font-size-xs);
}

.teaching-resources-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}

.teaching-filter-select {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    background: white;
    color: #374151;
    cursor: pointer;
    min-width: 150px;
}

.teaching-filter-select:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Dark mode for teaching resources tabs */
body.dark-mode .teaching-resources-tabs {
    border-color: #374151;
}

body.dark-mode .teaching-tab-btn {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .teaching-tab-btn:hover {
    background: #4b5563;
    color: #f3f4f6;
}

body.dark-mode .teaching-tab-btn.active {
    background: #3b82f6;
    color: white;
}

body.dark-mode .teaching-filter-select {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

.resources-modal-grid {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    /* Default: grid layout for direct resource items (Teaching Resources, etc.) */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

/* When grid has resource groups with subheadings, switch to flex column */
.resources-modal-grid:has(.resource-group) {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Resource groups with subheadings */
.resource-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resource-group-header {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
    border-bottom: 1px solid #e5e7eb;
}

body.dark-mode .resource-group-header {
    color: #9ca3af;
    border-color: #4b5563;
}

.resource-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.resources-modal-grid .resource-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    cursor: pointer;
    min-height: 130px;
}

/* Math Content Item Styles - Match Manipulatives */
.math-content-item {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    text-align: center;
    padding: 12px 8px 16px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 130px;
    justify-content: flex-start;
}

.math-content-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.math-content-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2px;
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
    /* Color is set inline via style attribute */
}

/* Math Progressions popup icon - matches sidebar nav-item-icon style */
.math-progression-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
    /* Color is set inline via style attribute to match sidebar domain colors */
}

/* Override the .resource-item i blue color for math progression icons */
.resource-item .math-progression-icon i {
    color: inherit !important;
}

/* SVG icons in popup modals */
.math-content-icon.svg-icon svg {
    width: 36px;
    height: 36px;
}

.math-content-item .resource-item-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #374151;
    margin-top: 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.math-content-subtitle {
    font-size: var(--font-size-2xs);
    color: #64748b;
    line-height: 1.3;
    margin: 4px 0;
}

.math-content-grades {
    font-size: var(--font-size-2xs);
    color: #64748b;
    margin-top: 6px;
}

body.dark-mode .math-content-item {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .math-content-item:hover {
    border-color: #4b5563;
}

body.dark-mode .math-content-subtitle {
    color: #9ca3af;
}

body.dark-mode .math-content-grades {
    background: #1f2937;
    color: #4b5563;
}

/* Resource item grades display */
.resource-item-grades {
    font-size: var(--font-size-2xs);
    color: #64748b;
    margin-top: 4px;
}

body.dark-mode .resource-item-grades {
    color: #9ca3af;
}

/* Explore More button in sidebar footer */
.explore-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.explore-more-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    transform: translateY(-1px);
}

.explore-more-btn:active {
    transform: translateY(0);
}

body.dark-mode .explore-more-btn {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
}

body.dark-mode .explore-more-btn:hover {
    background: linear-gradient(135deg, #4338ca, #3730a3);
    color: white;
}

/* Word Problem Item with operation buttons */
.word-problem-item {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    text-align: center;
    padding: 12px 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 130px;
    justify-content: flex-start;
}

.word-problem-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

body.dark-mode .word-problem-item {
    background: #374151;
    border-color: #4b5563;
}

/* Operation buttons container */
.operation-buttons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Individual operation button */
.op-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #374151;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

body.dark-mode .op-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .op-btn:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Explore More Button */
.explore-more-btn {
    border: none;
    cursor: pointer;
}

body.dark-mode .resources-modal-content {
    background: #1f2937;
}

body.dark-mode .resources-modal-header {
    border-color: #374151;
}

body.dark-mode .resources-modal-header h3 {
    color: #f9fafb;
}

body.dark-mode .resources-modal-close {
    color: #9ca3af;
}

body.dark-mode .resources-modal-close:hover {
    background: #374151;
    color: #f9fafb;
}

body.dark-mode .resources-modal-search {
    border-color: #374151;
}

body.dark-mode .resources-modal-search input {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

body.dark-mode .resources-modal-search input:focus {
    border-color: #3b82f6;
}

body.dark-mode .resources-input-controls {
    background: rgba(30, 41, 59, 0.9);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .whiteboard-toolbar {
        padding: 8px 12px;
        gap: 4px;
    }

    .whiteboard-separator {
        display: none;
    }

    .whiteboard-tool {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
    }

    .whiteboard-color {
        width: 28px;
        height: 28px;
    }

    .whiteboard-footer {
        flex-direction: column;
    }

    .resources-modal-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 12px;
    }

    .resources-modal-grid .resource-item {
        padding: 10px 8px;
        min-height: 110px;
    }
}

/* Resources Modal Footer */
.resources-modal-footer {
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

.explore-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background 0.2s;
}

.explore-more-btn:hover {
    background: #2563eb;
}

body.dark-mode .resources-modal-footer {
    border-color: #374151;
}

/* ============================================
   MANIPULATIVE EMBED MODAL
   ============================================ */

.manipulative-embed-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

.manipulative-embed-modal.hidden {
    display: none;
}

/* Manipulative Embed Header */
.manipulative-embed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    gap: 16px;
    position: relative;
    z-index: 2;
}

body.dark-mode .manipulative-embed-header {
    background: #1f2937;
    border-bottom-color: #374151;
    color: #e5e7eb;
}

.manipulative-embed-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.manipulative-embed-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.manipulative-embed-back {
    background: none;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.manipulative-embed-back:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

body.dark-mode .manipulative-embed-back {
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .manipulative-embed-back:hover {
    background: #374151;
    border-color: #4b5563;
}

.manipulative-embed-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.manipulative-embed-header h2 i {
    color: #3b82f6;
}

body.dark-mode .manipulative-embed-header h2 i {
    color: #60a5fa;
}

.manipulative-embed-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.manipulative-embed-icon-svg svg {
    width: 20px;
    height: 20px;
    fill: #3b82f6;
}

body.dark-mode .manipulative-embed-icon-svg svg {
    fill: #60a5fa;
}

/* Paper type buttons */
.manipulative-paper-types {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
}

body.dark-mode .manipulative-paper-types {
    background: #374151;
}

.manipulative-paper-btn {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manipulative-paper-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.manipulative-paper-btn.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-mode .manipulative-paper-btn {
    color: #9ca3af;
}

body.dark-mode .manipulative-paper-btn:hover {
    background: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .manipulative-paper-btn.active {
    background: #4b5563;
    color: #60a5fa;
}

/* Paper color picker */
.manipulative-paper-color {
    width: 28px;
    height: 28px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.manipulative-paper-color::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.manipulative-paper-color::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

body.dark-mode .manipulative-paper-color {
    border-color: #4b5563;
}

/* Toolbar icon button */
.manipulative-toolbar-icon-btn {
    background: transparent;
    border: none;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
}

.manipulative-toolbar-icon-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

body.dark-mode .manipulative-toolbar-icon-btn {
    color: #9ca3af;
}

body.dark-mode .manipulative-toolbar-icon-btn:hover {
    background: #374151;
    color: #e5e7eb;
}

/* Personal whiteboard label */
.manipulative-whiteboard-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-base);
    color: #4b5563;
    padding: 0 8px;
}

body.dark-mode .manipulative-whiteboard-label {
    color: #9ca3af;
}

/* Send to Chat button */
.manipulative-embed-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: 8px 14px;
    height: 36px;
    border-radius: 6px;
    transition: background 0.2s;
}

.manipulative-embed-btn i {
    font-size: var(--font-size-sm);
}

.manipulative-embed-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.manipulative-embed-btn.primary {
    background: #3b82f6;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.manipulative-embed-btn.primary:hover {
    background: #2563eb;
    color: white;
}

.manipulative-embed-btn.primary span {
    font-size: var(--font-size-xs);
}

.manipulative-embed-btn.secondary {
    background: #f97316;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.manipulative-embed-btn.secondary:hover {
    background: #ea580c;
    color: white;
}

.manipulative-embed-btn.secondary span {
    font-size: var(--font-size-xs);
}

.manipulative-embed-btn.new-tab {
    background: #22c55e;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.manipulative-embed-btn.new-tab:hover {
    background: #16a34a;
    color: white;
}

.manipulative-embed-btn.new-tab span {
    font-size: var(--font-size-xs);
}

/* Manipulative Embed Toolbar */
.manipulative-embed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

body.dark-mode .manipulative-embed-toolbar {
    background: #1f2937;
    border-bottom-color: #374151;
}

.manipulative-toolbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.manipulative-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.manipulative-toolbar-divider {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
    margin: 0 8px;
}

body.dark-mode .manipulative-toolbar-divider {
    background: #4b5563;
}

/* Tool buttons */
.manipulative-tool-btn {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
}

.manipulative-tool-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.manipulative-tool-btn.active {
    background: #eff6ff;
    color: #3b82f6;
}

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

.manipulative-tool-btn:disabled:hover {
    background: transparent;
    color: #4b5563;
}

body.dark-mode .manipulative-tool-btn {
    color: #9ca3af;
}

body.dark-mode .manipulative-tool-btn:hover {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .manipulative-tool-btn.active {
    background: #1e3a5f;
    color: #60a5fa;
}

/* Stroke color picker */
.manipulative-stroke-color {
    width: 28px;
    height: 28px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.manipulative-stroke-color::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.manipulative-stroke-color::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

body.dark-mode .manipulative-stroke-color {
    border-color: #4b5563;
}

/* Stroke style dropdown */
.manipulative-stroke-style {
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: var(--font-size-xs);
    cursor: pointer;
}

body.dark-mode .manipulative-stroke-style {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* Zoom level display */
.manipulative-zoom-level {
    font-size: var(--font-size-xs);
    color: #4b5563;
    min-width: 48px;
    text-align: center;
}

body.dark-mode .manipulative-zoom-level {
    color: #9ca3af;
}

/* Manipulative container */
.manipulative-embed-container {
    flex: 1;
    background: white;
    overflow: hidden;
}

body.dark-mode .manipulative-embed-container {
    background: #111827;
}

.manipulative-embed-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .manipulative-whiteboard-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .manipulative-embed-header {
        padding: 8px 12px;
        flex-wrap: wrap;
    }

    .manipulative-embed-header-right {
        flex-wrap: wrap;
        gap: 8px;
    }

    .manipulative-embed-toolbar {
        padding: 6px 12px;
        overflow-x: auto;
    }

    .manipulative-toolbar-left,
    .manipulative-toolbar-right {
        flex-shrink: 0;
    }

    .manipulative-paper-types {
        padding: 2px;
    }

    .manipulative-paper-btn {
        padding: 4px;
    }

    .manipulative-tool-btn {
        padding: 6px;
    }

    .manipulative-embed-btn.primary span {
        display: none;
    }

    .manipulative-stroke-style {
        max-width: 80px;
    }
}

/* ============================================
   VIDEO CALL - WebRTC Video Conferencing
   ============================================ */

.video-call-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: min(360px, calc(100vw - 24px));
    max-height: 400px;
    background: #1f2937;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.video-call-container.hidden {
    display: none;
}

.video-call-container.minimized {
    max-height: 48px;
}

.video-call-container.minimized .video-grid,
.video-call-container.minimized .video-controls {
    display: none;
}

.video-call-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #111827;
    border-bottom: 1px solid #374151;
    cursor: move;
}

.video-call-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f3f4f6;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.video-call-title i {
    color: #10b981;
}

.video-call-minimize {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.video-call-minimize:hover {
    background: #374151;
    color: #f3f4f6;
}

.video-grid {
    display: grid;
    gap: 4px;
    padding: 8px;
    flex: 1;
    min-height: 200px;
    background: #111827;
}

.video-grid.single {
    grid-template-columns: 1fr;
}

.video-grid.duo {
    grid-template-columns: 1fr 1fr;
}

.video-grid.quad {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.video-grid.multi {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.video-wrapper {
    position: relative;
    background: #374151;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-wrapper.local {
    border: 2px solid #10b981;
}

.video-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: var(--font-size-2xs);
    padding: 4px 8px;
    border-radius: 4px;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #4b5563;
    padding: 40px;
}

.video-placeholder i {
    font-size: var(--font-size-3xl);
}

.video-placeholder span {
    font-size: var(--font-size-sm);
}

.video-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    background: #1f2937;
    border-top: 1px solid #374151;
}

.video-control-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #374151;
    color: #f3f4f6;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-control-btn:hover {
    background: #4b5563;
}

.video-control-btn.muted,
.video-control-btn.active {
    background: #3b82f6;
}

.video-control-btn.end-call {
    background: #dc2626;
}

.video-control-btn.end-call:hover {
    background: #ef4444;
}

/* Video button in collab panel */
.collab-video-btn {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: var(--font-size-base);
}

.collab-video-btn:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.collab-video-btn.active {
    color: #10b981;
    background: #d1fae5;
}

.dark-mode .collab-video-btn:hover {
    background: #374151;
    color: #f3f4f6;
}

.dark-mode .collab-video-btn.active {
    background: #064e3b;
    color: #34d399;
}

/* Responsive video call */
@media (max-width: 480px) {
    .video-call-container {
        width: calc(100% - 20px);
        right: 10px;
        bottom: 70px;
    }
}

/* ============================================
   EXCALIDRAW WHITEBOARD MODAL
   ============================================ */

.excalidraw-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.excalidraw-modal.hidden {
    display: none;
}

.excalidraw-container {
    width: 95%;
    height: 90%;
    max-width: 1400px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.excalidraw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1f2937;
    border-bottom: 1px solid #374151;
}

.excalidraw-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f3f4f6;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.excalidraw-title i {
    color: #818cf8;
}

.excalidraw-actions {
    display: flex;
    gap: 8px;
}

.excalidraw-btn {
    background: #374151;
    border: none;
    color: #f3f4f6;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.excalidraw-btn:hover {
    background: #4b5563;
}

#excalidrawClose:hover {
    background: #dc2626;
}

.excalidraw-body {
    flex: 1;
    position: relative;
    background: #f9fafb;
}

#excalidrawFrame {
    width: 100%;
    height: 100%;
    border: none;
}

.excalidraw-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #4b5563;
}

.excalidraw-loading.hidden {
    display: none;
}

.excalidraw-loading i {
    font-size: var(--font-size-3xl);
    color: #818cf8;
}

.excalidraw-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    font-size: var(--font-size-xs);
}

.excalidraw-room-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
}

.excalidraw-room-info i {
    color: #10b981;
}

.excalidraw-hint {
    color: #4b5563;
}

.excalidraw-export-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10;
    max-width: 320px;
}

.export-hint-content ol {
    margin: 12px 0;
    padding-left: 20px;
}

.export-hint-content li {
    margin: 8px 0;
    color: #374151;
}

.export-hint-close {
    width: 100%;
    padding: 10px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    margin-top: 12px;
}

.export-hint-close:hover {
    background: #4338ca;
}

/* Dark mode */
.dark-mode .excalidraw-container {
    background: #1f2937;
}

.dark-mode .excalidraw-body {
    background: #111827;
}

.dark-mode .excalidraw-footer {
    background: #111827;
    border-color: #374151;
}

.dark-mode .excalidraw-room-info {
    color: #e5e7eb;
}

.dark-mode .excalidraw-hint {
    color: #9ca3af;
}

/* Ask AI Button */
.excalidraw-ai-btn {
    width: auto !important;
    padding: 0 12px !important;
    gap: 6px;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

.excalidraw-ai-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

.excalidraw-ai-btn span {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* AI Hint Modal */
.excalidraw-ai-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 100;
    width: 90%;
    max-width: 420px;
    animation: slideDown 0.2s ease;
}

.ai-hint-content {
    padding: 24px;
}

.ai-hint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
}

.ai-hint-header i {
    color: #60a5fa;
    font-size: var(--font-size-xl);
}

.ai-hint-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ai-hint-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: #f3f4f6;
    border-radius: 8px;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #60a5fa;
    color: white;
    border-radius: 50%;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    flex-shrink: 0;
}

.ai-hint-step span:last-child {
    font-size: var(--font-size-sm);
    color: #374151;
    line-height: 1.5;
}

.ai-hint-prompt {
    margin-bottom: 16px;
}

.ai-hint-prompt label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.ai-hint-prompt select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    color: #1f2937;
    background: white;
    cursor: pointer;
}

.ai-hint-prompt select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ai-hint-paste-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    color: #4b5563;
    margin-bottom: 16px;
    min-height: 100px;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-hint-paste-area:focus {
    outline: none;
    border-color: #60a5fa;
    background: #f5f3ff;
}

.ai-hint-paste-area i {
    font-size: var(--font-size-2xl);
    color: #9ca3af;
}

.ai-hint-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.ai-hint-cancel {
    padding: 10px 20px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    color: #4b5563;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-hint-cancel:hover {
    background: #e5e7eb;
}

.ai-hint-ready {
    padding: 10px 20px;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.ai-hint-ready:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ai-hint-ready:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Dark mode for AI hint */
.dark-mode .excalidraw-ai-hint {
    background: #1f2937;
}

.dark-mode .ai-hint-header {
    color: #f3f4f6;
}

.dark-mode .ai-hint-step {
    background: #374151;
}

.dark-mode .ai-hint-step span:last-child {
    color: #e5e7eb;
}

.dark-mode .ai-hint-prompt label {
    color: #e5e7eb;
}

.dark-mode .ai-hint-prompt select {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark-mode .ai-hint-paste-area {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

.dark-mode .ai-hint-paste-area:focus {
    background: #4c1d95;
    border-color: #60a5fa;
}

.dark-mode .ai-hint-cancel {
    background: #374151;
    color: #e5e7eb;
}

.dark-mode .ai-hint-cancel:hover {
    background: #4b5563;
}

/* Excalidraw Toast Notification */
.excalidraw-toast {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    animation: toastSlideUp 0.3s ease;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.excalidraw-toast.fade-out {
    animation: toastFadeOut 0.3s ease forwards;
}

@keyframes toastFadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

.excalidraw-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-xs);
}

.excalidraw-toast .toast-content i {
    color: #60a5fa;
    font-size: var(--font-size-base);
}

.excalidraw-toast .toast-subtext {
    font-size: var(--font-size-xs);
    color: #94a3b8;
    margin-top: 6px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .excalidraw-container {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .excalidraw-footer {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .excalidraw-ai-btn span {
        display: none;
    }

    .excalidraw-ai-btn {
        width: 36px !important;
        padding: 0 !important;
    }

    .excalidraw-toast {
        width: 90%;
        padding: 12px 16px;
    }

    .excalidraw-toast .toast-content {
        font-size: var(--font-size-xs);
    }
}

/* =============================================
   CUSTOM WHITEBOARD STYLES - Full Screen Layout
   Matches Session Analytics design pattern
   ============================================= */

.whiteboard-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.whiteboard-fullscreen:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Inline whiteboard — embedded in manipulatives workspace, not a fullscreen overlay */
.whiteboard-inline {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    background: white;
    position: relative;
}

body.dark-mode .whiteboard-inline {
    background: #1f2937;
    color: white;
}

body.dark-mode .whiteboard-fullscreen {
    background: #1f2937;
    color: white;
}

/* Clean Header - matches manipulatives design */
.whiteboard-header-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
    z-index: 2;
}

body.dark-mode .whiteboard-header-clean {
    background: #1f2937;
    border-bottom-color: #374151;
}

.whiteboard-header-clean .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.whiteboard-header-clean .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.whiteboard-header-clean .back-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.whiteboard-header-clean .back-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

body.dark-mode .whiteboard-header-clean .back-btn {
    color: #9ca3af;
}

body.dark-mode .whiteboard-header-clean .back-btn:hover {
    background: #374151;
    color: #e5e7eb;
}

.whiteboard-header-clean .header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whiteboard-header-clean .header-icon {
    color: #3b82f6;
    font-size: 18px;
}

.whiteboard-header-clean .whiteboard-title-text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-shadow: none;
    text-align: left;
}

body.dark-mode .whiteboard-header-clean .whiteboard-title-text {
    color: #f3f4f6;
}

.whiteboard-header-clean .paper-options-group {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
}

body.dark-mode .whiteboard-header-clean .paper-options-group {
    background: #374151;
}

.whiteboard-header-clean .paper-btn {
    padding: 6px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.whiteboard-header-clean .paper-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
}

.whiteboard-header-clean .paper-btn.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.whiteboard-header-clean .paper-icon {
    width: 16px;
    height: 16px;
}

body.dark-mode .whiteboard-header-clean .paper-btn {
    color: #9ca3af;
}

body.dark-mode .whiteboard-header-clean .paper-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

body.dark-mode .whiteboard-header-clean .paper-btn.active {
    background: #1f2937;
    color: #60a5fa;
}

.whiteboard-header-clean .paper-color-btn {
    width: 32px;
    height: 32px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.whiteboard-header-clean .paper-color-btn::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.whiteboard-header-clean .paper-color-btn::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

body.dark-mode .whiteboard-header-clean .paper-color-btn {
    border-color: #4b5563;
}

.whiteboard-header-clean .action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s ease;
}

.whiteboard-header-clean .action-btn i {
    font-size: 18px;
}

.whiteboard-header-clean .action-btn .btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.whiteboard-header-clean .action-btn span {
    font-size: 16px;
    line-height: 1;
}

.whiteboard-header-clean .trash-btn {
    background: transparent;
    color: #6b7280;
    padding: 8px;
    height: auto;
}

.whiteboard-header-clean .trash-btn:hover {
    background: #fef2f2;
    color: #ef4444;
}

.whiteboard-header-clean .header-divider {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
    margin: 0 4px;
}

body.dark-mode .whiteboard-header-clean .header-divider {
    background: #4b5563;
}

.whiteboard-header-clean .screenshot-btn {
    background: none;
    color: #4b5563;
}

.whiteboard-header-clean .screenshot-btn:hover {
    background: none;
    color: #3b82f6;
}

.whiteboard-header-clean .send-btn {
    background: none;
    color: #4b5563;
}

.whiteboard-header-clean .send-btn:hover {
    background: none;
    color: #3b82f6;
}

body.dark-mode .whiteboard-header-clean .screenshot-btn,
body.dark-mode .whiteboard-header-clean .send-btn {
    background: none;
    color: #9ca3af;
}

body.dark-mode .whiteboard-header-clean .screenshot-btn:hover,
body.dark-mode .whiteboard-header-clean .send-btn:hover {
    background: none;
    color: #60a5fa;
}

/* Header - matches analytics-header exactly (legacy) */
.whiteboard-fullscreen .whiteboard-header {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: inherit;
    gap: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

body.dark-mode .whiteboard-fullscreen .whiteboard-header {
    border-bottom-color: #374151;
}

.whiteboard-fullscreen .whiteboard-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    /* Responsive: 20px to 24px */
    font-weight: 600;
    flex: 1;
}

.whiteboard-fullscreen .whiteboard-header h2 i {
    color: #60a5fa;
}

body.dark-mode .whiteboard-fullscreen .whiteboard-header h2 i {
    color: #a78bfa;
}

.whiteboard-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.whiteboard-back-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

body.dark-mode .whiteboard-back-btn:hover {
    background: #374151;
    color: #e5e7eb;
}

.whiteboard-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Paper Options Container */
.paper-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Paper Selector */
.paper-selector {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
}

body.dark-mode .paper-selector {
    background: #374151;
}

/* Paper Color Picker */
.paper-color-picker {
    width: 34px;
    height: 34px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

body.dark-mode .paper-color-picker {
    border-color: #4b5563;
}

.paper-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #4b5563;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: var(--font-size-base);
}

.paper-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
}

.paper-btn.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-mode .paper-btn {
    color: #9ca3af;
}

body.dark-mode .paper-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

body.dark-mode .paper-btn.active {
    background: #1f2937;
    color: #60a5fa;
}

.whiteboard-room-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: #4b5563;
    padding: 6px 12px;
    background: #f3f4f6;
    border-radius: 20px;
}

body.dark-mode .whiteboard-room-status {
    background: #374151;
    color: #9ca3af;
}

.whiteboard-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    background: #f3f4f6;
    color: #374151;
    transition: all 0.2s ease;
}

.whiteboard-action-btn:hover {
    background: #e5e7eb;
}

.whiteboard-action-btn.primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.whiteboard-action-btn.primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

body.dark-mode .whiteboard-action-btn {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .whiteboard-action-btn:hover {
    background: #4b5563;
}

/* Toolbar - shared styles for all whiteboards */
.whiteboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

body.dark-mode .whiteboard-toolbar {
    background: #111827;
    border-bottom-color: #374151;
}

/* Toolbar - fullscreen and inline overrides */
.whiteboard-fullscreen .whiteboard-toolbar,
.whiteboard-inline .whiteboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

body.dark-mode .whiteboard-fullscreen .whiteboard-toolbar,
body.dark-mode .whiteboard-inline .whiteboard-toolbar {
    background: #111827;
    border-bottom-color: #374151;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-group {
    display: flex;
    gap: 2px;
    background: transparent;
    padding: 2px;
    border-radius: 8px;
}

body.dark-mode .toolbar-group {
    background: transparent;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
    margin: 0 6px;
}

body.dark-mode .toolbar-divider {
    background: #374151;
}

.tool-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: var(--font-size-sm);
}

.tool-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.tool-btn.active {
    background: transparent;
    color: #3b82f6;
    box-shadow: inset 0 0 0 2px #3b82f6;
}

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

body.dark-mode .tool-btn {
    color: #9ca3af;
}

body.dark-mode .tool-btn:hover {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .tool-btn.active {
    background: transparent;
    color: #60a5fa;
    box-shadow: inset 0 0 0 2px #60a5fa;
}

/* Draggable tool buttons */
.tool-btn[draggable="true"] {
    cursor: grab;
}

.tool-btn[draggable="true"]:active {
    cursor: grabbing;
}

.tool-btn.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Rounded icon for rounded rectangle shape */
.rounded-icon {
    border-radius: 6px;
}

/* Diamond, rounded rectangle, and other shape icon SVGs */
.diamond-icon,
.rounded-rect-icon,
.shape-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    display: inline-block;
}

/* Block arrow icon - match Font Awesome icon size */
.block-arrow-icon {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.3em;
    display: inline-block;
}

/* Stroke color picker - inline with pencil */
.stroke-color-picker {
    width: 30px;
    height: 30px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
}

body.dark-mode .stroke-color-picker {
    border-color: #4b5563;
}

/* Paper color picker - for grid line color */
.paper-color-picker {
    width: 30px;
    height: 30px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}

.paper-color-picker::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.paper-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

body.dark-mode .paper-color-picker {
    border-color: #4b5563;
}

/* Stroke width selector - inline with pencil */
.stroke-width-select {
    height: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 8px;
    font-size: var(--font-size-xs);
    color: #374151;
    background: white;
    cursor: pointer;
}

body.dark-mode .stroke-width-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

.pen-style-select {
    height: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 8px;
    font-size: var(--font-size-xs);
    color: #374151;
    background: white;
    cursor: pointer;
}

body.dark-mode .pen-style-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

.line-style-select {
    height: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 8px;
    font-size: var(--font-size-xs);
    color: #374151;
    background: white;
    cursor: pointer;
    min-width: 50px;
}

body.dark-mode .line-style-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* Text tool color and size pickers */
.text-color-picker {
    width: 30px;
    height: 30px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
}

body.dark-mode .text-color-picker {
    border-color: #4b5563;
}

.text-size-select {
    height: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 8px;
    font-size: var(--font-size-xs);
    color: #374151;
    background: white;
    cursor: pointer;
    margin-left: 4px;
}

body.dark-mode .text-size-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* Universal color picker - shared for all tools */
.universal-color-picker {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}

.universal-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.universal-color-picker::-webkit-color-swatch {
    border: 2px solid #d1d5db;
    border-radius: 4px;
}

.universal-color-picker::-moz-color-swatch {
    border: 2px solid #d1d5db;
    border-radius: 4px;
}

body.dark-mode .universal-color-picker::-webkit-color-swatch {
    border-color: #4b5563;
}

body.dark-mode .universal-color-picker::-moz-color-swatch {
    border-color: #4b5563;
}

/* Inline text editor for whiteboard text tool */
.whiteboard-text-input {
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.whiteboard-text-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

body.dark-mode .whiteboard-text-input {
    background: rgba(31, 41, 55, 0.9);
    border-color: #60a5fa;
}

body.dark-mode .whiteboard-text-input::placeholder {
    color: #4b5563;
}

/* Memo/Sticky note color pickers in toolbar */
.memo-bg-picker {
    width: 30px;
    height: 30px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
}

body.dark-mode .memo-bg-picker {
    border-color: #4b5563;
}

.memo-text-picker {
    width: 26px;
    height: 26px;
    border: 2px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

body.dark-mode .memo-text-picker {
    border-color: #4b5563;
}

.memo-text-size-select {
    height: 26px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 6px;
    font-size: var(--font-size-2xs);
    color: #374151;
    background: white;
    cursor: pointer;
}

body.dark-mode .memo-text-size-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

.zoom-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.zoom-level {
    font-size: var(--font-size-sm);
    color: #4b5563;
    min-width: 50px;
    text-align: center;
}

body.dark-mode .zoom-level {
    color: #9ca3af;
}

/* Canvas Container - fills remaining space */
.whiteboard-fullscreen .whiteboard-canvas-container,
.whiteboard-inline .whiteboard-canvas-container {
    flex: 1;
    position: relative;
    background: #f3f4f6;
    overflow: hidden;
}

body.dark-mode .whiteboard-fullscreen .whiteboard-canvas-container,
body.dark-mode .whiteboard-inline .whiteboard-canvas-container {
    background: #111827;
}

#whiteboardCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: white;
    touch-action: none;
}

body.dark-mode #whiteboardCanvas {
    background: #1f2937;
}

/* Custom cursors for drawing tools - smaller 16x16 size */
#whiteboardCanvas.cursor-pencil {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E") 1 15, crosshair;
}

#whiteboardCanvas.cursor-eraser {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3E%3Cpath fill='%23374151' d='M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z'/%3E%3C/svg%3E") 2 14, crosshair;
}

.canvas-hint {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--font-size-2xs);
    pointer-events: none;
    opacity: 0.7;
}

.canvas-hint kbd {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* Footer */
.whiteboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 4px 8px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.zoom-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.zoom-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.zoom-level {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #374151;
    min-width: 45px;
    text-align: center;
}

.history-controls {
    display: flex;
    gap: 4px;
    background: white;
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.history-controls .history-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.history-controls .history-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: #334155;
}

.history-controls .history-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.whiteboard-room-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: var(--font-size-xs);
}

.whiteboard-room-info i {
    color: #10b981;
}

.whiteboard-hint {
    font-size: var(--font-size-2xs);
    color: #9ca3af;
}

/* Dark mode */
body.dark-mode .whiteboard-container {
    background: #1f2937;
}

body.dark-mode .whiteboard-toolbar {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .toolbar-group {
    background: #1f2937;
}

body.dark-mode .tool-btn {
    color: #9ca3af;
}

body.dark-mode .tool-btn:hover {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .tool-btn.active {
    background: transparent;
    color: #60a5fa;
    box-shadow: inset 0 0 0 2px #60a5fa;
}

body.dark-mode .color-group input[type="color"] {
    border-color: #374151;
}

/* Color input styling - remove gray background */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}

#paperColorPicker {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}

body.dark-mode .color-group select {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .whiteboard-canvas-container {
    background: #111827;
}

body.dark-mode .canvas-hint {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .whiteboard-footer {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .zoom-controls,
body.dark-mode .history-controls {
    background: #1f2937;
}

body.dark-mode .zoom-btn,
body.dark-mode .history-controls .history-btn {
    color: #9ca3af;
}

body.dark-mode .zoom-btn:hover,
body.dark-mode .history-controls .history-btn:hover:not(:disabled) {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .zoom-level {
    color: #e5e7eb;
}

body.dark-mode .whiteboard-room-info {
    color: #e5e7eb;
}

body.dark-mode .whiteboard-hint {
    color: #4b5563;
}

/* ===== Memo Inline Editor Styles ===== */
.memo-inline-editor {
    background: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 36px;
    /* Space for voice button and resize handle */
}

.memo-textarea {
    width: 100%;
    min-height: 60px;
    border: none;
    background: transparent;
    resize: none;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    padding: 8px;
    outline: none;
    flex: 1;
    color: #1f2937;
    overflow-y: auto;
    /* Vertical scrollbar when needed */
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.memo-textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Fixed voice button at bottom-left of memo editor */
.memo-voice-btn-fixed {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    font-size: 14px;
}

.memo-voice-btn-fixed:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.memo-voice-btn-fixed.recording {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    animation: stt-pulse 1s infinite;
}

/* Voice button tooltip - black and white design */
.memo-voice-btn-fixed[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: #1f2937;
    color: #ffffff;
    border: 1px solid #374151;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10001;
    margin-bottom: 5px;
}

.memo-voice-btn-fixed[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
}

/* Hide tooltip when recording */
.memo-voice-btn-fixed.recording[data-tooltip]:before {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Memo/Text editor icons container (always visible) */
.memo-icons-container {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
}

.memo-icon-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 14px;
}

.memo-icon-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #3b82f6;
}

.memo-icon-btn.recording {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    animation: stt-pulse 1s infinite;
}

/* Memo icon button tooltip */
.memo-icon-btn[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: #1f2937;
    color: #ffffff;
    border: 1px solid #374151;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10001;
    margin-bottom: 5px;
}

.memo-icon-btn[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
}

/* Hide tooltip when recording */
.memo-icon-btn.recording[data-tooltip]:before {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Dark mode memo icons */
body.dark-mode .memo-icons-container .memo-icon-btn {
    color: #9ca3af;
}

body.dark-mode .memo-icons-container .memo-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #60a5fa;
}

body.dark-mode .memo-icons-container .memo-icon-btn.recording {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

body.dark-mode .memo-icon-btn[data-tooltip]:before {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

/* Memo Plus Dropdown Menu */
.memo-plus-menu {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 160px;
    z-index: 10002;
}

.memo-plus-menu .media-option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: #374151;
    transition: background 0.15s ease;
}

.memo-plus-menu .media-option:hover {
    background: #f3f4f6;
}

.memo-plus-menu .media-option i {
    width: 18px;
    text-align: center;
    color: #4b5563;
}

body.dark-mode .memo-plus-menu {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .memo-plus-menu .media-option {
    color: #e5e7eb;
}

body.dark-mode .memo-plus-menu .media-option:hover {
    background: #374151;
}

body.dark-mode .memo-plus-menu .media-option i {
    color: #9ca3af;
}

/* Memo Website Prompt Modal */
.memo-website-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
}

.memo-website-modal {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    min-width: min(320px, calc(100vw - 32px));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.memo-website-modal h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: #1f2937;
}

.memo-url-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.memo-url-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.memo-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.memo-cancel-btn,
.memo-confirm-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.memo-cancel-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
}

.memo-cancel-btn:hover {
    background: #e5e7eb;
}

.memo-confirm-btn {
    background: #3b82f6;
    border: none;
    color: white;
}

.memo-confirm-btn:hover {
    background: #2563eb;
}

body.dark-mode .memo-website-modal {
    background: #1f2937;
}

body.dark-mode .memo-website-modal h3 {
    color: #f3f4f6;
}

body.dark-mode .memo-url-input {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

body.dark-mode .memo-cancel-btn {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .memo-cancel-btn:hover {
    background: #4b5563;
}

/* Memo Camera Capture Overlay */
.memo-camera-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
}

.memo-camera-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.memo-camera-container video {
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 8px;
}

.memo-camera-controls {
    display: flex;
    gap: 16px;
    align-items: center;
}

.memo-camera-cancel {
    padding: 10px 20px;
    background: #6b7280;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.memo-camera-cancel:hover {
    background: #4b5563;
}

.memo-camera-capture {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: white;
    border: 4px solid #e5e7eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #374151;
    transition: transform 0.15s ease;
}

.memo-camera-capture:hover {
    opacity: 0.8;
}

/* Ghost text prediction overlay (auto mode) */
.memo-textarea-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.memo-ghost-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    padding: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    font-family: var(--font-family);
    line-height: 1.5;
    z-index: 1;
}

.memo-ghost-spacer {
    visibility: hidden;
    white-space: pre-wrap;
}

.memo-ghost-prediction {
    color: #9ca3af;
    opacity: 0.7;
}

/* Ensure textarea is above ghost text */
.memo-textarea-wrapper .memo-textarea {
    position: relative;
    z-index: 2;
    background: transparent;
}

.memo-resize-handle {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
    background-image: linear-gradient(135deg, transparent 70%, #9ca3af 70%, #9ca3af 75%, transparent 75%),
        linear-gradient(135deg, transparent 84%, #9ca3af 84%, #9ca3af 89%, transparent 89%);
    background-color: transparent;
    z-index: 20;
}

/* Insert Menu for Memo */
.memo-insert-menu {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 140px;
}

.memo-insert-menu .insert-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    border-radius: 4px;
    transition: background 0.2s;
}

.memo-insert-menu .insert-option:hover {
    background: #f3f4f6;
}

.memo-insert-menu .insert-option i {
    width: 16px;
    color: #4b5563;
}

/* Emoji Picker for Memo */
.memo-emoji-picker {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 240px;
    max-height: 300px;
    overflow-y: auto;
}

.emoji-category {
    margin-bottom: 8px;
}

.emoji-category:last-child {
    margin-bottom: 0;
}

.emoji-category-label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-left: 2px;
}

.emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.emoji-item {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.emoji-item:hover {
    background: #fef3c7;
    border-color: #f59e0b;
}

/* Toolbar Dropdown Container */
.toolbar-dropdown-container {
    position: relative;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dropdown-arrow {
    font-size: 8px;
    color: #9ca3af;
    margin-left: 2px;
}

.toolbar-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 140px;
    z-index: 1000;
    display: none;
    margin-top: 4px;
}

.toolbar-dropdown.active {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    white-space: nowrap;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: #374151;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: #f3f4f6;
}

.dropdown-item i {
    width: 16px;
    text-align: center;
    color: #4b5563;
}

/* Whiteboard Emoji Picker (canvas placement) */
.whiteboard-emoji-picker {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emoji-category {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.emoji-category:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.emoji-category-label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-left: 2px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.emoji-item {
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.emoji-item:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: scale(1.1);
}

/* Whiteboard Math Symbol Picker - standalone positioning */
.whiteboard-math-picker {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px;
    min-width: 300px;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.dark-mode .whiteboard-math-picker {
    background: #1f2937;
    border-color: #374151;
}

/* Math Symbols Dropdown */
.memo-math-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 4px;
    z-index: 10001;
}

/* Extended math dropdown with categories */
.memo-math-dropdown.memo-math-extended {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    min-width: 280px;
    transform: none;
}

.memo-math-category {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.memo-math-category:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.memo-math-category-label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-left: 2px;
}

.memo-math-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.memo-math-item {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.memo-math-item:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: scale(1.05);
}

/* Fraction stacked display with horizontal bar */
.memo-math-item.fraction-item {
    min-width: 40px;
    height: 44px;
    padding: 4px 8px;
}

.frac-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.frac-num,
.frac-den {
    font-size: 14px;
    font-weight: 500;
}

.frac-bar {
    width: 100%;
    min-width: 12px;
    height: 2px;
    background: currentColor;
}

/* AI Suggestion Dropdown */
.memo-suggestion-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 4px;
    z-index: 10001;
}

.memo-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.memo-suggestion-item:hover {
    background: #eff6ff;
}

.memo-suggestion-item:last-child {
    border-bottom: none;
}

.memo-suggestion-category {
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
    background: #f9fafb;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}

.memo-suggestion-empty {
    padding: 12px;
    text-align: center;
    color: #9ca3af;
    font-size: var(--font-size-xs);
    font-style: italic;
}

/* Dark mode for memo editor */
body.dark-mode .memo-inline-editor {
    background: #1f2937;
    border-color: #4b5563;
}

body.dark-mode .memo-textarea {
    color: #e5e7eb;
}

body.dark-mode .memo-textarea::placeholder {
    color: #4b5563;
}

body.dark-mode .memo-voice-btn-fixed {
    background: transparent;
    color: #9ca3af;
}

body.dark-mode .memo-voice-btn-fixed:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

body.dark-mode .memo-voice-btn-fixed.recording {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

/* Dark mode voice button tooltip */
body.dark-mode .memo-voice-btn-fixed[data-tooltip]:before {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

body.dark-mode .toolbar-dropdown {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .dropdown-item {
    color: #e5e7eb;
}

body.dark-mode .dropdown-item:hover {
    background: #374151;
}

body.dark-mode .whiteboard-emoji-picker {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .emoji-category {
    border-color: #374151;
}

body.dark-mode .emoji-category-label {
    color: #9ca3af;
}

body.dark-mode .emoji-item {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .emoji-item:hover {
    background: #4b5563;
    border-color: #3b82f6;
}

body.dark-mode .memo-resize-handle {
    background-image: linear-gradient(135deg, transparent 70%, #4b5563 70%, #4b5563 75%, transparent 75%),
        linear-gradient(135deg, transparent 84%, #4b5563 84%, #4b5563 89%, transparent 89%);
}

body.dark-mode .memo-ghost-prediction {
    color: #4b5563;
    opacity: 0.8;
}

body.dark-mode .memo-math-dropdown,
body.dark-mode .memo-suggestion-dropdown {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .memo-math-item {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .memo-math-item:hover {
    background: #4b5563;
    border-color: #3b82f6;
}

body.dark-mode .memo-suggestion-item {
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .memo-suggestion-item:hover {
    background: #374151;
}

body.dark-mode .memo-suggestion-category {
    background: #111827;
    color: #9ca3af;
}

body.dark-mode .memo-suggestion-empty {
    color: #4b5563;
}

/* Responsive */
@media (max-width: 768px) {
    .whiteboard-container {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .whiteboard-toolbar {
        padding: 8px;
        gap: 4px;
    }

    .tool-btn {
        width: 36px;
        height: 36px;
    }

    .toolbar-divider {
        display: none;
    }

    .whiteboard-send-btn span {
        display: none;
    }

    .whiteboard-send-btn {
        width: 36px !important;
        padding: 0 !important;
    }

    .whiteboard-footer {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .whiteboard-hint {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   VIEW TOGGLE (Chat vs Template)
   ============================================ */

.view-toggle-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin-top: 15px;
    background: transparent;
    border: none;
}

body.dark-mode .view-toggle-container {
    background: transparent;
    border: none;
}

.view-toggle {
    display: flex;
    background: transparent;
    border-radius: 10px;
    padding: 0;
    gap: 8px;
}

body.dark-mode .view-toggle {
    background: transparent;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #4b5563;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    /* No background change on hover - match footer buttons */
}

body.dark-mode .view-toggle-btn {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #e5e7eb;
}

body.dark-mode .view-toggle-btn:hover {
    /* No background change on hover - match footer buttons */
}

.view-toggle-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

body.dark-mode .view-toggle-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.view-toggle-btn i {
    font-size: var(--font-size-base);
    color: inherit;
}

/* Hide conversation container when template view is active */
.conversation-container.hidden {
    display: none !important;
}

/* Template panel container display */
#templatePanelContainer {
    display: none;
    height: calc(100vh - 120px);
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

#templatePanelContainer.active {
    display: flex;
    justify-content: center;
}

/* Mobile responsive for view toggle and template container */
@media (max-width: 768px) {
    .view-toggle-container {
        padding: 8px 12px;
    }

    .view-toggle-btn {
        padding: 4px 8px;
        font-size: var(--font-size-xs);
    }

    .view-toggle-btn span {
        display: none;
    }

    .view-toggle-btn i {
        font-size: var(--font-size-sm);
    }

    #templatePanelContainer {
        padding: 0 10px;
        height: calc(100vh - 100px);
        height: calc(100dvh - 100px);
    }
}

@media (max-width: 480px) {
    #templatePanelContainer {
        padding: 0 4px;
        height: calc(100vh - 90px);
        height: calc(100dvh - 90px);
    }
}

/* ==================== CHAT INPUT STYLES ==================== */
.chat-input textarea {
    font-size: var(--font-size-chat-input);
}

/* ==================== UNIFY CHAT FONT SIZES ==================== */
.message,
.user-message,
.assistant-message,
.assistant-message p,
.assistant-message li,
.user-message p {
    font-size: var(--font-size-chat-message);
    line-height: var(--line-height-relaxed);
}

/* ==================== REDUCE CHAT BUBBLE PADDING ==================== */
.message-wrapper,
.assistant-message,
.user-message {
    padding: 10px 16px !important;
}

/* ==================== TEXT SIZE MODES FOR CHAT ==================== */
/* Medium and large text font sizes are defined via CSS custom properties */
body.medium-text .message,
body.medium-text .user-message,
body.medium-text .assistant-message,
body.medium-text .assistant-message p,
body.medium-text .assistant-message li,
body.medium-text .user-message p,
body.medium-text .message-wrapper,
body.large-text .message,
body.large-text .user-message,
body.large-text .assistant-message,
body.large-text .assistant-message p,
body.large-text .assistant-message li,
body.large-text .user-message p,
body.large-text .message-wrapper {
    font-size: var(--font-size-chat-message);
    line-height: var(--line-height-relaxed);
}

/* ==================== CHAT FOOTER BUTTONS ==================== */
.chat-footer-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 16px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    position: fixed;
    bottom: 10px;
    left: var(--sidebar-width);
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 101;
    transition: left var(--sidebar-transition);
}

.chat-footer-buttons .footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.sidebar-collapsed-mode .chat-footer-buttons {
    left: var(--sidebar-collapsed-width);
}

@media (max-width: 1023px) {
    .chat-footer-buttons {
        left: 0;
    }
}

@media (max-width: 600px) {
    .chat-footer-buttons {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px;
        padding: 4px 8px;
    }

    .chat-footer-buttons .active-profiles-indicator {
        order: 0;
        width: 100%;
    }

    .chat-footer-buttons .footer-actions {
        order: 1;
        gap: 4px;
    }

    .chat-footer-buttons .footer-actions .chat-footer-btn {
        padding: 6px 8px;
    }
}

.chat-footer-btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.chat-footer-btn.secondary {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #4b5563;
}

.chat-footer-btn.secondary:hover:not(:disabled) {
    /* No background change on hover */
}

.chat-footer-btn.secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-footer-btn.secondary:disabled:hover {
    background: #fff;
}

/* Icon-only buttons (undo/redo) - smaller padding */
#chatUndo,
#chatRedo {
    padding: 8px 10px;
    min-width: 36px;
}

/* Chat footer tooltips - ensure they appear above buttons and input-group */
.chat-footer-buttons [data-tooltip]:before {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
    z-index: 10001;
}

.chat-footer-buttons,
.chat-footer-buttons .footer-actions {
    overflow: visible;
}

body.dark-mode .chat-footer-buttons {
    background: transparent;
}

body.dark-mode .chat-footer-btn.secondary {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #e5e7eb;
}

body.dark-mode .chat-footer-btn.secondary:hover:not(:disabled) {
    /* No background change on hover */
}

/* Responsive */
@media (max-width: 768px) {
    .chat-footer-buttons {
        padding: 4px 8px;
    }

    .chat-footer-btn {
        padding: 4px 8px;
        font-size: var(--font-size-xs, 0.875rem);
    }

    .chat-footer-buttons .footer-actions .chat-footer-btn span {
        display: none;
    }
}

/* Save Draft Dropdown */
.save-draft-wrapper {
    position: relative;
}

.save-draft-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    margin-bottom: 8px;
    z-index: 1000;
}

.save-draft-menu.show {
    display: block;
}

.save-draft-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: #374151;
    transition: background 0.2s;
}

.save-draft-option:first-child {
    border-radius: 8px 8px 0 0;
}

.save-draft-option:last-child {
    border-radius: 0 0 8px 8px;
}

.save-draft-option:hover {
    background: #f3f4f6;
}

.save-draft-option i {
    width: 20px;
    text-align: center;
}

.save-draft-option i.fa-file-word {
    color: #2b579a;
}

.save-draft-option i.fa-file-pdf {
    color: #d32f2f;
}

.save-draft-option i.fa-file-lines {
    color: #4b5563;
}

.save-draft-option i.fa-file-excel {
    color: #16a34a;
}

/* Dark mode */
body.dark-mode .save-draft-menu {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .save-draft-option {
    color: #e5e7eb;
}

body.dark-mode .save-draft-option:hover {
    background: #374151;
}

/* ===== CONSISTENT HOVER STYLES - NO BOLD ON HOVER ===== */
/* Prevent font-weight change on hover for sidebar buttons */
.sidebar-resource-btn:hover,
.sidebar-resource-btn:hover span {
    font-weight: 400 !important;
}

/* Prevent font-weight change on hover for agent names */
.sidebar-agent:hover .sidebar-agent-name,
.sidebar-agent.hovered .sidebar-agent-name,
.sidebar-agent-info:hover .sidebar-agent-name {
    font-weight: 400 !important;
}

.sidebar-agent.active .sidebar-agent-name,
.sidebar-agent.selected .sidebar-agent-name {
    font-weight: 400 !important;
}

/* Dark mode support */
body.dark-mode .sidebar-agent:hover .sidebar-agent-name,
body.dark-mode .sidebar-agent.hovered .sidebar-agent-name,
body.dark-mode .sidebar-agent-info:hover .sidebar-agent-name {
    font-weight: 400 !important;
}

body.dark-mode .sidebar-agent.active .sidebar-agent-name,
body.dark-mode .sidebar-agent.selected .sidebar-agent-name {
    font-weight: 400 !important;
}

/* ============================================
   INLINE WAND MENU (Chat mode)
   ============================================ */
.inline-wand-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 160px;
    z-index: 1000;
    margin-top: 4px;
}

.inline-wand-menu .wand-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: var(--font-size-xs);
    color: #374151;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}

.inline-wand-menu .wand-menu-option:hover {
    background: #f3f4f6;
}

.inline-wand-menu .wand-menu-option i {
    width: 16px;
    color: #4b5563;
}

/* Track Changes for inline fill-ins */
.inline-fillin-wrapper .track-changes-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-top: 4px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.inline-fillin-wrapper .track-changes-header {
    padding: 8px 12px;
    border-bottom: 1px solid #fcd34d;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #92400e;
}

.inline-fillin-wrapper .track-changes-loading,
.inline-fillin-wrapper .track-changes-error {
    padding: 12px;
    text-align: center;
    color: #92400e;
    font-size: var(--font-size-xs);
}

.inline-fillin-wrapper .track-changes-error {
    color: #dc2626;
}

.inline-fillin-wrapper .track-changes-diff {
    padding: 12px;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: #374151;
}

.inline-fillin-wrapper .track-deleted {
    background: #fee2e2;
    color: #dc2626;
    text-decoration: line-through;
    padding: 1px 2px;
    border-radius: 2px;
}

.inline-fillin-wrapper .track-added {
    background: #dcfce7;
    color: #16a34a;
    padding: 1px 2px;
    border-radius: 2px;
}

.inline-fillin-wrapper .track-changes-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #fcd34d;
    background: #fef3c7;
    border-radius: 0 0 8px 8px;
}

.inline-fillin-wrapper .track-changes-btn {
    flex: 1;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.inline-fillin-wrapper .track-changes-btn.accept {
    background: #10b981;
    color: white;
}

.inline-fillin-wrapper .track-changes-btn.reject {
    background: #ef4444;
    color: white;
}

.inline-fillin-wrapper .track-changes-btn.revise {
    background: #3b82f6;
    color: white;
}

.inline-fillin-wrapper .track-changes-edit {
    width: calc(100% - 24px);
    min-height: 60px;
    margin: 8px 12px;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    resize: vertical;
}

/* Dark mode inline wand menu */
body.dark-mode .inline-wand-menu {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .inline-wand-menu .wand-menu-option {
    color: #e5e7eb;
}

body.dark-mode .inline-wand-menu .wand-menu-option:hover {
    background: #374151;
}

body.dark-mode .inline-fillin-wrapper .track-changes-container {
    background: #292524;
    border-color: #a16207;
}

body.dark-mode .inline-fillin-wrapper .track-changes-header {
    border-color: #a16207;
    color: #fbbf24;
}

body.dark-mode .inline-fillin-wrapper .track-changes-diff {
    color: #e5e7eb;
}

body.dark-mode .inline-fillin-wrapper .track-deleted {
    background: #450a0a;
    color: #fca5a5;
}

body.dark-mode .inline-fillin-wrapper .track-added {
    background: #052e16;
    color: #86efac;
}

body.dark-mode .inline-fillin-wrapper .track-changes-actions {
    background: #44403c;
    border-color: #a16207;
}

body.dark-mode .inline-fillin-wrapper .track-changes-edit {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}


/* Self-Check Dropdown */
.self-check-wrapper {
    position: relative;
}

.self-check-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
}

.self-check-btn:hover {
    /* No background change on hover */
}

.self-check-btn i {
    font-size: 0.9em;
}

.self-check-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 4px;
    min-width: 200px;
    z-index: 2000;
}

.self-check-menu.show {
    display: block;
}

.self-check-menu::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

.self-check-menu::before {
    content: '';
    position: absolute;
    bottom: -9px;
    right: 19px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #e5e7eb;
}

.self-check-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #374151;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.self-check-option:hover {
    background: #f3f4f6;
}

.self-check-option i {
    width: 18px;
    text-align: center;
    color: #3b82f6;
}

/* Dark mode */
body.dark-mode .self-check-btn {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #e5e7eb;
}

body.dark-mode .self-check-btn:hover {
    /* No background change on hover */
}

body.dark-mode .self-check-menu {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .self-check-menu::after {
    border-top-color: #1f2937;
}

body.dark-mode .self-check-menu::before {
    border-top-color: #374151;
}

body.dark-mode .self-check-option {
    color: #e5e7eb;
}

body.dark-mode .self-check-option:hover {
    background: #374151;
}

body.dark-mode .self-check-option i {
    color: #9ca3af;
}

/* Self-Check Result Display */
.self-check-result {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.self-check-result.loading {
    text-align: center;
    color: #0284c7;
}

.self-check-result.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.self-check-header {
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.self-check-content {
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
}

body.dark-mode .self-check-result {
    background: #1e3a5f;
    border-color: #0369a1;
}

body.dark-mode .self-check-result.error {
    background: #450a0a;
    border-color: #dc2626;
}

body.dark-mode .self-check-header {
    color: #7dd3fc;
}

body.dark-mode .self-check-content {
    color: #e5e7eb;
}

/* ==================== CO-CREATE Self-Check Panel ==================== */
.co-create-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.co-create-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.co-create-panel-content {
    position: absolute;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.co-create-panel.open .co-create-panel-content {
    right: 0;
}

.co-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
}

.co-create-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.co-create-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.co-create-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.co-create-subtitle {
    padding: 12px 20px;
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.co-create-progress {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.co-create-progress-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.co-create-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #2563EB);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.co-create-progress-text {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

.co-create-checklist {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.co-create-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.co-create-step:hover {
    border-color: #3B82F6;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.co-create-step.checked {
    background: #f0fdf4;
    border-color: #86efac;
}

.co-create-checkbox-wrapper {
    position: relative;
    cursor: pointer;
    padding-top: 2px;
}

.co-create-checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.co-create-checkbox-custom {
    display: block;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    transition: all 0.2s;
}

.co-create-checkbox-wrapper:hover .co-create-checkbox-custom {
    border-color: #3B82F6;
}

.co-create-checkbox-wrapper input:checked+.co-create-checkbox-custom {
    background: #22c55e;
    border-color: #22c55e;
}

.co-create-checkbox-wrapper input:checked+.co-create-checkbox-custom::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.co-create-step-content {
    flex: 1;
    min-width: 0;
}

.co-create-step-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.co-create-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
}

.co-create-step.checked .co-create-letter {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.co-create-step-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.co-create-step-desc {
    margin: 0;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.4;
}

.co-create-ai-tools {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.co-create-ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.co-create-ai-buttons {
    display: flex;
    gap: 10px;
}

.co-create-ai-btn {
    flex: 1;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.co-create-ai-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.co-create-ai-btn i {
    color: #3B82F6;
}

/* CO-CREATE Dark Mode */
body.dark-mode .co-create-panel-content {
    background: #1f2937;
}

body.dark-mode .co-create-subtitle {
    color: #9ca3af;
    border-color: #374151;
}

body.dark-mode .co-create-progress {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .co-create-progress-bar {
    background: #374151;
}

body.dark-mode .co-create-progress-text {
    color: #d1d5db;
}

body.dark-mode .co-create-step {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .co-create-step:hover {
    border-color: #3B82F6;
}

body.dark-mode .co-create-step.checked {
    background: #064e3b;
    border-color: #059669;
}

body.dark-mode .co-create-checkbox-custom {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .co-create-step-name {
    color: #f3f4f6;
}

body.dark-mode .co-create-step-desc {
    color: #9ca3af;
}

body.dark-mode .co-create-ai-tools {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .co-create-ai-header {
    color: #9ca3af;
}

body.dark-mode .co-create-ai-btn {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .co-create-ai-btn:hover {
    background: #4b5563;
}

/* CO-CREATE Responsive */
@media (max-width: 480px) {
    .co-create-panel-content {
        width: 100%;
        max-width: 100%;
    }

    .co-create-ai-buttons {
        flex-direction: column;
    }
}

/* Three-Column Row Layout (Chat Mode) */
.three-column-row-container {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin: 16px 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.three-column-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.three-column-header .row-label {
    font-weight: 600;
    color: #1e40af;
    font-size: var(--font-size-xs);
}

.three-column-header .row-label[contenteditable="true"] {
    border: 1px dashed #93c5fd;
    padding: 4px 8px;
    border-radius: 4px;
    background: #fff;
}

.three-column-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1px;
    background: #e5e7eb;
}

.three-column-cell {
    background: #fff;
    padding: 12px;
    min-height: 100px;
}

.three-column-cell .column-header {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.col-accommodations .column-header {
    color: #7c3aed;
}

.col-instructional .column-header {
    color: #059669;
}

.col-qrf .column-header {
    color: #d97706;
}

.three-column-cell .column-content {
    min-height: 60px;
}

.three-column-cell .empty-cell {
    color: #9ca3af;
    font-style: italic;
    font-size: var(--font-size-xs);
    text-align: center;
    padding: 20px;
}

.three-column-cell .inline-fill-blank {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.three-column-cell .inline-fill-input {
    flex: 1;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    caret-color: #1e293b !important;
    -webkit-caret-color: #1e293b !important;
}

.three-column-cell .inline-fill-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.three-column-cell .inline-fill-input.empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

.three-column-cell .inline-ai-assist {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: #f3f4f6;
    color: #4b5563;
    /* Dark gray like sidebar footer */
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.three-column-cell .inline-ai-assist:hover {
    background: #dbeafe;
    color: #3b82f6;
}

.three-column-cell .inline-ai-assist.loading {
    animation: spin 1s linear infinite;
}

/* All buttons in three-column cell fill blanks - dark gray default, blue hover */
.inline-fill-blank button,
.three-column-cell button:not(.row-action-btn) {
    color: #4b5563;
    /* Dark gray like sidebar footer */
}

.inline-fill-blank button:hover,
.three-column-cell button:not(.row-action-btn):hover {
    color: #3b82f6;
}

body.dark-mode .inline-fill-blank button,
body.dark-mode .three-column-cell button:not(.row-action-btn) {
    color: #d1d5db;
    /* Light gray like sidebar footer in dark mode */
}

body.dark-mode .inline-fill-blank button:hover,
body.dark-mode .three-column-cell button:not(.row-action-btn):hover {
    color: #60a5fa;
}

.row-actions {
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.row-action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.row-action-btn.save-row {
    background: #10b981;
    color: #fff;
}

.row-action-btn.save-row:hover {
    background: #059669;
}

.row-action-btn.add-row {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.row-action-btn.add-row:hover {
    background: #e5e7eb;
}

.three-column-row-container.saved {
    border-color: #10b981;
}

.three-column-row-container.saved .three-column-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

/* Suggestions dropdown for three-column */
.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    border-bottom: 1px solid #f3f4f6;
}

.suggestion-item:hover {
    background: #f3f4f6;
}

.suggestion-item:last-child {
    border-bottom: none;
}

/* Dark mode */
body.dark-mode .three-column-row-container {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .three-column-header {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

body.dark-mode .three-column-header .row-label {
    color: #93c5fd;
}

body.dark-mode .three-column-grid {
    background: #374151;
}

body.dark-mode .three-column-cell {
    background: #1f2937;
}

body.dark-mode .three-column-cell .column-header {
    border-color: #374151;
}

body.dark-mode .three-column-cell .inline-fill-input {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .three-column-cell .empty-cell {
    color: #4b5563;
}

body.dark-mode .row-actions {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .suggestions-dropdown {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .suggestion-item {
    border-color: #374151;
}

body.dark-mode .suggestion-item:hover {
    background: #374151;
}

/* Responsive */
@media (max-width: 768px) {
    .three-column-grid {
        grid-template-columns: 1fr;
    }

    .three-column-cell {
        border-bottom: 1px solid #e5e7eb;
    }

    .three-column-cell:last-child {
        border-bottom: none;
    }
}

/* ===========================================
   UNIFIED ACTION BUTTON STYLES
   Consistent styling for Screenshot, Send to Chat, 
   Save Draft, and Open in New Tab buttons
   =========================================== */

/* Base action button */
.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: white;
    outline: none;
    transition: background 0.2s, transform 0.1s;
}

.action-btn:hover {
    color: white;
}

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

.action-btn i {
    font-size: var(--font-size-sm);
}

/* Screenshot button - Orange */
.action-btn.screenshot {
    background: #f97316;
}

.action-btn.screenshot:hover {
    background: #ea580c;
    color: white;
}

/* Send to Chat button - Green */
.action-btn.send-to-chat {
    background: #22c55e;
}

.action-btn.send-to-chat:hover {
    background: #16a34a;
    color: white;
}

/* Send to Chat button - Blue variant */
.action-btn.send-to-chat-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.action-btn.send-to-chat-blue:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
}

/* Open in New Tab button - Blue */
.action-btn.open-tab {
    background: #2563eb;
}

.action-btn.open-tab:hover {
    background: #1d4ed8;
    color: white;
}

/* New Tab button - Blue (same as open-tab) */
.action-btn.new-tab {
    background: #2563eb;
}

.action-btn.new-tab:hover {
    background: #1d4ed8;
    color: white;
}

/* Save Draft button - Gray/Secondary */
.action-btn.save-draft {
    background: #4b5563;
}

.action-btn.save-draft:hover {
    background: #4b5563;
    color: white;
}

/* Dark mode support */
body.dark-mode .action-btn.screenshot {
    background: #ea580c;
}

body.dark-mode .action-btn.screenshot:hover {
    background: #c2410c;
}

body.dark-mode .action-btn.send-to-chat {
    background: #16a34a;
}

body.dark-mode .action-btn.send-to-chat:hover {
    background: #15803d;
}

body.dark-mode .action-btn.open-tab {
    background: #1d4ed8;
}

body.dark-mode .action-btn.open-tab:hover {
    background: #1e40af;
}

body.dark-mode .action-btn.new-tab {
    background: #1d4ed8;
}

body.dark-mode .action-btn.new-tab:hover {
    background: #1e40af;
}

/* ==================== COLLABORATION UNDO/REDO TOAST ==================== */
.collab-undo-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    z-index: 9999;
    animation: collabUndoFadeInOut 2s ease forwards;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
}

@keyframes collabUndoFadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

body.dark-mode .collab-undo-toast {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Collaboration join divider - shown when user joins ongoing conversation */
.collab-join-divider {
    text-align: center;
    color: #94a3b8;
    font-size: 15px;
    padding: 4px 0;
    margin: 4px 0;
    font-style: italic;
}

body.dark-mode .collab-join-divider {
    color: #64748b;
}

/* ==================== Google Translate Widget Styles ==================== */
/* Hidden off-screen but accessible for programmatic control */

/* Hide intrusive elements (tooltips, popups, banner) */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-banner-frame,
body>.skiptranslate {
    display: none !important;
}

/* Prevent Google from shifting body down */
body {
    top: 0 !important;
}

/* Remove highlight effects on translated text */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* Google Translate element - hidden off-screen, accessed programmatically */
#google_translate_element {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Hide Google Translate loader/spinner and gadget elements */
.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-xl07Ob-lTBxed,
.VIpgJd-ZVi9od-vH1Gmf,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon,
#goog-gt-,
[id^="goog-gt"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==================== Header Language Selector ==================== */
.header-language-selector {
    position: relative;
    margin-left: auto;
    margin-right: 8px;
}

.header-language-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-language-btn:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.header-language-btn i:first-child {
    color: #3b82f6;
}

.header-language-btn i:last-child {
    font-size: 10px;
    color: #64748b;
    transition: transform 0.2s ease;
}

.header-language-btn.open i:last-child {
    transform: rotate(180deg);
}

.header-language-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.header-language-dropdown.hidden {
    display: none;
}

.header-language-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: none;
    border: none;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
}

.header-language-dropdown button:hover {
    background: #f1f5f9;
}

.header-language-dropdown button.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 500;
}

.header-language-dropdown button:first-child {
    border-radius: 7px 7px 0 0;
}

.google-translate-attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    border-top: 1px solid #e2e8f0;
    font-size: 10px;
    color: #94a3b8;
    background: #f8fafc;
    border-radius: 0 0 7px 7px;
}

.google-translate-attribution img {
    height: 12px;
}

/* Dark mode */
body.dark-mode .header-language-btn {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

body.dark-mode .header-language-btn:hover {
    background: #3f4f63;
    border-color: #64748b;
}

body.dark-mode .header-language-btn i:last-child {
    color: #94a3b8;
}

body.dark-mode .header-language-dropdown {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .header-language-dropdown button {
    color: #e2e8f0;
}

body.dark-mode .header-language-dropdown button:hover {
    background: #334155;
}

body.dark-mode .header-language-dropdown button.active {
    background: #1e3a5f;
    color: #60a5fa;
}

body.dark-mode .google-translate-attribution {
    background: #0f172a;
    border-color: #334155;
    color: #64748b;
}

/* ==================== MOBILE TOUCH TARGET & SAFE AREA FIXES ==================== */
@media (max-width: 768px) {
    .sidebar-resource-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    .view-toggle-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
    }

    .chat-input.bottom-position {
        bottom: max(60px, calc(60px + env(safe-area-inset-bottom))) !important;
    }

    .chat-footer-buttons {
        bottom: max(10px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .sidebar-resource-btn {
        min-height: 44px;
        padding: 10px 12px;
    }
}

/* ============================================
   EMBEDDED IFRAME MODE (Qualtrics, iMotions)
   Must be last for cascade priority
   ============================================ */
.embedded-iframe .sidebar {
    transform: translateX(0) !important;
}

.embedded-iframe .hamburger-btn {
    display: none !important;
}

/* Wide iframe (≥1024px): full sidebar, fix positioning for short iframes */
@media (min-width: 1024px) {
    .embedded-iframe .chat-input {
        left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
    }

    .embedded-iframe .chat-footer-buttons {
        left: var(--sidebar-width) !important;
    }

    .embedded-iframe .main-content {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
    }
}

/* Narrow iframe (<1024px): collapse sidebar to icons */
@media (max-width: 1023px) {
    .embedded-iframe .sidebar {
        width: var(--sidebar-collapsed-width) !important;
        overflow: hidden !important;
    }

    .embedded-iframe .sidebar .sidebar-agent-info,
    .embedded-iframe .sidebar .sidebar-agent-dot,
    .embedded-iframe .sidebar .sidebar-section-label,
    .embedded-iframe .sidebar .sidebar-setting-btn span,
    .embedded-iframe .sidebar .sidebar-language-select,
    .embedded-iframe .sidebar .sidebar-export-menu,
    .embedded-iframe .sidebar .sidebar-logo,
    .embedded-iframe .sidebar .sidebar-toggle {
        display: none !important;
    }

    .embedded-iframe .sidebar .sidebar-agent {
        justify-content: center;
        padding: 8px 0;
        overflow: hidden;
    }

    .embedded-iframe .sidebar .sidebar-agent-avatar {
        margin: 0;
        flex-shrink: 0;
    }

    .embedded-iframe .main-content {
        margin-left: var(--sidebar-collapsed-width) !important;
        width: calc(100% - var(--sidebar-collapsed-width)) !important;
    }

    .embedded-iframe .chat-input {
        left: var(--sidebar-collapsed-width) !important;
        width: calc(100% - var(--sidebar-collapsed-width)) !important;
    }

    .embedded-iframe .chat-footer-buttons {
        left: var(--sidebar-collapsed-width) !important;
    }
}