/* Cross-Platform Responsive Foundation */
*{
    -webkit-tap-highlight-color: transparent;
}.whiteboard-canvas,
canvas,
.no-callout{
    -webkit-touch-callout: none;
}button:focus:not(:focus-visible),
button:active{
    outline: none;
    box-shadow: none;
}:focus-visible{
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}body.dark-mode :focus-visible{
    outline-color: #60a5fa;
}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: 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;
}/* 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%;
}

@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;
    }
}.dark-mode .agent-suggestion{
    background: linear-gradient(135deg, #3b1c5f, #5b21b6);
    border-color: #a78bfa;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}.dark-mode .suggestion-text p{
    color: #dbeafe;
}.dark-mode .suggestion-dismiss{
    background: #3a3a3a;
    color: #9ca3af;
}.dark-mode .suggestion-dismiss:hover{
    background: #4d4d4d;
}.dark-mode .system-message{
    background: #1f1f1f;
    color: #9ca3af;
}.dark-mode .timeline-content{
    background: #1f1f1f;
    border-color: #3a3a3a;
}.dark-mode .timeline-title{
    color: #f3f4f6;
}.dark-mode .timeline-message{
    color: #d1d5db;
}.dark-mode .timeline-meta{
    border-top-color: #3a3a3a;
}.dark-mode .suggestion-reason{
    background: #141414;
    color: #d1d5db;
}.dark-mode .suggestion-accepted{
    background: #064e3b;
    color: #6ee7b7;
}.dark-mode .timeline-validation-summary{
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    border-color: #60a5fa;
}.dark-mode .timeline-validation-summary h4{
    color: #93c5fd;
}.dark-mode .stat-value{
    color: #f3f4f6;
}/* ===========================================
   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;
    height: 100dvh;
    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-x: hidden;
    overflow-y: visible;
}

@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: #f3f4f6;
}.sidebar.collapsed .sidebar-agent.active{
    background: #f3f4f6;
    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.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: 4px;
    flex-direction: column;
    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: flex;
    justify-content: center;
    padding: 4px;
}.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;
}/* Collapsed sidebar hides case study section */
.sidebar.collapsed #caseStudySelectorContainer{
    display: none;
}body.dark-mode #caseStudySelectorContainer{
    border-bottom-color: #3a3a3a;
}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;
}body.dark-mode .banner-title{
    color: #818cf8;
}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);
}body.dark-mode .banner-student-chip{
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(75, 85, 99, 0.5);
}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 */
    }
}/* 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: #1f1f1f;
    color: #93c5fd;
    border-color: #3b82f6;
}body.dark-mode .banner-btn.view-btn:hover{
    background: #3a3a3a;
}/* Dark mode for modal */
body.dark-mode .student-profile-modal .modal-content{
    background: #1f1f1f;
}body.dark-mode .student-profile-modal .modal-header{
    background: #141414;
    border-color: #3a3a3a;
}body.dark-mode .student-profile-modal .modal-header h3{
    color: #f9fafb;
}body.dark-mode .student-profile-modal .modal-close{
    background: #3a3a3a;
    color: #9ca3af;
}body.dark-mode .student-profile-modal .modal-close:hover{
    background: #4d4d4d;
    color: #f9fafb;
}body.dark-mode .student-profile-modal .student-detail-card{
    background: #141414;
    border-color: #3a3a3a;
}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 .extra-tag{
    background: #78350f;
    color: #fde68a;
}body.dark-mode .student-profile-modal .detail-section li{
    color: #d1d5db;
}body.dark-mode .student-profile-modal .modal-footer{
    background: #141414;
    border-color: #3a3a3a;
}/* 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;
    }
}/* 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: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .student-accommodation .accommodation-text{
    color: #e5e7eb;
}.sidebar-agent.active{
    /* Same light grey as the resource-row hover — one hover/active tint
       system-wide. Agent identity is carried by the status dot. */
    background: #f3f4f6;
    color: #1f2937;
}.sidebar-agent.active .sidebar-agent-name{
    font-weight: 400;
}/* Active dot carries the agent's own color (matches the avatar gradient),
   indicating which agent is working; colors apply in light and dark mode */
.sidebar-agent.active .sidebar-agent-dot{
    animation: pulse-dot 2s infinite;
}.sidebar-agent[data-agent="instructionalPlanning"].active .sidebar-agent-dot{ background: #2563EB; }.sidebar-agent[data-agent="openingLesson"].active .sidebar-agent-dot{ background: #10B981; }.sidebar-agent[data-agent="explicitInstruction"].active .sidebar-agent-dot{ background: #8B5CF6; }.sidebar-agent[data-agent="guidedInquiry"].active .sidebar-agent-dot{ background: #F97316; }.sidebar-agent[data-agent="closingLesson"].active .sidebar-agent-dot{ background: #F43F5E; }.sidebar-agent[data-agent="dataDecisions"].active .sidebar-agent-dot{ background: #64748B; }

@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: #4d4d4d;
}.dark-mode .workflow-progress-container{
    background: linear-gradient(135deg, #1e3a5f 0%, #1e3a5f 100%);
    border-color: #3b82f6;
}.dark-mode .workflow-progress-label .phase-name{
    color: #7dd3fc;
}.dark-mode .workflow-progress-label .phase-progress{
    color: #94a3b8;
}.dark-mode .workflow-progress-bar{
    background: #334155;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}.dark-mode .switch-suggestion-content{
    background: #1f1f1f;
    border-color: #3a3a3a;
}.dark-mode .switch-suggestion-header{
    color: #f3f4f6;
}.dark-mode .switch-suggestion-message{
    color: #d1d5db;
}.dark-mode .switch-suggestion-actions .switch-stay{
    border-color: #4d4d4d;
    color: #9ca3af;
}.dark-mode .switch-suggestion-actions .switch-stay:hover{
    background: #3a3a3a;
}.dark-mode .system-message.agent-switched{
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border-color: #10b981;
    color: #a7f3d0;
}/* Sidebar resource icons — plain outline SVGs with no tile background, so they
   visually match the icons that appear at the top of each sub-app when opened. */
.sidebar-resource-btn .sidebar-resource-icon{
    width: 20px;
    height: 20px;
    color: #4b5563;
    flex-shrink: 0;
    transition: color 0.15s ease;
}body.dark-mode .sidebar-resource-btn .sidebar-resource-icon{
    color: #9ca3af;
}body.dark-mode .sidebar-resource-btn:hover .sidebar-resource-icon{
    color: #60a5fa;
}/* Progress display items - display-only, not clickable */
.sidebar-resource-btn.progress-display{
    cursor: default;
    pointer-events: none;
}/* Analytics button icon - grey default, blue hover */
#analyticsButton i{
    color: #4b5563;
    transition: color 0.15s;
}.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;
}/* 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: #60a5fa;
}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;
}body.dark-mode .sidebar-resource-link{
    color: #4d4d4d;
}body.dark-mode .sidebar-resource-link:hover{
    background: #3a3a3a;
    color: #60a5fa;
}/* Collapsed sidebar - hide resource links */
.sidebar.collapsed .sidebar-resource-link{
    display: none;
}.sidebar.collapsed .sidebar-resource-item{
    justify-content: center;
}body.dark-mode .sidebar-settings-section{
    border-top-color: rgba(255, 255, 255, 0.06);
}/* AI Toggle active state - blue icon when enabled */
.sidebar-icon-btn#aiRecommendToggle.active{
    color: #3b82f6;
    background: none;
}.sidebar-icon-btn#aiRecommendToggle.active:hover{
    color: #3b82f6;
    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: #3b82f6;
    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: #3b82f6;
    background: none;
}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;
}.language-menu-popup.hidden{
    display: none;
}.language-menu-popup button.active{
    background: #f3f4f6;
    color: #374151;
}.language-menu-popup button.active i{
    color: #374151;
}.export-menu-popup.hidden{
    display: none;
}/* Responsive iframe height so mobile users don't see a tall iframe trapping scroll */
@media (max-width: 640px){
    .manipulative-card iframe,
    .guide-card iframe,
    .simulation-card iframe {
        min-height: 300px;
    }
}/* Minimum 14px body text and 44px tap targets on card actions (WCAG 2.5.5, 1.4.4) */
.manipulative-card-head,
.guide-card-head,
.simulation-card-head,
.slide-card-head,
.vocab-card-head,
.oer-card-head,
.manipulative-desc,
.guide-desc,
.simulation-desc,
.slide-unit,
.vocab-def{
    font-size: max(14px, 0.875rem);
    line-height: 1.45;
}body.dark-mode .guide-card{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .guide-card-head{
    color: #f9fafb;
}body.dark-mode .guide-category{
    background: #1e3a8a;
    color: #dbeafe;
}body.dark-mode .guide-desc{
    color: #d1d5db;
}body.dark-mode .guide-open{
    color: #60a5fa;
}body.dark-mode .manipulative-card{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .manipulative-card-head{
    color: #f9fafb;
}body.dark-mode .manipulative-grade{
    background: #3a3a3a;
    color: #d1d5db;
}body.dark-mode .manipulative-desc{
    color: #d1d5db;
}body.dark-mode .manipulative-open{
    color: #60a5fa;
}body.dark-mode .simulation-card,
body.dark-mode .slide-card,
body.dark-mode .oer-card{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .vocab-card{
    background: #422006;
    border-color: #92400e;
}body.dark-mode .simulation-card-head,
body.dark-mode .slide-card-head,
body.dark-mode .vocab-card-head,
body.dark-mode .oer-card-head{
    color: #f9fafb;
}body.dark-mode .simulation-provider,
body.dark-mode .slide-grade,
body.dark-mode .vocab-grade,
body.dark-mode .oer-type{
    background: #1e3a8a;
    color: #dbeafe;
}body.dark-mode .simulation-desc,
body.dark-mode .slide-unit,
body.dark-mode .vocab-def{
    color: #d1d5db;
}body.dark-mode .simulation-open,
body.dark-mode .slide-open,
body.dark-mode .oer-open{
    color: #60a5fa;
}body.dark-mode .unified-search-close{
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}body.dark-mode .unified-search-close:hover{
    background: #334155;
    color: #f8fafc;
}.resources-modal-content:has(.unified-search-results:not(.hidden)) .resources-modal-grid{
    display: none;
}body.dark-mode .search-result-group h4{
    color: #e5e7eb;
}body.dark-mode .search-result-type-badge{
    background: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .search-result-count{
    color: #9ca3af;
}body.dark-mode .unified-search-results{
    background: #0f172a;
    border-top-color: #334155;
}body.dark-mode .search-result-item{
    background: #1e293b;
    border-color: #475569;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}body.dark-mode .search-result-item:hover{
    background: #334155;
    border-color: #93c5fd;
}body.dark-mode .search-result-item-title{
    color: #f9fafb;
}body.dark-mode .search-result-item-meta{
    color: #9ca3af;
}body.dark-mode .search-result-item-snippet{
    color: #d1d5db;
}body.dark-mode .math-visual svg rect[fill="#ffffff"],
body.dark-mode .math-visual svg path[fill="#ffffff"]{
    fill: #1f1f1f;
}body.dark-mode .math-visual svg text,
body.dark-mode .math-visual svg line[stroke="#1f2937"],
body.dark-mode .math-visual svg rect[stroke="#1f2937"],
body.dark-mode .math-visual svg path[stroke="#1f2937"]{
    stroke: #e5e7eb;
    fill: #e5e7eb;
}.sidebar-overlay.visible{
    opacity: 1;
    visibility: visible;
}/* Dark Mode Sidebar */
body.dark-mode .sidebar{
    background: #151515;
    border-right: 1px solid #262626;
}/* Dark mode sidebar header - no border */

body.dark-mode .sidebar-logo{
    color: #60a5fa;
}body.dark-mode .sidebar-toggle{
    color: #d1d5db;
}body.dark-mode .sidebar-toggle:hover{
    background: #333;
    color: #ffffff;
}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: #2a2a2a;
    color: #e5e7eb;
}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: #4d4d4d;
}body.dark-mode .hamburger-btn{
    color: #e5e7eb;
}body.dark-mode .hamburger-btn:hover{
    color: #e5e7eb;
}body.dark-mode .hamburger-btn i{
    color: inherit;
}/* 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%;
    }}/* 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: 100dvh;
    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;
}/* Wrap the universal reset AND the bare-element header rule in a low-priority
   cascade layer so Tailwind v4 utilities (which live in @layer utilities) can
   override margin/padding/justify-content when sub-apps like manipulatives load
   both this file and their own Tailwind CSS. Without these layers, the
   unlayered selectors beat every layered .p-X / .m-X / .justify-* utility
   regardless of selector specificity. The main app doesn't use a <header>
   element, so the bare `header` rule was only affecting sub-apps anyway. */
@layer reset{
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    header {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.2rem;
    }
}.export-menu.show{
    display: flex;
}/* 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;
}h1{
    font-family: "Bubblegum Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #276FFF;
    font-size: var(--font-size-3xl);
    margin-top: 5px;
    text-align: center;
}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;
}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;
}/* 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;
}/* 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;
}/* Mobile browser chrome shrinks the visual viewport — dvh follows it. */
@supports (height: 100dvh){
    .conversation-container {
        height: calc(100dvh - 80px);
    }
}


@media (min-width: 1024px) {/* Desktop header and footer sizing */
    h1{
        font-size: var(--font-size-3xl);
    }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 4px;
        max-width: 100%;
        margin: 0;
    }

    .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: 4px 2px;
        margin: 0;
    }

    .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: 84px !important;
        bottom: 72px !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .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 */
    }
}body.dark-mode .chat-icons-expandable .icons-expand-trigger{
    color: #94a3b8;
}body.dark-mode .chat-icons-expandable .icons-expand-trigger:hover{
    color: #60a5fa;
}.inline-toolbar-btn.active i,
.inline-toolbar-btn#record i.active{
    color: #3b82f6;
    opacity: 1;
}/* 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;
}/* 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;
}body.dark-mode .input-group{
    background-color: #2b2b2b;
    border: 1.5px solid #444444;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}body.dark-mode .input-group:focus-within{
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25), 0 1px 2px rgba(0, 0, 0, 0.25);
    outline: none;
}body.dark-mode .input-group textarea{
    color: #ffffff;
}body.dark-mode .chat-input .placeholder{
    background: none !important;
    background-color: transparent !important;
    color: white;
    border: none !important;
    box-shadow: none !important;
}.chat-input #stop i.active{
    color: #276FFF !important;
}body.dark-mode .chat-input #stop i.inactive{
    color: #d1d5db !important;
}/* Chat input placeholder — brighter in dark mode (the default ~#757575 is too dim). */
body.dark-mode .input-group textarea::placeholder,
body.dark-mode #chatInput::placeholder{
    color: #b8b8b8 !important;
    opacity: 1 !important;
}body.dark-mode .chat-input #stop i.active{
    color: #FFCC02 !important;
}/* AI guidance-mode pill — states the current mode (auto / on-demand / off) on
   the chat input, replacing the old cycling wand whose state was hidden. */
