* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent !important; /* ensure html background shows and avoid double layers */
    color: var(--text-primary);
    min-height: 100vh; /* ensure at least viewport height */
    display: block; /* Changed from flex - container now controls layout */
    padding: 2rem;
    position: relative;
    overflow-x: hidden;
    height: auto; /* allow body to grow with content so background covers full scroll */
    margin: 0;
    line-height: 1.6;
}

/* Disable old fixed grid layer to avoid double backgrounds */
body::before { content: none; }

/* Vignette effect */
body::after {
    content: none; /* remove gradient/vignette overlay so only one fixed background remains */
}

.book-container {
    padding-top: 60px; /* Account for the fixed header height */
    display: flex;
    height: calc(100vh - 60px);
    box-sizing: border-box;
    gap: 1.5rem;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: center; /* Center three columns on ultrawide screens */
}

.three-column-layout .main-content {
    flex: 1 1 auto;
    min-width: 500px; /* Comfortable minimum while sidebars visible */
    max-width: 1100px;
    padding: 0;
}

/* Wide screens: don't let the center column stretch wider than its cap */
@media (min-width: 1250px) {
    .three-column-layout .main-content {
        flex: 0 1 1100px;
    }
}

/* Remove margin from h1 and adjust spacing */
.main-content h1 {
    display: none;
}

.input-section {
    margin-top: 0;
    background: transparent;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    overflow: hidden;
}

.input-container {
    position: relative;
    width: 100%;
    background: var(--input-bg);
}

/* Overlay to visually highlight URLs inside the prompt textarea without changing backend */
.prompt-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 1.2rem;
    border: 1px solid transparent; /* align with textarea */
    border-radius: 0 0 8px 8px; /* Sharp top corners to match textarea */
    font-size: 1.1rem;
    line-height: 1.5;
    color: transparent; /* keep base overlay text hidden */
}

.prompt-overlay .url-token {
    color: transparent; /* hide duplicate overlay text */
    text-decoration: none;
    background: rgba(21, 101, 192, 0.12);
    border: 1px solid rgba(144, 202, 249, 0.8);
    border-radius: 6px;
    padding: 1px 4px;
    display: inline-block;
    line-height: 1.25;
}

#prompt-input {
    width: 100%;
    height: 200px;
    padding: 1.2rem;
    padding-right: 3.5rem; /* Make space for the mic button */
    border: 1px solid var(--input-border);
    border-radius: 0 0 8px 8px; /* Sharp top corners to match header */
    font-size: 1.1rem;
    resize: none;
    line-height: 1.5;
    background: var(--input-bg);
    color: var(--input-text);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    margin-bottom: 0; /* Remove extra gap below the input */
    position: relative;
    z-index: 1; /* Ensure buttons with z-index: 5 render above textarea */
}

#prompt-input::placeholder {
    color: var(--input-placeholder);
}

#prompt-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--input-bg); /* keep overlay chip visible while typing */
}

