/* Design System Variables — Midnight Blue / Slate Professional Palette */
:root {
    --primary-900: #0f172a;
    --primary-800: #1e293b;
    --primary-700: #334155;
    --primary-600: #475569;
    --primary-500: #64748b;
    --primary-400: #94a3b8;
    --primary-300: #cbd5e1;
    --primary-200: #e2e8f0;
    --primary-100: #f1f5f9;
    --primary-50: #f8fafc;

    --accent-blue: #0ea5e9;
    --accent-blue-dark: #0284c7;
    --accent-teal: #0d9488;       /* reserved — not currently used */
    --accent-teal-dark: #0f766e;  /* reserved — not currently used */

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
    font-family: var(--font-body);
    height: 100vh;
    overflow: hidden;
    display: flex;
    color: var(--primary-800);
}

/* Poppins for headings with tighter letter-spacing */
h1, h2, h3, h4, h5, h6,
.sidebar-header h1,
.chat-header h1,
.chat-heading {
    font-family: var(--font-heading);
    letter-spacing: -0.025em;
}

/* Left Sidebar - Wider for calendar */
.sidebar {
    width: 650px;
    min-width: 300px;
    max-width: 900px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
}

/* Resize Handle */
.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
    z-index: 1000;
    transition: background 0.2s, opacity 0.3s;
}

.sidebar.collapsed .resize-handle {
    opacity: 0;
    pointer-events: none;
}

.resize-handle:hover {
    background: rgba(59, 130, 246, 0.15);
}

.resize-handle::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 40px;
    background: #cbd5e1;
    border-radius: 2px;
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.sidebar-header__left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-header__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sidebar-header h1 {
    font-size: 1.5em;
    color: #2563eb;
    font-weight: 600;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-header h1 i {
    color: #2563eb;
    font-size: 1.1em;
}

/* Panel icon style */
.panel-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 2px solid #2563eb;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.panel-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
}
.login-icon-wrap {
    border-radius: 18px;
    margin-bottom: 20px;
    margin-right: 0;
}
.login-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(37,99,235,0.3);
    background: rgba(37,99,235,0.08);
    color: #2563eb;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-action-btn i {
    font-size: 0.9em;
}

.header-action-btn:hover {
    background: rgba(37,99,235,0.15);
    color: #1d4ed8;
    border-color: rgba(37,99,235,0.5);
    transform: translateY(-1px);
}

/* MS365 Login Button */
.ms365-login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #0078d4;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
}

.ms365-login-btn:hover {
    background: #106ebe;
}

.ms365-login-btn i {
    font-size: 1.1em;
}

/* User Profile Display */
.user-profile {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.user-profile.active {
    display: flex;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9em;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-weight: 600;
    font-size: 0.9em;
    color: #0f172a;
}

.user-email {
    font-size: 0.75em;
    color: #64748b;
}

.user-logout-btn {
    padding: 6px 12px;
    background: #f1f5f9;
    border: none;
    border-radius: 4px;
    font-size: 0.8em;
    cursor: pointer;
    color: #475569;
    transition: background 0.2s;
}

.user-logout-btn:hover {
    background: #e2e8f0;
}

.user-settings-btn {
    padding: 6px 8px;
    background: #f1f5f9;
    border: none;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    color: #475569;
    transition: background 0.2s, color 0.2s;
}
.user-settings-btn:hover {
    background: #e2e8f0;
    color: #3b82f6;
}

/* Settings Modal */
.settings-modal {
    max-width: 380px;
}
.settings-section {
    margin-bottom: 16px;
}
.settings-label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    color: #334155;
    margin-bottom: 10px;
}
.font-size-options {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.font-size-btn {
    flex: 1;
    padding: 8px 4px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-weight: 600;
    color: #64748b;
    transition: all 0.15s ease;
}
.font-size-btn:hover {
    border-color: #93c5fd;
    color: #3b82f6;
    background: #f0f4ff;
}
.font-size-btn.active {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #3b82f6;
}
.font-size-btn[data-size="small"] { font-size: 0.8em; }
.font-size-btn[data-size="default"] { font-size: 0.95em; }
.font-size-btn[data-size="large"] { font-size: 1.1em; }
.font-size-btn[data-size="xlarge"] { font-size: 1.25em; }

.font-size-preview {
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    transition: font-size 0.2s ease;
}

/* Login Wall */
.login-wall {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.login-wall.hidden {
    display: none;
}

.login-box {
    background: white;
    padding: 48px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 400px;
}

.login-box img {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.login-box h1 {
    font-size: 1.8em;
    margin-bottom: 12px;
    color: #0f172a;
}

.login-box p {
    color: #64748b;
    margin-bottom: 32px;
    font-size: 1.05em;
}

.login-box .ms365-login-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1.05em;
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px 0 16px;
    gap: 8px;
    flex-shrink: 0;
}

.tab-button {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #2563eb;
    transform: scaleX(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-button:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.tab-button.active {
    color: #2563eb;
    background: #eff6ff;
}

.tab-button.active::after {
    transform: scaleX(1);
}

.tab-button i {
    margin-right: 6px;
}

.info-modal .modal-content {
    max-width: 520px;
}

.info-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #0f172a;
}

.info-modal__meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.info-modal__meta div {
    flex: 1;
}

.meta-label {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 4px;
}

.info-modal__tech {
    font-size: 0.95em;
    line-height: 1.5;
    color: #475569;
}

/* Toggle Button */
.toggle-sidebar-btn {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.toggle-sidebar-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #cbd5e1;
    transform: scale(1.05);
}

.toggle-sidebar-btn:active {
    transform: scale(0.95);
}

/* Expand Button - Shows when sidebar is collapsed */
.expand-sidebar-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.sidebar.collapsed ~ .main-content .expand-sidebar-btn {
    display: flex;
}

.expand-sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.expand-sidebar-btn:active {
    transform: scale(0.95);
}

/* Left Panel Icon - Custom SVG */
.left-panel-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Tab Content */
.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    position: relative;
    font-size: 0.95em;
}

.tab-content.active {
    display: block;
}

/* Home Tab */
.welcome-panel {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.welcome-panel h2 {
    font-size: 1.1em;
    color: #1f2937;
    margin-bottom: 8px;
}

.welcome-panel p {
    color: #6b7280;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Hero Carousel */
.hero-carousel {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 200px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 0;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15,23,42,0.75) 0%, rgba(30,64,175,0.6) 100%);
    z-index: 1;
}

.carousel-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 28px 32px;
    color: white;
}

.carousel-content h2 {
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1.3;
}

.carousel-content p {
    font-size: 0.88em;
    margin: 0 0 14px 0;
    opacity: 0.92;
    line-height: 1.5;
    max-width: 90%;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.carousel-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s;
    backdrop-filter: blur(4px);
}

.carousel-cta:hover {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-1px);
}