.ai-mode-pill-wrap{
    position: relative;
    display: inline-flex;
}.ai-mode-menu.hidden{
    display: none;
}/* Scoped under .ai-mode-menu so these win over the generic
   `.chat-input button` rule (0,1,1) that would otherwise force 2xs font + 8px pad. */
.ai-mode-menu .ai-mode-item{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    min-height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    color: #374151;
    transition: background 0.15s ease;
}body.dark-mode .ai-mode-pill{
    background: transparent;
    border: none;
    color: #d1d5db;
}body.dark-mode .ai-mode-pill:hover{
    background: #2a2a2a;
}body.dark-mode .ai-mode-pill.ai-mode-off{
    color: #9ca3af;
}body.dark-mode .ai-mode-menu{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .ai-mode-item:hover{
    background: #2a2a2a;
}body.dark-mode .ai-mode-item-title{
    color: #f3f4f6;
}body.dark-mode .ai-mode-item-desc{
    color: #9ca3af;
}body.dark-mode .ai-mode-item[aria-checked="true"]{
    background: #3a3a3a;
}/* 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;
}/* 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: #a78bfa;
}body.dark-mode #aiGuidanceToggle.ai-off{
    color: #d1d5db;
}body.dark-mode #aiGuidanceToggle.ai-minimal{
    color: #60a5fa;
    /* Light theme blue for dark mode */
}body.dark-mode #aiGuidanceToggle.ai-full{
    color: #a78bfa;
    /* Light AI purple for dark mode */
}body.dark-mode .reference-card{
    background: #1e3a5f;
    border-color: #3b82f6;
}body.dark-mode .reference-card-title{
    color: #93c5fd;
}body.dark-mode .reference-card-source{
    color: #9ca3af;
}.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-btn:disabled,
.history-btn.disabled{
    opacity: 0.35;
    cursor: not-allowed;
}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;
}body.dark-mode .button-row button:hover,
body.dark-mode .input-content>button:hover{
    background: none;
    color: #60a5fa;
}/* 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;
}/* Dark mode — !important required: the light-mode base rule uses !important
   (Google Translate guard) and wins otherwise, leaving white chips with white text */
body.dark-mode .recommendation-chip{
    background: #2d2d2d !important;
    border-color: #4d4d4d !important;
    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: #4d4d4d !important;
}/* Responsive recommendation chips.
   Mobile (<=768px): WRAP to as many rows as needed so every option is visible
   without horizontal scrolling — chips stagger neatly, centered.
   Desktop (>=769px): keep centered wrapped pills, capped to ~2 rows. */