/* Hints toggle button */
.hints-toggle {
    position: absolute;
    right: -40px;
    top: 0;
    width: 40px;
    height: 40px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hints-toggle:hover {
    background: #e8e8e8;
}

.toggle-icon {
    display: none !important;
}

/* Hints panel */
.hints-panel {
    position: absolute;
    top: 0;
    right: -400px;
    width: 400px;
    height: 200px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.hints-panel.active {
    transform: translateX(-440px);
}

.hints-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 1.2rem;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    position: relative;
}

.hints-scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

.hint-group {
    margin-bottom: 1.5rem;
}

.hint-group:last-child {
    margin-bottom: 3rem;
}

.hint-group h4 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.hint-group p {
    font-size: 0.95rem;
    margin: 0.4rem 0;
    color: #666;
    transition: opacity 0.3s;
    line-height: 1.4;
    font-weight: 300;
    font-style: italic;
}

/* Create fade effect for hints */
.hint-group p {
    opacity: 0.4;
}

.hint-group p:hover {
    opacity: 1;
}

.hint-group p:nth-last-child(-n+3) {
    opacity: 0.7;
}

.hint-group p:nth-last-child(-n+2) {
    opacity: 0.85;
}

.hint-group p:last-child {
    opacity: 1;
}

.action-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0.7rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

.action-btn:hover {
    background-color: #43a047;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.character-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section {
    background: var(--section-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    transition: all 0.3s ease;
}

.empty-message {
    color: #999;
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

/* Subtle glow effect for empty sections during generation */
.section.generating {
    animation: card-glow 2s ease-in-out infinite;
}

@keyframes card-glow {
    0% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    50% {
        box-shadow: 0 2px 12px rgba(33, 150, 243, 0.15);
    }
    100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
}

.section-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    background: var(--surface-color);
    transition: padding 0.3s ease, background-color 0.3s ease;
    overflow-x: hidden; /* prevent any horizontal scrollbar in header */
}

/* Hourglass indicator shown during generation on each section header */
.section-hourglass {
    margin-left: 8px;
    opacity: 0.8;
    display: inline-block;
    transform-origin: 50% 50%;
    animation: hourglass-spin 2.2s ease-in-out infinite;
}

@keyframes hourglass-spin {
    0% { transform: rotate(0deg); }
    /* first flip */
    25% { transform: rotate(180deg); }
    /* short pause */
    40% { transform: rotate(180deg); }
    /* second flip */
    65% { transform: rotate(360deg); }
    /* pause at end before next cycle */
    100% { transform: rotate(360deg); }
}

.section-header h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* Ensure the grid background extends across full document height */
html {
    min-height: 100%;
    background-color: var(--bg-main);
    /* Single, non-scrolling background grid (subtle, larger) with soft edge fade */
    background-image:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, var(--shadow-color) 100%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, 60px 60px, 60px 60px; /* larger squares, no size for radial */
    background-position: center center, center center, center center;
    background-repeat: no-repeat, repeat, repeat;
    background-attachment: fixed; /* keep all layers fixed */
}

/* Remove radial fade on the lesson editor page (keep only subtle grid) */
html.editor-page {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;
    background-size: 60px 60px, 60px 60px !important;
    background-position: center center, center center !important;
    background-repeat: repeat, repeat !important;
    background-attachment: fixed, fixed !important;
}

.section-controls {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: flex-end;
    min-height: 32px;
    position: relative;
    flex-wrap: nowrap;
}

.customize-btn {
    background-color: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 0.4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.customize-btn:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

.loading-indicator {
    display: none;
    color: var(--accent-color);
    font-size: 0.85rem;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.loading-indicator.active {
    display: inline-block;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.regenerate-btn {
    background: none;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: #666;
}

.regenerate-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.part-container {
    padding: 1.2rem 1.5rem;
    background: var(--surface-color);
    border: none;
    box-shadow: 0 4px 12px var(--shadow-color);
    border-radius: 12px 12px 0 0;
}

/* Content regeneration effect */
.section.regenerating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    animation: pulse-overlay 3s ease-in-out infinite;
    pointer-events: none;
    border-radius: 10px;
}

.section-content.regenerating {
    animation: pulse-content 3s ease-in-out infinite;
}

@keyframes pulse-overlay {
    0% { background-color: rgba(255, 255, 255, 0); }
    50% { background-color: rgba(255, 255, 255, 0.5); }
    100% { background-color: rgba(255, 255, 255, 0); }
}

@keyframes pulse-content {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.part-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 0.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.nav-btn:hover:not(:disabled) {
    background: transparent;
    color: var(--text-primary);
}

.nav-btn:disabled {
    display: none;
}

.nav-btn.prev-btn::before {
    content: '←';
}

.nav-btn.next-btn::before {
    content: '→';
}

/* Floating customization panel */
.customize-panel {
    position: fixed;
    background: var(--surface-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    width: 300px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.customize-panel.active {
    display: block;
    animation: slideIn 0.2s ease;
}

.customize-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.customize-panel .panel-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.customize-panel .close-panel {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    padding: 4px;
}

.customize-panel .panel-body {
    padding: 16px;
}

.customize-panel .input-container {
    position: relative;
    margin-bottom: 12px;
}

.customize-panel textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 40px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
}

.customize-panel .mic-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    opacity: 0.5;
}

.customize-panel .mic-button:hover {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.05);
}

.customize-panel .mic-button.recording {
    opacity: 1;
    color: #ff4444;
    animation: pulse-subtle 1.5s ease-in-out infinite;
}

.customize-panel .mic-icon {
    width: 16px;
    height: 16px;
    color: #666;
    transition: all 0.2s ease;
}

.customize-panel .mic-button.recording .mic-icon {
    color: #ff4444;
}

.customize-panel .action-btn {
    width: 100%;
    padding: 8px;
    background: #1976d2;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.customize-panel .action-btn:hover {
    background: #1565c0;
}

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

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

/* Version navigation */
.section {
    position: relative;
    padding-bottom: 3rem;
}

.nav-buttons {
    background: var(--section-bg);
    padding: 1rem;
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-top: -1px; /* This ensures no gap between containers */
}

.nav-buttons.has-multiple {
    display: flex;
}

.section-controls.has-multiple {
    /* Navigation buttons are visible when there are multiple versions */
}

.version-counter {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 3rem;
    text-align: center;
    font-weight: 500;
    margin: 0 0.5rem;
    display: inline-block;
}

/* Ensure nav buttons work well in section-controls */
.section-controls .nav-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0.1rem;
    margin: 0 0.1rem;
}

.section-controls .version-counter {
    margin: 0 0.2rem;
    font-size: 0.7rem;
    min-width: 2rem;
}

.create-card-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    padding: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    opacity: 0.6;
    order: -1; /* Move to the start */
    margin-right: auto; /* Push other elements to the right */
}

.create-card-btn:hover {
    background: #f0f0f0;
    color: #2196F3;
    opacity: 1;
}

/* Delete version button - styled like mic icon */
.delete-version-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 4px;
    margin-left: 8px;
    opacity: 0.5;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.delete-version-btn:hover {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.delete-version-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.create-card-btn::before {
    content: '📋';
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--surface-color);
    padding: 2rem;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    position: relative;
}

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

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tips-overlay {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overflow-x: hidden; /* avoid horizontal scrollbar */
    padding-right: 0.5rem;
    padding-top: 0; /* Align top with other columns */
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tips-card {
    background: var(--surface-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    backdrop-filter: blur(8px);
    overflow: hidden;
    width: 100%;
    margin-top: 0;
    max-height: 60vh; /* Reduced from 80vh to show more cards */
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Prevent card from shrinking */
}

.tips-card-header {
    padding: 1rem 1.2rem;
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
}

.tips-card-header h3 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-primary);
}

.tips-card-content {
    padding: 1.2rem;
    display: block;
    transition: all 0.3s ease;
    background: var(--surface-color);
    overflow-y: auto;
    max-height: 100%;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    font-family: inherit;
}

/* Hide scrollbars visually (keep scrolling functional) for tips column & cards */
.tips-overlay, .tips-card-content {
    scrollbar-width: none !important; /* Firefox */
}

.tips-overlay::-webkit-scrollbar,
.tips-card-content::-webkit-scrollbar {
    display: none !important; /* WebKit */
}

.tips-card-content.collapsed {
    display: none;
}

.tips-card .toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.tips-card-header.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.tip-group {
    margin-bottom: 1.2rem;
    padding: 0.5rem 0;
}

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

.tip-group h4 {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.tip-group p {
    font-size: 0.85rem;
    margin: 0.4rem 0;
    color: var(--text-secondary);
    transition: opacity 0.2s ease;
    line-height: 1.5;
    opacity: 0.8;
    cursor: pointer;
    padding-left: 0.5rem;
}

.tip-group p:hover {
    opacity: 1;
    color: var(--text-primary);
}

/* Remove old popup-related styles */
.tips-overlay.collapsed,
.tips-toggle,
.tips-overlay.collapsed .tips-scroll,
.tips-overlay.collapsed .tips-toggle {
    display: none;
}

/* Removed duplicate .book-container definition - kept unified one above */

/* Column tabs (hidden by default on desktop) */
.three-column-layout .column-tabs { 
    display: none; 
    gap: 0; 
    margin-bottom: 24px; /* More space between tabs and content */
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 0;
    width: 100%;
    flex-basis: 100%; /* Force tabs to take full row */
    order: -1; /* Ensure tabs appear first */
    justify-content: space-between;
    position: relative;
}

.three-column-layout .tab-btn { 
    flex: 1 1 33.333%; /* Each button takes 1/3 of the width */
    padding: 16px 16px 12px; /* More top padding for spacing */
    background: none !important; /* Force no background */
    border: none !important; /* Force no border */
    outline: none !important; /* Remove focus outline */
    box-shadow: none !important; /* Remove any shadow */
    color: var(--text-secondary); 
    cursor: pointer;
    text-align: center;
    transition: color 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border-radius: 0 !important; /* Force no rounded corners */
    -webkit-tap-highlight-color: transparent; /* Remove blue highlight on mobile */
    -webkit-appearance: none; /* Remove default browser styling */
    -moz-appearance: none;
    appearance: none;
}

.three-column-layout .tab-btn:focus,
.three-column-layout .tab-btn:active,
.three-column-layout .tab-btn:focus-visible {
    outline: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.three-column-layout .tab-btn:hover { 
    color: var(--text-primary);
    background: transparent !important;
}

.three-column-layout .tab-btn.active { 
    color: var(--accent-color);
    background: transparent !important;
}

/* Animated underline indicator - shorter, centered under text */
.three-column-layout .column-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(33.333% + (33.333% - 80px) / 2); /* Center 80px underline in middle tab */
    width: 80px; /* Fixed short width */
    height: 2px;
    background: var(--accent-color);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Move underline based on active tab - centered under each */
.three-column-layout .column-tabs[data-active="helper"]::after {
    left: calc((33.333% - 80px) / 2); /* Center in first third */
}

.three-column-layout .column-tabs[data-active="main"]::after {
    left: calc(33.333% + (33.333% - 80px) / 2); /* Center in second third */
}

.three-column-layout .column-tabs[data-active="tips"]::after {
    left: calc(66.666% + (33.333% - 80px) / 2); /* Center in third third */
}

/* Unified responsive breakpoints */
/* Hide BOTH sidebars together when there isn't enough space */
@media (max-width: 1249px) {
    .three-column-layout {
        flex-wrap: wrap; /* Allow tabs to span full row */
    }
    
    .three-column-layout .column-tabs { 
        display: flex !important; 
    }
    
    /* By default, hide sidebars and show only center */
    .three-column-layout .helper-column,
    .three-column-layout .tips-overlay {
        display: none !important;
    }
    
    .three-column-layout .main-content { 
        max-width: 100%; 
        min-width: 0;
        display: block; /* Center visible by default */
        width: 100%; /* Full width when alone */
    }
    
    /* When user clicks tabs, show the active column at full width */
    .three-column-layout .helper-column.active-column {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .three-column-layout .tips-overlay.active-column {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .three-column-layout .main-content.active-column {
        display: block !important;
        width: 100% !important;
    }
    
    /* Hide main content when not active (user switched to Sources or Chat) */
    .three-column-layout .main-content:not(.active-column) {
        display: none !important;
    }
}

@media (max-width: 899px) {
    .three-column-layout { padding: 1rem; }
}

.generate-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

/* Attached sources tray below the main prompt */
.attached-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 6px;
    margin: 6px 0 12px 0; /* subtle breathing space above/below */
    align-items: center;
    min-height: 0;
}

/* Hide the attachments tray completely when there are no chips/items */
.attached-sources:empty {
    display: none;
    margin: 0;
    padding: 0;
}

.attached-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-color);
    max-width: 220px;
    overflow: hidden;
}

.attached-thumb {
    width: 40px;   /* more square */
    height: 40px;  /* more square */
    background: var(--surface-hover);
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.attached-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attached-title {
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attached-url {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attached-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 2px;
    font-size: 14px;
}

.attached-chip.pending { 
    border-style: dashed; 
    opacity: 0.8;
    position: relative;
}

.attached-chip.pending .attached-thumb {
    position: relative;
}

.attached-chip.pending .attached-thumb::after,
.attached-chip.thumb-loading .attached-thumb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid var(--text-secondary);
    border-top: 3px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.attached-chip.error { 
    border-color: #ff9e9e; 
    background: var(--surface-hover); 
}

.prompt-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem; /* add a little space below the textarea */
    align-items: center; /* Align items vertically */
}

/* Ensure the info tooltip icon aligns nicely with the row baseline */
.prompt-modifiers > .info-tooltip-trigger {
    align-self: center;
}

.modifier-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: transparent; /* remove gray background */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.modifier-checkbox:hover {
    background: transparent; /* keep transparent on hover */
}

.modifier-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.modifier-checkbox span {
    font-size: 0.9rem;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.modifier-checkbox input:checked + span {
    color: var(--accent-color);
    font-weight: 500;
}

.modifier-checkbox:has(input:checked) {
    background: transparent; /* no blue highlight block when checked */
    border: none;
}

.helper-column {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-top: 0;
}

.helper-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(8px);
    overflow: hidden;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
    width: 100%;
}

.helper-card.visible {
    opacity: 1;
    transform: translateX(0);
}

.helper-card-header {
    padding: 1rem 1.2rem;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.helper-card-header h3 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-primary);
}

.helper-card-content {
    padding: 1.2rem;
    display: block;
    transition: all 0.3s ease;
}

.helper-card-content.collapsed {
    display: none;
}

.helper-section {
    margin-bottom: 1.2rem;
}

.helper-section:last-child {
    margin-bottom: 0;
}

.helper-section-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.helper-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.helper-tag {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.helper-tag:hover {
    background: var(--accent-color);
    color: var(--bg-color);
    transform: translateY(-1px);
}

/* Tuning for tags shown in the main helper column (dark mode parity with modal) */
.helper-column .helper-tag {
    background: var(--surface-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.helper-card-header.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* Ensure all cards have consistent spacing */
.helper-card, .tips-card {
    margin-bottom: 1.5rem;
}

/* Remove any extra padding from the first card in each column */
.helper-content > :first-child,
.tips-card:first-child,
.input-section:first-child {
    margin-top: 0;
}

.mic-button {
    position: absolute;
    right: 1rem;
    bottom: 1.8rem;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    opacity: 0.5;
    z-index: 5;
}

/* Resource picker button container */
.picker-button-container {
    position: absolute;
    right: 2.6rem; /* sit left of mic */
    bottom: 1.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    z-index: 5;
}

/* Resource picker button next to mic */
.picker-button {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    opacity: 0.5;
    color: #666;
}

.picker-button:hover { opacity: 0.8; background: rgba(0,0,0,0.05); }

/* Picker overlay */
.picker-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2100;
}

.picker-overlay.active { display: flex; }

.picker-panel {
    width: 560px;
    max-height: 80vh;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.picker-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color); background: var(--surface-color); }
.picker-header h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
.picker-back { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-secondary); margin-right: 8px; display: none; }
.picker-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-secondary); }
.picker-close:hover { color: var(--text-primary); }

.picker-search { padding: 10px 16px; border-bottom: 1px solid var(--border-color); }
.picker-search input { width: 100%; height: 34px; border: 1px solid var(--border-color); border-radius: 6px; padding: 0 10px; font-size: 14px; background: var(--input-bg); color: var(--input-text); }
.picker-search input::placeholder { color: var(--text-muted); }

.picker-list { overflow-y: auto; overflow-x: hidden; padding: 10px 16px; gap: 10px; display: flex; flex-direction: column; }
.picker-list .day-separator { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.picker-list .day-separator .day-line { height: 1px; background: var(--border-color); flex: 1; }
.picker-list .day-separator .day-label { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

.picker-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); }
.picker-thumb { width: 56px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--surface-hover); flex-shrink: 0; }
.picker-meta { display: flex; flex-direction: column; min-width: 0; }
.picker-title { font-size: 13px; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.picker-sub { font-size: 11px; color: var(--text-secondary); }
.picker-type { font-size: 10px; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 0 6px; background: var(--surface-hover); }
.picker-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-color); }

.picker-footer { padding: 10px 16px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; }

/* Detail view styles */
.picker-detail { overflow-y: auto; padding: 16px; }
.picker-detail .modal-video-container { width: 100%; padding-top: 56.25%; position: relative; background-color: #000; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.picker-detail .modal-video-container iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:none; }
.picker-detail h2 { margin: 0 0 8px; font-size: 18px; color: var(--text-primary); }
.picker-detail .modal-summary { margin-bottom: 12px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.picker-detail .modal-summary p { margin: 4px 0 0 0; color: var(--text-secondary); }
.picker-detail .content-area { white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--text-primary); }

/* Resource picker dropdown */
.resource-picker-dropdown {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    min-width: 160px;
    padding: 8px 0;
    z-index: 1100;
}

.dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.dropdown-option:hover {
    background-color: var(--surface-hover);
}

/* Add Link Modal */
.link-modal-content {
    width: 400px;
    max-width: 90vw;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px var(--shadow-color);
    overflow: hidden;
}

.link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
}

.link-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.link-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
}

.link-modal-close:hover {
    color: var(--text-primary);
}

.link-modal-body {
    padding: 16px;
}