.carousel-cta i {
    font-size: 0.85em;
}

.carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.carousel-dot:hover {
    background: rgba(255,255,255,0.7);
}

.carousel-dot.active {
    background: white;
    transform: scale(1.2);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

.carousel-pause {
    position: absolute;
    bottom: 12px;
    right: 14px;
    z-index: 3;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    transition: all 0.25s;
    backdrop-filter: blur(4px);
    padding: 0;
}

.carousel-pause:hover {
    background: rgba(0,0,0,0.55);
    color: white;
}

.carousel-slide.carousel-slide--dark .carousel-overlay {
    background: linear-gradient(135deg, rgba(5,10,20,0.85) 0%, rgba(20,50,140,0.7) 100%);
}

/* Personal Notes */
.personal-section {
    background: white;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.personal-section h3 {
    font-size: 0.9em;
    color: #1f2937;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.personal-section h3 i {
    color: #3b82f6;
    font-size: 0.9em;
}

.personal-tools-header {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.personal-tools-header button {
    flex: 1;
    padding: 10px 14px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #64748b;
}

.personal-tools-header button:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

.personal-tools-header button i {
    font-size: 0.9em;
}

.note-input-area {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.note-input-area input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: inherit;
    transition: border-color 0.2s;
}

.note-input-area input:focus {
    outline: none;
    border-color: #3b82f6;
}

.note-input-area button,
.add-bookmark-btn {
    padding: 10px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.note-input-area button:hover,
.add-bookmark-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.note-item,
.custom-bookmark-item {
    padding: 12px;
    background: #f8fafc;
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.note-content {
    flex: 1;
    font-size: 0.9em;
    color: #1e293b;
    line-height: 1.5;
    word-wrap: break-word;
}

.note-date {
    font-size: 0.75em;
    color: #64748b;
    margin-top: 4px;
}

.delete-btn {
    padding: 6px 10px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75em;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.delete-btn:hover {
    background: #dc2626;
}

.empty-state {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
    font-size: 0.85em;
}

.empty-state i {
    font-size: 2em;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Bookmark form */
.bookmark-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 6px;
}

.bookmark-form input {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: inherit;
}

.bookmark-form input:focus {
    outline: none;
    border-color: #3b82f6;
}

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

.bookmark-form-actions button {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.save-bookmark-btn {
    background: #3b82f6;
    color: white;
}

.save-bookmark-btn:hover {
    background: #2563eb;
}

.cancel-bookmark-btn {
    background: #e2e8f0;
    color: #64748b;
}

.cancel-bookmark-btn:hover {
    background: #cbd5e1;
}

.custom-bookmark-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    text-decoration: none;
    flex: 1;
    font-size: 0.9em;
}

.custom-bookmark-item a:hover {
    text-decoration: underline;
}

.custom-bookmark-item i {
    color: #3b82f6;
    font-size: 0.9em;
}

/* Email Summary Section */
.email-summary-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.email-summary-section h3 {
    margin: 0 0 16px 0;
    color: #1f2937;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 6px;
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-item strong {
    display: block;
    font-size: 2em;
    color: #3b82f6;
    margin-bottom: 4px;
}

.stat-item span {
    font-size: 0.85em;
    color: #64748b;
}

.email-list {
    max-height: 420px;
    overflow-y: auto;
}

.email-item {
    padding: 12px 14px;
    border-left: 3px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
}

.email-item:hover {
    background: #f1f5f9;
    border-left-color: #3b82f6;
}

.email-item.unread {
    background: #eff6ff;
    border-left-color: #3b82f6;
    font-weight: 600;
}

.email-item.important {
    border-left-color: #ef4444;
}

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

.email-from {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.email-time {
    font-size: 0.82em;
    color: #64748b;
    flex-shrink: 0;
}

.email-subject {
    font-size: 0.95em;
    color: #1e293b;
    margin-bottom: 3px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-preview {
    font-size: 0.88em;
    color: #94a3b8;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

.email-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

/* Actions dropdown */
.email-actions-dropdown {
    position: relative;
    display: inline-block;
}
.email-actions-toggle {
    padding: 4px 12px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.email-actions-toggle:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}
.email-actions-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 200;
    overflow: hidden;
}
.email-actions-menu.show {
    display: block;
}
.email-actions-menu button {
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.85em;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s ease;
}
.email-actions-menu button:hover {
    background: #f1f5f9;
}
.email-actions-menu button.danger {
    color: #dc2626;
}
.email-actions-menu button.danger:hover {
    background: #fef2f2;
}
.email-actions-menu .divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}

/* AI Instructions prompt modal */
.ai-instructions-modal {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ai-instructions-modal h3 {
    margin: 0 0 4px 0;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-instructions-modal p {
    margin: 0 0 14px 0;
    color: #64748b;
    font-size: 0.88em;
}
.ai-instructions-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.92em;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.ai-instructions-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.ai-instructions-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.ai-instructions-actions .skip-link {
    color: #64748b;
    text-decoration: none;
    font-size: 0.88em;
    cursor: pointer;
    margin-right: auto;
}
.ai-instructions-actions .skip-link:hover {
    color: #334155;
}
.ai-instructions-actions .generate-btn {
    padding: 8px 18px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ai-instructions-actions .generate-btn:hover {
    background: #2563eb;
}

/* Regenerate bar inside reply modal */
.regen-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    margin-bottom: 12px;
}
.regen-bar input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: inherit;
}
.regen-bar input:focus {
    outline: none;
    border-color: #3b82f6;
}
.regen-bar button {
    padding: 6px 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
}
.regen-bar button:hover {
    background: #2563eb;
}

/* Signature editor toolbar */
.sig-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
}
.sig-toolbar button {
    padding: 4px 8px;
    border: 1px solid transparent;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    color: #334155;
    transition: all 0.1s;
}
.sig-toolbar button:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}
.sig-toolbar-sep {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 4px;
}

/* Signature editor in settings */
.signature-editor {
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 6px 6px;
    font-family: inherit;
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 10px;
    background: white;
}
.signature-editor:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.save-signature-btn {
    padding: 6px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
}
.save-signature-btn:hover {
    background: #059669;
}

/* Move email folder picker */
.folder-picker-modal {
    background: white;
    border-radius: 12px;
    padding: 20px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-height: 400px;
    display: flex;
    flex-direction: column;
}
.folder-picker-modal h3 {
    margin: 0 0 14px 0;
    font-size: 1.05em;
}
.folder-picker-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 12px;
}
.folder-picker-list button {
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}
.folder-picker-list button:hover {
    background: #f1f5f9;
}
.folder-picker-list button:last-child {
    border-bottom: none;
}

.email-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.email-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #e2e8f0;
    border-radius: 12px;
    font-size: 0.75em;
    color: #64748b;
}

.email-badge i {
    font-size: 0.9em;
}

/* AI Summary Toggle Switch */
.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3b82f6;
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider {
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    transform: translateX(0);
}

#aiSummaryToggle:checked ~ .toggle-track {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

#aiSummaryToggle:checked ~ .toggle-slider {
    transform: translateX(20px);
}

/* AI Reply Button */
.ai-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.75em;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.ai-reply-btn:hover {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.ai-reply-btn i {
    font-size: 0.9em;
}

/* Email Delete Button — matches AI Reply button size */
.email-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.75em;
    cursor: pointer;
    transition: background 0.2s;
}

.email-delete-btn:hover {
    background: #dc2626;
}

.view-full-inbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 16px;
    transition: all 0.2s;
}

.view-full-inbox-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* Calendar in Sidebar */
.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.calendar-panel {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.calendar-panel h3 {
    font-size: 0.92em;
    font-weight: 600;
    color: white;
    margin: 0;
    padding: 12px 14px;
    background: #2563eb;
    border-bottom: none;
}

.calendar-panel h3 i {
    margin-right: 8px;
    color: white;
}

.calendar-panel > div:last-child {
    padding: 12px;
}

#personalCalendar,
#schoolCalendar {
    font-size: 0.85em;
}

/* Bookmarks Tab — links rendered as rows inside dir-dept-card bodies */
.bookmark-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    text-decoration: none;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
    border-radius: 4px;
}
.bookmark-link:last-child { border-bottom: none; }

.bookmark-link:hover {
    background: #f1f5f9;
}

.bookmark-link-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bookmark-link-left i {
    width: 18px;
    text-align: center;
    color: #3b82f6;
    font-size: 0.9em;
}

.bookmark-link-left span {
    font-size: 0.95em;
    font-weight: 500;
}

.bookmark-link-ext {
    font-size: 0.7em;
    color: #94a3b8;
    margin-right: 4px;
}

/* Support Tab — Search & Filters */
.support-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.support-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.85em;
    pointer-events: none;
}

.support-search-bar {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9em;
    color: #1f2937;
    background: white;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.support-search-bar:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.support-filter-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.support-filter-pill {
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: white;
    color: #64748b;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.support-filter-pill:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.support-filter-pill.active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

.support-section-heading {
    font-size: 1.05em;
    color: #1f2937;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.support-section-heading i {
    margin-right: 6px;
    color: #3b82f6;
}

#appSupportSection {
    margin-top: 24px;
}

.support-no-results {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    padding: 40px 20px;
    font-size: 0.9em;
}

.support-no-results i {
    margin-right: 6px;
}

/* Support Tab — Cards */
.support-item {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.support-item h4 {
    font-size: 1.05em;
    color: #1f2937;
    margin-bottom: 8px;
}

.support-item p {
    font-size: 0.95em;
    color: #6b7280;
    margin: 0;
}

.support-item a {
    color: #3b82f6;
    text-decoration: none;
}

.support-item a:hover {
    text-decoration: underline;
}

/* Staff Directory Cards */
.dir-dept-card {
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.dir-dept-header {
    padding: 12px 14px;
    background: #2563eb;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.dir-dept-title {
    font-weight: 600;
    font-size: 1em;
}
.dir-dept-title i {
    margin-right: 6px;
    opacity: 0.85;
}
.dir-dept-location {
    font-size: 0.78em;
    opacity: 0.85;
}
.dir-dept-location i {
    margin-right: 4px;
}
.dir-dept-body {
    padding: 10px 14px;
}


.dir-person {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}
.dir-person:last-child {
    border-bottom: none;
}
.dir-person-name {
    font-weight: 600;
    font-size: 0.95em;
    color: #0f172a;
}
.dir-person-title {
    font-size: 0.88em;
    color: #64748b;
    margin-bottom: 4px;
}
.dir-person-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.92em;
}
.dir-person-contact span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #475569;
}
.dir-person-contact i {
    color: #3b82f6;
    font-size: 0.85em;
}
.dir-person-contact a {
    color: #3b82f6;
    text-decoration: none;
}
.dir-person-contact a:hover {
    text-decoration: underline;
}
.dir-extra {
    font-size: 0.92em;
    padding: 6px 0;
    color: #475569;
    border-top: 1px dashed #e2e8f0;
}
.dir-extra:first-child {
    border-top: none;
}
.dir-extra i {
    color: #3b82f6;
    margin-right: 4px;
    font-size: 0.85em;
}
.dir-extra a {
    color: #3b82f6;
    text-decoration: none;
}
.dir-extra a:hover {
    text-decoration: underline;
}

/* Main Chat Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
}

.chat-header {
    background: var(--primary-50);
    color: var(--primary-900);
    padding: 16px 24px;
    border-bottom: 1px solid var(--primary-200);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-header-content {
    flex: 1;
}

.chat-header h1 {
    font-size: 1.25em;
    margin-bottom: 0;
    color: var(--primary-900);
    font-weight: 600;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 20px 16px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    --chat-font-size: 0.95rem;
}
.chat-messages.font-small  { --chat-font-size: 0.85rem; }
.chat-messages.font-default { --chat-font-size: 0.95rem; }
.chat-messages.font-large  { --chat-font-size: 1.08rem; }
.chat-messages.font-xlarge { --chat-font-size: 1.2rem; }

.chat-watermark-container {
    display: none;
}

.welcome-greeting-bubble {
    font-size: 1.15em;
    padding: 8px 0;
}

/* Vertically center the avatar with the single-line welcome greeting */
.message-assistant:has(.welcome-greeting-bubble) {
    align-items: center;
}

.message {
    margin-bottom: 20px;
    animation: slideIn 0.3s ease;
}

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

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

.message-assistant {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.message-avatar i {
    color: white;
    font-size: 0.8em;
}

.message-assistant-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 42px);
}

.message-bubble {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 18px;
    max-width: 100%;
    word-wrap: break-word;
    font-size: var(--chat-font-size);
}

.message-user {
    justify-content: flex-end;
}

.message-user .message-bubble {
    background: #2563eb;
    color: white;
    border-top-right-radius: 4px;
}

.message-assistant .message-bubble {
    background: transparent;
    color: #1e293b;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 2px;
}

/* Demo explainer bubbles — subtle info callout, not a box */
.message-demo-explain .message-bubble {
    background: transparent;
    color: #64748b;
    border: none;
    border-left: 3px solid #cbd5e1;
    border-radius: 0;
    font-style: italic;
    font-size: 0.9em;
    box-shadow: none;
    padding: 4px 0 4px 12px;
}
.message-demo-explain .message-avatar {
    background: #94a3b8;
}

.chat-heading {
    margin: 8px 0 4px 0;
    font-weight: 600;
    line-height: 1.3;
}
h3.chat-heading { font-size: 1.1em; }
h4.chat-heading { font-size: 1.05em; }
h5.chat-heading { font-size: 1em; }

.message-bubble ul.chat-list,
.message-bubble ol.chat-list {
    margin: 6px 0;
    padding-left: 20px;
}

.message-bubble .chat-list li {
    margin-bottom: 3px;
    line-height: 1.5;
}

.embedded-guide {
    width: 100%;
    max-width: 760px;
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}

/* ScribeHow step-by-step slideshows — tall interactive content */
.embedded-guide.scribe-embed {
    height: 640px;
}

/* Video embeds (SharePoint, etc.) — 16:9 widescreen */
.embedded-guide.video-embed {
    aspect-ratio: 16 / 9;
}

.embedded-guide iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.embedded-image {
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: inline-block;
    max-width: 100%;
}

.embedded-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0;
}