@media (max-width: 768px){
    /* Higher specificity than `.chat-input button { padding: 8px 8px }` so the
       compact padding actually wins on chips inside the input area. */
    .recommendation-chips .recommendation-chip {
        padding: 5px 14px;
        line-height: 1.2;
        flex: 0 1 auto;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .recommendation-chips {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 8px;
        padding-bottom: 2px;
        max-height: none;
    }
}/* Desktop: keep centered wrapped pills but cap to ~2 rows (scroll for more). */
@media (min-width: 769px){
    .recommendation-chips {
        max-height: 92px;
        overflow-y: auto;
    }
}/* Dark mode */
body.dark-mode .custom-topic-input{
    background: transparent;
    border-color: #4d4d4d;
    color: #f3f4f6;
}body.dark-mode .custom-topic-input::placeholder{
    color: #9a9a9a;
}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;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}/* 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: #1f1f1f;
}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;
    }
}.magic-wand-menu.visible{
    display: block;
}/* 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: #1f1f1f;
    border-color: #3a3a3a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}body.dark-mode .magic-wand-menu-item{
    color: #e5e7eb;
}body.dark-mode .magic-wand-menu-item:hover{
    background: #3a3a3a;
}body.dark-mode .magic-wand-menu-item i{
    color: #FBBF24;
}.fill-in-blank.error{
    border-color: #ef4444;
    background: #fef2f2;
}body.dark-mode .fill-in-template{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .fill-in-blank{
    background: #3a3a3a;
    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);
}body.dark-mode .embed-card{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .embed-card-badge,
body.dark-mode .embed-card .guide-desc,
body.dark-mode .embed-card .manipulative-desc,
body.dark-mode .embed-card .simulation-desc{
    color: #cbd5e1;
}body.dark-mode .inline-fillin-send{
    background: #3b82f6;
}body.dark-mode .inline-fillin-send:hover{
    background: #60a5fa;
}body.dark-mode .inline-fillin-card{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .fillin-badge{
    color: #cbd5e1;
}body.dark-mode .inline-fillin-sentence{
    color: #e5e7eb;
}body.dark-mode .inline-fillin-sentence strong{
    color: #cbd5e1;
}/* Tooltip visible on keyboard focus, not just mouse hover (WCAG 1.4.13) */
.inline-fillin-icons [data-tooltip]:focus-visible::before,
.input-group [data-tooltip]:focus-visible::before,
.media-options [data-tooltip]:focus-visible::before{
    opacity: 1;
    visibility: visible;
}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{
    color: #60a5fa;
}body.dark-mode .inline-fillin-icons .inline-ai-assist:hover{
    color: #a78bfa;
}/* Chevron consistency — unified across app: button box, glyph size, touch target */
.icons-expand-trigger,
.expand-btn,
.iframe-input-btn.chevron-btn{
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}body.dark-mode .inline-fillin-icons .icons-expand-trigger{
    color: #cbd5e1;
}body.dark-mode .inline-fillin-icons .icons-expand-trigger:hover{
    color: #60a5fa;
}body.dark-mode .inline-autocomplete-loading{
    color: #4d4d4d;
}/* 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.filled{
    font-style: normal;
    color: #1e293b;
    border-color: #3b82f6;
}/* Placeholder styling — unified with template inputs (no italic, same color) */
.inline-fillin-input::placeholder{
    color: #9ca3af;
    font-style: normal;
    font-size: var(--font-size-sm);
}/* 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 */
}/* 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 */
}/* 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;
}/* ============================================
   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.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;
}

@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;
}body.dark-mode .stt-ghost-text{
    color: #9a9a9a;
}body.dark-mode .stt-interim{
    color: #aaa;
}body.dark-mode .stt-textarea-ghost{
    color: #9a9a9a;
}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.visible{
    display: flex;
}/* Button styling for inline menu - matches main chat */
body.dark-mode .inline-media-menu{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .inline-media-menu .media-option{
    color: #e5e7eb;
}body.dark-mode .inline-media-menu .media-option:hover{
    background: #3a3a3a;
}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;
}body.dark-mode .dropdown-actions-divider{
    background: #3a3a3a;
}body.dark-mode .dropdown-action-btn{
    color: #94a3b8;
}body.dark-mode .dropdown-action-btn:hover{
    background: #334155;
    color: #e2e8f0;
}body.dark-mode .inline-image-ref{
    background: #1e3a5f;
    border-color: #3b82f6;
    color: #93c5fd;
}/* 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;
}body.dark-mode .cell-actions{
    background: rgba(30, 41, 59, 0.9);
}.template-ai-dropdown.visible{
    display: block;
}/* 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;
}body.dark-mode .cell-image-thumbs{
    background: #1e293b;
}body.dark-mode .cell-image-thumb{
    border-color: #475569;
}body.dark-mode .cell-resource-chip{
    background: #1e293b;
    border-color: #334155;
    color: #bfdbfe;
}body.dark-mode .cell-resource-chip .chip-icon{
    color: #60a5fa;
}body.dark-mode .cell-resource-chip .chip-remove{
    color: #94a3b8;
}body.dark-mode .cell-resource-chip .chip-remove:hover,
body.dark-mode .cell-resource-chip .chip-remove:focus-visible{
    background: #334155;
    color: #e2e8f0;
}.inline-autocomplete.visible{
    display: block;
}.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;
}body.dark-mode .tool-suggestions{
    background: #14532d;
    border-color: #166534;
}body.dark-mode .tools-label{
    color: #86efac;
}body.dark-mode .tool-suggestion-btn{
    background: #1f1f1f;
    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;
}/* 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);
    }
}/* 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;
}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.dark-mode .chat-input.bottom-position{
    background: linear-gradient(to bottom, rgba(15,23,42,0) 0, #0f172a 24px) !important;
}/* Mobile welcome state: bound the welcome block between the toolbar and footer and
   stop the unbounded translateY(-50%) centering. On short viewports (iOS Safari address
   bar shown, or keyboard open) the centered block used to overflow and the recommendation
   chips collided with the input box / toolbar. Anchoring top + bottom with internal scroll
   keeps every element reachable and non-overlapping at any height. */
@media (max-width: 768px){
    .chat-input:not(.bottom-position) {
        top: 84px !important;
        bottom: 72px !important;
        transform: none !important;
        height: auto !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Never let the greeting and chips shrink/compress into each other in the
       fixed-height flex column — each keeps its natural height, column scrolls. */
    .chat-input:not(.bottom-position) .welcome-placeholder,
    .chat-input:not(.bottom-position) .recommendation-chips-container,
    .chat-input:not(.bottom-position) .recommendation-chips {
        flex: 0 0 auto;
    }
    .chat-input:not(.bottom-position) .welcome-placeholder {
        margin-bottom: 6px;
        padding: 6px 0;
    }
}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);
        height: calc(100dvh - 260px);
    }

    body.large-text .conversation-container {
        height: calc(100vh - 280px);
        height: calc(100dvh - 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);
        height: calc(100dvh - 180px);
    }

    body.large-text .conversation-container {
        height: calc(100vh - 200px);
        height: calc(100dvh - 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);
}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;
}#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;
}body.dark-mode #output button#stop i.inactive{
    color: #d1d5db !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;
}/* Resource embeds and worksheet cards span the full chat-input width.
   body { overflow-x: hidden } blocks viewport-break-out, so instead we:
   1. Remove max-width from conversation-container via :has()
   2. Escape both paddings: #output (20px) + conversation-container (15px) = 35px each side
   Width formula: 100% of #output content + 2×35px = full chat-input width. */
:root{ --scrollbar-width: 0px; }#output .assistant:has(.worksheet-card),
#output .assistant:has(.resource-embed-container),
#output .message.assistant-message:has(.worksheet-card),
#output .message.assistant-message:has(.resource-embed-container),
#output > .resource-embed-container,
#output > .worksheet-card{
    display: block;
    width: calc(100% + 70px);
    max-width: calc(100% + 70px);
    margin-left: -35px;
    border-radius: 12px;
    padding: 0;
    box-sizing: border-box;
}#output .assistant > .worksheet-card,
#output .assistant > .resource-embed-container,
#output .message.assistant-message .worksheet-card,
#output .message.assistant-message .resource-embed-container{
    width: 100%;
    max-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;
}#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;
}.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;
}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;
}a{
    text-decoration: none;
    color: #276FFF;
    font-size: var(--font-size-sm);
}.hidden{
    display: none;
}/* 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: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .media-options::before{
    border-bottom-color: #3a3a3a;
}body.dark-mode .media-options::after{
    border-bottom-color: #1f1f1f;
}body.dark-mode .media-options button.media-option{
    color: #e5e7eb;
}body.dark-mode .media-options button.media-option:hover{
    background: #3a3a3a;
}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 */
}.hidden{
    display: none;
}body.dark-mode .chat-input-content{
    background-color: transparent;
    color: #ffffff;
    border: none;
}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;
}/* Hover-definition markup inside chat output (.dfn = "definition").
   Two flavors:
   - Plain .dfn: pedagogical acronyms (AS, Q/R/F, CRA, IEP, …) — gray underline
   - .dfn.dfn-ccssm: CCSSM math-content vocabulary — blue underline so teachers
     can tell at a glance "this is official standards vocab" vs. COLAB pedagogy
     conventions. Required by the NGA Center / CCSSO public license to keep
     attribution visible at the point of display.
   Inherits the [data-tooltip] hover popup. */
abbr.dfn,
span.dfn{
    text-decoration: underline dotted;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: help;
    font-variant: inherit;
}body.dark-mode abbr.dfn.dfn-ccssm,
body.dark-mode span.dfn.dfn-ccssm{
    text-decoration-color: #60a5fa;
}[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: #3a3a3a;
    color: #ffffff;
    border-color: #4d4d4d;
}/* 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 above (footer is at bottom of sidebar) */
.sidebar:not(.collapsed) .sidebar-settings-row [data-tooltip]:before{
    display: block;
    left: 50%;
    top: auto;
    bottom: 100%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-bottom: 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;
}.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 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;
}.math-input-result.active{
    display: flex;
}.math-input-toolbar button.clear{
    background-color: #f44336;
    color: white;
}.math-input-toolbar button.cancel{
    background-color: #9e9e9e;
    color: white;
}.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 button.insert{
    background-color: #4CAF50;
    color: white;
}.token{
    display: inline-block;
    padding: 0;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}.token:hover{
    background-color: #fcfcfc;
}.token-edit-button.done{
    background-color: #4CAF50;
    color: white;
    font-size: 0.9em;
}.user,
.assistant{
    white-space: pre-wrap;
    word-break: break-word;
}.dark-mode .typing-indicator{
    background: #2a2a2a;
}