.link-modal-body textarea {
    width: 100%;
    height: 80px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    background: var(--input-bg);
    color: var(--input-text);
    font-family: inherit;
    resize: vertical;
}

.link-modal-body textarea::placeholder {
    color: var(--text-muted);
}

.link-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cancel-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.cancel-btn:hover {
    background: var(--surface-hover);
}

.mic-button:hover {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.05);
}

.mic-button.recording {
    opacity: 1;
    color: #ff4444;
    animation: pulse-subtle 1.5s ease-in-out infinite;
}

.mic-icon {
    width: 16px;
    height: 16px;
    color: #666;
    transition: all 0.2s ease;
}

.mic-button.recording .mic-icon {
    color: #ff4444;
}

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

.insight-card {
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.insight-card.visible {
    opacity: 1;
    transform: translateX(0);
}

.insight-card .tips-card-header {
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border-color);
}

.insight-card .insight-summary {
    font-style: normal;
    opacity: 1;
    color: var(--text-primary);
    padding: 0.5rem;
    background: var(--surface-hover);
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    font-family: inherit;
}

.insight-card .tip-group h4 {
    color: var(--accent-color);
    font-size: 0.9rem;
    margin: 1rem 0 0.5rem;
}

.insight-card .tip-group p {
    opacity: 1;
    cursor: default;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
    font-family: inherit;
}

.insight-card .tip-group p:hover {
    opacity: 1;
    transform: none;
    background: transparent;
    color: inherit;
}

/* Ensure proper stacking of cards */
.tips-overlay {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.insight-card.loading .loading-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}

.insight-card.loading .loading-placeholder {
    background: linear-gradient(90deg, var(--surface-hover) 25%, var(--border-color) 50%, var(--surface-hover) 75%);
    background-size: 200% 100%;
    animation: loading-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent;
    user-select: none;
}

.insight-card.error {
    border: 1px solid #ffcdd2;
}

.insight-card.error .tips-card-header {
    background: #ffebee;
    color: #c62828;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes loading-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.helper-card.loading .loading-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}

.helper-card.loading .loading-placeholder {
    background: linear-gradient(90deg, var(--surface-hover) 25%, var(--border-color) 50%, var(--surface-hover) 75%);
    background-size: 200% 100%;
    animation: loading-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent;
    user-select: none;
    min-width: 100px;
    display: inline-block;
}

/* General loading placeholder styling for dark mode compatibility */
.loading-placeholder {
    color: var(--text-secondary) !important;
    background: var(--surface-hover) !important;
}

.helper-card.loading .helper-tag.loading-placeholder {
    min-width: 60px;
    margin: 2px;
}

.helper-card.loading .helper-section {
    opacity: 0.8;
}

.quick-customizations {
    margin-bottom: 1rem;
}

.quick-customizations h4 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.quick-customize-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.quick-customize-btn {
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    padding: 0.6rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: left;
    transition: all 0.2s ease;
    line-height: 1.3;
}

.quick-customize-btn:hover {
    background: #e3f2fd;
    border-color: #90caf9;
    color: var(--accent-color);
}

.customize-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

.customize-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.customize-divider span {
    position: relative;
    background: white;
    padding: 0 0.8rem;
    color: #666;
    font-size: 0.85rem;
}

.section-quick-customizations {
    background: var(--surface-color);
    padding: 0.5rem;
    border-radius: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.section-quick-customizations.visible {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.quick-customize-btn {
    background: transparent;
    border: none;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #666;
    text-align: left;
    transition: all 0.2s ease;
    line-height: 1.2;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
    flex-shrink: 1;
    min-width: 0;
}

.quick-customize-btn:hover {
    background: #f0f0f0;
    color: #2196F3;
}

.adjusting-indicator {
    display: none;
    color: #2196F3;
    font-size: 0.85rem;
    animation: fade-pulse 2s ease-in-out infinite;
    margin-right: 0.5rem;
    align-items: center;
    gap: 0.3rem;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.adjusting-indicator.active {
    display: flex;
    opacity: 1;
    max-width: 200px; /* Ensure enough space for the text */
}

/* Ensure section controls maintain proper spacing */
.section-controls {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: flex-end;
    min-height: 32px;
    position: relative;
    flex-wrap: nowrap;
}

/* Ensure customize button maintains position */
.customize-btn {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* Adjust loading indicator to not interfere */
.loading-indicator {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Ensure the writing animation works properly */
.adjusting-icon {
    font-size: 1rem;
    animation: writing 1.5s ease-in-out infinite;
    transform-origin: center;
    display: inline-block;
    flex-shrink: 0;
}

.adjusting-text {
    opacity: 0.8;
    white-space: nowrap;
}

/* Optimize animations for smoother transitions */
@keyframes fade-pulse {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

@keyframes writing {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

/* Full-screen modal styles */
.content-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.content-modal.active {
    display: flex;
}

.modal-container {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    width: 95%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: modal-appear 0.3s ease;
}

@keyframes modal-appear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #eee;
    background: #fff;
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

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

.modal-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1.1rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.modal-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-btn.save {
    color: #2196F3;
}

.modal-btn.save:hover {
    background: #e3f2fd;
}

.modal-btn.export {
    color: #4CAF50;
}

.modal-btn.export:hover {
    background: #E8F5E9;
}

.modal-btn.copy {
    color: #9C27B0;
}

.modal-btn.copy:hover {
    background: #F3E5F5;
}

.modal-content {
    padding: 2rem 3rem;
    overflow-y: auto;
    flex: 1;
    background: var(--surface-color);
    outline: none;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 100%;
    margin: 0 auto;
}

.modal-content:focus {
    background: var(--surface-color);
}

.modal-content[contenteditable="true"] {
    cursor: text;
}

.modal-content p {
    margin: 1rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.modal-content h1, 
.modal-content h2, 
.modal-content h3, 
.modal-content h4 {
    max-width: 900px;
    margin: 2rem auto 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* Simplified editor toolbar */
.editor-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem;
    border-radius: 6px;
}

.format-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 600;
}

.format-btn:hover {
    background: var(--surface-hover);
    color: var(--accent-color);
}

.format-btn.active {
    background: #e3f2fd;
    color: var(--accent-color);
}

/* Update helper card header controls */
.helper-card .helper-card-header {
    position: relative;
    padding-right: 6rem;
}

.card-controls {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.3rem;
}

.card-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    padding: 0.4rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-btn:hover {
    opacity: 1;
}

.card-btn.view:hover {
    color: #2196F3;
}

.card-btn.close:hover {
    color: #f44336;
}

/* Rich text editor styles */
.editor-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-right: 1rem;
    background: var(--surface-hover);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}

.format-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;
    font-weight: 600;
}

.format-btn:hover {
    background: #e0e0e0;
    color: var(--accent-color);
}

.toolbar-separator {
    color: #ccc;
    margin: 0 0.2rem;
}

/* Ensure proper text formatting in the editor */
.modal-content h1, .modal-content h2, .modal-content h3, 
.modal-content h4, .modal-content h5, .modal-content h6 {
    margin: 1rem 0;
    color: var(--text-primary);
}

.modal-content p {
    margin: 0.8rem 0;
    line-height: 1.6;
}

.modal-content ul, .modal-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.modal-content li {
    margin: 0.5rem 0;
}

/* Update modal controls to accommodate toolbar */
.modal-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1.1rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-btn.save {
    color: #2196F3;
}

.modal-btn.save:hover {
    background: #e3f2fd;
}

/* New CSS to center toggle arrows in header cards */
.helper-card-header, .tips-card-header {
    position: relative;
}

.helper-card-header .toggle-icon, .tips-card-header .toggle-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Command prompt styles */
.command-prompt {
    position: absolute;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow-color);
    padding: 0.8rem;
    min-width: 320px;
    display: none;
    z-index: 2100;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.2s ease;
}

.command-prompt.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.command-input {
    width: 100%;
    padding: 0.6rem 0;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow-color);
    padding: 10px 14px;
    min-width: 200px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: all 180ms ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    border-color: var(--accent-color);
}

/* Close button for inline command prompt */
.command-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 18px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.command-close:hover {
    opacity: 1;
    background: var(--surface-hover);
}

.command-input:focus {
    outline: none;
    border-bottom-color: #2196F3;
}

.command-input::placeholder {
    color: #999;
    font-style: italic;
}

.command-status {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.command-status.generating {
    color: #2196F3;
    animation: pulse 2s ease-in-out infinite;
}

.command-marker {
    color: #2196F3;
    font-weight: 500;
    animation: marker-pulse 2s ease-in-out infinite;
    display: inline-block;
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(33, 150, 243, 0.1);
}

@keyframes marker-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Streaming text effect */
@keyframes text-blink {
    0%, 100% { opacity: 1; background: rgba(33, 150, 243, 0.05); }
    50% { opacity: 0.8; background: rgba(33, 150, 243, 0.1); }
}

.generating-text {
    animation: text-blink 1s ease-in-out infinite;
    border-radius: 3px;
    padding: 0 2px;
    color: var(--accent-color);
}

/* Command suggestions */
.command-suggestions {
    margin-top: 0.5rem;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}

.command-suggestion {
    padding: 0.4rem 0.6rem;
    color: #666;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.command-suggestion:hover {
    background: var(--surface-hover);
    color: #2196F3;
}

/* Markdown Styles for Section Content */
.section-content {
    line-height: 1.6;
    color: var(--text-primary);
}

/* Headings */
.section-content h1 {
    font-size: 2em;
    margin: 1.5em 0 0.8em;
    color: #2c3e50;
}

.section-content h2 {
    font-size: 1.75em;
    margin: 1.4em 0 0.7em;
    color: #34495e;
}

.section-content h3 {
    font-size: 1.5em;
    margin: 1.3em 0 0.6em;
    color: #3d4852;
}

.section-content h4 {
    font-size: 1.25em;
    margin: 1.2em 0 0.5em;
    color: #4a5568;
}

.section-content h5, .section-content h6 {
    font-size: 1.1em;
    margin: 1.1em 0 0.4em;
    color: #4a5568;
}

/* Text Formatting */
.section-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.section-content em {
    font-style: italic;
    color: #4a5568;
}

.section-content del {
    text-decoration: line-through;
    color: #718096;
}

/* Lists */
.section-content ul, .section-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.section-content ul {
    list-style-type: disc;
}

.section-content ol {
    list-style-type: decimal;
}

.section-content li {
    margin: 0.5em 0;
}

.section-content ul ul, 
.section-content ol ul {
    list-style-type: circle;
}

.section-content ul ul ul, 
.section-content ol ul ul {
    list-style-type: square;
}

/* Links */
.section-content a {
    color: #3182ce;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.section-content a:hover {
    border-bottom-color: #3182ce;
}

/* Blockquotes */
.section-content blockquote {
    margin: 1.5em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #4299e1;
    background: #ebf8ff;
    color: #2c5282;
    font-style: italic;
}

/* Code Blocks */
.section-content code {
    background: #f7fafc;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
    color: #805ad5;
}

.section-content pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.section-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Horizontal Rules */
.section-content hr {
    margin: 2em 0;
    border: 0;
    height: 1px;
    background: #e2e8f0;
}

/* Tables */
.section-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.section-content th,
.section-content td {
    padding: 0.75em;
    border: 1px solid #e2e8f0;
    text-align: left;
}

.section-content th {
    background: #f7fafc;
    font-weight: 600;
}

.section-content tr:nth-child(even) {
    background: #f7fafc;
}

/* Images */
.section-content img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    border-radius: 6px;
}

/* Subscript and Superscript */
.section-content sub,
.section-content sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.section-content sup {
    top: -0.5em;
}

.section-content sub {
    bottom: -0.25em;
}

/* Enhanced Markdown Content Styles */
.formatted-content {
    line-height: 1.6;
    color: var(--text-primary);
    padding: 1rem;
}

.formatted-content .content-header {
    margin: 1.5em 0 0.8em;
    color: #2c3e50;
    font-weight: 600;
}

.formatted-content .level-1 { font-size: 2em; }
.formatted-content .level-2 { font-size: 1.75em; }
.formatted-content .level-3 { font-size: 1.5em; }
.formatted-content .level-4 { font-size: 1.25em; }
.formatted-content .level-5, 
.formatted-content .level-6 { font-size: 1.1em; }

.formatted-content .content-subheader {
    color: #2196F3;
    font-size: 1.1em;
    margin: 1.2em 0 0.5em;
    font-weight: 600;
}

.formatted-content .content-paragraph {
    margin: 1em 0;
    line-height: 1.6;
}

.formatted-content .content-list {
    margin: 1em 0;
    padding-left: 2em;
}

.formatted-content .content-list li {
    margin: 0.5em 0;
}

.formatted-content code {
    background: #f7fafc;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
    color: #805ad5;
}

.formatted-content pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.formatted-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.formatted-content blockquote {
    margin: 1.5em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #4299e1;
    background: #ebf8ff;
    color: #2c5282;
    font-style: italic;
}

.formatted-content a {
    color: #3182ce;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.formatted-content a:hover {
    border-bottom-color: #3182ce;
}

.formatted-content strong {
    font-weight: 600;
    color: #2d3748;
}

.formatted-content em {
    font-style: italic;
    color: #4a5568;
}

/* Tag styles for edit mode */
.modal-content .helper-tags {
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modal-content .helper-tag {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
}

.modal-content .helper-tag:hover {
    background: var(--accent-color);
    color: var(--text-on-accent);
    transform: translateY(-1px);
}

/* Ensure tags are visible in edit mode */
.modal-content[contenteditable="true"] .helper-tag {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

.modal-content[contenteditable="true"] .helper-tags {
    pointer-events: none;
    user-select: none;
}

/* Animation for new tags */
.helper-tag {
    animation: tag-appear 0.3s ease forwards;
}

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

/* Chatbot Card Styles */
.chatbot-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 600px;  /* Increased from 400px */
}

.chatbot-header,
.input-header {
    position: relative;
    cursor: pointer;
    padding: 10px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-light);
    border-radius: 12px 12px 0 0; /* Match parent container */
}

.chatbot-header h3,
.input-header h3 {
    margin: 0;
    margin-right: 60px; /* Ensure space for controls if any */
    font-size: 16px;
    font-weight: normal;
    color: var(--text-primary);
}

/* Ensure .input-header can be a positioning context for the icon */
.input-header {
    position: relative; /* Add this if not already present */
    display: flex; /* Helps align h3 and icon if needed, but absolute positioning is primary */
    align-items: center; /* Vertical alignment for flex items */
}

/* Positioning for the info tooltip trigger specifically within .input-header */
.input-header > .info-tooltip-trigger {
    position: absolute;
    right: 8px; /* Position from the right edge of the header */
    top: 50%;
    transform: translateY(-50%); /* Precise vertical centering */
    z-index: 3; /* Ensure it's above header background */
}

.chatbot-messages {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 300px;
    background: var(--card-bg);
}

.chat-message {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(10px);
    animation: message-appear 0.3s ease forwards;
}

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

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.chat-message.user .chat-avatar {
    background: var(--accent-color);
    color: var(--bg-color);
}

.chat-bubble {
    background: var(--surface-color);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    max-width: 80%;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    position: relative; /* for copy button positioning */
    border: 1px solid var(--border-light);
}

.chat-message.user .chat-bubble {
    background: #1976d2;
    color: #ffffff;
    border-radius: 12px;
    border-bottom-right-radius: 4px;
}

/* Reserve space so the copy button doesn't overlap text in assistant replies */
.chat-message:not(.user) .chat-bubble {
    padding-right: 2.2rem; /* ~32px space for 20px button + gap */
    padding-bottom: 1.6rem; /* keep text clear of button at bottom */
}

/* Spacing within chat bubble content */
.chat-bubble ul,
.chat-bubble ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.chat-bubble li {
    margin-bottom: 0.4rem;
}

.chat-bubble p {
    margin-bottom: 0.6rem;
}

.chat-bubble p:last-child {
    margin-bottom: 0;
}

/* Tiny copy-to-generator button inside assistant bubbles */
.chat-copy-btn {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.chat-copy-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.chat-copy-btn svg { 
    display: block; 
    color: #666; /* Same color as mic button */
}

/* Tooltip for copy-to-generator feature - positioned by JavaScript like other tooltips */
.chat-tooltip {
    position: absolute; /* Positioned by JavaScript */
    visibility: hidden; /* Initially hidden, shown by JavaScript */
    opacity: 0;         /* Initially transparent, shown by JavaScript */
    background-color: var(--card-bg);
    color: var(--text-primary);
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;    /* Base font size */
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 2px 10px var(--shadow-color);
    border: 1px solid var(--border-light);
    z-index: 10000;     /* High z-index to appear above everything */
    max-width: 350px;
    white-space: nowrap;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.chat-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* Arrow styling using pseudo-elements - pointing left to the copy button */
.chat-tooltip::before, .chat-tooltip::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 6px;
    width: 0;
    height: 0;
}

.chat-tooltip::before { /* Border part of the arrow */
    border-color: transparent;
}

.chat-tooltip::after { /* Fill part of the arrow */
    border-color: transparent;
}

/* Left orientation: arrow points left (toward the copy button) */
.chat-tooltip.orient-left::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 6px;
    border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent;
}

.chat-tooltip.orient-left::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 6px;
    border-color: transparent var(--card-bg) transparent transparent;
}

.chatbot-input {
    padding: 1rem;
    border-top: 1px solid #eee;
}

.chat-input-container {
    position: relative;
    width: 100%;
}

#chat-input {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.8rem;
    padding-right: 6rem; /* Space for both mic and send buttons */
    resize: none;
    height: 60px;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: all 0.2s ease;
    background: var(--input-bg);
    color: var(--input-text);
}

#chat-input::placeholder {
    color: var(--input-placeholder);
}

#chat-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

#chat-mic-button {
    position: absolute;
    right: 2.5rem; /* Position to the left of send button */
    bottom: 0.8rem;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    opacity: 0.5;
}