.embedded-image .image-caption {
    padding: 6px 12px;
    font-size: 0.85em;
    color: #64748b;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.message-sources {
    margin-top: 10px;
    padding: 12px;
    background: #f8fafc;
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    font-size: 0.85em;
    max-width: 70%;
}

.message-sources summary {
    cursor: pointer;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 8px;
}

.source-item {
    padding: 6px 0;
    color: #475569;
}

.source-item a {
    color: #3b82f6;
    text-decoration: none;
}

.source-title {
    font-weight: 600;
    color: #0f172a;
}

.source-section {
    font-size: 0.85em;
    color: #475569;
    margin-top: 2px;
}

.source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.source-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.source-score {
    margin-top: 4px;
    font-size: 0.8em;
    color: #475569;
}

.message-downloads {
    margin-top: 14px;
    padding: 16px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 80%;
}

.downloads-title {
    font-weight: 600;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
}
.downloads-title i {
    font-size: 1.1em;
}

.inline-link {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 600;
}

.download-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: #0f172a;
    font-weight: 600;
    margin-top: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.download-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    flex-shrink: 0;
}

.download-label {
    white-space: normal;
}

.download-ext {
    font-size: 0.75em;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-weight: 700;
}

.download-link--pdf .download-icon {
    background: rgba(248, 113, 113, 0.18);
    color: #b91c1c;
}