@keyframes typing {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

@keyframes wave-animation {

    0%,
    100% {
        transform: scaleY(0.5);
        opacity: 0.5;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}.dark-mode .extraction-status{
    color: #9ca3af;
}.dark-mode .extraction-icon{
    color: #4d4d4d;
}.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;
}.modal-overlay.hidden{
    display: none;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}.workflow-btn.active{
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}.human-loop-btn.active{
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}.dark-mode .human-interrupt-panel{
    background: #1f1f1f;
    color: #e5e7eb;
}.dark-mode .interrupt-header{
    border-bottom-color: #3a3a3a;
}.dark-mode .interrupt-header span{
    color: #e5e7eb;
}.dark-mode .interrupt-query{
    color: #9ca3af;
}.dark-mode .modify-input{
    background: #3a3a3a;
    color: #e5e7eb;
    border-color: #4d4d4d;
}.dark-mode .modify-input:focus{
    border-color: #60a5fa;
}.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);
}/* Dark mode for workflow progress */
body.dark-mode .workflow-progress-modal .modal-body{
    background: #1f1f1f;
}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: #3a3a3a;
}body.dark-mode .workflow-summary{
    border-top-color: #3a3a3a;
}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);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}.dark-mode .graph-instructions .workflow-note{
    border-top-color: #3a3a3a;
    color: #9ca3af;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}.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-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: #1f1f1f;
    border-color: #3a3a3a;
}.dark-mode .agent-card:hover{
    border-color: #4d4d4d;
}.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: #141414;
    border-left-color: #3a3a3a;
}.dark-mode .panel-header{
    background: #1f1f1f;
    border-bottom-color: #3a3a3a;
}.dark-mode .panel-header h3{
    color: #f3f4f6;
}.dark-mode .thought-step{
    background: #1f1f1f;
}.dark-mode .thought-content{
    color: #d1d5db;
}/* Dark mode - Modal and Timeline */
.dark-mode .modal-container{
    background: #1f1f1f;
    color: #f3f4f6;
}.dark-mode .modal-header{
    background: linear-gradient(to right, #1f1f1f, #141414);
    border-bottom-color: #3a3a3a;
}.dark-mode .modal-header h2{
    color: #f3f4f6;
}.dark-mode .conversation-timeline{
    background: #141414;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}.dark-mode .timeline-header{
    background: linear-gradient(to right, #1f1f1f, #141414);
    border-bottom-color: #3a3a3a;
}.dark-mode .timeline-header h3{
    color: #f3f4f6;
}.dark-mode .timeline-count{
    background: #3a3a3a;
    color: #e5e7eb;
}.dark-mode .timeline-card{
    background: #1f1f1f;
}.dark-mode .timeline-card:hover{
    background: #3a3a3a;
    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: #3a3a3a;
}.dark-mode .timeline-welcome{
    color: #4d4d4d;
}.dark-mode .graph-container{
    background: #1f1f1f;
}.dark-mode .graph-instructions{
    background: rgba(31, 41, 55, 0.95);
    border-color: #3a3a3a;
    color: #9ca3af;
}.dark-mode .graph-instructions h4{
    color: #f3f4f6;
}.dark-mode .workflow-btn{
    background: #1f1f1f;
    border-color: #3a3a3a;
    color: #e5e7eb;
}.dark-mode .workflow-btn:hover{
    background: #3a3a3a;
    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, #3b82f6 0%, #1e40af 100%);
}.dark-mode .workflow-mode-toggle.auto-mode{
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}.dark-mode .workflow-status{
    background: #3a3a3a;
    color: #e5e7eb;
}.dark-mode .workflow-status.executing{
    background: #78350f;
    color: #fde68a;
}.dark-mode .workflow-status.completed{
    background: #064e3b;
    color: #a7f3d0;
}.dark-mode .workflow-status.paused{
    background: #831843;
    color: #fbcfe8;
}body.dark-mode .token:hover{
    background-color: #3a3a3a;
}body.dark-mode .token-edit-container{
    background: #1f1f1f;
}body.dark-mode .token-edit-input{
    background: #141414;
    border-color: #4d4d4d;
    color: #f3f4f6;
}body.dark-mode .export-btn{
    background: #1f1f1f;
    border-color: #4d4d4d;
    color: #d1d5db;
}body.dark-mode .export-btn:hover{
    background: #3a3a3a;
    color: #f3f4f6;
    border-color: #9a9a9a;
}.dark-mode .close-modal{
    color: #9ca3af;
}.dark-mode .close-modal:hover{
    color: #ef4444;
}/* 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);
    }
}/* Standard Responsive Design */
@media (max-width: 1200px){
    .chain-of-thought-panel {
        width: 350px;
    }
}/* Responsive Design Fixes for Math Tutor */

/* ============================================
   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);
    }
}/* ============================================
   CONVERSATION CONTAINER & OUTPUT
   ============================================ */

/* Fix conversation container height calculation */
@media (max-width: 768px){
    .conversation-container {
        height: calc(100vh - 200px);
        height: calc(100dvh - 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) {/* Mobile header and footer sizing */
    h1{
        font-size: var(--font-size-2xl);
    }footer{
        font-size: var(--font-size-2xs);
        padding: 5px 8px;
    }}/* ============================================
   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;
    }
}/* 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;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-sm);
    color: #4b5563;
    white-space: normal;
    transition: left var(--sidebar-transition), opacity 0.3s ease;
    max-width: calc(100vw - var(--sidebar-width, 0));
}

@media (max-width: 1023px) {footer{
        left: 0;
        max-width: 100vw;
        white-space: normal;
    }}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;
}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;
        height: 100dvh;
        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;
    }
}/* ============================================
   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);
        height: calc(100dvh - 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 #output{
        padding: 10px 8px 110px 8px;
    }}/* ============================================
   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: 4px 2px;
        margin: 0;
        width: 100%;
    }

    .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: 100%;
        padding: 8px 4px;
    }

    /* Fix for Android browser address bar */
    #output {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 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: 100%;
        max-width: 100%;
    }

    .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: 100%;
        max-width: 100%;
    }

    .modal-container {
        width: 90%;
        max-width: 700px;
    }
}/* 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: 100dvh;
        min-height: calc(var(--vh, 1vh) * 100);
        min-height: -webkit-fill-available;
    }

    .conversation-container {
        max-height: calc(100vh - 150px);
        max-height: calc(100dvh - 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);
        height: calc(100dvh - 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: 6px 10px;
        font-size: 1rem;
        gap: 6px;
    }

    .view-toggle-btn span {
        display: inline;
        font-size: 1rem;
    }

    .view-toggle-btn i {
        font-size: 1rem;
    }
}.resource-sidebar.open{
    left: 0;
}/* Dark mode for sidebar */
body.dark-mode .resource-sidebar{
    background-color: #1f1f1f;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}body.dark-mode .sidebar-header{
    background: #151515;
    border-bottom-color: #2a2a2a;
}body.dark-mode .sidebar-header h3{
    color: #f3f4f6;
}body.dark-mode .resource-item{
    background: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .resource-item:hover{
    background: #4d4d4d;
}body.dark-mode .suggestion-chip{
    background: #1e3a8a;
    border-color: #1e40af;
    color: #bfdbfe;
}body.dark-mode .suggestion-chip:hover{
    background: #1e40af;
}/* Responsive embed header — stack title and actions on narrow screens */
@media (max-width: 480px){
    .resource-embed-header {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .embed-header-actions {
        justify-content: flex-end;
    }
    /* Keep the worksheet toolbar on a single row even on narrow screens —
       column-stacking the badge + 3 action buttons wastes ~87px of vertical
       space, and 3 worksheet cards in one message magnify it threefold.
       !important needed because the base .worksheet-toolbar rule (later in
       this stylesheet, same specificity) sets flex-wrap: wrap which causes
       the toolbar to grow to 4 lines on narrow viewports. */
    .worksheet-toolbar {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 6px 8px !important;
    }
    .worksheet-toolbar-actions {
        justify-content: flex-end;
        gap: 2px;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }
    /* Hide button text labels on mobile — keep icons + tooltips only.
       Print / Word / Close still readable from icon + aria-label.
       !important required because base .worksheet-btn rule comes later in
       source and would otherwise override these. */
    .worksheet-btn {
        font-size: 0 !important;
        padding: 6px 8px !important;
        gap: 0 !important;
    }
    .worksheet-btn i {
        font-size: 14px !important;
    }
    .worksheet-type-badge {
        font-size: var(--font-size-xs);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
    }
}/* Speaker-button tooltip: place ABOVE the button when the message contains
   worksheet cards. Default below-position gets clipped at the bottom of #output
   when the assistant message is tall (3 stacked worksheet cards = ~600px). */
#output .message.assistant-message:has(.worksheet-card) > .message-speaker-btn[data-tooltip]::before,
#output .message.assistant-message:has(.resource-embed-container) > .message-speaker-btn[data-tooltip]::before{
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 5px;
}body.dark-mode .resource-embed-container{
    background: #1e293b;
    border-color: #334155;
}body.dark-mode .resource-embed-header{
    background: #0f172a;
    border-bottom-color: #334155;
}body.dark-mode .resource-embed-iframe{
    background: #0f172a;
}.welcome-placeholder.hidden{
    display: none;
}/* Defense in depth — if ANY assistant message landed in the chat output, hide
   the welcome placeholder. Covers state-restore, cache, and race-condition
   edge cases where the JS hide-step in sendMessage might not have run.
   IMPORTANT: do NOT hide recommendation chips here — they're supposed to
   appear AFTER each assistant response as context-specific quick replies. */
body:has(#output .assistant-message) .welcome-placeholder,
body:has(#output .assistant) .welcome-placeholder{
    display: none !important;
}body.dark-mode .welcome-text{
    color: #e5e7eb;
}.message-speaker-btn.active{
    color: #276FFF;
    /* Blue when playing — matches #stop placeholder speaker */
}/* Dark mode message speaker button */
body.dark-mode .message-speaker-btn{
    color: #949494;
}body.dark-mode .message-speaker-btn:hover{
    color: #d1d5db;
}body.dark-mode .message-translate-btn{ color: #949494; }body.dark-mode .message-translate-btn:hover{ color: #93c5fd; }/* Surface the translate button on hover OR when the bubble is the most recent */
#output .message.assistant-message:hover .message-translate-btn[style*=""],
#output .message.assistant-message:last-of-type .message-translate-btn[style*=""]{
    display: inline-block;
}body.dark-mode .message-speaker-btn.active{
    color: #276FFF;
}/* 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;
}/* Embedded resource/worksheet/canvas messages: pin TTS button to the bottom
   right of the embed. Match both legacy `.assistant-message` and the actual
   `.assistant` class used by current AI bubbles. */
#output .message.assistant-message:has(.resource-embed-container) > .message-speaker-btn,
#output .message.assistant-message:has(.worksheet-card) > .message-speaker-btn,
#output .message.assistant-message:has(.ai-canvas) > .message-speaker-btn,
#output .assistant:has(.resource-embed-container) > .message-speaker-btn,
#output .assistant:has(.worksheet-card) > .message-speaker-btn,
#output .assistant:has(.ai-canvas) > .message-speaker-btn{
    display: inline-flex;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 16px;
}#output .message.assistant-message:has(.resource-embed-container),
#output .message.assistant-message:has(.worksheet-card),
#output .message.assistant-message:has(.ai-canvas),
#output .assistant:has(.resource-embed-container),
#output .assistant:has(.worksheet-card),
#output .assistant:has(.ai-canvas){
    display: flex;
    flex-direction: column;
    align-items: stretch;
}/* ============================================
   LOADER & SPINNER
   ============================================ */
.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    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);
}body.dark-mode .chat-attachment-item.file-attachment{
    background: #3a3a3a;
    border-color: #4d4d4d;
}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;
}body.dark-mode .user-message-file{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #e5e7eb;
}/* Dark mode for attachments */
body.dark-mode .chat-attachment-item{
    border-color: #3a3a3a;
    background: #1f1f1f;
}body.dark-mode .chat-attachment-item:hover{
    border-color: #60a5fa;
}.resource-panel.open{
    right: 0;
}.resource-tab.active{
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: #ffffff;
}.resource-tab-content.active{
    display: block;
}.resource-item.selected{
    border-color: #9ca3af;
    background: #f3f4f6;
}body.dark-mode .resource-item-grade{
    color: #9ca3af;
}/* Dark mode for action buttons */
body.dark-mode .resource-action-btn{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #9ca3af;
}body.dark-mode .resource-action-btn:hover{
    color: white;
}/* Dark Mode for Resource Panel */
body.dark-mode .resource-panel{
    background: #1f1f1f;
    border-left-color: #3a3a3a;
}body.dark-mode .resource-panel-header{
    background: #141414;
    border-bottom-color: #3a3a3a;
}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: #3a3a3a;
    color: #f9fafb;
}body.dark-mode .resource-panel-tabs{
    background: #141414;
    border-bottom-color: #3a3a3a;
}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: #1f1f1f;
}body.dark-mode .resource-search input{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #f9fafb;
}body.dark-mode .resource-search input:focus{
    border-color: #60a5fa;
    background: #1f1f1f;
}body.dark-mode .resource-search i{
    color: #4d4d4d;
}body.dark-mode .resource-item{
    background: #3a3a3a;
    border-color: #4d4d4d;
}body.dark-mode .resource-item:hover{
    background: #3a3a3a;
    border-color: #9a9a9a;
}body.dark-mode .resource-item-icon{
    color: #60a5fa;
}body.dark-mode .resource-item-name{
    color: #f9fafb;
}body.dark-mode .resource-item-btn{
    background: #1f1f1f;
    border-color: #4d4d4d;
    color: #f9fafb;
}body.dark-mode .resource-item-btn:hover{
    background: #60a5fa;
    border-color: #60a5fa;
}.sidebar-resources-section.collapsed .toggle-icon{
    transform: rotate(-90deg);
}.sidebar-resources-section.collapsed .sidebar-resources-content{
    max-height: 0;
    opacity: 0;
    padding: 0;
}body.dark-mode .image-picker-content{
    background: #1f1f1f;
}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: #3a3a3a;
    color: #f9fafb;
}body.dark-mode .image-picker-option{
    background: #141414;
    border-color: #3a3a3a;
}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;
}body.dark-mode .resources-modal-search .resources-search-submit{
    color: #cbd5e1;
}body.dark-mode .resources-modal-search .resources-search-submit:hover{
    background: #334155;
    color: #bfdbfe;
}.teaching-tab-btn.active{
    background: #3b82f6;
    color: white;
}/* Dark mode for teaching resources tabs */
body.dark-mode .teaching-resources-tabs{
    border-color: #3a3a3a;
}body.dark-mode .teaching-tab-btn{
    background: #3a3a3a;
    color: #9ca3af;
}body.dark-mode .teaching-tab-btn:hover{
    background: #4d4d4d;
    color: #f3f4f6;
}body.dark-mode .teaching-tab-btn.active{
    background: #3b82f6;
    color: white;
}body.dark-mode .teaching-filter-select{
    background: #1f1f1f;
    border-color: #3a3a3a;
    color: #f3f4f6;
}/* When grid has resource groups with subheadings, switch to flex column */
.resources-modal-grid:has(.resource-group){
    display: flex;
    flex-direction: column;
    gap: 20px;
}body.dark-mode .resource-group-header{
    color: #9ca3af;
    border-color: #4d4d4d;
}/* Shared compact CCSSM attribution — used in vocabulary panel footer,
   vocabulary chat-embed cards, math-progressions footer, word-problems footer.
   Single line, italic, muted; clickable source title links to thecorestandards.org. */