#chat-mic-button:hover {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.05);
}

#chat-mic-button.recording {
    opacity: 1;
    color: #ff4444;
    animation: pulse-subtle 1.5s ease-in-out infinite;
}

/* Send button inside input - same style as mic button */
#send-chat {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    opacity: 0.5;
}

#send-chat:hover {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.05);
}

#send-chat svg {
    width: 16px;
    height: 16px;
    color: #666; /* Same color as mic button */
}

#chat-mic-button .mic-icon {
    width: 16px;
    height: 16px;
    color: #666;
    transition: all 0.2s ease;
}

#chat-mic-button.recording .mic-icon {
    color: #ff4444;
}

@keyframes message-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-send-btn {
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.chat-send-btn svg {
    width: 20px;
    height: 20px;
    color: white;
}

.chat-send-btn:hover {
    background: #1976d2;
    transform: translateY(-1px);
}

.chat-controls {
    display: flex;
    align-items: center;
}

.chat-use-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 10px;
}

.chat-use-btn svg {
    width: 18px;
    height: 18px;
    color: white;
}

.chat-use-btn:hover {
    background: #43A047;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.chat-use-btn.clicked {
    background: #388E3C;
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
}

.chat-context-inputs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fafafa;
    z-index: 10;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.chat-context-inputs.collapsed {
    transform: translateY(-100%);
}

.chat-context-inputs:not(.collapsed) {
    transform: translateY(0);
}

.context-input-row {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.context-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.context-input-group.inline-label {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.context-input-group.full-width {
    width: 100%;
}

.context-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.context-input {
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0 0.8rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: var(--input-bg);
    color: var(--input-text);
    width: 100%;
}

.context-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--input-bg);
}

.activity-types-row {
    margin-top: 0;
}

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

.search-box {
    flex: 1;
    max-width: 200px;
}

.activity-types-container {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.activity-type-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.activity-type-option:hover {
    background: var(--surface-hover);
}

.activity-type-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.activity-type-option span {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Scrollbar styles for the activity types container */
.activity-types-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.activity-types-container::-webkit-scrollbar {
    width: 6px;
}

.activity-types-container::-webkit-scrollbar-track {
    background: transparent;
}

.activity-types-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Style for checked items */
.activity-type-checkbox:checked + span {
    color: var(--accent-color);
    font-weight: 500;
}

.activity-type-option:has(.activity-type-checkbox:checked) {
    background: var(--surface-hover);
    border: 1px solid var(--accent-color);
}

/* Chat Settings Button */
.chat-settings-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    position: absolute; /* Ensure this is set if not already */
    right: 8px;         /* Original position */
    top: 50%;           /* Align vertically in header */
    transform: translateY(-50%); /* Precise vertical centering */
}

/* Positioning for the info tooltip trigger specifically within .chatbot-header */
.chatbot-header > .info-tooltip-trigger {
    position: absolute;
    right: 46px; /* (32px width of settings_btn + 8px its_right_offset + 6px gap) */
    top: 50%;    /* Align vertically with settings button */
    transform: translateY(-50%); /* Precise vertical centering */
    z-index: 3; /* Ensure it's above header background but potentially below dropdowns */
}

.chat-settings-btn svg {
    width: 18px;
    height: 18px;
    color: #666;
    transition: all 0.2s ease;
}

.chat-settings-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.chat-settings-btn:hover svg {
    color: #2196F3;
    transform: rotate(30deg);
}

.context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.context-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.context-header-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.save-settings-btn {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
}

.save-settings-btn:hover {
    color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
}

.close-settings-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
}