.download-link--word .download-icon {
    background: rgba(129, 140, 248, 0.2);
    color: #4338ca;
}

.download-link--excel .download-icon {
    background: rgba(16, 185, 129, 0.18);
    color: #047857;
}

.download-link--ppt .download-icon {
    background: rgba(249, 115, 22, 0.18);
    color: #c2410c;
}

.download-link--default .download-icon {
    background: rgba(148, 163, 184, 0.2);
    color: #475569;
}

.source-download {
    margin-top: 10px;
}

/* Feedback Button */
.scroll-down-arrow {
    position: sticky;
    bottom: 12px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 10;
    transition: all 0.2s ease;
    margin: 0 auto;
}

.scroll-down-arrow:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.scroll-down-arrow i {
    font-size: 12px;
}

/* Section Navigator (for long responses with 3+ headings) */
.scroll-nav-wrapper {
    position: sticky;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    z-index: 10;
    flex-shrink: 0;
    min-height: 40px;
}

.scroll-nav-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    transition: all 0.2s ease;
    color: #3b82f6;
}

.scroll-nav-btn:hover {
    background: #eff6ff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.scroll-nav-btn i {
    font-size: 14px;
}

.scroll-nav-menu {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    max-width: 280px;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    z-index: 20;
}

.scroll-nav-menu.active {
    display: block;
    animation: navMenuIn 0.15s ease-out;
}

@keyframes navMenuIn {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.scroll-nav-item {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.82em;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-nav-item:last-child {
    border-bottom: none;
}

.scroll-nav-item:hover {
    background: #f0f4ff;
    color: #1e40af;
}

.scroll-nav-item--bottom {
    font-weight: 600;
    color: #3b82f6;
    border-top: 1px solid #e2e8f0;
}

.scroll-nav-item--bottom:hover {
    background: #eff6ff;
}

.message-feedback {
    margin-top: 8px;
}

.feedback-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.feedback-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.feedback-btn i {
    font-size: 0.9em;
}

/* Feedback Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

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

.modal-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.3em;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f1f5f9;
    color: #475569;
}

.feedback-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.feedback-option {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    text-align: left;
    font-size: 14px;
}

.feedback-option:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.feedback-option.selected {
    border-color: #3b82f6;
    background: #dbeafe;
}

.feedback-details {
    margin-bottom: 20px;
}

.feedback-details label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #334155;
    font-size: 14px;
}

.feedback-details textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

.feedback-details textarea:focus {
    outline: none;
    border-color: #3b82f6;
}

.feedback-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.feedback-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.feedback-actions .btn-cancel {
    background: #f1f5f9;
    color: #64748b;
}

.feedback-actions .btn-cancel:hover {
    background: #e2e8f0;
}

.feedback-actions .btn-submit {
    background: #3b82f6;
    color: white;
}

.feedback-actions .btn-submit:hover {
    background: #2563eb;
}

.feedback-actions .btn-submit:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.source-item a:hover {
    text-decoration: underline;
}

.chat-disclaimer {
    text-align: center;
    font-size: 0.72em;
    color: #94a3b8;
    margin: 4px 0 0;
    letter-spacing: 0.01em;
}

.chat-input-container {
    position: relative;
    padding: 12px 24px 8px;
    background: white;
    border-top: 1px solid var(--primary-200);
    box-shadow: 0 -1px 4px rgb(0 0 0 / 0.04);
    z-index: 50;
}

/* Single bordered input box */
.input-box {
    border: 1.5px solid var(--primary-200);
    border-radius: 14px;
    background: var(--primary-50);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative;
}

.input-box:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    background: white;
}

.input-box #userInput {
    width: 100%;
    border: none;
    outline: none;
    padding: 12px 16px 4px;
    font-size: 0.95em;
    font-family: inherit;
    resize: none;
    line-height: 1.4;
    min-height: 40px;
    max-height: 120px;
    box-sizing: border-box;
    border-radius: 16px 16px 0 0;
    background: transparent;
}

/* Bottom toolbar inside the input box */
.input-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 6px;
}

.input-tools-wrapper {
    position: relative;
}

.tools-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: transparent;
    color: #9ca3af;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tools-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

/* Send button — rounded square with arrow icon */
.input-toolbar #sendBtn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.input-toolbar #sendBtn:hover:not(:disabled) {
    background: var(--accent-blue-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.input-toolbar #sendBtn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.input-toolbar #sendBtn.stop-active {
    background: #ef4444;
    opacity: 1;
    cursor: pointer;
}

.input-toolbar #sendBtn.stop-active:hover {
    background: #dc2626;
}

/* Tools popup menu */
.tools-menu {
    position: absolute;
    bottom: 36px;
    left: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    min-width: 240px;
    z-index: 9000;
    overflow: hidden;
    animation: toolsMenuIn 0.15s ease-out;
}