.ccssm-attribution{
    padding: 8px 12px;
    text-align: center;
    font-size: var(--font-size-xs);
    font-style: normal;
    color: #6b7280;
    line-height: 1.4;
}body.dark-mode .ccssm-attribution{ color: #9ca3af; }body.dark-mode .ccssm-attribution a{ color: #60a5fa; }body.dark-mode .vocabulary-term-card{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .vocabulary-term-card:hover{
    background: #283242;
    border-color: #475569;
}body.dark-mode .vocabulary-term-name{ color: #f3f4f6; }body.dark-mode .vocabulary-term-domain{
    background: #141414;
    border-color: #3a3a3a;
    color: #9ca3af;
}body.dark-mode .vocabulary-term-definition{ color: #d1d5db; }body.dark-mode .vocabulary-term-footnote{ color: #9ca3af; }.resources-modal-grid .resource-item.selected{
    background: transparent;
    border-color: #9ca3af;
}body.dark-mode .math-content-item{
    background: #3a3a3a;
    border-color: #4d4d4d;
}body.dark-mode .math-content-item:hover{
    border-color: #4d4d4d;
}body.dark-mode .math-content-subtitle{
    color: #9ca3af;
}body.dark-mode .math-content-grades{
    background: #1f1f1f;
    color: #4d4d4d;
}body.dark-mode .resource-item-grades{
    color: #9ca3af;
}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;
}body.dark-mode .word-problem-item{
    background: #3a3a3a;
    border-color: #4d4d4d;
}body.dark-mode .op-btn{
    background: #1f1f1f;
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .op-btn:hover{
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}body.dark-mode .resources-modal-content{
    background: #1f1f1f;
}body.dark-mode .resources-modal-header{
    border-color: #3a3a3a;
}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: #3a3a3a;
    color: #f9fafb;
}body.dark-mode .resources-modal-search{
    border-color: #3a3a3a;
}body.dark-mode .resources-modal-search input{
    background: #141414;
    border-color: #3a3a3a;
    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;
    }
}body.dark-mode .resources-modal-footer{
    border-color: #3a3a3a;
}.manipulative-embed-modal.hidden{
    display: none;
}body.dark-mode .manipulative-embed-header{
    background: #1f1f1f;
    border-bottom-color: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .manipulative-embed-back{
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .manipulative-embed-back:hover{
    background: #3a3a3a;
    border-color: #4d4d4d;
}body.dark-mode .manipulative-embed-header h2 i{
    color: #60a5fa;
}body.dark-mode .manipulative-embed-icon-svg svg{
    fill: #60a5fa;
}body.dark-mode .manipulative-paper-types{
    background: #3a3a3a;
}.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: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .manipulative-paper-btn.active{
    background: #4d4d4d;
    color: #60a5fa;
}body.dark-mode .manipulative-paper-color{
    border-color: #4d4d4d;
}body.dark-mode .manipulative-toolbar-icon-btn{
    color: #9ca3af;
}body.dark-mode .manipulative-toolbar-icon-btn:hover{
    background: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .manipulative-whiteboard-label{
    color: #9ca3af;
}.manipulative-embed-btn.primary{
    background: #3b82f6;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}.manipulative-embed-btn.primary:hover{
    background: #3b82f6;
    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);
}body.dark-mode .manipulative-embed-toolbar{
    background: #1f1f1f;
    border-bottom-color: #3a3a3a;
}body.dark-mode .manipulative-toolbar-divider{
    background: #4d4d4d;
}.manipulative-tool-btn.active{
    background: #eff6ff;
    color: #3b82f6;
}body.dark-mode .manipulative-tool-btn{
    color: #9ca3af;
}body.dark-mode .manipulative-tool-btn:hover{
    background: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .manipulative-tool-btn.active{
    background: #1e3a5f;
    color: #60a5fa;
}body.dark-mode .manipulative-stroke-color{
    border-color: #4d4d4d;
}body.dark-mode .manipulative-stroke-style{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .manipulative-zoom-level{
    color: #9ca3af;
}body.dark-mode .manipulative-embed-container{
    background: #141414;
}/* Responsive adjustments */
@media (max-width: 1024px){
    .manipulative-whiteboard-label {
        display: none;
    }
}

@media (max-width: 768px) {.manipulative-embed-btn.primary span{
        display: none;
    }}.excalidraw-modal.hidden{
    display: none;
}.excalidraw-loading.hidden{
    display: none;
}/* Dark mode */
.dark-mode .excalidraw-container{
    background: #1f1f1f;
}.dark-mode .excalidraw-body{
    background: #141414;
}.dark-mode .excalidraw-footer{
    background: #141414;
    border-color: #3a3a3a;
}.dark-mode .excalidraw-room-info{
    color: #e5e7eb;
}.dark-mode .excalidraw-hint{
    color: #9ca3af;
}/* Dark mode for AI hint */
.dark-mode .excalidraw-ai-hint{
    background: #1f1f1f;
}.dark-mode .ai-hint-header{
    color: #f3f4f6;
}.dark-mode .ai-hint-step{
    background: #3a3a3a;
}.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: #3a3a3a;
    border-color: #4d4d4d;
    color: #f3f4f6;
}.dark-mode .ai-hint-paste-area{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #9ca3af;
}.dark-mode .ai-hint-paste-area:focus{
    background: #4c1d95;
    border-color: #60a5fa;
}.dark-mode .ai-hint-cancel{
    background: #3a3a3a;
    color: #e5e7eb;
}.dark-mode .ai-hint-cancel:hover{
    background: #4d4d4d;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastFadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}/* 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;
    height: 100dvh;
    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: #1f1f1f;
    color: white;
}body.dark-mode .whiteboard-fullscreen{
    background: #1f1f1f;
    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: #1f1f1f;
    border-bottom-color: #3a3a3a;
}.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;
}/* Hide "Back" label on narrow viewports — icon-only button */
@media (max-width: 640px){
    .whiteboard-header-clean .back-btn {
        padding: 8px;
    }
    .whiteboard-header-clean .back-btn .back-btn-label {
        display: none;
    }
}body.dark-mode .whiteboard-header-clean .back-btn{
    color: #9ca3af;
}body.dark-mode .whiteboard-header-clean .back-btn:hover{
    background: #3a3a3a;
    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: #3a3a3a;
}.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: #1f1f1f;
    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: #4d4d4d;
}.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: #4d4d4d;
}.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: #3a3a3a;
}.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;
}body.dark-mode .whiteboard-back-btn:hover{
    background: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .paper-selector{
    background: #3a3a3a;
}body.dark-mode .paper-color-picker{
    border-color: #4d4d4d;
}.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: #1f1f1f;
    color: #60a5fa;
}body.dark-mode .whiteboard-room-status{
    background: #3a3a3a;
    color: #9ca3af;
}.whiteboard-action-btn.primary{
    background: linear-gradient(135deg, #3b82f6, #3b82f6);
    color: white;
}.whiteboard-action-btn.primary:hover{
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}body.dark-mode .whiteboard-action-btn{
    background: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .whiteboard-action-btn:hover{
    background: #4d4d4d;
}/* 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;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 4px;
    min-width: 0;
    max-width: 100%;
}.whiteboard-toolbar .toolbar-section{
    flex-wrap: wrap;
    row-gap: 6px;
    min-width: 0;
}/* Narrow viewport (chat embed or mobile): hide verbose select dropdowns,
   keep clean icon-only tool buttons — matches manipulatives app */
@media (max-width: 720px){
    .whiteboard-toolbar .pen-style-select,
    .whiteboard-toolbar .stroke-width-select,
    .whiteboard-toolbar .line-style-select,
    .whiteboard-toolbar .text-size-select {
        display: none !important;
    }
    .whiteboard-toolbar .toolbar-divider {
        display: none;
    }
    /* Narrow screens: keep tools on one line that scrolls, instead of
       wrapping into stacked rows that crowd out the manipulative. The
       .whiteboard-inline/.whiteboard-fullscreen selectors match the higher
       specificity of the base inline rule so nowrap actually wins. */
    .whiteboard-toolbar,
    .whiteboard-inline .whiteboard-toolbar,
    .whiteboard-fullscreen .whiteboard-toolbar {
        padding: 4px 8px;
        column-gap: 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    .whiteboard-toolbar .toolbar-section,
    .whiteboard-inline .whiteboard-toolbar .toolbar-section,
    .whiteboard-fullscreen .whiteboard-toolbar .toolbar-section {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    .whiteboard-toolbar .toolbar-group {
        flex-shrink: 0;
    }
    .whiteboard-toolbar .tool-btn {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 480px) {.whiteboard-toolbar .tool-btn{
        width: 32px;
        height: 32px;
    }}body.dark-mode .whiteboard-toolbar{
    background: #141414;
    border-bottom-color: #3a3a3a;
}/* 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: #141414;
    border-bottom-color: #3a3a3a;
}.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: #3a3a3a;
}.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;
}/* Auto-feedback (ghost active) — used when smart pointer-events routes the next click,
 * even though the user-chosen tool is still 'select'. Lighter than .active to signal
 * "this is what would happen if you clicked here" without claiming the tool changed. */
.tool-btn.active-auto:not(.active){
    color: #60a5fa;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4);
}.tool-btn:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}body.dark-mode .tool-btn{
    color: #9ca3af;
}body.dark-mode .tool-btn:hover{
    background: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .tool-btn.active{
    background: transparent;
    color: #60a5fa;
    box-shadow: inset 0 0 0 2px #60a5fa;
}body.dark-mode .tool-btn.active-auto:not(.active){
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4);
}/* 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);
}/* 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;
}body.dark-mode .stroke-color-picker{
    border-color: #4d4d4d;
}body.dark-mode .paper-color-picker{
    border-color: #4d4d4d;
}/* 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: #1f1f1f;
    border-color: #4d4d4d;
    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: #1f1f1f;
    border-color: #4d4d4d;
    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: #1f1f1f;
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .text-color-picker{
    border-color: #4d4d4d;
}.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: #1f1f1f;
    border-color: #4d4d4d;
    color: #e5e7eb;
}/* Color-input wrapper — span around <input type="color"> so the [data-tooltip]::before
   pseudo-element can paint (browsers do not render pseudo-elements on <input>). */
.color-input-wrap{
    display: inline-flex;
    align-items: center;
    position: relative;
}.color-input-wrap > input[type="color"]{
    /* Suppress the native browser tooltip (yellow OS bubble) on hover */
    pointer-events: auto;
}/* Reset line-height on the tooltip pseudo-element so it never inherits 0/odd values
   from any wrapper. Ensures every [data-tooltip] bubble has the same text size. */
[data-tooltip]::before,
[data-tooltip]:before{
    line-height: 1.4;
}/* 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: #4d4d4d;
}body.dark-mode .universal-color-picker::-moz-color-swatch{
    border-color: #4d4d4d;
}body.dark-mode .whiteboard-text-input{
    background: rgba(31, 41, 55, 0.9);
    border-color: #60a5fa;
}body.dark-mode .whiteboard-text-input::placeholder{
    color: #4d4d4d;
}body.dark-mode .memo-bg-picker{
    border-color: #4d4d4d;
}body.dark-mode .memo-text-picker{
    border-color: #4d4d4d;
}body.dark-mode .memo-text-size-select{
    background: #1f1f1f;
    border-color: #4d4d4d;
    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: #141414;
}/* Manipulative instruction footer — breathing room on left/right so text isn't flush to edges */
.whiteboard-canvas-container p.border-t.border-gray-100.bg-white.shrink-0.text-gray-400{
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}/* Floating zoom pill in bottom-right corner of canvas (moved out of toolbar) */
.canvas-zoom-pill{
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}.canvas-zoom-pill .tool-btn{
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #4b5563;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}.canvas-zoom-pill .tool-btn:hover{
    background: #f3f4f6;
    color: #111827;
}.canvas-zoom-pill .zoom-level{
    font-size: 0.8125rem;
    color: #4b5563;
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}body.dark-mode .canvas-zoom-pill{
    background: rgba(31, 41, 55, 0.92);
    border-color: #4d4d4d;
}body.dark-mode .canvas-zoom-pill .tool-btn{ color: #d1d5db; }body.dark-mode .canvas-zoom-pill .tool-btn:hover{ background: #3a3a3a; color: #f3f4f6; }body.dark-mode .canvas-zoom-pill .zoom-level{ color: #d1d5db; }/* Header undo/redo group (moved out of toolbar) */
.header-history-group{
    display: inline-flex;
    align-items: center;
    gap: 2px;
}.header-history-group .tool-btn{
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #4b5563;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}.header-history-group .tool-btn:hover:not(:disabled){
    background: transparent;
    color: #3b82f6;
}.header-history-group .tool-btn:disabled{
    color: #d1d5db;
    cursor: not-allowed;
}body.dark-mode .header-history-group .tool-btn{ color: #d1d5db; }body.dark-mode .header-history-group .tool-btn:hover:not(:disabled){ background: transparent; color: #60a5fa; }body.dark-mode .header-history-group .tool-btn:disabled{ color: #4d4d4d; }/* Lift zoom pill above the manipulative's instruction footer when one exists,
   so it doesn't cover "Drag counters to frame..." and similar help text */
.whiteboard-canvas-container:has(p.border-t.border-gray-100.bg-white.shrink-0.text-gray-400) .canvas-zoom-pill{
    bottom: 68px;
}/* Shrink the zoom pill on narrow viewports */
@media (max-width: 480px){
    .canvas-zoom-pill {
        bottom: 8px;
        right: 8px;
    }
    .canvas-zoom-pill .tool-btn {
        min-width: 28px;
        min-height: 28px;
        width: 28px;
        height: 28px;
    }
    .canvas-zoom-pill .zoom-level {
        font-size: 0.75rem;
        min-width: 36px;
    }
}body.dark-mode #whiteboardCanvas{
    background: #1f1f1f;
}.zoom-level{
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #374151;
    min-width: 45px;
    text-align: center;
}/* Dark mode */
body.dark-mode .whiteboard-container{
    background: #1f1f1f;
}body.dark-mode .whiteboard-toolbar{
    background: #141414;
    border-color: #3a3a3a;
}body.dark-mode .toolbar-group{
    background: #1f1f1f;
}body.dark-mode .tool-btn{
    color: #9ca3af;
}body.dark-mode .tool-btn:hover{
    background: #3a3a3a;
    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: #3a3a3a;
}/* 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;
}body.dark-mode .color-group select{
    background: #1f1f1f;
    border-color: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .whiteboard-canvas-container{
    background: #141414;
}body.dark-mode .canvas-hint{
    background: rgba(255, 255, 255, 0.1);
}body.dark-mode .whiteboard-footer{
    background: #141414;
    border-color: #3a3a3a;
}body.dark-mode .zoom-controls,
body.dark-mode .history-controls{
    background: #1f1f1f;
}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: #3a3a3a;
    color: #e5e7eb;
}body.dark-mode .zoom-level{
    color: #e5e7eb;
}body.dark-mode .whiteboard-room-info{
    color: #e5e7eb;
}body.dark-mode .whiteboard-hint{
    color: #4d4d4d;
}/* Memo with header strip: the colored header replaces the drag handle, so no padding-top */
.memo-inline-editor.memo-has-header{
    padding-top: 0;
}body.dark-mode .whiteboard-editor-drag-handle{
    background-color: #1e3a8a;
    border-bottom-color: #1e40af;
    color: #93c5fd;
}body.dark-mode .whiteboard-editor-drag-handle:hover{
    background-color: #1e40af;
}body.dark-mode .whiteboard-editor-drag-handle:active{
    background-color: #1d4ed8;
}/* Unified active-edit indicator: when the textarea inside is focused, the editor
 * border lights up blue with a subtle glow ring. Mirrors the focus pattern used
 * elsewhere in the app and replaces invisible :focus inside the textarea. */
.memo-inline-editor:focus-within,
.whiteboard-text-editor:focus-within{
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(59, 130, 246, 0.15);
}body.dark-mode .memo-inline-editor:focus-within,
body.dark-mode .whiteboard-text-editor:focus-within{
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(96, 165, 250, 0.2);
}body.dark-mode .whiteboard-text-editor .whiteboard-text-textarea::placeholder{
    color: #4d4d4d;
}/* Chevron Option 2: Wand outside, Voice + Plus behind chevron */
.memo-icons-hidden-group{
    display: none;
    align-items: center;
    gap: 2px;
}/* Color controls — text foreground + background fill, sit between icons row and font-size */
.whiteboard-text-colors{
    position: absolute;
    left: 132px;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}body.dark-mode .whiteboard-color-swatch{
    color: #9ca3af;
}body.dark-mode .whiteboard-color-swatch:hover{
    color: #60a5fa;
}body.dark-mode .whiteboard-color-clear{
    color: #9a9a9a;
}body.dark-mode .whiteboard-color-clear:hover{
    color: #f87171;
}body.dark-mode .whiteboard-fontsize-label{
    color: #9ca3af;
}body.dark-mode .whiteboard-fontsize-btn:hover{
    color: #60a5fa;
}/* 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: transparent;
    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: #3a3a3a;
    color: #f3f4f6;
    border-color: #4d4d4d;
}body.dark-mode .memo-plus-menu{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .memo-plus-menu .media-option{
    color: #e5e7eb;
}body.dark-mode .memo-plus-menu .media-option:hover{
    background: #3a3a3a;
}body.dark-mode .memo-plus-menu .media-option i{
    color: #9ca3af;
}body.dark-mode .memo-website-modal{
    background: #1f1f1f;
}body.dark-mode .memo-website-modal h3{
    color: #f3f4f6;
}body.dark-mode .memo-url-input{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #f3f4f6;
}body.dark-mode .memo-cancel-btn{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .memo-cancel-btn:hover{
    background: #4d4d4d;
}/* Toolbar Dropdown Container */
.toolbar-dropdown-container{
    position: relative;
}.dropdown-trigger{
    display: flex;
    align-items: center;
    gap: 2px;
}.dropdown-arrow{
    font-size: var(--font-size-sm);
    color: #4b5563;
    margin-left: 4px;
}.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;
}body.dark-mode .whiteboard-math-picker{
    background: #1f1f1f;
    border-color: #3a3a3a;
}/* Dark mode for memo + text editor */
body.dark-mode .memo-inline-editor,
body.dark-mode .whiteboard-text-editor{
    background: #1f1f1f;
    border-color: #4d4d4d;
}body.dark-mode .memo-textarea,
body.dark-mode .whiteboard-text-textarea{
    color: #e5e7eb;
}body.dark-mode .memo-textarea::placeholder{
    color: #4d4d4d;
}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: #3a3a3a;
    color: #f3f4f6;
    border-color: #4d4d4d;
}body.dark-mode .toolbar-dropdown{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .dropdown-item{
    color: #e5e7eb;
}body.dark-mode .dropdown-item:hover{
    background: #3a3a3a;
}body.dark-mode .whiteboard-emoji-picker{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .emoji-category{
    border-color: #3a3a3a;
}body.dark-mode .emoji-category-label{
    color: #9ca3af;
}body.dark-mode .emoji-item{
    background: #3a3a3a;
    border-color: #4d4d4d;
}body.dark-mode .emoji-item:hover{
    background: #4d4d4d;
    border-color: #3b82f6;
}body.dark-mode .memo-resize-handle{
    background-image: linear-gradient(135deg, transparent 70%, #4d4d4d 70%, #4d4d4d 75%, transparent 75%),
        linear-gradient(135deg, transparent 84%, #4d4d4d 84%, #4d4d4d 89%, transparent 89%);
}body.dark-mode .memo-ghost-prediction{
    color: #4d4d4d;
    opacity: 0.8;
}body.dark-mode .memo-ghost-prediction:hover{
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
    opacity: 1;
}body.dark-mode .memo-math-dropdown,
body.dark-mode .memo-suggestion-dropdown{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .memo-math-item{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .memo-math-item:hover{
    background: #4d4d4d;
    border-color: #3b82f6;
}body.dark-mode .memo-suggestion-item{
    color: #e5e7eb;
    border-color: #3a3a3a;
}body.dark-mode .memo-suggestion-item:hover{
    background: #3a3a3a;
}body.dark-mode .memo-suggestion-category{
    background: #141414;
    color: #9ca3af;
}body.dark-mode .memo-suggestion-empty{
    color: #4d4d4d;
}/* 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;
    }
}body.dark-mode .view-toggle-container{
    background: transparent;
    border: none;
}body.dark-mode .view-toggle{
    background: transparent;
}body.dark-mode .view-toggle-btn{
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    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;
}/* Hide conversation container when template view is active */
.conversation-container.hidden{
    display: none !important;
}#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: 6px 10px;
        font-size: 1rem;
        gap: 6px;
    }

    .view-toggle-btn span {
        display: inline;
        font-size: 1rem;
    }

    .view-toggle-btn i {
        font-size: 1rem;
    }

    #templatePanelContainer {
        padding: 0;
        height: calc(100vh - 100px);
        height: calc(100dvh - 100px);
    }
}/* ==================== 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);
}/* ==================== 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-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;
}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: 6px 10px;
        font-size: 1rem;
        justify-content: center;
    }

    .chat-footer-btn i {
        font-size: 1.25rem;
    }

    /* Per-icon optical balancing (FA glyphs vary in visual weight) */
    #chatClear i {
        font-size: 1.1rem;
    }

    #chatSelfCheck i {
        font-size: 1.1rem;
    }

    .chat-footer-buttons .footer-actions .chat-footer-btn span {
        display: none;
    }
}.save-draft-menu.show{
    display: block;
}/* Matches .media-options button.media-option (chat plus-button dropdown) for a
   consistent look across all dropdowns: 16px font, 8px icon-text gap, 32px
   minimum row height (40px on touch), 20px icon column. */
.save-draft-option{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    min-height: 32px;
    color: #374151;
    transition: background 0.15s ease;
    white-space: nowrap;
}/* Dark mode */
body.dark-mode .save-draft-menu{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .save-draft-option{
    color: #e5e7eb;
}body.dark-mode .save-draft-option:hover{
    background: #3a3a3a;
}.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;
}/* Dark mode inline wand menu */
body.dark-mode .inline-wand-menu{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .inline-wand-menu .wand-menu-option{
    color: #e5e7eb;
}body.dark-mode .inline-wand-menu .wand-menu-option:hover{
    background: #3a3a3a;
}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: #1f1f1f;
    border-color: #4d4d4d;
    color: #e5e7eb;
}.self-check-menu.show{
    display: block;
}/* 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: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .self-check-option{
    color: #e5e7eb;
}body.dark-mode .self-check-option:hover{
    background: #3a3a3a;
}body.dark-mode .self-check-option i{
    color: #9ca3af;
}.self-check-result.loading{
    text-align: center;
    color: #0284c7;
}.self-check-result.error{
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}body.dark-mode .self-check-result{
    background: #1e3a5f;
    border-color: #0369a1;
}body.dark-mode .self-check-result.loading{
    color: #7dd3fc;
}body.dark-mode .self-check-result.error{
    background: #450a0a;
    border-color: #dc2626;
    color: #fca5a5;
}body.dark-mode .self-check-header{
    color: #7dd3fc;
}body.dark-mode .self-check-content{
    color: #e5e7eb;
}.co-create-panel.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}.co-create-panel.open .co-create-panel-content{
    right: 0;
}.co-create-step.checked{
    background: #f0fdf4;
    border-color: #86efac;
}.co-create-step.checked .co-create-letter{
    background: linear-gradient(135deg, #22c55e, #16a34a);
}/* CO-CREATE Dark Mode */
body.dark-mode .co-create-panel-content{
    background: #1f1f1f;
}body.dark-mode .co-create-subtitle{
    color: #9ca3af;
    border-color: #3a3a3a;
}body.dark-mode .co-create-progress{
    background: #141414;
    border-color: #3a3a3a;
}body.dark-mode .co-create-progress-bar{
    background: #3a3a3a;
}body.dark-mode .co-create-progress-text{
    color: #d1d5db;
}body.dark-mode .co-create-step{
    background: #141414;
    border-color: #3a3a3a;
}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: #3a3a3a;
    border-color: #4d4d4d;
}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: #141414;
    border-color: #3a3a3a;
}body.dark-mode .co-create-ai-header{
    color: #9ca3af;
}body.dark-mode .co-create-ai-btn{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .co-create-ai-btn:hover{
    background: #4d4d4d;
}/* 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-cell .inline-fill-input.empty::before{
    content: attr(data-placeholder);
    color: #9ca3af !important;
    pointer-events: none;
}body.dark-mode .three-column-cell .inline-fill-input.empty::before{
    color: #9a9a9a !important;
}.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 */
}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;
}.three-column-row-container.saved{
    border-color: #10b981;
}.three-column-row-container.saved .three-column-header{
    background: #ecfdf5;
}/* Dark mode */
body.dark-mode .three-column-row-container{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .three-column-header{
    background: transparent;
}body.dark-mode .three-column-header .row-label{
    color: #93c5fd;
}body.dark-mode .three-column-cell{
    background: #1f1f1f;
}body.dark-mode .three-column-cell + .three-column-cell{
    border-left-color: #3a3a3a;
}body.dark-mode .three-column-cell .column-header{
    color: #d1d5db;
}body.dark-mode .three-column-cell .inline-fill-input{
    background: #3a3a3a;
    border-color: #4d4d4d;
    color: #e5e7eb;
}body.dark-mode .three-column-cell .empty-cell{
    color: #4d4d4d;
}body.dark-mode .row-actions{
    background: transparent;
}body.dark-mode .suggestions-dropdown{
    background: #1f1f1f;
    border-color: #3a3a3a;
}body.dark-mode .suggestion-item{
    border-color: #3a3a3a;
}body.dark-mode .suggestion-item:hover{
    background: #3a3a3a;
}/* Responsive */
@media (max-width: 768px){
    .three-column-grid {
        grid-template-columns: 1fr;
    }

    .three-column-cell {
        border-bottom: 1px solid #e5e7eb;
    }

    .three-column-cell + .three-column-cell {
        border-left: none;
    }

    .three-column-cell:last-child {
        border-bottom: none;
    }

    /* Keep the wand reachable when the input grows: wrap instead of clipping. */
    .three-column-cell .inline-fill-blank {
        flex-wrap: wrap;
    }

    .three-column-cell .inline-fill-input {
        min-width: 0;
    }
}/* Touch targets meet the 44px AA minimum on coarse pointers. */
@media (max-width: 768px) and (pointer: coarse){
    .three-column-cell .inline-ai-assist {
        width: 44px;
        height: 44px;
    }
}/* ===========================================
   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, #3b82f6);
}.action-btn.send-to-chat-blue:hover{
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}/* Open in New Tab button - Blue */
.action-btn.open-tab{
    background: #3b82f6;
}.action-btn.open-tab:hover{
    background: #1d4ed8;
    color: white;
}/* New Tab button - Blue (same as open-tab) */
.action-btn.new-tab{
    background: #3b82f6;
}.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;
}