.close-settings-btn:hover {
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

/* Slider styles */
.sliders-row {
    margin: 0.5rem 0;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.context-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 2px;
    outline: none;
}

.context-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #2196F3;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.context-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #2196F3;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.context-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #1976d2;
}

.context-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: #1976d2;
}

.slider-value {
    min-width: 60px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: right;
    font-weight: 500;
}

/* Text Deep Learning Section Styles */
.text-deep-learning-section {
    padding: 1.5rem;
    background: var(--surface-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-color);
}

.text-deep-learning-section h3 {
    color: var(--text-primary);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.text-deep-learning-section h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.text-deep-learning-section h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
}

.pareto-printable, .socratic-questions, .writing-exercises {
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border-left: none;
}

.info-point {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.example-questions {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.example-questions li {
    padding: 0;
    margin: 0.5rem 0;
    background: transparent;
    border-radius: 0;
}

.writing-types {
    margin-bottom: 1rem;
}

.exercise-tasks .task {
    padding: 0;
    margin: 0.8rem 0;
    background: transparent;
    border-radius: 0;
}

.info-points {
    display: grid;
    gap: 1.2rem;
}

.info-point {
    padding: 1rem;
    background: var(--surface-color);
    border-radius: 6px;
    box-shadow: 0 1px 3px var(--shadow-color);
}

.info-point h5 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.info-point p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.socratic-questions {
    border-left: 4px solid #9C27B0;
}

.question-types {
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: var(--surface-color);
    border-radius: 4px;
}

.example-questions {
    list-style-type: none;
    padding: 0;
}

.example-questions li {
    padding: 0.8rem 1rem;
    margin: 0.5rem 0;
    background: var(--surface-color);
    border-radius: 4px;
    color: var(--text-secondary);
    line-height: 1.5;
    transition: transform 0.2s ease;
}

.example-questions li:hover {
    transform: translateX(5px);
}

.writing-exercises {
    border-left: 4px solid #4CAF50;
}

.writing-types {
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: var(--surface-color);
    border-radius: 4px;
}

.exercise-tasks .task {
    padding: 1rem;
    margin: 0.8rem 0;
    background: var(--surface-color);
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.exercise-tasks .task:hover {
    transform: translateX(5px);
}

.exercise-tasks .task h5 {
    color: var(--accent-color);
}

.exercise-tasks .task p {
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Collapsible Sections */
.collapsible-section {
    position: relative;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.collapsible-section.collapsed {
    max-height: 36px; /* Even smaller */
    overflow: hidden;
    margin-bottom: -8px; /* Negative margin to create overlap */
    background: transparent;
}

.collapsible-section.collapsed .chatbot-messages,
.collapsible-section.collapsed .chat-input-container,
.collapsible-section.collapsed .chat-context-inputs,
.collapsible-section.collapsed .input-container,
.collapsible-section.collapsed .generate-controls {
    display: none;
}

.collapsible-section.collapsed .chat-settings-btn {
    display: block; /* Changed from 'none' to 'block' to keep it visible when collapsed */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Remove the collapse-toggle styles since we're not using it anymore */
.collapse-toggle {
    display: none; /* Hide all collapse-toggle buttons */
}

.chat-settings-btn {
    position: absolute;
    right: 8px;
    top: 10px;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.chat-settings-btn:hover {
    opacity: 1;
}

.chatbot-header h3,
.input-header h3 {
    margin-right: 40px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.chatbot-header,
.input-header {
    position: relative;
    cursor: pointer;
    padding: 8px 10px;
    transition: all 0.3s ease;
    border-radius: 12px 12px 0 0; /* Match parent container */
}

.collapsible-section.collapsed .chatbot-header,
.collapsible-section.collapsed .input-header,
.collapsible-section.collapsed .section-header {
    padding: 6px 8px;
    background: transparent;
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 8px; /* Fully rounded when collapsed */
}

/* When collapsed, the parent containers should also be fully rounded */
.collapsible-section.collapsed.chatbot-card,
.collapsible-section.collapsed.input-section {
    border-radius: 8px; /* Fully rounded when collapsed */
}

.collapsible-section.collapsed .part-container,
.collapsible-section.collapsed .nav-buttons,
.collapsible-section.collapsed .section-quick-customizations,
.collapsible-section.collapsed .section-controls {
    display: none;
}

/* Add smooth transition for collapsing */
.section-header {
    transition: padding 0.3s ease;
    background: transparent;
}

.collapsible-section.collapsed .section-header {
    padding: 6px 8px;
    background: transparent;
    box-shadow: none;
}

.collapsible-section.collapsed .section-header h3 {
    font-size: 14px;
}

/* Adjust section spacing */
.section {
    background: var(--section-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    transition: all 0.3s ease;
}

.section.collapsed {
    margin-bottom: -8px; /* Create overlap when collapsed */
}

.section.collapsed .section-header {
    padding: 6px 8px; /* Reduced padding when collapsed */
    background: var(--surface-color);
    box-shadow: 0 2px 6px var(--shadow-color);
}

.section.collapsed .section-header h3 {
    font-size: 14px; /* Smaller font size when collapsed */
}

/* Special styling for top two sections */
.chatbot-card.collapsible-section.collapsed,
.input-section.collapsible-section.collapsed {
    background: var(--surface-color);
    box-shadow: 0 2px 6px var(--shadow-color);
    margin-bottom: 1rem; /* Increased spacing */
}

.chatbot-card.collapsible-section.collapsed .chatbot-header,
.input-section.collapsible-section.collapsed .input-header {
    background: var(--surface-color);
    box-shadow: none;
}

/* Keep other sections with transparent background */
.section.collapsible-section.collapsed {
    background: transparent;
    margin-bottom: -8px;
}

.section.collapsible-section.collapsed .section-header {
    background: transparent;
    box-shadow: none;
}

.section-controls .card-btn.view {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    margin-right: 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.section-controls .card-btn.view:hover {
    opacity: 1;
}

/* Task Card Styles */
.task-card {
    background-color: var(--surface-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.task-card h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 1.2em;
}

.task-duration {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.task-description {
    margin-bottom: 15px;
    line-height: 1.5;
    color: var(--text-primary);
}

.task-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.task-step {
    background-color: var(--surface-hover);
    border-left: 4px solid var(--accent-color);
    padding: 12px;
    border-radius: 0 4px 4px 0;
}

.task-step h4 {
    color: var(--accent-color);
    margin-bottom: 8px;
    font-size: 1.1em;
}

.task-step p {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.step-elements {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

.step-element {
    background-color: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
}

.step-element strong {
    color: var(--accent-color);
    display: block;
    margin-bottom: 5px;
    font-size: 0.95em;
}

.step-element p {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.step-element ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.step-element li {
    margin-bottom: 5px;
    color: var(--text-secondary);
}

.step-element li:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .step-elements {
        grid-template-columns: 1fr;
    }
}

/* Info Tooltip Styles */
/* Styles for the trigger element (the icon) */
.info-tooltip-trigger {
    display: inline-flex; 
    align-items: center;  
    justify-content: center; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%;
    color: #FF7043; /* New Orange Icon Color */
    margin-left: 2px; /* Reduced from 6px */
    cursor: help;
    border: 1px solid rgba(255, 112, 67, 0.4); /* Adjusted Orange Border Color */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    vertical-align: middle;
    user-select: none;
    box-sizing: border-box; 
    animation: tooltip-pulse-animation 2s infinite;
}

.info-tooltip-trigger svg {
    width: 14px; 
    height: 14px;
    display: block; 
}

.info-tooltip-trigger:hover {
    background-color: rgba(255, 112, 67, 0.1); /* Light Orange Background on hover */
    border-color: rgba(255, 112, 67, 0.6);
}

/* Animation for pulsing */
@keyframes tooltip-pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.5); /* Orange Pulse Color */
    }
    70% {
        box-shadow: 0 0 0 8px rgba(255, 112, 67, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 112, 67, 0);
    }
}

/* Stop pulsing animation if tooltip has been shown */
.info-tooltip-trigger[data-tooltip-shown="true"] {
    animation: none;
    color: #757575; /* Neutral gray for the icon/SVG content */
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.2); /* Light gray border */
    box-shadow: none; /* Ensure no lingering pulse shadow */
}

/* Styles for the tooltip content box (appended to body) */
.tooltip-content {
    position: absolute; /* Positioned by JavaScript */
    visibility: hidden; /* Initially hidden, shown by JavaScript */
    opacity: 0;         /* Initially transparent, shown by JavaScript */
    background-color: var(--surface-color);
    color: var(--text-primary);
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;    /* Base font size */
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; /* Smooth fade */
    pointer-events: auto; /* Allow interaction if needed, like clicking links inside */
    max-width: 250px; /* Default max-width */
    width: auto; /* Allow content to define width up to max-width */
    white-space: normal; /* Allow text to wrap */
    /* z-index will be set by JavaScript to ensure it's on top */
}

/* Arrow styling using pseudo-elements */
.tooltip-content::before, .tooltip-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 6px;
    width: 0;
    height: 0;
}

.tooltip-content::before { /* Border part of the arrow */
    border-color: transparent;
}

.tooltip-content::after { /* Fill part of the arrow */
    border-color: transparent;
}

/* Top orientation: arrow points down */
.tooltip-content.orient-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(0, 0, 0, 0.1); /* Match border color */
}
.tooltip-content.orient-top::after {
    top: calc(100% - 1px); /* Slightly offset for border effect */
    left: 50%;
    transform: translateX(-50%);
    border-top-color: white; /* Match background color */
}

/* Bottom orientation: arrow points up */
.tooltip-content.orient-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
.tooltip-content.orient-bottom::after {
    bottom: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: white;
}

/* Left orientation: arrow points right */
.tooltip-content.orient-left::before {
    top: var(--arrow-top-offset, 50%); /* Use CSS variable, fallback to 50% */
    left: 100%;
    transform: translateY(-50%);
    border-left-color: rgba(0, 0, 0, 0.1);
}
.tooltip-content.orient-left::after {
    top: var(--arrow-top-offset, 50%); /* Use CSS variable, fallback to 50% */
    left: calc(100% - 1px);
    transform: translateY(-50%);
    border-left-color: white;
}

/* Right orientation: arrow points left */
.tooltip-content.orient-right::before {
    top: var(--arrow-top-offset, 50%); /* Use CSS variable, fallback to 50% */
    right: 100%;
    transform: translateY(-50%);
    border-right-color: rgba(0, 0, 0, 0.1);
}
.tooltip-content.orient-right::after {
    top: var(--arrow-top-offset, 50%); /* Use CSS variable, fallback to 50% */
    right: calc(100% - 1px);
    transform: translateY(-50%);
    border-right-color: white;
}


/* Make sure tooltips are visible even when parent is collapsed */
/* These might be less necessary now with body appending, but good for reference */
.collapsible-section.collapsed .info-tooltip-trigger {
    /* Ensure the trigger itself is visible if needed, though JS handles content */
}

/* Position tooltips in section headers */
.section-header h3 .info-tooltip-trigger {
    /* No special positioning needed for trigger usually */
}


/* Wide tooltip style - applied by JS to the .tooltip-content element */
.tooltip-content.wide-tooltip {
    max-width: 400px !important; /* Increased max-width */
    font-size: 13px !important; /* Slightly larger font for readability */
    line-height: 1.5 !important;
    padding: 12px 15px !important;
}

/* Styling for HTML lists within tooltips */
.tooltip-content ul {
    list-style-type: disc;
    margin: 5px 0 5px 20px; /* Top, Right, Bottom, Left */
    padding: 0;
}

.tooltip-content li {
    margin-bottom: 3px;
}

/* Styling for nested lists within tooltips */
.tooltip-content ul ul {
    list-style-type: circle;
    margin-top: 3px;
    margin-bottom: 3px;
}

.tooltip-content strong {
    font-weight: bold;
}

/* REMOVE OLD TOOLTIP STYLES that might conflict */
/* The following styles are for the OLD .info-tooltip which was both trigger and container */
/* And old .tooltip-content when it was a child */
/* Search for ".info-tooltip {" and ".tooltip-content {" lines 3102-3145 and review/remove if they are for the old system */
/* Specifically, remove transform, old position, left, bottom, etc. from the old .tooltip-content if it was styled as a child */

/* Elements explanation text */
.elements-explanation {
    font-style: italic;
    color: var(--text-tertiary);
    margin: 15px 0;
    padding: 0 10px;
    text-align: center;
    line-height: 1.5;
    font-size: 14px;
}

.learning-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--surface-hover);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.learning-section:nth-child(2) {
    border-left-color: #9C27B0;
}

.learning-section:nth-child(3) {
    border-left-color: #4CAF50;
}

.info-item, .writing-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.info-item:last-child, .writing-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Simplified question list styling */
.question-list {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    list-style-type: disc;
}

.question-list li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* Question types styling */
.question-types {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

/* Make the info points more streamlined */
.info-points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.info-item {
    padding: 0;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    background: transparent;
    border-bottom: 1px solid #eee;
}

.info-item h5 {
    margin-bottom: 0.3rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.info-item p {
    margin: 0;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* Writing items styling */
.writing-item {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
}

.writing-item h5 {
    margin-bottom: 0.3rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.writing-item p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Alpha Version Popup Styles */
.alpha-version-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.alpha-version-popup.active {
    display: flex;
}

.alpha-popup-content {
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 4px 20px var(--shadow-color);
    animation: popup-appear 0.4s ease;
    color: var(--text-primary);
}

@keyframes popup-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.alpha-popup-content h2 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alpha-popup-body {
    color: var(--text-primary);
}

.alpha-popup-body p {
    margin-bottom: 1rem;
    line-height: 1.5;
}

.alpha-popup-body h3 {
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem;
    font-size: 1.2rem;
}

.alpha-popup-body ul {
    list-style-type: none;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.alpha-popup-body li {
    margin-bottom: 0.5rem;
    position: relative;
}

.alpha-popup-body li:before {
    content: "•";
    color: #666;
    position: absolute;
    left: -1.5rem;
}

.alpha-popup-body .thank-you {
    margin-top: 1.5rem;
    font-weight: 500;
}

.alpha-popup-close {
    display: block;
    width: 100%;
    padding: 1rem;
    margin-top: 2rem;
    background-color: var(--accent-color);
    color: var(--bg-color);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.alpha-popup-close:hover {
    background-color: var(--accent-hover);
}

/* Insight Card Title - to prevent long titles from breaking layout */
.insight-card .tips-card-header h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; 
    min-width: 0; 
}

/* Ensure card controls have enough space and align items */
.card-controls {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.3rem; /* Keeps a small gap between icons */
    align-items: center; /* Vertically align items in card-controls */
    flex-shrink: 0; /* Prevent controls from shrinking */
}

/* Specific adjustment for insight card header to ensure controls are not pushed out by a long title */
.insight-card .tips-card-header {
    padding: 1rem 1.2rem; 
    padding-right: 95px; /* Increased padding to reserve space for card-controls (approx 90-100px wide) */
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex; 
    align-items: center;
    position: relative; 
    gap: 0.5rem; 
    color: var(--text-primary);
}

/* Ensure the toggle icon in the header does not grow or shrink, maintaining its size */
.tips-card-header .toggle-icon {
    flex-shrink: 0; 
    position: static; 
    transform: none;  
    margin-left: 0; /* Remove/override previous margin-left: auto */
}

/* Styling for the wrapper spans if needed, e.g., for vertical alignment within card-controls */
.header-tooltip-trigger-wrapper-helper,
.header-tooltip-trigger-wrapper-insight {
    display: inline-flex; /* To ensure it behaves well in a flex row */
    align-items: center; /* Vertically align the icon within its wrapper */
    /* margin-right: 2px; Optional: if a tiny bit more space is needed before the eye icon */
}

/* Custom Theme Input Styles */
.custom-theme-modifier {
    display: flex; /* Aligns well with other flex items in .prompt-modifiers */
    flex-grow: 1; /* Allows it to take available space if needed */
    margin-left: 0.5rem; /* Adds a little space from the last checkbox */
}

#custom-theme-input {
    width: 100%; /* Take full width of its parent .custom-theme-modifier */
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--input-text);
    background-color: var(--input-bg);
    transition: all 0.2s ease;
    height: 36px;
    line-height: 36px;
}

#custom-theme-input::placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

#custom-theme-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background-color: var(--input-bg);
    box-shadow: 0 0 0 2px var(--accent-color);
    opacity: 0.8;
}

/* Unified Navigation Bar Styles */
.unified-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 1001;
    box-sizing: border-box;
    height: 60px;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 400px;
    margin: 0 20px;
}

.navbar-search input {
    flex: 1;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--input-text);
    font-family: inherit;
    font-size: 14px;
    min-width: 200px;
}

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

.navbar-search input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
}

.navbar-search .search-status {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 80px;
    text-align: left;
}

.navbar-search button {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.navbar-search button:hover {
    background-color: var(--surface-hover);
}

.nav-item {
    padding: 8px 16px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
}

.nav-item:hover:not(.nav-item-active) {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.nav-item-active {
    background: var(--surface-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    cursor: default;
}

.nav-item-active:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.nav-item {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ff4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lesson-title-container {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 400px;
    margin: 0 20px;
}

.lesson-title-input {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--input-text);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 8px 12px;
    width: 100%;
    transition: all 0.2s ease;
}

.lesson-title-input:hover {
    border-color: var(--accent-color);
}

.lesson-title-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background-color: var(--input-bg);
    box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
}

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

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.save-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-btn:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.save-btn svg {
    width: 16px;
    height: 16px;
}

/* Save split-button + dropdown (lesson creator) */
.save-split {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.save-btn-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.save-btn-caret {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 8px 6px;
}
.save-btn-caret svg {
    width: 14px;
    height: 14px;
}
.save-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    padding: 6px;
    display: none;
    z-index: 1000;
}
.save-menu.show {
    display: block;
}
.save-menu-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}
.save-menu-item:hover {
    background: var(--surface-hover);
}

.theme-toggle-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.theme-toggle-btn:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent-color);
}

.avatar-dropdown {
    position: relative;
}

.avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.avatar-btn:hover {
    background-color: var(--surface-hover);
}

.avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff453a;
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--background-color);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    min-width: 200px;
    padding: 8px 0;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1002;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

a.dropdown-item {
    text-decoration: none;
}

a.dropdown-item:hover {
    color: var(--text-primary);
}

/* Make logout look identical to regular dropdown items (align like Settings) */
#logout-btn.dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent; /* default matches others */
    border-radius: 8px;
}
#logout-btn.dropdown-item:hover {
    background-color: #3a3a3a; /* same hover as .dropdown-item */
    color: var(--text-primary);
}
#logout-btn.dropdown-item:focus { outline: none; }

.dropdown-item:hover {
    background-color: #3a3a3a;
}

.dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Avatar image support */
.avatar-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Class selector sizing */
.class-select { position: relative; }
.class-select-btn { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--surface-color); color: var(--text-primary); }
.class-select-btn svg { width:16px; height:16px; }
.class-dropdown { position:absolute; right:0; top:110%; background: var(--surface-color); border:1px solid #3a3a3a; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.35); min-width:220px; padding:6px; display:none; z-index:1002; }
.class-dropdown.show { display:block; }
.class-option { padding:10px 12px; border-radius:8px; cursor:pointer; color: var(--text-primary); }
.class-option:hover { background: var(--surface-hover); }
.class-option.disabled { opacity:.6; cursor:default; }

/* Settings modal base styles */
/* settings modal uses global .modal-overlay styles; do not override display */
/* #settings-modal-overlay specific sizing merges with defaults if needed */
/* Remove conflicting display:none to allow .modal-overlay.active to show */
#settings-modal-overlay {
    z-index: 3000 !important;
}

/* Settings modal - keep original size but allow sidebar scrolling */
#settings-modal-overlay .modal-content {
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#settings-modal-overlay .tab-panels {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#settings-modal-overlay .tab-panel {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#settings-modal-overlay .tab-panel.active {
    display: flex;
}
.modal-close-btn { position:absolute; right:16px; top:12px; background:transparent; border:none; color: var(--text-primary); font-size:22px; cursor:pointer; }
.tabs { display:flex; gap:8px; margin-top:8px; }
.tab-btn { 
    background: transparent; 
    border: 1px solid var(--border-color); 
    color: var(--text-secondary); 
    padding: 8px 16px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 500;
    transition: all 0.2s ease;
}
.tab-btn.active { 
    background: var(--accent-color); 
    color: var(--text-on-accent);
    border-color: var(--accent-color);
}
.tab-btn:hover:not(.active) {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.tab-panel { 
    display:none; 
    margin-top: 32px; /* Add space between tabs and content */
}
.tab-panel.active { display:block; }
.nav-button {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 12px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-button:hover {
    background: var(--surface-hover);
    border-color: var(--accent-color);
}
.nav-button:active {
    transform: none;
}

.classes-layout { 
    display:grid; 
    grid-template-columns: 228px minmax(0, 1fr); 
    gap:20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Settings modal: avoid clipping sidebar controls at the column seam (Firefox) */
#settings-modal-overlay .classes-layout {
    overflow-x: visible;
    overflow-y: auto;
}

#settings-modal-overlay .classes-list {
    overflow-x: visible;
    overflow-y: auto;
    padding-right: 14px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    background: var(--surface-color);
}

#settings-modal-overlay .class-editor {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.classes-list { 
    border-right:1px solid var(--border-color); 
    padding-right:12px; 
    overflow-y: auto;
    overflow-x: visible;
    min-width: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.classes-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.class-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    position: relative;
}