@keyframes toolsMenuIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tools-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    font-family: inherit;
}

.tools-menu-item:hover {
    background: #f1f5f9;
}

.tools-menu-item i {
    font-size: 1.1em;
    color: #3b82f6;
    width: 20px;
    text-align: center;
}

.tools-menu-item div {
    display: flex;
    flex-direction: column;
}

.tools-menu-item strong {
    font-size: 0.9em;
    color: #1e293b;
}

.tools-menu-item span {
    font-size: 0.78em;
    color: #94a3b8;
}

/* Tools Panel (slides up above input) */
.tools-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    max-height: 320px;
    overflow-y: auto;
    z-index: 8000;
    animation: panelSlideUp 0.2s ease-out;
}

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

.tools-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 600;
    font-size: 0.9em;
    color: #334155;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.tools-panel-close {
    background: none;
    border: none;
    font-size: 1.3em;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
}

.tools-panel-close:hover {
    color: #475569;
}

.tools-panel-content {
    padding: 8px;
}

.tools-panel-content .topic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.88em;
    color: #334155;
}

.tools-panel-content .topic-item:hover {
    background: #f1f5f9;
}

.tools-panel-content .topic-item i {
    color: #3b82f6;
    width: 18px;
    text-align: center;
    font-size: 0.95em;
}

.tools-panel-content .topic-item .topic-desc {
    font-size: 0.85em;
    color: #94a3b8;
    margin-top: 2px;
}

.tools-panel-content .source-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.88em;
    color: #334155;
}

.tools-panel-content .source-item i {
    color: #10b981;
    width: 18px;
    text-align: center;
    margin-top: 2px;
}

.tools-panel-content .source-item .source-desc {
    font-size: 0.82em;
    color: #94a3b8;
    margin-top: 2px;
}

.tools-panel-content .section-label {
    font-size: 0.75em;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px 4px;
    margin-top: 4px;
}

/* Old standalone #userInput and #sendBtn styles removed — now inside .input-box and .input-toolbar */

.loading {
    display: none;
}

.loading.active {
    display: none; /* Replaced by typing bubble in chat */
}

/* Animated typing indicator bubble */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #94a3b8;
    border-radius: 50%;
    display: inline-block;
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-7px); opacity: 1; }
}

.welcome-message {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.welcome-message h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #1e293b;
}

/* Scrollbar */
.tab-content::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.tab-content::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.tab-content::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sidebar {
        width: 400px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        max-width: 100%;
        position: absolute;
        z-index: 100;
    }

    .sidebar.collapsed {
        margin-left: -100%;
    }

    .resize-handle {
        display: none;
    }

    .expand-sidebar-btn {
        left: 12px;
        top: 12px;
    }
}