@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);
}body.dark-mode .collab-join-divider{
    color: #cbd5e1;
}/* ==================== 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;
}/* 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-btn.open i:last-child{
    transform: rotate(180deg);
}.header-language-dropdown.hidden{
    display: none;
}.header-language-dropdown button.active{
    background: #eff6ff;
    color: #3b82f6;
    font-weight: 500;
}/* 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));
    }
}/* ============================================
   EMBEDDED IFRAME MODE (Qualtrics, iMotions)
   Must be last for cascade priority
   ============================================ */
.embedded-iframe .sidebar{
    transform: translateX(0) !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;
    }
}.ai-canvas-btn.active{
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #3b82f6;
}/* Worksheet toolbar: badge on left, action buttons clustered on right */
.worksheet-toolbar.ai-canvas-toolbar{
    justify-content: space-between;
    opacity: 1;
}body.dark-mode .ai-canvas{
    background: #1e293b;
    border-color: #334155;
}body.dark-mode .ai-canvas-toolbar{
    background: #0f172a;
    border-bottom-color: #334155;
}body.dark-mode .ai-canvas-btn{
    color: #94a3b8;
}body.dark-mode .ai-canvas-btn:hover{
    background: #1e40af;
    color: #bfdbfe;
    border-color: #3b82f6;
}body.dark-mode .ai-canvas-content{
    color: #e2e8f0;
}body.dark-mode .ai-canvas-content h2,
body.dark-mode .ai-canvas-content h3,
body.dark-mode .ai-canvas-content h4,
body.dark-mode .ai-canvas-content strong{
    color: #f1f5f9;
}body.dark-mode .ai-canvas-content code{
    background: #0f172a;
    color: #e2e8f0;
}body.dark-mode .ai-canvas.ai-canvas-editing .ai-canvas-content{
    background: #422006;
    color: #fef3c7;
}/* ============ Worksheet block (math problems, activities, exit tickets) ============ */
.worksheet-card{
    margin: 0;
    border-radius: 12px;
    background: #f1f5f9;
    white-space: normal;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}body.dark-mode .worksheet-card{
    background: #1e293b;
    border-color: #475569;
}body.dark-mode .worksheet-toolbar{
    background: #0f172a;
    border-bottom-color: #334155;
}body.dark-mode .worksheet-type-badge{
    color: #e2e8f0;
}body.dark-mode .worksheet-btn{
    background: none;
    border: none;
    color: #9ca3af;
    text-decoration: none;
}body.dark-mode .worksheet-btn:hover{
    background-color: #334155;
    color: #e2e8f0;
}body.dark-mode .worksheet-paper{
    background: #f8fafc;
    color: #0f172a;
}