.class-editor::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.class-editor-footer {
    margin-top: auto;
    padding-top: 16px;
    padding-bottom: 8px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    background: var(--surface-color);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* TTS Settings Separator */
.tts-settings-separator {
    height: 1px;
    background: var(--border-color);
    margin: 16px 0;
}

.tts-settings-header {
    margin-bottom: 12px;
}

.tts-settings-header h3 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.tts-settings-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tts-settings-content .context-input-group {
    margin-bottom: 0;
}

.tts-settings-content .context-label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    display: block;
}

.tts-settings-content .slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.tts-settings-content .context-slider {
    flex: 1 1 auto;
    min-width: 0;
    width: 0; /* allow shrink in narrow sidebar (Firefox) */
}

.tts-settings-content .slider-value {
    flex: 0 0 auto;
    min-width: 36px;
    font-size: 0.85rem;
    text-align: right;
}

/* TTS Gender Toggle */
.tts-gender-toggle-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tts-gender-toggle {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.tts-gender-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    user-select: none;
}

.tts-gender-option:hover {
    background: var(--surface-hover);
}

.tts-gender-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.tts-gender-option input[type="radio"]:checked + span {
    color: var(--accent-color);
    font-weight: 500;
}

.tts-gender-option span {
    color: var(--text-primary);
}
.list-header { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    margin-bottom:8px; 
}
.list-header h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* Settings modal title */
#settings-modal-title {
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 16px 0;
}
.class-row { 
    padding:6px 8px; 
    border:1px solid var(--border-color); 
    border-radius:6px; 
    margin-bottom:6px; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    background: var(--surface-color);
    color: var(--text-primary);
    transition: all 0.2s ease;
}
.class-row:hover { 
    background: var(--surface-hover);
    border-color: var(--accent-color);
}
.class-row.active {
    background: var(--accent-color, #0a84ff);
    color: var(--text-on-accent, #ffffff);
    border-color: var(--accent-color, #0a84ff);
    font-weight: 500;
}
.class-row.active .class-name {
    color: var(--text-on-accent, #ffffff);
}
.class-row.active .delete-class {
    color: var(--text-on-accent, #ffffff);
}

/* Highlight "New Class" button when creating new class */
#create-class-btn.creating-new {
    background: var(--accent-color, #0a84ff);
    color: var(--text-on-accent, #ffffff);
    border-color: var(--accent-color, #0a84ff);
    font-weight: 500;
    animation: pulse-highlight 1.5s ease-in-out;
}

@keyframes pulse-highlight {
    0%, 100% { 
        background: var(--accent-color, #0a84ff);
        transform: scale(1);
    }
    50% { 
        background: var(--accent-color, #0a84ff);
        transform: scale(1.05);
    }
}

/* Pillar sync icon in section controls */
.pillar-sync-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    animation: fadeInPulse 0.5s ease-out;
    color: var(--accent-color, #0a84ff);
    position: relative;
}

.pillar-sync-icon:hover {
    background: var(--accent-color);
    color: #fff;
    transform: scale(1.1);
}

/* Visible tooltip that shows immediately (not just on hover) - appended to body to avoid overflow */
.pillar-sync-tooltip {
    position: fixed; /* Fixed to viewport to avoid overflow issues */
    visibility: hidden; /* Positioned by JavaScript */
    opacity: 0;
    padding: 6px 10px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--text-primary);
    box-shadow: 0 4px 12px var(--shadow-color);
    pointer-events: none;
    z-index: 10000; /* High z-index like other tooltips */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.pillar-sync-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

.pillar-sync-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--surface-color);
}

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

@keyframes fadeInPulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pillar sync modal checkboxes */
.pillar-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.pillar-checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.pillar-checkboxes label:hover {
    background: var(--surface-hover);
}

.pillar-checkboxes input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Smaller modal size for pillar sync - wider but much shorter */
.pillar-sync-modal-container {
    max-width: 600px !important;
    width: 90% !important;
    max-height: 400px !important;
    padding: 20px !important;
}

#pillar-sync-modal .modal-body {
    padding: 16px 0;
    max-height: 200px;
    overflow-y: auto;
}

/* Modal footer buttons alignment */
#pillar-sync-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

/* Cancel button should look secondary */
#pillar-sync-modal #pillar-sync-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

#pillar-sync-modal #pillar-sync-cancel:hover {
    background: var(--surface-hover);
    border-color: var(--accent-color);
}

.delete-class {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-class:hover {
    background: var(--error-color);
    color: white;
}

.class-name {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.category-header {
    padding: 8px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.category-header:hover {
    background: var(--surface-hover);
    border-color: var(--accent-color);
}

.category-toggle {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.category-header.collapsed .category-toggle {
    transform: rotate(-90deg);
}

.category-activities {
    display: block;
    transition: all 0.2s ease;
}
.class-editor .context-input-row { display:flex; gap:16px; margin:12px 0; }
.class-editor .context-input-row.activity-types-row {
    align-items: flex-start;
    margin-bottom: 8px;
}
.class-editor .context-input-row.activity-types-row .context-input-group {
    width: 100%;
}
.class-editor-footer {
    margin-top: 8px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    justify-content: flex-end;
}
.context-input-group { display:flex; flex-direction:column; gap:6px; flex:1; }
.slider-container { display:flex; align-items:center; gap:10px; }

/* Settings modal only — single column avoids Firefox grid overlap/clipping */
#settings-modal-overlay .activity-types-container,
.class-editor .activity-types-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 420px;
    min-height: 320px;
    overflow: auto;
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: 8px;
    background: var(--surface-color);
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

#settings-modal-overlay .activity-types-container .activity-category,
.class-editor .activity-types-container .activity-category {
    align-self: start;
    min-width: 0;
    width: 100%;
}

/* Settings modal: collapsible categories (single column) */
#settings-modal-overlay .category-header .category-toggle {
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
}

#settings-modal-overlay .category-header.collapsed + .category-activities {
    display: none;
}

#settings-modal-overlay .category-header:not(.collapsed) + .category-activities {
    display: block;
    max-height: none;
    overflow: visible;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
}

/* Legacy Editor Header Styles - Keep for backward compatibility */
.editor-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1001; /* Ensure it's above other content */
    box-sizing: border-box;
}

.editor-header .back-link {
    color: #5f6368;
    text-decoration: none;
    font-size: 14px;
}

.editor-header .back-link:hover {
    text-decoration: underline;
}

#lesson-title {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--input-text);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    flex-grow: 1;
    margin: 0 20px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

#lesson-title:hover {
    border-color: var(--accent-color);
}

#lesson-title:focus {
    outline: none;
    border-color: var(--accent-color);
    background-color: var(--input-bg);
    box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
}

#lesson-title::placeholder {
    color: var(--text-muted);
}

#save-lesson-btn {
    background-color: #1a73e8;
    color: #ffffff;
    border: none;
    padding: 8px 24px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

#save-lesson-btn:hover {
    background-color: #287ae6;
}

/* -----------------
 * Content Capture Panel
 * ----------------- */

.content-capture-panel {
    background-color: #2c2c2e;
    border-radius: 8px;
    margin-top: 20px;
}

.content-capture-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.content-capture-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.content-capture-body {
    padding: 16px;
}

.capture-input-container {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

#capture-input {
    flex-grow: 1;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--input-text);
    font-family: inherit;
    resize: vertical;
    min-height: 40px;
}