/* Conversation History Panel */
.conversation-panel {
    position: fixed;
    right: -350px;
    top: 0;
    width: 350px;
    height: 100vh;
    background: white;
    border-left: 1px solid #e5e7eb;
    transition: right 0.3s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

.conversation-panel.active {
    right: 0;
}

.conversation-header {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2563eb;
    color: white;
}

.conversation-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-conversations-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.close-conversations-btn:hover {
    opacity: 1;
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.conversation-item {
    padding: 15px;
    margin-bottom: 10px;
    background: #f9fafb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.conversation-item:hover {
    background: #f3f4f6;
    border-color: #3b82f6;
}

.conversation-item.active {
    background: #eef2ff;
    border-color: #3b82f6;
}

.conversation-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 5px;
}

.conversation-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-date {
    color: #9ca3af;
}

.conversation-count {
    background: #3b82f6;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.loading-conversations {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.conversations-toggle-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.2s;
    font-size: 16px;
}

.conversations-toggle-btn:hover {
    background: #5568d3;
}

.new-conversation-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.new-conversation-btn:hover {
    background: #059669;
}

.new-conversation-btn i {
    font-size: 12px;
}

/* Conversation History Dropdown */
.history-dropdown-container {
    position: relative;
    margin-right: 12px;
}

.history-dropdown-btn {
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--primary-200);
    border-radius: 8px;
    color: var(--primary-700);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.history-dropdown-btn:hover {
    background: var(--primary-100);
    border-color: var(--primary-300);
    transform: translateY(-1px);
}

.history-dropdown-btn .dropdown-icon {
    transition: transform 0.2s;
    font-size: 0.8em;
}

.history-dropdown-btn.active .dropdown-icon {
    transform: rotate(180deg);
}

.history-dropdown-menu {
    position: fixed;
    top: 80px;
    left: auto;
    min-width: 350px;
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 640px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.history-dropdown-menu.active {
    display: flex;
}

.conversation-list-dropdown {
    flex: 1;
    max-height: 420px;
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}

.conversation-list-dropdown .loading-conversations {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.conversation-list-dropdown::-webkit-scrollbar {
    width: 6px;
}

.conversation-list-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.conversation-list-dropdown::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 999px;
}

.conversation-list-dropdown .conversation-item {
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.conversation-list-dropdown .conversation-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.conversation-list-dropdown .conversation-item.active {
    background: linear-gradient(135deg, #f0f4ff 0%, #e7efff 100%);
    border-color: #3b82f6;
}

.conversation-list-dropdown .conversation-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-list-dropdown .conversation-preview {
    font-size: 0.85em;
    color: #475569;
    margin-bottom: 6px;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.conversation-list-dropdown .conversation-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: #64748b;
    gap: 6px;
    flex-wrap: wrap;
}

/* New Chat Button */
.new-chat-btn {
    padding: 8px 16px;
    border: 1px solid #2563eb;
    border-radius: 8px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: white;
}

.new-chat-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    transform: translateY(-1px);
}

/* Conversation History Panel */
.conversation-history-panel {
    position: absolute;
    top: 80px;
    left: 20px;
    width: 320px;
    max-height: calc(100% - 100px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.conversation-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.conversation-history-header h3 {
    margin: 0;
    font-size: 1em;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-history-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.close-history-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.loading-conversations {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.conversation-item {
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.conversation-item-main {
    flex: 1;
}

.conversation-delete-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

.conversation-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.conversation-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.conversation-item.active {
    background: linear-gradient(135deg, #f0f4ff 0%, #e7efff 100%);
    border-color: #3b82f6;
}

.conversation-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    font-size: 0.9em;
}

.conversation-preview {
    font-size: 0.9em;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: #64748b;
}

/* ===== Dark Mode ===== */
body.dark-mode {
    background: #0f172a;
    color: #e2e8f0;
}

/* Sidebar */
body.dark-mode .sidebar {
    background: #1e293b;
    border-right-color: #334155;
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
}
body.dark-mode .sidebar-header {
    background: #1e293b;
    border-bottom-color: #334155;
}
body.dark-mode .sidebar-header h1 {
    color: #f1f5f9;
}
/* Logo icon: white border + white icon in dark mode */
body.dark-mode .panel-icon-wrap {
    background: transparent;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
body.dark-mode .panel-icon-wrap .panel-icon {
    margin-right: 0;
}
body.dark-mode .panel-icon-wrap.login-icon-wrap {
    border-radius: 18px;
    margin-bottom: 20px;
}
body.dark-mode .panel-icon-wrap .login-icon {
    width: 100px;
    height: 100px;
}
body.dark-mode .tab-nav {
    background: #1e293b;
    border-bottom-color: #334155;
}
body.dark-mode .tab-button {
    color: #94a3b8;
}
body.dark-mode .tab-button:hover {
    color: #e2e8f0;
    background: #334155;
}
body.dark-mode .tab-button.active {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.15);
}
body.dark-mode .tab-content {
    background: #1e293b;
}

/* Welcome panel in sidebar */
body.dark-mode .welcome-panel {
    background: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body.dark-mode .welcome-panel h2 {
    color: #f1f5f9;
}
body.dark-mode .welcome-panel p {
    color: #94a3b8;
}
body.dark-mode .welcome-panel a {
    color: #60a5fa;
}

/* Hero carousel dark mode */
body.dark-mode .hero-carousel {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
body.dark-mode .carousel-overlay {
    background: linear-gradient(135deg, rgba(2,6,23,0.82) 0%, rgba(30,58,138,0.65) 100%);
}

/* Sidebar notes and bookmarks */
body.dark-mode .note-card,
body.dark-mode .bookmark-card {
    background: #0f172a;
    border-color: #334155;
}

/* Header action buttons */
body.dark-mode .header-action-btn {
    border-color: rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
}

/* Main content area */
body.dark-mode .main-content {
    background: #0f172a;
}
body.dark-mode .chat-header {
    background: #0f172a;
    border-bottom-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .chat-header h1 {
    color: #e2e8f0;
}

/* User profile */
body.dark-mode .user-profile {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .user-name {
    color: #f1f5f9;
}
body.dark-mode .user-email {
    color: #94a3b8;
}
body.dark-mode .user-logout-btn,
body.dark-mode .user-settings-btn {
    background: #334155;
    color: #cbd5e1;
}
body.dark-mode .user-logout-btn:hover,
body.dark-mode .user-settings-btn:hover {
    background: #475569;
    color: #60a5fa;
}

/* Chat messages area */
body.dark-mode .chat-messages {
    background: #0f172a;
}
body.dark-mode .welcome-message {
    color: #94a3b8;
}
body.dark-mode .welcome-message h2 {
    color: #f1f5f9;
}

/* Message bubbles */
body.dark-mode .message-assistant .message-bubble {
    background: transparent;
    color: #e2e8f0;
    border: none;
    box-shadow: none;
}
body.dark-mode .message-user .message-bubble {
    background: #1d4ed8;
}
body.dark-mode .message-demo-explain .message-bubble {
    background: transparent;
    color: #94a3b8;
    border: none;
    border-left: 3px solid #475569;
}

/* Chat headings */
body.dark-mode .chat-heading {
    color: #f1f5f9;
}

/* Message feedback */
body.dark-mode .message-feedback {
    border-color: #334155;
}
body.dark-mode .feedback-btn {
    color: #94a3b8;
    border-color: #334155;
}
body.dark-mode .feedback-btn:hover {
    background: #334155;
    border-color: #475569;
    color: #f87171;
}

/* Chat input */
body.dark-mode .chat-input-container {
    background: #0f172a;
    border-top-color: #334155;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.2);
}
body.dark-mode .input-box {
    border-color: #334155;
    background: #1e293b;
}
body.dark-mode .input-box:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
    background: #1e293b;
}
body.dark-mode .input-box #userInput {
    color: #e2e8f0;
}
body.dark-mode .tools-btn {
    border-color: #475569;
    color: #94a3b8;
}
body.dark-mode .tools-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
}
body.dark-mode .chat-disclaimer {
    color: #64748b;
}

/* Scroll indicators */
body.dark-mode .scroll-down-arrow {
    background: rgba(30, 41, 59, 0.9);
    border-color: #334155;
    color: #94a3b8;
}
body.dark-mode .scroll-nav-btn {
    background: rgba(30, 41, 59, 0.95);
    border-color: #3b82f6;
    color: #60a5fa;
}
body.dark-mode .scroll-nav-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
body.dark-mode .scroll-nav-item {
    color: #cbd5e1;
    border-bottom-color: #334155;
}
body.dark-mode .scroll-nav-item:hover {
    background: #334155;
    color: #60a5fa;
}

/* Modals */
body.dark-mode .modal-content {
    background: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
body.dark-mode .modal-header h3 {
    color: #f1f5f9;
}
body.dark-mode .modal-close {
    color: #64748b;
}
body.dark-mode .modal-close:hover {
    color: #e2e8f0;
}

/* Settings modal specifics */
body.dark-mode .settings-label {
    color: #cbd5e1;
}
body.dark-mode .font-size-btn {
    border-color: #334155;
    background: #0f172a;
    color: #94a3b8;
}
body.dark-mode .font-size-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
}
body.dark-mode .font-size-btn.active {
    border-color: #3b82f6;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 0 1px #3b82f6;
}
body.dark-mode .font-size-preview {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

/* Theme toggle */
.theme-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.theme-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #e2e8f0;
    border-radius: 26px;
    transition: background 0.3s;
}
.theme-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.theme-toggle input:checked + .theme-slider {
    background: #3b82f6;
}
.theme-toggle input:checked + .theme-slider::before {
    transform: translateX(22px);
}
.theme-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.9em;
}
body.dark-mode .theme-icons {
    color: #94a3b8;
}
body.dark-mode .theme-slider {
    background: #475569;
}

/* Conversation history panel */
body.dark-mode .conversation-panel,
body.dark-mode .conversation-history-panel {
    background: #1e293b;
    border-color: #334155;
    box-shadow: -4px 0 20px rgba(0,0,0,0.4);
}
body.dark-mode .conversation-item {
    border-color: #334155;
}
body.dark-mode .conversation-item:hover {
    background: #334155;
}

/* MS365 login button in dark mode */
body.dark-mode .ms365-login-btn {
    background: #dc2626;
}

/* Expand sidebar button */
body.dark-mode .expand-sidebar-btn {
    color: #94a3b8;
    border-color: #334155;
}
body.dark-mode .expand-sidebar-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* History dropdown */
body.dark-mode .history-dropdown-content {
    background: #1e293b;
    border-color: #334155;
}

/* Links tab (bookmark link rows inside dir-dept-card) */
body.dark-mode .bookmark-link {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
}
body.dark-mode .bookmark-link:hover {
    background: #334155;
}
body.dark-mode .bookmark-link-left i {
    color: #60a5fa;
}
body.dark-mode .bookmark-link-ext {
    color: #64748b;
}
body.dark-mode .link-card {
    background: #0f172a;
    border-color: #334155;
}
body.dark-mode .link-card:hover {
    border-color: #60a5fa;
}

/* Support tab */
body.dark-mode .support-article-item {
    border-color: #334155;
    color: #cbd5e1;
}
body.dark-mode .support-article-item:hover {
    background: #334155;
}

/* Message sources */
body.dark-mode .message-sources {
    background: #1e293b;
    border-left-color: #3b82f6;
    color: #94a3b8;
}
body.dark-mode .message-sources summary {
    color: #60a5fa;
}
body.dark-mode .source-item {
    color: #94a3b8;
}
body.dark-mode .source-title {
    color: #e2e8f0;
}
body.dark-mode .source-section {
    color: #64748b;
}
body.dark-mode .source-score {
    color: #64748b;
}
body.dark-mode .source-link {
    color: #60a5fa;
}

/* Download links in dark mode */
body.dark-mode .download-link {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
body.dark-mode .download-link:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Sidebar content */
body.dark-mode .personal-section {
    background: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body.dark-mode .personal-section h3 {
    color: #e2e8f0;
}
body.dark-mode .personal-tools-header button {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
body.dark-mode .personal-tools-header button:hover {
    background: #334155;
    border-color: #60a5fa;
    color: #60a5fa;
}
body.dark-mode .note-item,
body.dark-mode .custom-bookmark-item {
    background: #1e293b;
    border-left-color: #3b82f6;
}
body.dark-mode .note-input-area input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .empty-state {
    color: #64748b;
}

/* Calendar tab */
body.dark-mode .calendar-panel {
    background: #0f172a;
    border-color: #334155;
}
body.dark-mode .calendar-panel h3 {
    background: #1e40af;
    color: white;
}
body.dark-mode .fc-theme-standard {
    color: #e2e8f0;
}
body.dark-mode .fc .fc-toolbar-title {
    color: #f1f5f9;
}
body.dark-mode .fc .fc-button-primary {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
body.dark-mode .fc .fc-button-primary:hover {
    background: #475569;
}
body.dark-mode .fc .fc-button-primary.fc-button-active {
    background: #3b82f6;
    border-color: #3b82f6;
}
body.dark-mode .fc .fc-list {
    border-color: #334155;
}
body.dark-mode .fc .fc-list-empty {
    background: #1e293b;
}
body.dark-mode .fc .fc-list-empty-cushion {
    color: #64748b;
}
body.dark-mode .fc .fc-scroller {
    background: #1e293b;
}
body.dark-mode .fc-theme-standard td,
body.dark-mode .fc-theme-standard th,
body.dark-mode .fc-theme-standard .fc-scrollgrid {
    border-color: #334155;
}
body.dark-mode .fc .fc-daygrid-day {
    background: #1e293b;
}
body.dark-mode .fc .fc-daygrid-day-number {
    color: #cbd5e1;
}
body.dark-mode .fc .fc-col-header-cell {
    background: #0f172a;
    color: #94a3b8;
}
body.dark-mode .fc .fc-day-today {
    background: rgba(59, 130, 246, 0.1) !important;
}
body.dark-mode .fc .fc-list-day-cushion {
    background: #0f172a;
    color: #e2e8f0;
}
body.dark-mode .fc .fc-list-event:hover td {
    background: #334155;
}

/* Support tab */
body.dark-mode .support-search-bar {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .support-search-bar::placeholder {
    color: #64748b;
}
body.dark-mode .support-search-bar:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
body.dark-mode .support-search-icon {
    color: #64748b;
}
body.dark-mode .support-filter-pill {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
body.dark-mode .support-filter-pill:hover {
    background: #334155;
    color: #e2e8f0;
}
body.dark-mode .support-filter-pill.active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}
body.dark-mode .support-item {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body.dark-mode .support-item h4 {
    color: #e2e8f0;
}
body.dark-mode .support-item p {
    color: #94a3b8;
}
body.dark-mode .support-item a {
    color: #60a5fa;
}
body.dark-mode .support-section-heading {
    color: #e2e8f0;
    border-bottom-color: #334155;
}
/* Dark mode — Staff Directory */
body.dark-mode .dir-dept-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .dir-dept-header {
    background: #1e40af;
}
body.dark-mode .dir-dept-body {
    background: #1e293b;
}
body.dark-mode .dir-person {
    border-bottom-color: #334155;
}
body.dark-mode .dir-person-name {
    color: #f1f5f9;
}
body.dark-mode .dir-person-title {
    color: #94a3b8;
}
body.dark-mode .dir-person-contact span {
    color: #94a3b8;
}
body.dark-mode .dir-person-contact i,
body.dark-mode .dir-person-contact a {
    color: #60a5fa;
}
body.dark-mode .dir-extra {
    color: #94a3b8;
    border-top-color: #334155;
}
body.dark-mode .dir-extra i,
body.dark-mode .dir-extra a {
    color: #60a5fa;
}
body.dark-mode .support-no-results {
    color: #64748b;
}


/* Email / Inbox section */
body.dark-mode .email-summary-section {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body.dark-mode .email-summary-section h3 {
    color: #e2e8f0;
}
body.dark-mode .email-list {
    color: #cbd5e1;
}
body.dark-mode .email-item {
    background: #0f172a;
    border-left-color: #334155;
}
body.dark-mode .email-item:hover {
    background: #334155;
    border-left-color: #3b82f6;
}
body.dark-mode .email-item.unread {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: #3b82f6;
}
body.dark-mode .email-item.important {
    border-left-color: #ef4444;
}
body.dark-mode .email-from {
    color: #f1f5f9;
}
body.dark-mode .email-time {
    color: #94a3b8;
}
body.dark-mode .email-subject {
    color: #e2e8f0;
}
body.dark-mode .email-preview {
    color: #94a3b8;
}
body.dark-mode .email-badge {
    background: #334155;
    color: #94a3b8;
}
/* Actions dropdown dark mode */
body.dark-mode .email-actions-toggle {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: #1e40af;
}
body.dark-mode .email-actions-toggle:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
}
body.dark-mode .email-actions-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
body.dark-mode .email-actions-menu button {
    color: #cbd5e1;
}
body.dark-mode .email-actions-menu button:hover {
    background: #334155;
}
body.dark-mode .email-actions-menu button.danger {
    color: #f87171;
}
body.dark-mode .email-actions-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}
body.dark-mode .email-actions-menu .divider {
    background: #334155;
}
/* AI instructions dark mode */
body.dark-mode .ai-instructions-modal {
    background: #1e293b;
    color: #e2e8f0;
}
body.dark-mode .ai-instructions-modal p {
    color: #94a3b8;
}
body.dark-mode .ai-instructions-input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .ai-instructions-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
body.dark-mode .ai-instructions-actions .skip-link {
    color: #94a3b8;
}
body.dark-mode .ai-instructions-actions .skip-link:hover {
    color: #cbd5e1;
}
/* Regen bar dark mode */
body.dark-mode .regen-bar {
    background: rgba(59, 130, 246, 0.1);
    border-color: #1e40af;
}
body.dark-mode .regen-bar input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
/* Signature toolbar + editor dark mode */
body.dark-mode .sig-toolbar {
    background: #0f172a;
    border-color: #334155;
}
body.dark-mode .sig-toolbar button {
    color: #cbd5e1;
}
body.dark-mode .sig-toolbar button:hover {
    background: #334155;
    border-color: #475569;
}
body.dark-mode .sig-toolbar-sep {
    background: #334155;
}
body.dark-mode .signature-editor {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .signature-editor:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
/* Folder picker dark mode */
body.dark-mode .folder-picker-modal {
    background: #1e293b;
    color: #e2e8f0;
}
body.dark-mode .folder-picker-list button {
    color: #cbd5e1;
    border-bottom-color: #334155;
}
body.dark-mode .folder-picker-list button:hover {
    background: #334155;
}
/* Inline-styled email controls */
body.dark-mode #emailSearchInput {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.dark-mode #emailSortSelect {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.dark-mode #emailSortSelect option {
    background: #1e293b;
    color: #e2e8f0;
}
/* Inline-styled email refresh button */
body.dark-mode .email-summary-section button[onclick="refreshEmails()"] {
    background: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

/* Collapsible AI Summary Section */
.ai-summary-collapsible {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background: white;
}
.ai-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #2563eb;
    color: white;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.ai-summary-header:hover {
    filter: brightness(1.08);
}
.ai-summary-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9em;
}
.ai-summary-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-summary-refresh {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    transition: background 0.2s;
}
.ai-summary-refresh:hover {
    background: rgba(255,255,255,0.35);
}
.ai-summary-chevron {
    transition: transform 0.3s ease;
    font-size: 0.8em;
}
.ai-summary-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.ai-summary-collapsible.expanded .ai-summary-body {
    max-height: 300px;
    overflow-y: auto;
}
.ai-summary-collapsible.expanded .ai-summary-chevron {
    transform: rotate(180deg);
}
.ai-summary-content {
    padding: 14px;
    line-height: 1.6;
    font-size: 0.88em;
    color: #1e293b;
}
.ai-summary-body::-webkit-scrollbar {
    width: 6px;
}
.ai-summary-body::-webkit-scrollbar-track {
    background: transparent;
}
.ai-summary-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
/* Dark mode — collapsible AI summary */
body.dark-mode .ai-summary-collapsible {
    border-color: #334155;
    background: #0f172a;
}
body.dark-mode .ai-summary-header {
    background: #1e40af;
}
body.dark-mode .ai-summary-content {
    color: #e2e8f0;
}
body.dark-mode .ai-summary-body::-webkit-scrollbar-thumb {
    background: #475569;
}
body.dark-mode .ai-summary-body::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Feedback modal */
body.dark-mode .feedback-option {
    border-color: #334155;
    background: #0f172a;
    color: #cbd5e1;
}
body.dark-mode .feedback-option:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
body.dark-mode .feedback-option.selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}
body.dark-mode .feedback-details label {
    color: #cbd5e1;
}
body.dark-mode .feedback-details textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .feedback-details textarea:focus {
    border-color: #3b82f6;
}
body.dark-mode .feedback-actions .btn-cancel {
    background: #334155;
    color: #cbd5e1;
}
body.dark-mode .feedback-actions .btn-cancel:hover {
    background: #475569;
}

/* Tools menu (popup from + button) */
body.dark-mode .tools-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
body.dark-mode .tools-menu-item {
    color: #cbd5e1;
}
body.dark-mode .tools-menu-item:hover {
    background: #334155;
}
body.dark-mode .tools-menu-item strong {
    color: #f1f5f9;
}
body.dark-mode .tools-menu-item span {
    color: #94a3b8;
}

/* Tools panel (slide-up panel) */
body.dark-mode .tools-panel {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
body.dark-mode .tools-panel-header {
    background: #1e293b;
    border-bottom-color: #334155;
    color: #f1f5f9;
}
body.dark-mode .tools-panel-close {
    color: #94a3b8;
}
body.dark-mode .tools-panel-close:hover {
    color: #e2e8f0;
}
body.dark-mode .tools-panel-content .topic-item {
    color: #cbd5e1;
}
body.dark-mode .tools-panel-content .topic-item:hover {
    background: #334155;
}
body.dark-mode .tools-panel-content .topic-item .topic-desc {
    color: #94a3b8;
}
body.dark-mode .tools-panel-content .source-item {
    color: #cbd5e1;
}
body.dark-mode .tools-panel-content .source-item .source-desc {
    color: #94a3b8;
}
body.dark-mode .tools-panel-content .section-label {
    color: #64748b;
}

/* History dropdown menu */
body.dark-mode .history-dropdown-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
body.dark-mode .conversation-list-dropdown {
    background: #1e293b;
}
body.dark-mode .conversation-list-dropdown .loading-conversations {
    color: #94a3b8;
}
body.dark-mode .conversation-list-dropdown .conversation-item {
    color: #cbd5e1;
}
body.dark-mode .conversation-list-dropdown .conversation-item:hover {
    background: #334155;
    border-color: #475569;
}
body.dark-mode .conversation-list-dropdown .conversation-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}
body.dark-mode .conversation-list-dropdown .conversation-title {
    color: #f1f5f9;
}
body.dark-mode .conversation-list-dropdown .conversation-preview {
    color: #94a3b8;
}
body.dark-mode .conversation-list-dropdown .conversation-meta {
    color: #64748b;
}

/* Info modal */
body.dark-mode .info-modal__body {
    color: #e2e8f0;
}
body.dark-mode .info-modal__meta {
    background: #0f172a;
    border-color: #334155;
}
body.dark-mode .info-modal__tech {
    color: #94a3b8;
}

/* Scrollbar — global dark override */
body.dark-mode ::-webkit-scrollbar-track {
    background: #0f172a;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #334155;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}


/* Email list scrollbar */
.email-list::-webkit-scrollbar {
    width: 8px;
}
.email-list::-webkit-scrollbar-track {
    background: transparent;
}
.email-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
body.dark-mode .email-list::-webkit-scrollbar-track {
    background: #0f172a;
}
body.dark-mode .email-list::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}
body.dark-mode .email-list::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .conversation-panel {
        width: 100%;
        right: -100%;
    }

    .conversation-history-panel {
        width: calc(100% - 40px);
        max-width: 320px;
    }
}