@media print {body *{
        visibility: hidden;
    }}/* =================================================================
 * WCAG 2.1 AA — Mobile Touch Targets, Focus, Safe Areas
 * Consolidated overrides to bring icon-only buttons up to 44x44px
 * on mobile and ensure focus indicators / safe-area handling.
 * ================================================================= */

/* Mobile touch targets — enforce 44x44 on undersized icon buttons */
@media (max-width: 768px){

    .input-group .ai-wand-btn,
    .inline-toolbar-btn,
    .message-speaker-btn,
    .resources-modal-close,
    .resources-search-submit,
    .image-preview-close,
    .panel-close-btn,
    .manipulative-embed-btn,
    .manipulative-embed-back,
    .manipulative-tool-btn,
    .manipulative-paper-btn,
    .interactive-tool-modal-close,
    .action-btn,
    .collab-modal-close,
    .collab-btn,
    .color-btn,
    .sidebar-icon-btn,
    #plus,
    #chatAiWand {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .media-options button.media-option {
        min-height: 44px;
    }

    .chat-footer-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .worksheet-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .sidebar-resource-btn {
        min-height: 44px;
    }

    /* Cell-level inline controls bumped to 36px on mobile */
    .cell-input-controls button,
    .template-input-icons button {
        min-width: 36px;
        min-height: 36px;
    }
}/* Tablet — touch laptops should also have larger close/remove buttons */
@media (max-width: 1023px){
    .resources-modal-close,
    .panel-close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .remove-row-btn {
        min-width: 36px;
        min-height: 36px;
    }
}/* Cell embed iframe — 320px floor */
@media (max-width: 360px){
    .template-cell .cell-embed .resource-embed-iframe {
        min-height: 240px;
    }
}/* Focus-visible safety net for any interactive element that may have
 * lost its focus ring through a stray outline:none rule */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.recommendation-chip:focus-visible{
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}/* Ensure the user name stays on a single row, period. The Tailwind/notranslate label
   (\"(me)\") sits inside this span so explicit display:block + nowrap prevents the inner
   inline-span from pushing the line. Width auto + min-width 0 lets flex shrink it cleanly. */