#capture-btn {
    background-color: #0a84ff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

#capture-btn:hover {
    background-color: #0077e6;
}

#capture-btn:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
}

#captured-content-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 40vh;
    overflow-y: auto;
}

.resource-card {
    background-color: var(--surface-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 12px;
}

.resource-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.resource-card-icon {
    font-size: 18px;
}

.resource-card-title {
    flex-grow: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delete-resource-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.delete-resource-btn:hover {
    color: #ff453a;
}

.resource-card-summary {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.resource-card-link {
    font-size: 12px;
    color: var(--accent-color);
    text-decoration: none;
}

.resource-card-link:hover {
    text-decoration: underline;
}

/* -----------------
 * Resource Cards
 * ----------------- */

.resource-card {
    background-color: var(--surface-color);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow-color);
    border-color: var(--accent-color);
}

.card-thumbnail {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    background-color: var(--surface-color);
}

.card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.card-icon {
    font-size: 20px;
}

.card-title {
    flex-grow: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delete-btn {
    background: none;
    border: none;
    color: #8e8e93;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex; /* For alignment */
    align-items: center; /* For alignment */
    justify-content: center; /* For alignment */
    transition: color 0.2s;
}

.delete-btn:hover {
    color: #ff453a;
}

.card-summary {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    flex-grow: 1;
    /* Truncate text to 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.card-footer {
    margin-top: auto;
}

.card-link {
    font-size: 14px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.card-link:hover {
    text-decoration: underline;
}

/* Selection checkbox positioned bottom-right on resource cards */
.resource-card .select-checkbox {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    z-index: 2;
    accent-color: #4CAF50;
}

/* Selection checkbox for lesson cards - always visible */
.lesson-card {
    position: relative; /* Required for absolute positioning of checkbox */
}

.lesson-card .select-checkbox {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    z-index: 2;
    accent-color: #4CAF50;
    display: block; /* Always visible, not just on hover */
    opacity: 1; /* Ensure fully visible */
    cursor: pointer;
}

/* -----------------
 * Resource Modal
 * ----------------- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--surface-color);
    border-radius: 12px;
    padding: 24px 32px;
    width: 92%;
    max-width: 1080px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.modal-content h2 {
    margin: 0 0 16px 0;
    font-size: 24px;
}

.modal-summary {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.modal-summary p {
    margin: 4px 0 0 0;
    color: var(--text-secondary);
}

.modal-full-content {
    flex-grow: 1;
    overflow-y: auto;
    line-height: 1.6;
    color: var(--text-primary); /* Fix for readable text */
}

.modal-full-content strong {
    display: block;
    margin-bottom: 8px;
}

.modal-footer {
    padding-top: 24px;
    text-align: right;
}

body.modal-open {
    overflow: hidden; /* Prevent background scroll */
}

/* Styles for Delete Confirmation Modal */
.delete-confirm-content {
    max-width: 400px;
    text-align: center;
}

#delete-confirm-title {
    color: var(--text-primary);
    margin-bottom: 12px;
}

.delete-confirm-content p {
    color: var(--text-secondary);
}

.delete-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.delete-confirm-btn-danger {
    background-color: #ff3b30;
    border-color: #ff3b30;
    color: white;
}

.delete-confirm-btn-danger:hover {
    background-color: #c70000;
    border-color: #c70000;
}

/* Activity Categories */
.activity-category {
    margin-bottom: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}

.class-editor .activity-category {
    overflow: visible;
    margin-bottom: 0;
}

.category-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: var(--surface-hover);
    cursor: pointer;
    user-select: none;
}

.category-header:hover {
    background: var(--surface-color);
}

.category-icon {
    margin-right: 0.75rem;
    font-size: 1.2rem;
}

.category-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.class-editor .category-header {
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.class-editor .category-icon,
.class-editor .category-toggle,
.class-editor .add-custom-activity-btn {
    flex-shrink: 0;
}

.category-toggle {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.category-header.collapsed .category-toggle {
    transform: rotate(-90deg);
}

.add-custom-activity-btn {
    background: var(--accent-color);
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 6px;
}

.activity-category[data-category="custom"] .category-header .category-toggle {
    margin-left: 0;
}

.add-custom-activity-btn:hover {
    opacity: 0.9;
}

.category-activities {
    padding: 0.5rem;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.category-header.collapsed + .category-activities {
    display: none;
}

.category-header:not(.collapsed) + .category-activities {
    display: block;
}

/* Activity Options */
.activity-type-option {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.activity-type-option:hover {
    background: var(--surface-hover);
}

.activity-type-option:hover .edit-activity-btn {
    opacity: 1;
}

.activity-type-option.is-edited {
    background: rgba(33, 150, 243, 0.05);
}

.activity-type-option.is-custom {
    background: rgba(255, 193, 7, 0.05);
}

.activity-type-option.needs-prompt {
    opacity: 0.7;
}

.edit-activity-btn {
    flex-shrink: 0;
    margin-left: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 0.9rem;
    padding: 2px 6px;
    color: var(--text-secondary);
}

.edit-activity-btn:hover {
    color: var(--accent-color);
}

.prompt-needed-badge {
    display: none !important;
}

.edited-badge {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(33, 150, 243, 0.2);
    padding: 2px 8px;
    border-radius: 3px;
    color: #2196f3;
    line-height: 1.2;
}

.activity-type-option.is-edited > span:not(.edited-badge):not(.custom-badge):not(.prompt-needed-badge) {
    font-weight: 500;
}

.custom-badge {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    background: rgba(255, 193, 7, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
    color: #ffc107;
}

/* Show More Button */
.show-more-btn {
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: 1px dashed var(--border-light);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.show-more-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* Activity Edit Modal */
#activity-edit-modal {
    z-index: 30001 !important;
}

.activity-edit-modal {
    max-width: 500px;
    width: 100%;
    height: auto;
    max-height: min(90vh, 100%);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    flex: 0 0 auto;
}

.activity-edit-modal .modal-header {
    padding: 1rem 1.25rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.75rem;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.activity-edit-modal .modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.activity-edit-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.activity-edit-modal .modal-close:hover {
    color: var(--text-primary);
}

.activity-edit-modal .modal-body {
    padding: 0 1.25rem 0.75rem 1.25rem;
}

.activity-edit-modal .form-group {
    margin-bottom: 0.75rem;
}

.activity-edit-modal label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.activity-edit-modal .modal-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.activity-edit-modal .modal-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.activity-edit-modal textarea.modal-input {
    resize: vertical;
    font-family: inherit;
    min-height: 80px;
}

.activity-edit-modal .modal-footer {
    padding: 0.75rem 1.25rem 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border-light);
    margin-top: 0;
    border-radius: 0 0 8px 8px;
}

.activity-edit-modal .modal-body .form-group:last-child {
    margin-bottom: 0;
}

.activity-edit-modal .btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-edit-modal .btn-primary:hover {
    background: #1976d2;
}

.activity-edit-modal .btn-secondary {
    background: var(--surface-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-edit-modal .btn-secondary:hover {
    background: var(--surface-color);
}

.activity-edit-modal .btn-danger {
    background: #f44336;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-edit-modal .btn-danger:hover {
    background: #d32f2f;
}


  
/* --- Auth page layout (isolated) --- */
.auth-main { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:32px; background:rgba(249,250,251,.5); }
.auth-card { width:100%; max-width:1024px; background:#fff; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.08); overflow:hidden; display:flex; flex-direction:column; }
.auth-left, .auth-right { padding:48px; }
.auth-left { flex:3; }
.auth-right { flex:2; background:rgba(207,250,254,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.auth-title { font-family: 'Merriweather', serif; font-weight:900; font-size:40px; line-height:1.1; color:#111827; }
.auth-subtitle { margin-top:16px; color:#4B5563; }
.auth-illustration img { width:100%; max-width:360px; height:auto; border-radius:8px; display:block; margin:32px auto 0; }
.btn-google { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; max-width:320px; border:1px solid rgba(156,163,175,.7); border-radius:9999px; padding:10px 24px; font-weight:500; color:#1F2937; background:#fff; transition:background .15s ease; }
.btn-google:hover { background:#F9FAFB; }
.g-icon { width:20px; height:20px; display:inline-block; }
.auth-terms {
    text-align: center;
    margin-top: 14px;
    font-size: 11px;
    line-height: 1.5;
    max-width: 320px;
}
.auth-terms .link-muted {
    font-size: 11px;
    color: #9CA3AF;
    text-decoration: none;
}
.auth-terms .link-muted:hover {
    color: #6B7280;
    text-decoration: underline;
}
.auth-terms-sep {
    margin: 0 5px;
    color: #D1D5DB;
    font-size: 10px;
}
.link-muted { font-size:12px; color:#6B7280; text-decoration:underline; }
.link-muted:hover { color:#374151; }
@media (min-width: 768px) { .auth-card { flex-direction:row; } }
@media (min-width: 768px) { .auth-card { flex-direction:row; } }

/* --- Collapsible Day Groups (Resources & Lessons) --- */
.day-group {
    margin-bottom: 1.5rem;
}

.day-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 6px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.day-group-header:hover {
    opacity: 0.8;
}

.day-line {
    height: 1px;
    background: var(--border-color, rgba(0, 0, 0, 0.1));
    flex: 1;
}

.day-label-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-tertiary, rgba(0, 0, 0, 0.6));
    white-space: nowrap;
}

.day-label {
    font-weight: 500;
}

.favorites-star {
    font-size: 0.9em;
    opacity: 0.7;
    margin-right: 4px;
    display: inline-block;
}

.day-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
    color: var(--text-tertiary, rgba(0, 0, 0, 0.6));
}

.day-group-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

@media (max-width: 1200px) {
    .day-group-cards {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 700px) {
    .day-group-cards {
        grid-template-columns: repeat(1, minmax(260px, 1fr));
    }
}

.day-group.collapsed .day-group-cards {
    display: none;
}

.day-group.expanded .day-group-cards {
    display: grid;
}

/* Legacy day-separator support (for picker-list) */
.picker-list .day-separator { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.picker-list .day-separator .day-line { height: 1px; background: var(--border-color); flex: 1; }
.picker-list .day-separator .day-label { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* --- Quick Pins Row (Favorites) --- */
.quick-pins-row {
    margin-bottom: 1.5rem;
}

.quick-pins-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

@media (max-width: 1200px) {
    .quick-pins-cards {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 700px) {
    .quick-pins-cards {
        grid-template-columns: repeat(1, minmax(260px, 1fr));
    }
}

/* --- Favorite Button --- */
.card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.favorite-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, rgba(0, 0, 0, 0.6));
    transition: color 0.2s ease, transform 0.1s ease;
}

.favorite-btn:hover {
    color: #ffa726;
    transform: scale(1.1);
}

.favorite-btn.favorited {
    color: #ffa726;
}

.favorite-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

/* Timeline rail removed - not needed */

/* -----------------
 * Legal pages (Privacy, Terms)
 * ----------------- */
.legal-page-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color, #f5f5f7);
    color: var(--text-primary, #1a1a1a);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.65;
}

.legal-page-header {
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--border-light, #e5e5ea);
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.legal-header-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.legal-brand {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--text-primary, #1a1a1a);
    text-decoration: none;
}

.legal-brand:hover {
    color: var(--accent-color, #2196f3);
}

.legal-nav {
    display: flex;
    gap: 1.25rem;
    font-size: 0.9rem;
}

.legal-nav a {
    color: var(--text-secondary, #555);
    text-decoration: none;
    font-weight: 500;
}

.legal-nav a:hover,
.legal-nav a[aria-current="page"] {
    color: var(--accent-color, #2196f3);
}

.legal-page-main {
    flex: 1;
    padding: 2rem 1.5rem 3rem;
}

.legal-document {
    max-width: 820px;
    margin: 0 auto;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-light, #e5e5ea);
    border-radius: 12px;
    padding: 2.5rem 2.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.legal-document h1 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.legal-meta {
    color: var(--text-secondary, #666);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-light, #eee);
}

.legal-lead {
    font-size: 1.05rem;
    color: var(--text-primary, #333);
    margin-bottom: 1.5rem;
}

.legal-document h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    color: var(--text-primary, #1a1a1a);
}

.legal-document h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.legal-document p,
.legal-document li {
    font-size: 0.95rem;
    color: var(--text-secondary, #444);
}

.legal-document p {
    margin: 0 0 1rem;
}

.legal-document ul {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.legal-document li {
    margin-bottom: 0.35rem;
}

.legal-document a {
    color: var(--accent-color, #2196f3);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-document a:hover {
    text-decoration-thickness: 2px;
}

.legal-page-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    border-top: 1px solid var(--border-light, #e5e5ea);
    background: var(--card-bg, #fff);
}

.legal-page-footer p {
    margin: 0.25rem 0;
}

.legal-page-footer a {
    color: var(--text-secondary, #666);
    text-decoration: none;
}

.legal-page-footer a:hover {
    color: var(--accent-color, #2196f3);
}

@media (max-width: 640px) {
    .legal-document {
        padding: 1.5rem 1.25rem;
    }

    .legal-document h1 {
        font-size: 1.6rem;
    }
}