.collab-user-name{
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

@keyframes hand-wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}body.dark-mode .collab-host-btn{ color: #9ca3af; }body.dark-mode .collab-host-btn:hover{ background: #3a3a3a; color: #f3f4f6; }body.dark-mode .collab-host-btn.is-on{ color: #f87171; background: #7f1d1d33; border-color: #991b1b; }body.dark-mode .collab-action-btn{ background: #1f1f1f; color: #f3f4f6; border-color: #3a3a3a; }body.dark-mode .collab-action-btn:hover{ background: #92400e33; color: #fef3c7; border-color: #f59e0b; }body.dark-mode .collab-action-btn.is-raised{ background: #78350f; color: #fde68a; border-color: #f59e0b; }body.dark-mode .collab-actions-row{ border-top-color: #3a3a3a; }body.dark-mode #pageAnnotationToolbar{
    background: #1f1f1f !important;
    border-color: #3a3a3a !important;
}body.dark-mode .anno-btn{
    background: #1f1f1f;
    color: #f3f4f6;
}body.dark-mode .anno-btn:hover{
    background: #3a3a3a;
    border-color: #4d4d4d;
}body.dark-mode .anno-btn.anno-tool-active{
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #1e40af;
}body.dark-mode .anno-color-btn.anno-color-active{
    box-shadow: 0 0 0 2px #1f1f1f, 0 0 0 4px #60a5fa;
}/* Touch-target enlargements — WCAG 2.5.5 (AAA) target ≥44×44, AA ≥24×24.
 * Annotation toolbar + host controls had under-sized targets on mobile. */
@media (pointer: coarse){
    .anno-btn { width: 44px; height: 44px; }
    .anno-color-btn { width: 36px; height: 36px; }
    .collab-host-btn { width: 36px; height: 36px; font-size: 13px; }
}/* Screen-reader-only utility (WCAG 1.3.1, 2.4.1) — visually hidden but reachable by AT */
.sr-only{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}/* Touch-target floors: on touch devices (phones/tablets) ensure key controls meet
   the 44px tap-target guideline. min-width/min-height override smaller explicit
   width/height without disturbing the mouse/desktop layout. */
@media (pointer: coarse){
    #send,
    #record,
    .view-toggle-btn,
    .message-speaker-btn,
    .resources-modal-close,
    .sidebar-icon-btn,
    .action-btn,
    .inline-stt-btn,
    .whiteboard-toolbar .tool-btn {
        min-width: 44px;
        min-height: 44px;
    }
}/* Portrait phone with the on-screen keyboard open (very short + narrow): hide the
   secondary footer actions and the recommendation chips so the message area and
   input never collide with them. They return once the keyboard closes. */
@media (max-height: 430px) and (max-width: 500px){
    .chat-footer-buttons {
        display: none !important;
    }
    .recommendation-chips {
        display: none !important;
    }
}/* Dropdown / dropup row density — single source across every menu so chat and
   template rows match. Tight vertical rhythm, still >= WCAG 2.5.8 (24px) target;
   coarse pointers get a slightly taller row. Overrides the per-menu defaults. */
.media-options button.media-option,
.inline-media-menu .media-option,
.ai-mode-menu .ai-mode-item,
.magic-wand-menu-item,
.save-draft-option,
.self-check-option,
.export-menu-popup button,
.language-menu-popup button{
    padding: 4px 12px;
    min-height: 28px;
    line-height: 1.25;
}