/* Light Theme Defaults */
:root {
    --bg-primary: #ffffff; /* White background */
    --bg-secondary: #f8f9fa; /* Light grey background */
    --bg-card: #ffffff; /* White cards */
    --bg-card-hover: #f1f3f5; /* Slightly darker white on hover */
    --text-primary: #212529; /* Dark text */
    --text-secondary: #6c757d; /* Grey text */
    --text-heading: #343a40; /* Darker heading text */
    --accent-primary: #E63980; /* Default accent (updated) */
    --accent-secondary: #007bff; /* Standard blue accent */
    --primary-color: #292C6D; /* Primary brand color for gradients */
    --secondary-color: var(--accent-primary); /* Secondary brand color for gradients */
    --border-color: #dee2e6; /* Light grey border */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Lighter shadow */
    --border-radius-md: 12px;
    --border-radius-sm: 8px;

    /* Specific component variables (Light) */
    --bg-input: #ffffff;
    --bg-input-focus: #ffffff;
    --border-input: #ced4da;
    --border-input-focus: #80bdff; /* Example focus color */
    --text-input: #495057;
    --placeholder-input: #6c757d;
    --bg-dropdown: #ffffff;
    --bg-dropdown-hover: #e9ecef;
    --border-dropdown: #ced4da;
    --text-dropdown: #212529;

    /* Message specific */
    --bg-user-message: #292C6D;
    --text-user-message: #ffffff;
    --bg-ai-message: #EEE;
    --text-ai-message: #212529;
    --bg-subtle: #FAFAFA;
    --shadow-inset-sm: inset 0 1px 2px rgba(var(--text-primary-rgb, 0,0,0,0).05);
    --accent-primary-rgb: 230, 57, 128; /* For rgba usage (updated to match #E63980) */
    --shadow-input-focus: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.25);
    --text-on-accent: #ffffff;
    --accent-primary-hover: #bf2156; /* Default hover color - darker version of #E63980 (will be overridden by JS) */

    /* Button Specific (Light) */
    --button-primary-bg: #4285F4;
    --button-primary-hover-bg: #3367D6;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
    --border-subtle-light: rgba(0, 0, 0, 0.05);
    --bg-user-message-darker: #20235a; /* Darker shade for gradients/operators */
    --text-on-accent-muted: rgba(255, 255, 255, 0.7);
    --shadow-modal-light: 0 15px 40px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1);
    --color-purple: #6f42c1;
    --color-yellow: #ffc107;
    --color-black: #000;
    --danger-color-darker: #c82333;
    --accent-primary-hover-darker: #a61c4a;
    --accent-primary-shadow-stronger: rgba(var(--accent-primary-rgb), 0.35);
    --accent-secondary-rgb: 0, 123, 255; /* For rgba usage */
    --accent-secondary-hover: #0056b3; /* Darker blue */
    --shadow-input-focus-secondary: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.25);
    --brand-primary-rgb: 41, 44, 109; /* For rgba usage */
    --shadow-input-focus-brand: 0 0 5px rgba(var(--brand-primary-rgb), 0.5);
    --brand-primary-bg-subtle: rgba(var(--brand-primary-rgb), 0.05);
    --shadow-brand-strong: 0 0 10px rgba(var(--brand-primary-rgb), 0.3);
    --bg-overlay-light: rgba(255, 255, 255, 0.8);
    --shadow-md-strong: 0 6px 15px rgba(0, 0, 0, 0.15);
    --success-color-darker: #218838;
    --success-bg-subtle: #f0fff0;

    /* Status Colors (Light) */
    --danger-color: #dc3545;
    --danger-color-rgb: 220, 53, 69; /* For rgba usage */
    --danger-color-bg-overlay: rgba(var(--danger-color-rgb), 0.8);
    --danger-color-darker-bg-overlay: rgba(191, 33, 86, 0.9); /* Using hardcoded darker red for now */
    --danger-bg-light: #ffe8e8;
    --danger-bg-lighter: #ffdcdc;
    --shadow-danger: 0 4px 12px rgba(var(--danger-color-rgb), 0.2);
    --danger-color-light-text: rgba(255, 80, 80, 0.8);
    --danger-color-bg-subtle: rgba(220, 53, 69, 0.1);
    --warning-color-bg-subtle: rgba(255, 193, 7, 0.2);
    --accent-secondary-bg-subtle: rgba(var(--accent-secondary-rgb), 0.1);
    --warning-color: #ff9800;
    --warning-color-darker: #f57c00;
    --success-color: #28a745; /* Updated standard success */
    --bg-hover-subtle: #f5f5f5; /* Specific light hover */
    /* Generic hover background (was missing, used as fallback elsewhere) */
    --bg-hover: var(--bg-card-hover);

    /* Code Block Specific (Light) */
    --bg-overlay-light-subtle: rgba(0, 0, 0, 0.08);
    --info-color: #0dcaf0; /* Updated for info toast */
    /* --success-color: #10b981; */ /* Replaced above */
    --grid-line-color-light: rgba(220, 220, 220, 0.1);
    --text-line-number: #aaa;
    --bg-inline-code-light: rgba(175, 184, 193, 0.2);

    /* Syntax Highlighting (Light) */
    --syntax-keyword: #0033b3;
    --syntax-string: #067d17;
    --syntax-number: #1750eb;
    --syntax-comment: #8c8c8c;
    --syntax-function: #6f42c1;
    --syntax-tag: #22863a;
    --syntax-attr: #6f42c1;
    --syntax-property: #e36209;
    --syntax-value: #032f62;
    --syntax-selector: #22863a;

    --input-area-desktop-padding-y: 15px;
    --input-area-desktop-content-height: 48px; /* Altura do user-input/botões */
    --input-area-desktop-total-height: calc(2 * var(--input-area-desktop-padding-y) + var(--input-area-desktop-content-height)); /* ~78px */

    --input-area-mobile-padding-y: 8px;
    --input-area-mobile-content-height: 42px; /* Altura do user-input/botões no mobile */
    --input-area-mobile-total-height: calc(2 * var(--input-area-mobile-padding-y) + var(--input-area-mobile-content-height)); /* ~58px */
}

/* Dark Theme Overrides */
body.dark-mode {
    --bg-primary: #1a1a1a;
    --bg-secondary: #222;
    --bg-card: #2d2d2d; /* Adjusted from original for consistency */
    --bg-card-hover: #353535;
    --text-primary: #f0f0f0;
    --text-secondary: #adb5bd; /* Adjusted for better contrast */
    --text-heading: #ffffff;
    --accent-primary: #E63980; /* Keep original accent */
    --accent-secondary: #4dabf7; /* Keep original accent */
    --primary-color: #3A3F99; /* Primary brand color for gradients in dark mode */
    --secondary-color: #E63980; /* Secondary brand color for gradients in dark mode */
    --border-color: #444; /* Adjusted */
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* Specific component variables (Dark) */
    --bg-input: #2d2d2d;
    --bg-input-focus: #3d3d3d;
    --border-input: #4d4d4d;
    --border-input-focus: var(--accent-primary);
    --text-input: #f5f5f5;
    --placeholder-input: #6c757d; /* Can stay similar */
    --bg-dropdown: #2d2d2d;
    --bg-dropdown-hover: #3d3d3d;
    --border-dropdown: #4d4d4d;
    --text-dropdown: #f5f5f5;

    /* Message specific (Dark) */
    --bg-user-message: #3A3F99; /* Slightly lighter blue for dark */
    --text-user-message: #f0f0f0;
    --bg-ai-message: var(--bg-card); /* Use card background */
    --text-ai-message: var(--text-primary);
    --bg-subtle: #252525; /* Darker subtle background */
    --shadow-inset-sm: inset 0 1px 2px rgba(var(--text-primary-rgb, 0,0,0,0).2);
    --accent-primary-rgb: 230, 57, 128; /* Corresponds to #E63980 */
    --shadow-input-focus: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.5);
    --text-on-accent: #ffffff; /* Often stays white */
    --accent-primary-hover: #bf2156; /* Default hover color - darker version of #E63980 (will be overridden by JS) */

    /* New Dark Mode Specific Variables */
    --bg-light-hover-dark: rgba(255, 255, 255, 0.1); /* For light elements on dark bg hover */
    --bg-overlay-dark: rgba(0, 0, 0, 0.7); /* Dark overlay background */
    --bg-overlay-dark-hover: rgba(0, 0, 0, 0.9); /* Dark overlay background hover */
    --border-light-dark: rgba(255, 255, 255, 0.08); /* Subtle light border on dark bg */
    --bg-light-hover-subtle-dark: rgba(255, 255, 255, 0.05); /* Very subtle light hover */
    --danger-color-dark: #ff7b72; /* Danger color for dark mode (auth modal) */
    --warning-color-dark: #e65100; /* Warning color for dark mode */
    --warning-color-darker-dark: #ff6d00; /* Darker warning color for dark mode */
    --success-color-dark: #5cb85c; /* Success color for dark mode (auth modal) */
    --accent-primary-lighter-dark: #ff80ab; /* Lighter accent for links in dark mode */
    --danger-color-hover-dark: #ff4d4d; /* Danger color hover for dark mode */
    --shadow-dark-strong: 0 4px 15px rgba(0, 0, 0, 0.2); /* A specific stronger shadow used */
    --shadow-dark-stronger: 0 6px 20px rgba(0, 0, 0, 0.3); /* Even stronger shadow */
    --shadow-dark-active: 0 2px 10px rgba(0, 0, 0, 0.3); /* Active state shadow */
    --shadow-dark-modal: 0 15px 40px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2); /* Complex modal shadow */
    --accent-primary-bg-subtle: rgba(var(--accent-primary-rgb), 0.15); /* Subtle accent background */
    --accent-primary-border-subtle: rgba(var(--accent-primary-rgb), 0.3); /* Subtle accent border */
    --accent-primary-border-hover: rgba(var(--accent-primary-rgb), 0.2); /* Subtle accent border hover */

    /* Button Specific (Dark) */
    --button-primary-bg-dark: #5C9CFF;
    --button-primary-hover-bg-dark: var(--button-primary-bg); /* Use light default for dark hover */
    --bg-user-message-darkest: #1f214a; /* Very dark shade for gradients */
    --text-on-accent-muted-dark: rgba(255, 255, 255, 0.6);
    --bg-button-function-dark: #555555;
    --border-subtle-dark: rgba(255, 255, 255, 0.1);
    --bg-display-dark: #252525;
    --shadow-inset-dark: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    --bg-button-dark: #444444;
    --shadow-button-dark: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-button-hover-dark: 0 3px 6px rgba(0, 0, 0, 0.35);
    --shadow-button-active-dark: 0 1px 2px rgba(0, 0, 0, 0.3);
    --text-button-function-dark: #ccc;
    --color-purple-dark: #9d72e0; /* Lighter purple */
    --color-yellow-dark: #ffd43b; /* Lighter yellow */
    --color-black-dark: #1a1a1a; /* Off-black */
    --danger-color-darker-dark: #a51c2a; /* Darker red for dark mode */
    --danger-color-bg-subtle-dark: rgba(255, 107, 107, 0.15);
    --warning-color-bg-subtle-dark: rgba(255, 193, 7, 0.3);
    --accent-secondary-bg-subtle-dark: rgba(var(--accent-secondary-rgb), 0.15);
    --shadow-input-focus-secondary-dark: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.25); /* Same as light for now */
    --bg-overlay-dark-strong: rgba(45, 45, 45, 0.8);
    --danger-bg-dark: #5a2d2d;
    --danger-bg-darker: #4d2525;
    --shadow-danger-dark: 0 4px 12px rgba(255, 107, 107, 0.3);
    --danger-color-light-text-dark: rgba(255, 120, 120, 0.9);
    --success-bg-subtle-dark: #2a3a2a;
    --danger-color-bg-overlay-dark: rgba(255, 100, 100, 0.7);

    /* Code Block Specific (Dark) */
    --border-color-dark-alt: #333;
    --info-color-dark: #3dd5f3; /* Lighter cyan for dark mode info */
    /* --success-color-dark: #34d399; */ /* Replaced above */
    --grid-line-color-dark: rgba(80, 80, 80, 0.1);
    --text-line-number-dark: #666;
    --bg-inline-code-dark: rgba(110, 118, 129, 0.4);
    --bg-hover-subtle: rgba(255, 255, 255, 0.08); /* Dark mode subtle hover */
    /* Provide generic hover variable for dark mode */
    --bg-hover: var(--bg-card-hover);

    /* Syntax Highlighting (Dark) */
    --syntax-keyword-dark: #ff79c6;
    --syntax-string-dark: #f1fa8c;
    --syntax-number-dark: #bd93f9;
    --syntax-comment-dark: #6272a4;
    --syntax-function-dark: #50fa7b;
    --syntax-tag-dark: #ff79c6;
    --syntax-attr-dark: #50fa7b;
    --syntax-property-dark: #8be9fd;
    --syntax-value-dark: #f1fa8c;
    --syntax-selector-dark: #ff79c6;
}

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

/* Estilização da seleção de texto */
::selection {
    background-color: rgba(var(--accent-primary-rgb), 0.3);
    color: var(--text-primary);
}

::-moz-selection {
    background-color: rgba(var(--accent-primary-rgb), 0.3);
    color: var(--text-primary);
}

html, body {
    height: 100%;
    /* overflow: auto; Removed */
}

body {
    overflow: hidden; /* Remove body scrollbar */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fonte do protótipo */
    background-color: var(--bg-secondary); /* Use variable */
    color: var(--text-primary); /* Use variable */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    /* Note: Added 'overflow: hidden;' above */
}

a {
    color: inherit;
    text-decoration: none;
}



/* /src/css/base/_scrollbar.css */
/* Scrollbar Styles */

/* For Webkit browsers (Chrome, Safari, Edge) */
/* Adicionado: estilos de scrollbar para conteúdo do modal de agenda e mensagem do confirm modal */
.confirm-modal .confirm-modal-message::-webkit-scrollbar,
.schedule-modal-content::-webkit-scrollbar {
    width: 8px;
}

#chat-area::-webkit-scrollbar,
#whiteboard-list-content::-webkit-scrollbar,
.resolver-history-column::-webkit-scrollbar, /* ADICIONADO */
#question-resolver-page .resolver-input-column .landing-container::-webkit-scrollbar, /* ADICIONADO */
#solution-page .landing-container::-webkit-scrollbar, /* ADICIONADO */
#resolution-display-page .landing-container::-webkit-scrollbar, 
#welcome-page::-webkit-scrollbar, /* ADICIONADO PARA WELCOME */
#beta-page::-webkit-scrollbar, /* ADICIONADO PARA BETA PAGE */
#resolver-selection-page::-webkit-scrollbar, /* ADICIONADO: Hub Assistente */
#memlit-page .landing-container::-webkit-scrollbar, /* ADICIONADO: Memorização Literal */
.user-settings-modal .confirm-modal-message::-webkit-scrollbar, /* ADICIONADO PARA MODAL DE CONFIGURAÇÕES */
#study-selection-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE SELEÇÃO DE ESTUDO */
#revisoes-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE REVISÕES */
.pomodoro-legend-content::-webkit-scrollbar, /* ADICIONADO PARA LEGENDA POMODORO */
.pomodoro-settings-content::-webkit-scrollbar, /* ADICIONADO PARA CONFIGS POMODORO */
.quick-chat-messages::-webkit-scrollbar, /* ADICIONADO PARA QUICK CHAT */
.ready-courses-grid::-webkit-scrollbar, /* ADICIONADO PARA READY COURSES GRID */
.message-image-container::-webkit-scrollbar, /* ADICIONADO PARA SCROLL DE IMAGENS EM MENSAGENS */
#study-plan-content::-webkit-scrollbar, /* ADICIONADO PARA SCROLL DO PLANO DE ESTUDOS NA ABA */
.summary-list::-webkit-scrollbar, /* ADICIONADO PARA DROPDOWN DE SUMÁRIO */
.markdown-table-container::-webkit-scrollbar, /* ADICIONADO PARA TABELAS MARKDOWN */
.table-container::-webkit-scrollbar, /* ADICIONADO PARA TABELAS NORMAIS */
.schedule-container::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE CRONOGRAMA */
#help-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE HELP PRINCIPAL */
#help-reviews-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE HELP REVISÕES */
#help-schedule-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE HELP CRONOGRAMA */
#help-chat-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE HELP CHAT */
#help-timer-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE HELP TIMER */
#help-resolver-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE HELP RESOLVEDOR */
#help-courses-page::-webkit-scrollbar, /* ADICIONADO PARA PÁGINA DE HELP CURSOS */
#music-categories-view::-webkit-scrollbar, /* ADICIONADO PARA PLAYLIST */
#music-tracks-view::-webkit-scrollbar, /* ADICIONADO PARA PLAYLIST */
.options-dropdown::-webkit-scrollbar /* ADICIONADO PARA DROPDOWN DE IDIOMAS */ {
    width: 8px;
}
/* Para elementos que precisam de scrollbars mais finas */
.history-dropdown::-webkit-scrollbar,
.mobile-history-dropdown::-webkit-scrollbar {
    width: 6px;
}

#chat-area::-webkit-scrollbar-track,
#whiteboard-list-content::-webkit-scrollbar-track,
.resolver-history-column::-webkit-scrollbar-track, /* ADICIONADO */
#question-resolver-page .resolver-input-column .landing-container::-webkit-scrollbar-track, /* ADICIONADO */
#solution-page .landing-container::-webkit-scrollbar-track, /* ADICIONADO */
.user-settings-modal .confirm-modal-message::-webkit-scrollbar-track, /* ADICIONADO */
#study-selection-page::-webkit-scrollbar-track, /* ADICIONADO */
#revisoes-page::-webkit-scrollbar-track, /* ADICIONADO */
.pomodoro-legend-content::-webkit-scrollbar-track, /* ADICIONADO */
.pomodoro-settings-content::-webkit-scrollbar-track, /* ADICIONADO */
.quick-chat-messages::-webkit-scrollbar-track, /* ADICIONADO */
.ready-courses-grid::-webkit-scrollbar-track, /* ADICIONADO */
.message-image-container::-webkit-scrollbar-track, /* ADICIONADO */
#study-plan-content::-webkit-scrollbar-track, /* ADICIONADO */
.summary-list::-webkit-scrollbar-track, /* ADICIONADO */
.markdown-table-container::-webkit-scrollbar-track, /* ADICIONADO */
.table-container::-webkit-scrollbar-track, /* ADICIONADO */
.schedule-container::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE CRONOGRAMA */
#help-page::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE HELP PRINCIPAL */
#help-reviews-page::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE HELP REVISÕES */
#help-schedule-page::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE HELP CRONOGRAMA */
#help-chat-page::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE HELP CHAT */
#help-timer-page::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE HELP TIMER */
#help-resolver-page::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE HELP RESOLVEDOR */
#help-courses-page::-webkit-scrollbar-track, /* ADICIONADO PARA PÁGINA DE HELP CURSOS */
#music-categories-view::-webkit-scrollbar-track, /* ADICIONADO PARA PLAYLIST */
#music-tracks-view::-webkit-scrollbar-track, /* ADICIONADO PARA PLAYLIST */
#welcome-page::-webkit-scrollbar-track, /* ADICIONADO PARA WELCOME */
#beta-page::-webkit-scrollbar-track, /* ADICIONADO PARA BETA PAGE */
#resolver-selection-page::-webkit-scrollbar-track, /* ADICIONADO: Hub Assistente */
#memlit-page .landing-container::-webkit-scrollbar-track, /* ADICIONADO: Memorização Literal */
.options-dropdown::-webkit-scrollbar-track /* ADICIONADO PARA DROPDOWN DE IDIOMAS */ {
    background: var(--bg-subtle); /* Use variable */
    border-radius: 4px;
}
#resolver-selection-page::-webkit-scrollbar-track { /* ADICIONADO: Hub Assistente */
    background: var(--bg-subtle);
    border-radius: 4px;
}
#memlit-page .landing-container::-webkit-scrollbar-track { /* ADICIONADO: Memorização Literal */
    background: var(--bg-subtle);
    border-radius: 4px;
}

/* Tracks para schedule modal content e confirm modal message */
.confirm-modal .confirm-modal-message::-webkit-scrollbar-track,
.schedule-modal-content::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 4px;
}
.history-dropdown::-webkit-scrollbar-track,
.mobile-history-dropdown::-webkit-scrollbar-track {
    background: var(--bg-subtle); /* Use variable */
    border-radius: 3px;
}

#chat-area::-webkit-scrollbar-thumb,
#whiteboard-list-content::-webkit-scrollbar-thumb,
.resolver-history-column::-webkit-scrollbar-thumb, /* ADICIONADO */
#question-resolver-page .resolver-input-column .landing-container::-webkit-scrollbar-thumb, /* ADICIONADO */
#solution-page .landing-container::-webkit-scrollbar-thumb, /* ADICIONADO */
.user-settings-modal .confirm-modal-message::-webkit-scrollbar-thumb, /* ADICIONADO */
#study-selection-page::-webkit-scrollbar-thumb, /* ADICIONADO */
#revisoes-page::-webkit-scrollbar-thumb, /* ADICIONADO */
.pomodoro-legend-content::-webkit-scrollbar-thumb, /* ADICIONADO */
.pomodoro-settings-content::-webkit-scrollbar-thumb, /* ADICIONADO */
.quick-chat-messages::-webkit-scrollbar-thumb, /* ADICIONADO */
.ready-courses-grid::-webkit-scrollbar-thumb, /* ADICIONADO */
.message-image-container::-webkit-scrollbar-thumb, /* ADICIONADO */
#study-plan-content::-webkit-scrollbar-thumb, /* ADICIONADO */
.summary-list::-webkit-scrollbar-thumb, /* ADICIONADO */
.markdown-table-container::-webkit-scrollbar-thumb, /* ADICIONADO */
.table-container::-webkit-scrollbar-thumb, /* ADICIONADO */
.schedule-container::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE CRONOGRAMA */
#help-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE HELP PRINCIPAL */
#help-reviews-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE HELP REVISÕES */
#help-schedule-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE HELP CRONOGRAMA */
#help-chat-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE HELP CHAT */
#help-timer-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE HELP TIMER */
#help-resolver-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE HELP RESOLVEDOR */
#help-courses-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA PÁGINA DE HELP CURSOS */
#music-categories-view::-webkit-scrollbar-thumb, /* ADICIONADO PARA PLAYLIST */
#music-tracks-view::-webkit-scrollbar-thumb, /* ADICIONADO PARA PLAYLIST */
#welcome-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA WELCOME */
#beta-page::-webkit-scrollbar-thumb, /* ADICIONADO PARA BETA PAGE */
#resolver-selection-page::-webkit-scrollbar-thumb, /* ADICIONADO: Hub Assistente */
#memlit-page .landing-container::-webkit-scrollbar-thumb, /* ADICIONADO: Memorização Literal */
.options-dropdown::-webkit-scrollbar-thumb /* ADICIONADO PARA DROPDOWN DE IDIOMAS */ {
    background-color: var(--accent-primary, #D92960); /* Use variable if available */
    border-radius: 4px;
    border: 2px solid var(--bg-subtle); /* Use variable */
}

/* Thumbs para schedule modal content e confirm modal message */
.confirm-modal .confirm-modal-message::-webkit-scrollbar-thumb,
.schedule-modal-content::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border-radius: 4px;
    border: 2px solid var(--bg-subtle);
}
.history-dropdown::-webkit-scrollbar-thumb,
.mobile-history-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960); /* Use variable if available */
    border-radius: 3px;
}

/* For Firefox */
/* Estilos para Firefox nos mesmos elementos */
.confirm-modal .confirm-modal-message,
.schedule-modal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-subtle);
}

#chat-area,
#whiteboard-list-content,
.history-dropdown,
.mobile-history-dropdown,
.resolver-history-column, /* ADICIONADO */
#question-resolver-page .resolver-input-column .landing-container, /* ADICIONADO */
#solution-page .landing-container, /* ADICIONADO */
.user-settings-modal .confirm-modal-message, /* ADICIONADO */
#study-selection-page, /* ADICIONADO */
#revisoes-page, /* ADICIONADO */
.pomodoro-legend-content, /* ADICIONADO */
.pomodoro-settings-content, /* ADICIONADO */
.quick-chat-messages, /* ADICIONADO */
.ready-courses-grid, /* ADICIONADO */
.message-image-container, /* ADICIONADO */
#study-plan-content, /* ADICIONADO */
.summary-list, /* ADICIONADO */
.markdown-table-container, /* ADICIONADO */
.table-container, /* ADICIONADO */
#help-page, /* ADICIONADO PARA PÁGINA DE HELP PRINCIPAL */
#help-reviews-page, /* ADICIONADO PARA PÁGINA DE HELP REVISÕES */
#help-schedule-page, /* ADICIONADO PARA PÁGINA DE HELP CRONOGRAMA */
#help-chat-page, /* ADICIONADO PARA PÁGINA DE HELP CHAT */
#help-timer-page, /* ADICIONADO PARA PÁGINA DE HELP TIMER */
#help-resolver-page, /* ADICIONADO PARA PÁGINA DE HELP RESOLVEDOR */
#help-courses-page, /* ADICIONADO PARA PÁGINA DE HELP CURSOS */
#music-categories-view, /* ADICIONADO PARA PLAYLIST */
#music-tracks-view, /* ADICIONADO PARA PLAYLIST */
#welcome-page, /* ADICIONADO PARA WELCOME */
#beta-page, /* ADICIONADO PARA BETA PAGE */
#resolver-selection-page, /* ADICIONADO: Hub Assistente */
#memlit-page .landing-container, /* ADICIONADO: Memorização Literal */
.options-dropdown /* ADICIONADO PARA DROPDOWN DE IDIOMAS */ {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-subtle); /* thumb track - Use variable */
}

/* Dark Mode Overrides (Se necessário, já que as variáveis devem cuidar disso) */
body.dark-mode #chat-area::-webkit-scrollbar-track,
body.dark-mode #whiteboard-list-content::-webkit-scrollbar-track,
body.dark-mode .resolver-history-column::-webkit-scrollbar-track,
body.dark-mode #question-resolver-page .resolver-input-column .landing-container::-webkit-scrollbar-track,
body.dark-mode #solution-page .landing-container::-webkit-scrollbar-track,
body.dark-mode .user-settings-modal .confirm-modal-message::-webkit-scrollbar-track,
body.dark-mode #study-selection-page::-webkit-scrollbar-track,
body.dark-mode #revisoes-page::-webkit-scrollbar-track,
body.dark-mode .pomodoro-legend-content::-webkit-scrollbar-track,
body.dark-mode .pomodoro-settings-content::-webkit-scrollbar-track,
body.dark-mode .quick-chat-messages::-webkit-scrollbar-track,
body.dark-mode .options-dropdown::-webkit-scrollbar-track, /* ADICIONADO PARA DROPDOWN DE IDIOMAS */
body.dark-mode .ready-courses-grid::-webkit-scrollbar-track,
body.dark-mode .message-image-container::-webkit-scrollbar-track,
body.dark-mode #study-plan-content::-webkit-scrollbar-track,
body.dark-mode .summary-list::-webkit-scrollbar-track,
body.dark-mode .markdown-table-container::-webkit-scrollbar-track,
body.dark-mode .table-container::-webkit-scrollbar-track,
body.dark-mode .schedule-container::-webkit-scrollbar-track,
body.dark-mode #help-page::-webkit-scrollbar-track,
body.dark-mode #help-reviews-page::-webkit-scrollbar-track,
body.dark-mode #help-schedule-page::-webkit-scrollbar-track,
body.dark-mode #help-chat-page::-webkit-scrollbar-track,
body.dark-mode #help-timer-page::-webkit-scrollbar-track,
body.dark-mode #help-resolver-page::-webkit-scrollbar-track,
body.dark-mode #help-courses-page::-webkit-scrollbar-track,
body.dark-mode #music-categories-view::-webkit-scrollbar-track,
body.dark-mode #music-tracks-view::-webkit-scrollbar-track,
body.dark-mode #welcome-page::-webkit-scrollbar-track,
body.dark-mode #beta-page::-webkit-scrollbar-track,
body.dark-mode #resolver-selection-page::-webkit-scrollbar-track,
body.dark-mode #memlit-page .landing-container::-webkit-scrollbar-track {
    background: var(--bg-card-hover); /* Use variable */
}

/* Dark mode: track para schedule modal content e confirm modal message */
body.dark-mode .confirm-modal .confirm-modal-message::-webkit-scrollbar-track,
body.dark-mode .schedule-modal-content::-webkit-scrollbar-track {
    background: var(--bg-card-hover);
}

body.dark-mode .resolver-history-column::-webkit-scrollbar-thumb,
body.dark-mode #question-resolver-page .resolver-input-column .landing-container::-webkit-scrollbar-thumb,
body.dark-mode #solution-page .landing-container::-webkit-scrollbar-thumb,
body.dark-mode .user-settings-modal .confirm-modal-message::-webkit-scrollbar-thumb,
body.dark-mode #study-selection-page::-webkit-scrollbar-thumb,
body.dark-mode #revisoes-page::-webkit-scrollbar-thumb,
body.dark-mode .pomodoro-legend-content::-webkit-scrollbar-thumb,
body.dark-mode .pomodoro-settings-content::-webkit-scrollbar-thumb,
body.dark-mode .quick-chat-messages::-webkit-scrollbar-thumb,
body.dark-mode .ready-courses-grid::-webkit-scrollbar-thumb,
body.dark-mode .message-image-container::-webkit-scrollbar-thumb,
body.dark-mode #study-plan-content::-webkit-scrollbar-thumb,
body.dark-mode .summary-list::-webkit-scrollbar-thumb,
body.dark-mode .markdown-table-container::-webkit-scrollbar-thumb,
body.dark-mode .table-container::-webkit-scrollbar-thumb,
body.dark-mode #help-page::-webkit-scrollbar-thumb,
body.dark-mode #help-reviews-page::-webkit-scrollbar-thumb,
body.dark-mode #help-schedule-page::-webkit-scrollbar-thumb,
body.dark-mode #help-chat-page::-webkit-scrollbar-thumb,
body.dark-mode #help-timer-page::-webkit-scrollbar-thumb,
body.dark-mode #help-resolver-page::-webkit-scrollbar-thumb,
body.dark-mode #help-courses-page::-webkit-scrollbar-thumb,
body.dark-mode #music-categories-view::-webkit-scrollbar-thumb,
body.dark-mode #music-tracks-view::-webkit-scrollbar-thumb,
body.dark-mode #welcome-page::-webkit-scrollbar-thumb,
body.dark-mode #beta-page::-webkit-scrollbar-thumb,
body.dark-mode #resolver-selection-page::-webkit-scrollbar-thumb,
body.dark-mode #memlit-page .landing-container::-webkit-scrollbar-thumb,
body.dark-mode .options-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary); /* Use variable */
    border: 2px solid var(--bg-card-hover); /* Use variable */
}

/* Dark mode: thumb para schedule modal content e confirm modal message */
body.dark-mode .confirm-modal .confirm-modal-message::-webkit-scrollbar-thumb,
body.dark-mode .schedule-modal-content::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
    border: 2px solid var(--bg-card-hover);
}

body.dark-mode .resolver-history-column,
body.dark-mode #question-resolver-page .resolver-input-column .landing-container,
body.dark-mode #solution-page .landing-container,
body.dark-mode .user-settings-modal .confirm-modal-message,
body.dark-mode #study-selection-page,
body.dark-mode #revisoes-page,
body.dark-mode .pomodoro-legend-content,
body.dark-mode .pomodoro-settings-content,
body.dark-mode .quick-chat-messages,
body.dark-mode .ready-courses-grid,
body.dark-mode .message-image-container,
body.dark-mode #study-plan-content,
body.dark-mode .summary-list,
body.dark-mode .markdown-table-container,
body.dark-mode .table-container,
body.dark-mode #help-page,
body.dark-mode #help-reviews-page,
body.dark-mode #help-schedule-page,
body.dark-mode #help-chat-page,
body.dark-mode #help-timer-page,
body.dark-mode #help-resolver-page,
body.dark-mode #help-courses-page,
body.dark-mode #music-categories-view,
body.dark-mode #music-tracks-view,
body.dark-mode #welcome-page,
body.dark-mode #beta-page,
body.dark-mode #resolver-selection-page, /* ADICIONADO: Hub Assistente */
body.dark-mode #memlit-page .landing-container, /* ADICIONADO: Memorização Literal */
body.dark-mode .mobile-history-dropdown {
    scrollbar-color: var(--accent-primary) var(--bg-card-hover); /* Use variables */
}

/* Course Page scrollbars (WebKit) */
#course-page::-webkit-scrollbar,
#course-graph-container::-webkit-scrollbar,
.course-graph-container::-webkit-scrollbar {
    width: 8px;
}
#course-page::-webkit-scrollbar-track,
#course-graph-container::-webkit-scrollbar-track,
.course-graph-container::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 4px;
}
#course-page::-webkit-scrollbar-thumb,
#course-graph-container::-webkit-scrollbar-thumb,
.course-graph-container::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border-radius: 4px;
    border: 2px solid var(--bg-subtle);
}

/* Course Page scrollbars (Firefox) */
#course-page,
#course-graph-container,
.course-graph-container {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-subtle);
}

/* Dark mode overrides for Course Page */
body.dark-mode #course-page::-webkit-scrollbar-track,
body.dark-mode #course-graph-container::-webkit-scrollbar-track,
body.dark-mode .course-graph-container::-webkit-scrollbar-track {
    background: var(--bg-card-hover);
}
body.dark-mode #course-page::-webkit-scrollbar-thumb,
body.dark-mode #course-graph-container::-webkit-scrollbar-thumb,
body.dark-mode .course-graph-container::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
    border: 2px solid var(--bg-card-hover);
}
body.dark-mode #course-page,
body.dark-mode #course-graph-container,
body.dark-mode .course-graph-container {
    scrollbar-color: var(--accent-primary) var(--bg-card-hover);
}

/* Dark mode: firefox cores para schedule modal content e confirm modal message */
body.dark-mode .confirm-modal .confirm-modal-message,
body.dark-mode .schedule-modal-content {
    scrollbar-color: var(--accent-primary) var(--bg-card-hover);
}
/* Theme Styles (Includes Dark Mode) */

/* --- Dark Mode --- */
body.dark-mode {
    background-color: var(--bg-primary); /* Use variable from _variables.css */
    color: var(--text-primary);         /* Use variable from _variables.css */
}

/* Header */
body.dark-mode .header {
    background-color: var(--bg-card); /* Use variable */
    box-shadow: 0 2px 4px var(--shadow-color); /* Use variable */
}
body.dark-mode .logo {
    color: var(--text-heading); /* Use variable */
    text-shadow: 0 0 10px var(--accent-primary-border-subtle); /* Use variable */
}
body.dark-mode .menu-item {
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .menu-item:hover {
    background-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .menu-item.active {
    /* Keep accent color from base styles */
    /* background-color: var(--accent-primary, #D92960); */
    /* color: #fff; */
}

/* Chat */
body.dark-mode .chat-container {
    background-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .message.user {
    /* Keep user message style */
    /* background-color: #292C6D; */
}
body.dark-mode .message.ai {
    background-color: var(--bg-card-hover); /* Use variable */
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .input-area {
    background-color: var(--bg-card); /* Use variable */
    border-top-color: var(--border-input); /* Use variable */
}
body.dark-mode #user-input {
    background-color: var(--bg-input); /* Use variable */
    color: var(--text-input); /* Use variable */
    border-color: var(--border-input); /* Use variable */
    /* Dark mode icon handled by pseudo-element in _chat.css */
    /* background-image: none; */
}
body.dark-mode #user-input:focus {
    border-color: var(--border-input-focus); /* Use variable */
    box-shadow: var(--shadow-input-focus); /* Use variable */
    background-color: var(--bg-input-focus); /* Use variable */
    /* Dark mode focused icon handled by pseudo-element in _chat.css */
    /* background-image: none; */
}




/* Media Buttons Tray */
body.dark-mode .media-buttons-tray {
    background-color: var(--bg-card); /* Use variable */
    box-shadow: var(--shadow-dark-strong); /* Use variable */
}
body.dark-mode #send-image-button {
    background-color: var(--bg-card-hover); /* Use variable */
    color: var(--text-primary); /* Use variable */
}
body.dark-mode #send-image-button:hover {
    background-color: var(--border-input); /* Use variable */
}

/* History Dropdown & Modal */
body.dark-mode .history-dropdown,
body.dark-mode .history-modal {
    background-color: var(--bg-card); /* Use variable */
    border-color: var(--border-input); /* Use variable */
}
body.dark-mode .history-dropdown-item:hover {
    background-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .history-date-label {
    background-color: var(--bg-card-hover); /* Use variable */
    color: var(--text-primary); /* Use variable */
    border-color: var(--border-input); /* Use variable */
}
/* Action buttons handled in _history-dropdown.css */
body.dark-mode .history-modal-header {
    border-bottom-color: var(--border-input); /* Use variable */
}
body.dark-mode .history-modal-title {
     color: var(--text-heading); /* Use variable */
}
body.dark-mode .history-modal-close, /* Assuming this class exists */
body.dark-mode .history-mobile-close {
    /* Keep accent background, adjust shadow? */
    box-shadow: var(--shadow-dark-active); /* Use variable */
}
body.dark-mode .text-selection-menu-button:hover {
    background-color: var(--bg-hover-subtle);
}

/* Study Plan (Message) */
body.dark-mode .message .plano-estudos {
    background: var(--bg-card); /* Use variable */
    border-color: var(--accent-primary-border-subtle); /* Use variable */
}
body.dark-mode .message .plano-estudos .plano-titulo {
    color: var(--text-heading); /* Use variable */
    border-bottom-color: var(--accent-primary-border-subtle); /* Use variable */
}
body.dark-mode .message .plano-estudos .plano-topico h3 {
    background: var(--accent-primary-bg-subtle); /* Use variable */
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .message .plano-estudos .plano-topico li {
    color: var(--text-primary); /* Use variable */
    border-left-color: var(--accent-primary-border-hover); /* Use variable */
}
body.dark-mode .message .plano-estudos .plano-topico li:before {
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .message .plano-estudos .plano-topico li:hover {
    background: var(--bg-light-hover-dark); /* Use variable */
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .message .plano-estudos .plano-topico li:hover:before {
    color: var(--text-heading); /* Use variable */
}

/* Mobile Menu */
body.dark-mode .menu { /* Applies to mobile flyout */
    background-color: var(--bg-card); /* Use variable */
}
body.dark-mode .menu-overlay {
    background: var(--bg-overlay-dark); /* Use variable */
}
body.dark-mode .profile-container {
    border-bottom-color: var(--border-input); /* Use variable */
}
body.dark-mode .menu li a, /* Target links if they exist */
body.dark-mode .menu-item,
body.dark-mode #loginButton { /* In mobile menu */
    border-bottom-color: var(--border-light-dark); /* Use variable */
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .menu li a:hover,
body.dark-mode .menu-item:hover,
body.dark-mode #loginButton:hover { /* In mobile menu */
    background-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .menu-item.active {
     background-color: var(--accent-primary-border-hover); /* Use variable */
     color: var(--accent-primary); /* Use variable */
}
body.dark-mode #loginButton[data-logged="true"] {
     color: var(--accent-primary); /* Use variable */
}
body.dark-mode #loginButton[data-logged="true"]:hover {
     background-color: var(--accent-primary-border-hover); /* Use variable */
}

/* Menu Toggle Button */
body.dark-mode .menu-toggle span {
    background: var(--text-primary); /* Use variable */
}
/* Active state handled by transform */

/* Whiteboard Panel */
body.dark-mode .whiteboard-panel {
    background-color: var(--bg-card); /* Use variable */
    border-left-color: var(--border-input); /* Use variable */
}
body.dark-mode .tabs {
    border-bottom-color: var(--border-input); /* Use variable */
}
body.dark-mode .tab {
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .tab:hover {
    background-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .tab.active {
    /* Keep accent color */
    /* border-bottom-color: #D92960; */
    /* color: var(--accent-primary); */
}
body.dark-mode .whiteboard-list-item {
     border-bottom-color: var(--border-input); /* Use variable */
}
body.dark-mode .whiteboard-list-item:hover {
     background-color: var(--bg-card-hover); /* Use variable */
     color: var(--text-primary); /* Use variable */
}
body.dark-mode .whiteboard-title {
     color: var(--text-primary); /* Use variable */
}
body.dark-mode .goto-message {
     color: var(--text-secondary); /* Use variable */
}
body.dark-mode .goto-message:hover {
     color: var(--accent-primary); /* Use variable */
     background-color: var(--accent-primary-border-hover); /* Use variable */
}


/* Image Preview */
body.dark-mode .image-preview-container {
    background-color: var(--bg-card); /* Use variable */
    border-color: var(--border-input); /* Use variable */
}
body.dark-mode .remove-image {
    background-color: var(--bg-overlay-dark); /* Use variable */
    border: 1px solid var(--bg-primary); /* Use variable */
}
body.dark-mode .remove-image:hover {
    background-color: var(--bg-overlay-dark-hover); /* Use variable */
}

/* Scroll to Bottom Button */
body.dark-mode .scroll-to-bottom {
    /* Keep accent background */
    box-shadow: 0 2px 5px var(--shadow-color); /* Use variable */
}

/* Loading Indicators */
body.dark-mode .typing-indicator {
    background-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .loading-placeholder { /* Added */
     background-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .loading-dots span {
    background-color: var(--text-secondary); /* Use variable */
}
body.dark-mode .typing-indicator.planning-indicator {
     background: linear-gradient(145deg, var(--bg-card), var(--bg-primary)); /* Use variables */
     border-color: var(--accent-primary-border-subtle); /* Use variable */
}
body.dark-mode .typing-indicator-text {
     color: var(--text-primary); /* Use variable */
}


/* Study Plan (Tab View) */
body.dark-mode .study-plan-view {
    background: linear-gradient(165deg, var(--bg-card), var(--bg-primary)); /* Use variables */
}
body.dark-mode #study-plan-content { /* Container within tab */
    background-color: transparent; /* Inherit gradient */
}
body.dark-mode .overall-progress,
body.dark-mode .topic-section {
    background: var(--bg-card); /* Use variable */
    box-shadow: var(--shadow-dark-strong); /* Use variable */
    border-color: var(--border-input); /* Use variable */
}
body.dark-mode .overall-progress h2,
body.dark-mode .topic-title {
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .progress-bar {
    background: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .subtopic-item {
    border-bottom-color: var(--border-light-dark); /* Use variable */
}
body.dark-mode .subtopic-item:hover {
    background-color: var(--bg-light-hover-subtle-dark); /* Use variable */
}
body.dark-mode .subtopic-checkbox {
    /* Keep accent border */
    /* border-color: #D92960; */
}
body.dark-mode .subtopic-checkbox:checked {
    /* Keep accent background */
    /* background-color: var(--accent-primary); */
}
body.dark-mode .subtopic-text {
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .topic-progress-text {
    /* Keep accent background and white text */
}


/* Mobile Close Button */
body.dark-mode .mobile-close-button {
    /* Keep accent background */
    box-shadow: var(--shadow-dark-active); /* Use variable */
}


/* Study Graph (DAG) - Dark Mode */
body.dark-mode .study-graph {
    border-top-color: var(--border-input);
}
body.dark-mode .study-graph .graph-node {
    background: var(--bg-card);
    border-color: var(--border-input);
    color: var(--text-primary);
}
body.dark-mode .study-graph .graph-node.available {
    border-color: rgba(0, 200, 120, 0.35);
}
body.dark-mode .study-graph .graph-node.available.has-microcourse {
    border-color: rgba(0, 200, 120, 0.6);
    background: rgba(0, 200, 120, 0.08);
}
body.dark-mode .study-graph .graph-node.blocked {
    opacity: 0.7;
    border-color: var(--border-light-dark);
    background: var(--bg-card);
}
body.dark-mode .study-graph .graph-node.passed {
    border-color: var(--border-light-dark);
    background: var(--bg-card-hover);
}
body.dark-mode .study-graph .node-status.created {
    color: #66bb6a;
    background: rgba(102, 187, 106, 0.15);
}
body.dark-mode .study-graph .graph-node .node-progress .progress-bar {
    background: var(--bg-card-hover);
}

/* Scrollbars */
body.dark-mode #chat-area::-webkit-scrollbar-track,
body.dark-mode #whiteboard-list-content::-webkit-scrollbar-track {
    background: var(--bg-card-hover); /* Use variable */
}
body.dark-mode #chat-area::-webkit-scrollbar-thumb,
body.dark-mode #whiteboard-list-content::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary); /* Use variable */
    border: 2px solid var(--bg-card-hover); /* Use variable */
}
body.dark-mode #chat-area,
body.dark-mode #whiteboard-list-content {
    scrollbar-color: var(--accent-primary) var(--bg-card-hover); /* Use variables */
}

body.dark-mode .history-dropdown::-webkit-scrollbar-track {
    background: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .history-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary); /* Use variable */
    /* border: 2px solid var(--bg-card-hover); /* Optional border */
}
body.dark-mode .history-dropdown {
    scrollbar-color: var(--accent-primary) var(--bg-card-hover); /* Use variables */
}

body.dark-mode .message-image-container::-webkit-scrollbar-track {
     background: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .message-image-container::-webkit-scrollbar-thumb {
     background-color: var(--accent-primary); /* Use variable */
     border: 2px solid var(--bg-card-hover); /* Use variable */
}
body.dark-mode .message-image-container {
     scrollbar-color: var(--accent-primary) var(--bg-card-hover); /* Use variables */
}

/* Final check on misc items */
body.dark-mode .show-button-update { /* Example */
     background-color: var(--accent-primary); /* Use variable */
     color: var(--text-on-accent); /* Use variable */
}
body.dark-mode .show-button-update:hover {
     background-color: var(--accent-primary-hover); /* Use variable */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}



/* Main Content Layout */
.main-content {
    flex-grow: 1;
    width: 100%;
    max-width: 1100px; /* Aumentei um pouco a largura máxima */
    margin: 0 auto;
    padding: 50px 30px; /* Mais padding vertical */
    display: flex;
    flex-direction: column;
    gap: 50px; /* Espaçamento entre seções */
}

.main-heading {
    font-size: 2.8em; /* Um pouco maior */
    font-weight: 700; /* Mais peso */
    text-align: center;
    color: var(--text-heading);
    margin-bottom: 10px; /* Reduzi a margem inferior, o gap do container principal cuida do espaço */
    line-height: 1.2;
}

.section-heading { /* Estilo comum para títulos de seção */
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--text-heading);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* Responsividade */
@media (max-width: 768px) {
    .main-content {
        padding: 40px 20px;
        gap: 40px;
        margin-top: 70px;
    }
    .main-heading {
        font-size: 2.2em;
    }
    .section-heading {
        font-size: 1.4em;
    }
}

@media (max-width: 480px) {
    .main-heading {
        font-size: 1.9em;
    }
}



/* Header Styles */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 4px 0;
    background-color: #fff; /* Base */
    /* Subtle static glow, mostly white */
    background-image:
        radial-gradient(900px 320px at 80% -20%, rgba(var(--accent-primary-rgb, 230, 57, 128), 0.10), rgba(var(--accent-primary-rgb, 230, 57, 128), 0) 60%),
        linear-gradient(#ffffff, #ffffff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Consider using var(--shadow-color) */
    transition: transform 0.3s ease-in-out; /* Smooth show/hide animation */
}

.header .container { /* Assumes _container.css is imported */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Mantém o espaçamento geral */
    gap: 15px; /* Adiciona um espaçamento geral para segurança */
}

.header-center-group {
    display: flex;
    justify-content: center; /* Centraliza os itens */
    align-items: center;
    flex-grow: 1; /* Permite que o grupo central cresça */
    gap: 15px; /* Espaçamento entre os itens no grupo central */
}

.header-right-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaçamento entre os itens no grupo da direita */
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand-primary, var(--brand-primary));
    text-decoration: none;
}

/* Menu */
.menu {
    list-style: none;
    display: flex;
    align-items: center; /* Adicione esta linha */
    margin: 0; /* Reset potential inherited margin */
    padding: 0; /* Reset potential inherited padding */
    gap: 5px; /* Opcional: Adicionar um gap entre os itens principais do menu */
}

/* In dark mode, keep menu background transparent to let header gradient show */
body.dark-mode .menu {
    background: transparent !important;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    border-radius: var(--border-radius-sm, 8px);
    color: #495057; /* Consider var(--text-secondary) */
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.menu-item:hover {
    background-color: var(--bg-hover, #e9ecef);
}

.menu-item.active {
    background-color: var(--accent-primary, var(--accent-primary));
    color: #fff; /* Consider var(--text-on-accent, #fff) */
}

.menu-item .material-symbols-outlined {
    font-size: 1.2rem;
}

.profile-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    margin-left: 0; /* Ensure margin is removed for flex gap */
    /* vertical-align: middle; Removed */
}

/* Style the profile container itself - Force Flex */
ul.menu > .profile-container {
    display: flex !important; /* Force flex display */
    align-items: center !important; /* Force vertical centering */
    gap: 8px; /* Space between icon and settings button */
    padding: 10px 0; /* Re-add vertical padding */
}

/* Style for the settings icon button if needed */
.settings-icon {
    background: none;
    border: none;
    padding: 5px; /* Adjust padding */
    padding: 5px; /* Adjust padding */
    cursor: pointer;
    display: inline-flex; /* Keep inline-flex */
    align-items: center;
    justify-content: center;
    color: #495057; /* Match menu-item color */
    border-radius: 50%; /* Make it round */
    transition: background-color 0.2s ease;
    /* Ensure no conflicting display property is inherited */
    vertical-align: middle; /* Add for good measure with inline-flex */
}

.settings-icon:hover {
    background-color: var(--bg-hover, #e9ecef); /* Match menu-item hover */
}

.settings-icon .material-symbols-outlined {
    font-size: 1.4rem; /* Adjust icon size */
}

/* No need for a separate :hover rule if it's identical */

.profile-icon.hidden {
    display: none;
}

/* Login Button specific adjustments (might belong in components/button or auth module CSS) */
#loginButton { /* This ID suggests it might be better placed elsewhere */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    /* Inherits menu-item styles if it's inside .menu */
}

/* Pomodoro Progress Indicator */
.pomodoro-progress-indicator {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    background-color: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-primary, var(--brand-primary));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.pomodoro-progress-info {
    display: flex;
    gap: 12px;
}

.pomodoro-progress-info span {
    white-space: nowrap;
}

/* Dark Mode */
.dark-mode .pomodoro-progress-indicator {
    background-color: #2d2d2d;
    color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Dark mode header gradient */
body.dark-mode .header {
    background-image:
        radial-gradient(900px 320px at 80% -20%, rgba(var(--accent-primary-rgb, 230, 57, 128), 0.08), rgba(var(--accent-primary-rgb, 230, 57, 128), 0) 60%),
        linear-gradient(var(--dm-bg-header, #1f1f1f), var(--dm-bg-header, #1f1f1f));
}

/* Mobile adaptations */
@media (max-width: 640px) {
    .pomodoro-progress-indicator {
        font-size: 0.8rem;
        padding: 3px 6px;
        margin: 0 8px;
    }
    
    .pomodoro-progress-info {
        gap: 8px;
    }
}

/* Digital Timer in Header */

/* Logo icon styles */
.logo-icon {
    height: 32px;
    width: 32px;
    object-fit: contain;
}

/* Hidden state for header (slides up out of view) */
.header.header--hidden {
    transform: translateY(-100%);
}

/* Overlay mode: header fica fixo e não ocupa espaço no fluxo, útil para viewers full-height */
.header.header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Options Button and Dropdown Styles */

/* Options Dropdown */
.options-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 5px;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #495057;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
}

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

.dropdown-item:hover {
    background-color: var(--bg-hover-subtle, #f8f9fa);
}

.dropdown-item .material-symbols-outlined {
    font-size: 1.2rem;
}

/* Dark mode for options button and dropdown */

/* Mobile responsive styles for options button */

body.dark-mode .options-dropdown {
    background: var(--bg-card);
    border-color: var(--border-input);
    box-shadow: 0 4px 15px var(--shadow-color);
}

body.dark-mode .dropdown-item {
    color: var(--text-primary);
    border-bottom-color: var(--border-input);
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--bg-card-hover);
}

/* Desktop/Mobile visibility controls */
.desktop-options-item {
    position: relative;
}

.mobile-theme-item {
    display: none;
}

/* Esconder elementos desnecessários no desktop */
@media (min-width: 869px) {
    .menu #userSettingsIcon,
    .menu #loginButton,
    .menu #helpButton {
        display: none !important;
    }
}

/* --- Responsive Header Adjustments --- */
@media (max-width: 868px) {
    .header {
        padding: 10px 0; /* Reduced padding */
    }
    .header .container {
        flex-direction: row; /* Ensure row layout */
        justify-content: space-between; /* Keep space between */
        align-items: center; /* Vertically align */
        padding: 0 15px; /* Reduced container padding */
    }
    .logo {
        font-size: 1.5rem; /* Smaller logo */
    }
    
    /* Hide pomodoro indicator in header on mobile (but keep them visible in mobile menu) */
    .header-center-group .pomodoro-progress-indicator {
        display: none !important;
    }
    
    /* Keep only timer visible in header center group */
    .header-center-group {
        justify-content: center;
    }
    
    /* Show icon instead of text on mobile when in chat page */
    body.chat-page .logo-text {
        display: none !important;
    }
    
    body.chat-page .logo-icon {
        display: block !important;
    }
    
    /* Hide desktop options and theme, show mobile theme */
    .desktop-options-item,
    .desktop-theme-item {
        display: none !important;
    }
    
    .mobile-theme-item {
        display: block;
    }
    
    /* Hamburger menu toggle is handled in _mobile-menu.css */
}

/* Language Dropdown Styles */
.language-selector-item {
    position: relative;
}

.language-option {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.language-option span:first-child {
    font-size: 1.2rem;
    margin-right: 8px;
}

.language-option.active {
    background-color: var(--accent-primary, var(--accent-primary));
    color: white;
}

.language-option.active:hover {
    background-color: var(--accent-primary, var(--accent-primary));
}

/* Mobile responsive for language selector */
@media (max-width: 868px) {
    .language-selector-item {
        margin: 10px 0;
    }

    /* Faz o dropdown de idioma abrir PARA CIMA no mobile */
    .language-selector-item .options-dropdown {
        top: auto;            /* Remove posicionamento padrão para baixo */
        bottom: 100%;         /* Posiciona acima do botão */
        margin-top: 0;
        margin-bottom: 6px;   /* Espaço entre botão e dropdown */
        transform: translateY(10px); /* Animação vindo de baixo para cima */
        transform-origin: bottom;    /* Origem da animação */
    }
    .language-selector-item .options-dropdown.active {
        transform: translateY(0); /* Estado final (alinhado) */
    }
}

/* Ajuste de contraste para seletor de idioma no tema claro */
body:not(.dark-mode) .language-selector-item .menu-item,
body:not(.dark-mode) .language-selector-item .dropdown-item,
body:not(.dark-mode) .language-selector-item .language-option {
    color: #1f1f1f; /* Mais escuro para melhor legibilidade */
}

body:not(.dark-mode) .language-selector-item .menu-item .material-symbols-outlined,
body:not(.dark-mode) .language-selector-item .dropdown-item .material-symbols-outlined {
    color: #1f1f1f;
}

/* Hover no claro mantendo contraste adequado */
body:not(.dark-mode) .language-selector-item .dropdown-item:hover {
    background-color: var(--bg-hover-subtle, #f1f3f5);
}



body:not(.dark-mode) #languageToggle.menu-item .material-symbols-outlined {
    color: #ffffff;
}
/* Header Timer Display Styles */

.header-timer-display {
    display: flex; /* Hidden by default, shown by JS */
    align-items: center;
    gap: 8px;
    padding: 4px 10px; /* Reduced padding */
    border: 1px solid #ced4da; /* Standard border */
    border-radius: 20px; /* Pill shape */
    background-color: #f8f9fa; /* Light background */
    color: #495057; /* Dark text */
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* Subtle inner shadow */
}

/* Digital Timer Display (within header) */
.header-timer-display #digital-timer {
    /* Inherits .timer-display styles, override if needed */
    position: static; /* Override absolute positioning */
    transform: none; /* Override transform */
    font-size: 0.9rem; /* Match container font size */
    color: inherit; /* Inherit color */
    text-shadow: none; /* Remove text shadow */
    padding: 0 5px; /* Add some padding */
}

/* Header Timer Buttons */
.header-timer-display .timer-button-digital { /* Use specific class */
    display: flex; /* Ensure it's shown when needed */
    position: static; /* Override absolute positioning */
    transform: none; /* Override transform */
    width: 28px;
    height: 28px;
    background: #fff; /* White background */
    color: #495057; /* Icon color */
    border: 1px solid #adb5bd; /* Slightly darker border */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: auto; /* Reset z-index */
    margin-left: 0; /* Reset margin */
}

.header-timer-display .timer-button-digital:hover {
    background: #e9ecef; /* Lighter hover */
    color: #212529;
    /* transform: scale(1.05); */ /* Removed hover scale transform */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.header-timer-display .timer-button-digital:active {
    transform: scale(0.95);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.header-timer-display .timer-button-digital .material-symbols-outlined {
    font-size: 16px; /* Adjust icon size */
}

/* Dark Mode Header Timer */
body.dark-mode .header-timer-display {
    background-color: #343a40; /* Dark background */
    border-color: #495057; /* Darker border */
    color: #e9ecef; /* Light text */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); /* Darker inner shadow */
}

body.dark-mode .header-timer-display #digital-timer {
    color: inherit; /* Inherit light text */
    text-shadow: none;
}

body.dark-mode .header-timer-display .timer-button-digital {
    background: #495057; /* Darker button background */
    color: #dee2e6; /* Lighter icon */
    border-color: #6c757d; /* Darker border */
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

body.dark-mode .header-timer-display .timer-button-digital:hover {
    background: #5a6268; /* Lighter dark hover */
    color: #fff;
    /* transform: scale(1.05); */ /* Removed hover scale transform for dark mode */
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

body.dark-mode .header-timer-display .timer-button-digital:active {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

/* Mobile Tools Button Styles */
.mobile-tools-container {
    position: relative;
    display: none; /* Hidden by default, shown only on mobile */
}

.mobile-tools-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid #ced4da;
    border-radius: 20px;
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.mobile-tools-btn:hover {
    background: #e9ecef;
    color: #212529;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.mobile-tools-btn .material-symbols-outlined {
    font-size: 14px;
}

.mobile-tools-btn .tools-text {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Mobile Tools Dropdown */
.mobile-tools-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.mobile-tools-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-tool-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    color: #495057;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
    font-size: 0.85rem;
}

.mobile-tool-item:last-child {
    border-bottom: none;
}

.mobile-tool-item:hover {
    background-color: #f8f9fa;
}

.mobile-tool-item .material-symbols-outlined {
    font-size: 16px;
}

/* Dark mode styles for mobile tools */
body.dark-mode .mobile-tools-btn {
    background-color: var(--bg-card);
    border-color: var(--border-input);
    color: var(--text-primary);
}

body.dark-mode .mobile-tools-btn:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

body.dark-mode .mobile-tools-dropdown {
    background: var(--bg-card);
    border-color: var(--border-input);
    box-shadow: 0 4px 15px var(--shadow-color);
}

body.dark-mode .mobile-tool-item {
    color: var(--text-primary);
    border-bottom-color: var(--border-input);
}

body.dark-mode .mobile-tool-item:hover {
    background-color: var(--bg-card-hover);
}

/* Show timer on mobile - only timer should be visible in header */
@media (max-width: 868px) {
    .header-timer-display {
        display: flex; /* Keep timer visible on mobile */
        font-size: 0.8rem; /* Smaller font for mobile */
        padding: 3px 8px; /* Reduced padding for mobile */
        gap: 6px; /* Smaller gap */
    }
    
    .header-timer-display .timer-button-digital {
        width: 24px; /* Smaller buttons */
        height: 24px;
    }
    
    .header-timer-display .timer-button-digital .material-symbols-outlined {
        font-size: 14px; /* Smaller icons */
    }
    
    /* REGRA REMOVIDA - JavaScript agora controla a visibilidade */
    /*
    body.chat-page .mobile-tools-container {
        display: block;
        margin-left: 8px;
    }
    */
    
    /* Adjust header center group layout for mobile tools */
    body.chat-page .header-center-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    body.chat-page #esconde-digital {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}



/* Mobile Navigation Styles */

/* Hide mobile menu items on desktop */
.mobile-menu-item {
    display: none;
}

.menu-toggle {
    display: none; /* Hidden by default, shown in media query */
    flex-direction: column;
    justify-content: space-between;
    width: 30px; /* Adjust size as needed */
    height: 21px; /* Adjust size as needed */
    cursor: pointer;
    z-index: 1000; /* Above header content, below menu */
    background: none; /* Ensure no background */
    border: none; /* Ensure no border */
    padding: 0; /* Reset padding */
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    background: var(--brand-primary, #292C6D); /* Use variable */
    transition: all 0.3s ease;
    transform-origin: center; /* Ensure transforms originate correctly */
}

/* Mobile Menu Container - Base styles in _header.css, overrides below */
.menu {
    /* Base styles (flex, list-style) are in _header.css */
    /* Mobile overrides are within the media query */
}

/* Mobile Menu Overlay */
.menu-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 998; /* Below menu, above content */
    cursor: pointer; /* Allow clicking overlay to close */
}

.menu-overlay.active {
    display: block; /* Show when menu is active */
}


/* --- Mobile Styles (Applied via Media Query) --- */
@media (max-width: 868px) {
    .menu-toggle {
        display: flex; /* Show hamburger */
        transform: scale(0.75); /* Much smaller */
        width: 24px; /* Smaller width */
        height: 18px; /* Smaller height */
    }

    /* Hamburger animation */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Mobile Menu Panel */
    .menu {
        position: fixed;
        top: 0;
        right: -100%; /* Start off-screen */
        height: 100vh; /* Full height */
        width: 80%; /* Adjust width */
        max-width: 300px; /* Max width */
        flex-direction: column; /* Stack items vertically */
        background: white; /* Consider var(--bg-surface) */
        padding: 0; /* Remove padding, handled by items/profile */
        /* padding: 80px 20px 20px; /* Original padding, reconsidered */
        transition: right 0.3s ease;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); /* Shadow */
        z-index: 999; /* Above overlay */
        overflow-y: auto; /* Allow scrolling if needed */
        /* margin-bottom: 70px; /* Avoid overlap with fixed input? Revisit */
    }

    .menu.active {
        right: 0; /* Slide in */
    }

    /* Profile section within mobile menu */
    .profile-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Separator */
        margin: 0;
        order: -2; /* Move profile to the top */
    }

    .menu .profile-icon { /* Specific to mobile menu */
        width: 100px; /* Larger profile icon */
        height: 100px;
        margin: 0 0 10px 0; /* Margin below icon */
        border: 3px solid var(--accent-primary, #D92960); /* Accent border */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Mobile Menu Items */
     .menu li { /* Target list items if needed */
        width: 100%;
    }

    .menu-item,
    .history-container a, /* Style history link like menu items */
    #loginButton /* Style login button like menu items (already handled in _login-button.css media query) */
     {
        display: flex;
        width: 100%;
        padding: 15px 20px;
        margin: 0; /* Reset margin */
        justify-content: flex-start; /* Align text left */
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Separator */
        transition: background-color 0.2s ease;
        border-radius: 0; /* Remove border-radius */
        color: #495057; /* Reset color */
        background-color: transparent; /* Reset background */
    }

     .menu-item:hover,
     .history-container a:hover {
        background-color: rgba(0, 0, 0, 0.05); /* Subtle hover */
     }

     /* Active state in mobile */
     .menu-item.active {
         background-color: rgba(217, 41, 96, 0.1); /* Lighter accent background */
         color: var(--accent-primary, #D92960); /* Accent color text */
     }

     /* Ensure history container takes full width */
     .history-container {
         width: 100%;
         order: 1; /* Adjust order as needed */
     }
     

     
     /* Mobile menu pomodoro indicator */
    .menu #pomodoro-progress-indicator-mobile {
        display: flex;
        width: 100%;
        padding: 15px 20px;
        margin: 0;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0;
        background-color: #f5f5f5;
        box-shadow: none;
        font-size: 0.9rem;
        font-weight: 500;
        color: #292C6D;
    }
    
    /* Dark mode for mobile pomodoro indicator */
    body.dark-mode .menu #pomodoro-progress-indicator-mobile {
        background-color: #2d2d2d;
        color: #e0e0e0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    body.dark-mode .menu #pomodoro-progress-indicator-mobile:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    /* Mobile menu pomodoro indicator info styling */
    .menu #pomodoro-progress-indicator-mobile .pomodoro-progress-info {
        display: flex;
        gap: 12px;
    }
    
    .menu #pomodoro-progress-indicator-mobile .pomodoro-progress-info span {
        white-space: nowrap;
    }
    
    /* Hide mobile pomodoro indicator when .esconde class is applied */
    .menu #pomodoro-progress-indicator-mobile.esconde {
        display: none;
    }
     
     .menu #pomodoro-progress-indicator-mobile:hover {
         background-color: rgba(0, 0, 0, 0.05);
     }
     
     /* Show mobile menu items only on mobile */
     .mobile-menu-item {
         display: block;
         width: 100%;
     }

    #darkModeToggleMobile {
        /* Apply base menu-item styles */
        display: flex;
        width: 100%;
        padding: 15px 20px;
        margin: 0;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: background-color 0.2s ease;
        border-radius: 0;
        
        /* Reset button styles */
        border: none;
        outline: none;
        font-family: inherit;
        font-size: inherit;
        cursor: pointer;
        text-align: left;
        
        /* Apply custom styles */
        background: linear-gradient(to right, #292C6D, var(--accent-primary));
        color: white;
    }

    body.dark-mode #darkModeToggleMobile {
        background: none;
        color: var(--text-primary);
    }

    body.dark-mode #darkModeToggleMobile:hover {
        background-color: var(--bg-card-hover);
    }
}



/* Notificação de pausa do Pomodoro */
.break-notification {
    position: fixed;
    top: 80px; /* Below header */
    right: -400px; /* Hidden initially */
    width: 380px;
    background: var(--bg-primary);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    box-shadow: 0 8px 25px var(--shadow-dark-stronger);
    z-index: 1500;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.break-notification.show {
    right: 20px; /* Slide in from right */
}

.break-notification-content {
    padding: 20px;
}

.break-notification-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    position: relative;
}

.break-notification-icon {
    font-size: 1.8rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.break-notification-title {
    color: var(--text-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    flex-grow: 1;
}

.break-notification-close {
    position: absolute;
    top: -5px;
    right: -5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    color: var(--text-secondary);
}

.break-notification-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.break-notification-close .material-symbols-outlined {
    font-size: 1.2rem;
}

.break-notification-message {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 18px;
    margin-top: 0;
}

.break-notification-timer {
    text-align: center;
    margin-bottom: 16px;
}

#break-notification-time {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: 'Courier New', monospace;
}

.break-notification-buttons {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.break-notification-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.break-notification-btn .material-symbols-outlined {
    font-size: 16px;
}

.break-notification-btn-primary {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.break-notification-btn-primary:hover {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--shadow-color);
}

.break-notification-btn-secondary {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.break-notification-btn-secondary:hover {
    background-color: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--shadow-color);
}

/* Mobile responsiveness for notification */
@media (max-width: 768px) {
    .break-notification {
        width: calc(100vw - 40px);
        right: -100vw;
        top: 70px;
    }
    
    .break-notification.show {
        right: 20px;
    }
    
    .break-notification-buttons {
        flex-direction: row;
    }
    
    .break-notification-btn {
        flex: 1;
    }
}

/* Dark Mode for Break Notification */
body.dark-mode .break-notification {
    background-color: var(--bg-card);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 25px var(--shadow-dark-stronger);
}

body.dark-mode .break-notification-title {
    color: var(--text-heading);
}

body.dark-mode .break-notification-message {
    color: var(--text-primary);
}

body.dark-mode .break-notification-btn-secondary {
    background-color: var(--bg-input-focus);
    color: var(--text-primary);
    border-color: var(--border-input);
}

body.dark-mode .break-notification-btn-secondary:hover {
    background-color: var(--border-input);
}

/* Animação pulsante para o timer */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

#break-notification-time {
    animation: pulse 2s infinite;
}
/* Button Component Styles */

/* Style for the 'View Progress' button */
.view-progress-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: var(--button-primary-bg); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none;
    border-radius: var(--border-radius-sm); /* Use variable */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-xs); /* Use variable */
    margin: 10px 0; /* Context-specific margin, might be better outside the component */
}

.view-progress-button:hover {
    background-color: var(--button-primary-hover-bg); /* Use variable */
    transform: translateY(-2px);
    box-shadow: var(--shadow-dark-strong); /* Use variable */
}

.view-progress-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs); /* Use variable */
}

/* Dark mode adjustments for this specific button */
/* Consider moving dark mode overrides to a separate theme file */
body.dark-mode .view-progress-button {
    background-color: var(--button-primary-bg-dark); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
}

body.dark-mode .view-progress-button:hover {
    background-color: var(--button-primary-hover-bg-dark); /* Use variable */
}

/* General Button Styles (Example - Add more as needed) */
/*
.button { ... }
.button-secondary { ... }
*/

/* Generic secondary button for subtle actions */
.secondary-button {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.secondary-button:hover {
    background: var(--bg-card-hover);
}
.secondary-button:active { transform: scale(0.98); }

/* Button for showing updates (e.g., in drawing modal) */
.show-button-update {
    background-color: var(--accent-primary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none;
    padding: 8px 16px;
    border-radius: var(--border-radius-sm); /* Use variable */
    cursor: pointer;
    font-size: 14px;
    font-weight: 500; /* Added weight */
    margin-left: 8px; /* Context-specific margin */
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.show-button-update:hover {
    background-color: var(--accent-primary-hover); /* Use variable */
}
.show-button-update:active {
    transform: scale(0.98); /* Slight press effect */
}

/* Dark mode for show-button-update */
body.dark-mode .show-button-update {
     /* Keep accent background */
     /* background-color: var(--accent-primary, #D92960); */
     /* color: white; */
/* Removed empty ruleset for .show-button-update in dark mode to satisfy linter */
}
body.dark-mode .show-button-update:hover {
     background-color: var(--accent-primary-hover); /* Use variable */
}


/* Confirm Changes Button (Study Plan) */
.confirm-changes-button {
    background-color: var(--accent-primary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm); /* Use variable */
    font-size: 1rem;
    cursor: pointer;
    margin-top: 20px; /* Context-specific margin */
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: block; /* Make it block level? Or inline-block? */
    width: fit-content; /* Size to content */
    margin-left: auto; /* Example: align right */
    margin-right: auto; /* Example: center */
}
.confirm-changes-button:hover {
    background-color: var(--accent-primary-hover); /* Use variable */
}
.confirm-changes-button:active {
    transform: scale(0.98);
}

/* Dark mode for confirm changes button */
/* Implicitly handled if using variables */

/* Responsive */
@media (max-width: 868px) {
    .confirm-changes-button {
        width: 100%; /* Full width on mobile */
        margin-top: 15px;
        padding: 12px;
    }
}

/* Style for the Solve Button */
#solve-button.confirm-button { /* Use existing confirm-button class for potential base styles + ID for specificity */
    display: inline-flex; /* Align icon and text if needed later */
    align-items: center;
    justify-content: center;
    padding: 15px 35px; /* Generous padding for primary action */
    font-size: 1.2rem; /* Slightly larger font */
    font-weight: 600; /* Bolder text */
    font-family: 'Poppins', sans-serif; /* Consistent font */
    color: var(--text-on-accent, #ffffff); /* White text */
    background-color: var(--accent-primary, #D92960); /* Accent color background */
    border: none;
    border-radius: var(--border-radius-md, 12px); /* Use theme variable or default */
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Add a subtle shadow */
    margin-top: 20px; /* Add some space above the button */
    /* Remove default button appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#solve-button.confirm-button:hover {
    background-color: var(--accent-primary-hover, #bf2156); /* Darker accent on hover */
    transform: translateY(-2px); /* Subtle lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

#solve-button.confirm-button:active {
    transform: translateY(0); /* Remove lift on click */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Slightly reduced shadow */
}

/* Optional: Disabled state styling */
#solve-button.confirm-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--text-secondary, #6c757d); /* Example disabled color */
    box-shadow: none;
    transform: none;
}

/* Dark Mode Styles for Solve Button */
body.dark-mode #solve-button.confirm-button {
    /* Often accent colors stay similar, but adjust if needed */
    /* background-color: var(--dm-accent-primary, var(--accent-primary)); */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow */
}

body.dark-mode #solve-button.confirm-button:hover {
    /* background-color: var(--dm-accent-primary-hover, var(--accent-primary-hover)); */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode #solve-button.confirm-button:active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode #solve-button.confirm-button:disabled {
     background-color: var(--dm-bg-disabled, #495057); /* Darker disabled background */
     opacity: 0.5;
}


.continue-session-btn {
    /* Inspired by modern UI buttons, aiming for better than theme toggle */
    background: linear-gradient(135deg, var(--brand-primary, #292C6D), var(--accent-primary, #D92960));
    color: var(--text-on-accent, #fff);
    padding: 8px 18px; /* Slightly more padding for a premium feel */
    border-radius: var(--border-radius-large, 12px); /* More rounded */
    font-size: 0.95rem; /* Slightly larger font */
    font-weight: 600; /* Bolder */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Smooth transition for key properties */
    border: none; /* Remove default border */
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    display: inline-flex; /* To align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    margin-left: 10px; /* Keep some spacing */
    text-transform: uppercase; /* Make it feel more like an action button */
    letter-spacing: 0.5px;
}

.continue-session-btn::before { /* Adding a play icon */
    content: "play_arrow"; /* Material Symbols icon name */
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px; /* Adjust icon size */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
        font-feature-settings: 'liga';
}

.continue-session-btn:hover,
.continue-session-btn:focus {
    background: linear-gradient(135deg, var(--brand-primary, #292C6D), var(--accent-primary-hover, #bf2156));
    transform: translateY(-2px) scale(1.02); /* More noticeable lift and slight scale */
    box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28);
    outline: none; /* Remove focus outline if not desired, or style it */
}

.continue-session-btn:active {
    transform: translateY(-1px) scale(0.98); /* Press down effect */
    box-shadow: 0 3px 10px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
}

.continue-session-btn.esconde {
    display: none !important; /* Ensure it's hidden when .esconde is applied */
}

/* Adicione este bloco ao final do arquivo /src/css/components/_button.css */

@media (max-width: 868px) {
    .continue-session-btn {
        padding: 4px 10px;      /* Reduz drasticamente o preenchimento vertical e horizontal */
        font-size: 0.8rem;      /* Diminui o tamanho da fonte */
        font-weight: 500;       /* Opcional: Deixa a fonte um pouco menos "bold" */
        gap: 4px;               /* Diminui o espaço entre o ícone e o texto */
        text-transform: none;   /* Remove o texto em maiúsculas, que ocupa mais espaço */
        letter-spacing: normal; /* Remove o espaçamento extra entre as letras */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra mais sutil */
    }

    .continue-session-btn::before {
        font-size: 16px;        /* Diminui o tamanho do ícone 'play' */
    }

    .continue-session-btn:hover,
    .continue-session-btn:focus {
        /* Ajusta o efeito de hover para ser menos pronunciado no mobile */
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }
}

/* Generic .btn styles and color variants (used in modals/reviews) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    border: none;
    border-radius: var(--border-radius-sm, 8px);
    padding: 8px 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter .2s ease, transform .1s ease;
}
.btn:hover { filter: brightness(0.95); }
.btn:active { transform: scale(0.98); }

.btn-danger { background-color: #dc3545; }
.btn-warning { background-color: #fd7e14; }
.btn-success { background-color: #28a745; }
.btn-primary { background-color: #007bff; }
/* --- Generic Toggle Button --- */
.toggle-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(to right, #292C6D, var(--accent-primary)); /* Dynamic gradient using user accent color */
    color: white !important; /* Override menu-item color */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.toggle-button::before { /* Dark mode background overlay */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--bg-primary), var(--bg-card-hover)); /* Use variables */
    opacity: 0; /* Hidden in light mode */
    transition: opacity 0.3s ease;
    z-index: 0; /* Below content */
}

.toggle-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow-dark-strong); /* Use variable */
}

.toggle-button .material-symbols-outlined,
.toggle-button .theme-icon-container { /* Target container */
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
    width: 24px; /* Ensure container has size */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-button .button-text {
    position: relative;
    z-index: 1;
    font-weight: 500;
    font-size: 0.95rem;
}

.toggle-button::after { /* Shine effect */
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, var(--bg-light-hover-dark), transparent); /* Use variable */
    transform: rotate(45deg);
    transition: transform 0.5s ease;
    opacity: 0; /* Hidden by default */
}

.toggle-button:hover::after {
    transform: rotate(45deg) translate(50%, 50%);
    opacity: 1; /* Show on hover */
}

/* Dark mode state for the toggle button */
body.dark-mode .toggle-button::before {
    opacity: 1; /* Show dark overlay */
}

body.dark-mode .toggle-button {
    color: white !important; /* Override dark mode menu-item color */
}

body.dark-mode .toggle-button:hover {
    box-shadow: 0 4px 15px var(--shadow-color); /* Use variable */
}

body.dark-mode .toggle-button:hover::after {
    opacity: 0; /* Hide shine effect in dark mode */
}

/* Specific styles for darkModeToggle */
body.dark-mode #darkModeToggle .material-symbols-outlined {
    transform: rotate(360deg); /* Rotate icon */
}


/* Responsive Toggle */
@media (max-width: 868px) {
    .toggle-button {
        width: 100%;
        justify-content: flex-start;
        padding: 15px 20px;
        border-radius: 0; /* Match mobile menu items */
        background: none;
    }
    .toggle-button::before {
         background: none; /* Remove gradient overlay */
    }
    body.dark-mode .toggle-button {
         background: none; /* Ensure no background */
    }
    .toggle-button:hover {
        transform: none;
        box-shadow: none;
    }
    .toggle-button::after {
        display: none; /* Hide shine effect */
    }
    /* Use mobile menu item hover */
    .toggle-button:hover {
        background-color: var(--bg-card-hover); /* Use variable */
    }
    body.dark-mode .toggle-button:hover {
        background-color: var(--bg-card-hover); /* Use variable */
    }
    body.dark-mode .toggle-button {
        color: var(--text-primary); /* Use variable */
    }
}
/* Card Component Styles (specifically for Action Cards initially) */

/* Container for the actions grid (might be considered layout, but closely tied to cards) */
.actions-section {
    width: 100%;
}

/* Dark mode variant: keep subtle */
body.dark-mode .action-card {
    background-image:
        radial-gradient(600px 280px at 85% 10%, rgba(var(--accent-primary-rgb, 230, 57, 128), 0.08), rgba(var(--accent-primary-rgb, 230, 57, 128), 0) 60%),
        linear-gradient(var(--dm-bg-card, #2e2e2e), var(--dm-bg-card, #2e2e2e));
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Ajuste minmax */
    gap: 25px; /* Mais espaçamento */
}

/* DocChat specific layout (keeps card style consistent) */
.docchat-layout {
    display: grid;
    grid-template-columns: 0 1fr; /* começa fechado por padrão */
    gap: 20px;
    align-items: start;
    transition: grid-template-columns 0.35s ease;
}
.docchat-layout.chat-open {
    grid-template-columns: minmax(320px, 520px) 1fr;
}
.docchat-layout.chat-closed {
    grid-template-columns: 0 1fr;
}
.docchat-chat-panel, .docchat-viewer-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
}
.docchat-chat-panel {
    overflow: hidden;
    max-height: calc(100vh - 180px);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.35s ease;
}
.docchat-layout.chat-open .docchat-chat-panel {
    opacity: 1;
    transform: translateX(0);
}
.docchat-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.docchat-chat-embed {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 230px);
}
.docchat-messages { flex: 1; overflow: auto; padding-right: 6px; }
.docchat-input-area { margin-top: 8px; }
.docchat-input-wrapper { display: flex; gap: 8px; align-items: flex-end; }
.docchat-input-wrapper textarea { flex: 1; min-height: 42px; resize: vertical; }
.docchat-media-buttons { display: flex; gap: 6px; }
.docchat-viewer { height: calc(100vh - 190px); border-radius: var(--border-radius-sm); overflow: auto; background: var(--bg-primary); border: 1px dashed var(--border-color-lighter); position: relative; }
.docchat-viewer {
    /* Centraliza horizontalmente o conteúdo gerado (páginas PDF/DOCX) */
    display: block;
}
.docchat-viewer .docchat-page {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Scrollbar LearnAI rosa */
.docchat-viewer::-webkit-scrollbar { width: 8px; }
.docchat-viewer::-webkit-scrollbar-track { background: var(--bg-subtle); border-radius: 4px; }
.docchat-viewer::-webkit-scrollbar-thumb { background-color: var(--accent-primary, var(--accent-primary)); border-radius: 4px; border: 2px solid var(--bg-subtle); }
.docchat-viewer { scrollbar-width: thin; scrollbar-color: var(--accent-primary, var(--accent-primary)) var(--bg-subtle); }
.docchat-viewer-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); gap: 6px; }
.docchat-upload { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.docchat-upload input[type="file"] { display:none; }
.docchat-file-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.docchat-file-tab { background: var(--accent-primary); color: #fff; border: none; border-radius: 16px; padding: 4px 10px; cursor: pointer; font-weight: 600; }
.docchat-file-tab.inactive { background: var(--accent-secondary); opacity: .6; }

/* Selection rectangles overlay */
.docchat-selection-overlay { position: absolute; inset: 0; pointer-events: none; }
.docchat-selection-rect { position: absolute; border: 2px solid var(--accent-primary); background: rgba(217,41,96,.08); box-shadow: 0 0 0 1px rgba(217,41,96,.2) inset; pointer-events: auto; }
.docchat-selection-rect .pin { position: absolute; top: -10px; right: -10px; background: var(--accent-primary); color: #fff; border-radius: 12px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; cursor: pointer; }

@media (max-width: 980px) {
  .docchat-layout { grid-template-columns: 1fr; }
  .docchat-layout.chat-open { grid-template-columns: 1fr; }
  .docchat-chat-panel { max-height: none; }
  .docchat-chat-embed, .docchat-viewer { height: auto; min-height: 360px; }
}

/* Central start overlay cobrindo a área do DocChat */
.docchat-start-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 5;
}
.docchat-viewer-panel { position: relative; }
.docchat-start-overlay .docchat-start-button {
    position: relative; /* fica centralizado pela grid do overlay */
}
.docchat-start-button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--accent-primary); color: #fff; cursor: pointer; font-weight: 600; }
.docchat-start-button .material-symbols-outlined { font-size: 22px; }

/* Centralização do start overlay ocupando a altura da página */
#docchat-page .docchat-start-overlay { height: calc(100vh - 140px); min-height: 0; }

/* Layout when chat closed: center viewer */
.docchat-layout.no-chat { grid-template-columns: 1fr; }
.docchat-layout.no-chat .docchat-viewer-panel { max-width: 1100px; margin: 0 auto; width: 100%; }
/* Quando fechado (chat-closed), manter viewer centralizado e sem corte */
.docchat-layout.chat-closed .docchat-viewer-panel { max-width: 1100px; margin: 0 auto; width: 100%; }

/* Botão de abrir/fechar chat à esquerda: fora do viewer para não deslocar conteúdo */
#docchat-toggle-chat-left {
    position: absolute;
    left: -54px; /* fora do viewer, alinhado na borda esquerda do painel */
    top: 16px;
    z-index: 2;
}

/* Back button do DocChat fixo no canto superior esquerdo (consistente com demais páginas) */
#docchat-page > .back-button {
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 50;
}

/* Permitir overflow visível no DocChat para não cortar o viewer quando o chat abre */
#docchat-page { overflow: visible; }

.action-card {
    background-color: var(--bg-card);
    /* Subtle static gradient glow, mostly white */
    background-image:
        radial-gradient(600px 280px at 85% 10%, rgba(var(--accent-primary-rgb, 230, 57, 128), 0.10), rgba(var(--accent-primary-rgb, 230, 57, 128), 0) 60%),
        linear-gradient(#ffffff, #ffffff);
    padding: 30px 25px; /* Mais padding interno */
    border-radius: var(--border-radius-md);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px; /* Aumenta altura mínima */
    border: 1px solid transparent; /* Borda inicial transparente */
    position: relative; /* Para possíveis elementos ::after */
    overflow: hidden; /* Para efeitos contidos */
}

.action-card:hover {
    transform: translateY(-6px) scale(1.02); /* Efeito de 'levantar' e escalar */
    box-shadow: 0 8px 25px var(--shadow-color);
    border-color: var(--accent-primary);
}

/* Icon specific to action cards */
.action-card .icon {
    /* Usar SVGs reais aqui */
    font-size: 2.2em; /* Ícones maiores */
    margin-bottom: 15px;
    color: var(--accent-primary);
    transition: color 0.2s ease;
    /* Resetting potential global icon styles if needed */
    display: inline-block;
    width: auto; /* Let font-size control size */
    height: auto;
    margin-right: 0; /* Reset margin if global .icon has it */
    vertical-align: middle;
}

.action-card:hover .icon {
    color: var(--accent-secondary); /* Muda cor do ícone no hover */
}

.action-title {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 5px; /* Espaço antes do subtítulo */
}

.action-subtitle {
    font-size: 0.9em;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Responsividade for Action Cards */
@media (max-width: 768px) {
    .actions-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
    .action-card {
        padding: 25px 20px;
        min-height: 130px;
    }
}

@media (max-width: 480px) {
    .actions-grid {
        grid-template-columns: 1fr; /* Uma coluna */
    }
    .action-card {
        min-height: auto;
        padding: 20px;
    }
}

/* General Icon Placeholder (Consider moving to base or utilities) */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}

/* Deck Tabs */
.deck-tabs-wrapper { margin-top: 20px; }
.deck-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
.deck-tab { background: transparent; border: none; padding: 10px 16px; cursor: pointer; font: inherit; color: var(--text-secondary); position: relative; border-radius: 6px 6px 0 0; }
.deck-tab.active { background: var(--bg-card); color: var(--text-heading); font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.deck-tab:not(.active):hover { color: var(--text-heading); }
.deck-tab:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.deck-tab-panel { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }



/* Chat Component Styles */

/* Main container holding chat and potentially whiteboard */
.main-container {
    position: relative; /* For potential absolute children */
    display: flex;
    flex: 1; /* Grow to fill available space */
    max-width: 1200px;
    width: 95%;
    min-height: 500px; /* Minimum height */
    margin: 20px auto; /* Center horizontally */
    border-radius: var(--border-radius-md, 12px);
    box-shadow: 0 4px 8px var(--shadow-color); /* Use variable */
    overflow: hidden; /* Clip content like whiteboard panel */
    transition: all 0.4s ease; /* For width expansion */
    /* Default height calculation */
    height: calc(100vh - 140px); /* Adjust based on header/footer height */
}

.main-container.expanded {
    width: 98%;
    max-width: 98%; /* Allow expansion */
}

/* Chat area specific container */
.chat-container {
    position: relative; /* For sticky input area */
    display: flex;
    flex-direction: column;
    width: 100%; /* Default full width */
    /* height: calc(100vh - 80px); /* Revisit this height calculation */
    height: 100%; /* Inherit height from main-container */
    min-height: 0; /* Allow shrinking */
    transition: width 0.5s ease; /* Animate width change */
}

.chat-container.with-whiteboard {
    width: 50%; /* Shrink when whiteboard is visible */
}

/* Message display area */
#chat-area {
    position: relative; /* Needed? */
    flex: 1; /* Grow to fill space above input */
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    margin-bottom: 0; /* Reset potential margin */
    overflow-y: auto; /* Enable scrolling for messages */
    height: auto; /* Let flexbox determine height */
    min-height: 0; /* Allow shrinking */
    /* Scrollbar styles moved to _scrollbar.css */
    transition: scroll-top 0.5s ease-in-out; /* Smooth scroll animation */
    padding-bottom: 60px; /* Space for sticky input area */
}

/* Container for all messages */
#messages {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Individual message bubble */
.message {
    position: relative;
    padding: 15px 20px;
    border-radius: 20px; /* Pill shape */
    font-size: 1rem;
    resize: none; /* Prevent manual resize */
    line-height: 1.5; /* Adjust line height */
    min-height: 48px; /* Match button height */
    line-height: 1.5;
    overflow-wrap: break-word; /* Standard property for breaking long words */
    word-break: normal; /* Ensure standard word breaking */
    text-align: left; /* Default text alignment */
    /* Removed white-space: pre-wrap; */
    opacity: 0; /* Start invisible for animation */
    transform: translateY(20px); /* Start lower for animation */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    animation: messageAppear 0.3s ease-out forwards;
    /* Removed max-width: 90%; from base message */
}

/* Animation for new messages */
@keyframes messageAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style override for newly added messages (if needed, JS usually handles this) */
/* .message.new-message {
    transform: translateY(0);
} */

/* User message specific styles */
.user {
    background-color: var(--bg-user-message); /* Use variable */
    color: var(--text-user-message); /* Use variable */
    align-self: flex-end; /* Align to the right */
    border-radius: 20px 20px 0 20px; /* Tail */
    box-shadow: 0 2px 4px var(--shadow-color); /* Use variable */
    width: fit-content; /* Let user message width fit content */
    max-width: 90%; /* Re-apply max-width here specifically if needed */
    min-width: 0; /* Help with flex sizing calculations */
}

/* AI message specific styles */
.ai {
    align-self: flex-start; /* Align to the left */
    background-color: var(--bg-ai-message); /* Use variable */
    color: var(--text-ai-message); /* Use variable */
    border-radius: 20px 20px 20px 0; /* Tail */
    box-shadow: 0 2px 4px var(--shadow-color); /* Use variable */
    overflow-x: auto; /* Allow horizontal scroll for wide content like code blocks */
    max-width: 90%; /* Apply max-width specifically to AI messages */
    position: relative; /* Ensure relative positioning for absolute children */
}

/* Whiteboard link inside AI messages */
.message.ai .whiteboard-link {
    display: block; /* Make it a block element */
    padding: 10px 16px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: var(--border-radius-sm, 10px); /* Use variable */
    background-color: var(--bg-secondary); /* Use variable */
    color: var(--text-primary); /* Use variable */
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--shadow-inset-sm); /* Use variable */
    flex-shrink: 0; /* Prevent shrinking if space is tight */
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 30px 30px 50px 30px;
}



.message.ai .whiteboard-link:hover {
    background-color: var(--bg-card-hover); /* Use variable */
}

/* Dark mode styles for whiteboard link */
body.dark-mode .message.ai .whiteboard-link {
    border-color: var(--border-color); /* Already defined in dark mode */
    background-color: var(--bg-card); /* Use dark card background */
    color: var(--text-primary); /* Already defined in dark mode */
}

body.dark-mode .message.ai .whiteboard-link:hover {
    background-color: var(--bg-card-hover); /* Already defined in dark mode */
}

@media (max-width: 768px) {
    .message.ai .whiteboard-link {
        margin: 20px 15px 30px 0px;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* Loading placeholder styles */
.loading-placeholder {
    align-self: flex-start;
    background-color: var(--bg-ai-message); /* Use variable */
    border-radius: 20px 20px 20px 0; /* Match AI bubble */
    box-shadow: 0 2px 4px var(--shadow-color); /* Use variable */
    padding: 15px 20px;
    max-width: 90%;
}

.loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: var(--text-secondary); /* Use variable */
    animation: pulse 1.5s infinite ease-in-out;
}

.loading-dots span:last-child {
    margin-right: 0;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.5s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 1s;
}

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

/* Whiteboard preparing placeholder */
.whiteboard-preparing-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 16px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: var(--border-radius-sm, 10px); /* Use variable */
    background-color: var(--bg-subtle); /* Use variable */
    color: var(--text-secondary); /* Use variable */
    text-align: center;
    font-weight: 500;
    margin-left: 10px; /* Match whiteboard link margin */
    margin-right: 10px;
}

.whiteboard-preparing-placeholder .loading-dots {
    display: flex;
    align-items: center;
}

.whiteboard-preparing-placeholder .loading-dots span {
    width: 6px;
    height: 6px;
    margin-right: 3px;
    /* Animation inherited */
}

.whiteboard-preparing-placeholder .loading-dots span:last-child {
    margin-right: 0;
}


/* Input area styles */
.input-area {
    position: sticky; /* Stick to the bottom of chat-container */
    bottom: 0;
    z-index: 200; /* Above messages and scroll-to-bottom */
    display: flex;
    gap: 10px;
    align-items: flex-end; /* Align items to bottom for multi-line input */
    width: 100%;
    padding: 15px 20px;
    margin-top: auto; /* Push to bottom */
    background-color: var(--bg-primary); /* Use variable */
    border-top: 1px solid var(--border-color); /* Use variable */
}

#user-input {
    flex: 1; /* Take remaining space */
    padding: 12px 20px;
    padding-right: 45px; /* Space for background image icon */
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 25px; /* Pill shape */
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, background-image 0.3s ease;
    resize: none; /* We handle height via JS */
    line-height: 1.5; /* Adjust line height */
    min-height: 48px; /* Match button height */
    max-height: 150px; /* Limit expansion */
    overflow-y: auto; /* Scroll if content exceeds max-height */
    color: var(--text-input); /* Use variable for text color */
    background-color: var(--bg-input); /* Use variable for background */
    background-image: none; /* Remove background image, use pseudo-element */
    position: relative; /* For pseudo-element positioning */
}

/* Icon using pseudo-element and mask */
#user-input::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: var(--text-secondary); /* Default icon color */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 width=%2718%27 height=%2718%27 fill=%27%23000000%27%3E%3Cpath d=%27M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z%27/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background-color 0.3s ease; /* Transition the color */
    pointer-events: none; /* Don't interfere with input clicks */
}


#user-input:focus {
    border-color: var(--accent-primary); /* Use variable */
    box-shadow: var(--shadow-input-focus); /* Use variable */
    background-color: var(--bg-input-focus); /* Use variable */
    /* background-image: none; */ /* Removed original focus background image */
}

/* Change icon color on focus */
#user-input:focus::after {
    background-color: var(--accent-primary); /* Focused icon color */
}


#send-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%; /* Circle */
    background-color: var(--accent-primary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
}

/* Style for the new record audio button */
#record-audio-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%; /* Circle */
    background-color: transparent; /* No background */
    color: var(--text-secondary); /* Use secondary text color */
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
    margin-left: 8px; /* Add some space between input and mic button */
}

#record-audio-button:hover {
    color: var(--accent-primary); /* Change color on hover */
}

/* Style for when recording is active (add class via JS) */
#record-audio-button.recording {
    background: none; /* Sem círculo */
    color: var(--text-secondary); /* Mesmo estado neutro do normal */
    box-shadow: none;
    transform: none;
}
#record-audio-button.recording:hover {
    background: none;
    color: var(--accent-primary); /* Igual hover padrão */
}
#record-audio-button.recording .material-symbols-outlined {
    filter: none; /* Remove efeitos extras */
}
body.dark-mode #record-audio-button.recording {
    color: var(--text-primary); /* Contraste adequado no dark */
}

#record-audio-button .material-symbols-outlined {
    font-size: 1.6rem;
}


#send-button:hover {
    background-color: var(--accent-primary-hover); /* Use variable */
}

#send-button .material-symbols-outlined {
    font-size: 1.6rem;
}


/* --- Responsive Adjustments --- */

@media (max-width: 868px) {
    .main-container {
        height: calc(100vh - 70px); /* Adjust height based on mobile header */
        margin: 0; /* Remove margin */
        width: 100%; /* Full width */
        max-width: 100%;
        border-radius: 0; /* Remove border radius */
        box-shadow: none; /* Remove shadow */
    }

    .chat-container,
    .chat-container.with-whiteboard {
        width: 100%; /* Full width */
        border-radius: 0; /* Remove border radius */
        min-height: auto; /* Reset min-height */
        height: 100%; /* Fill main container */
    }

    /* Specific height adjustment when whiteboard is visible (if whiteboard is also full height) */
    /* .chat-container.with-whiteboard {
        height: 50vh;
    } */

    #chat-area {
        padding: 15px; /* Reduce padding */
        padding-bottom: 120px; /* Reduced padding-bottom for smaller input */
    }

    #chat-area.has-skip-button {
        padding-bottom: 180px; /* Increased padding-bottom when skip button is visible */
        gap: 15px; /* Reduce gap */
    }

    .message {
        font-size: 0.9rem; /* Smaller font size */
        padding: 12px 15px; /* Adjust padding */
        max-width: 95%; /* Slightly increase max-width */
    }

    .input-area {
        padding: 6px 10px; /* More reduced padding */
        position: fixed; /* Fix to bottom */
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-primary); /* Use variable */
        box-shadow: 0 -2px 10px var(--shadow-color); /* Use variable */
        z-index: 999; /* Ensure it's above chat area */
        gap: 6px; /* Smaller gap */
        align-items: center; /* Re-align items */
        box-sizing: border-box;
        width: 100%;
        border-top: 1px solid var(--border-color); /* Use variable */
        min-height: 50px; /* Smaller total height */
    }

    .input-wrapper {
        align-items: center; /* Center align all elements vertically */
        gap: 6px; /* Smaller gap */
        display: flex;
    }

    .media-buttons-container {
        display: flex;
        align-items: center;
    }

    .input-content-area {
        min-height: 36px; /* Smaller height */
        padding: 0 8px;
        position: relative;
    }

    .input-content-area > #user-input {
        padding: 5px 5px; /* As requested */
        font-size: 14px; /* Smaller font */
        min-height: auto;
        padding-right: 35px; /* Space for mic button inside */
    }

    #send-button {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    #send-button .material-symbols-outlined {
        font-size: 1.2rem; /* Smaller icon */
    }

    #record-audio-button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        background: none; /* No background, just icon */
        border: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
        color: var(--text-secondary);
        transition: color 0.2s ease;
    }

    #record-audio-button:hover {
        background: none;
        color: var(--accent-primary);
    }

    #record-audio-button.recording {
        background: none;
        color: var(--text-secondary);
        box-shadow:none;
    }
    #record-audio-button.recording:hover { color: var(--accent-primary); }

    #record-audio-button .material-symbols-outlined {
        font-size: 1.1rem; /* Smaller icon */
    }

    #media-toggle-button {
         width: 36px;
         height: 36px;
         min-width: 36px;
         min-height: 36px;
     }

     #media-toggle-button .material-symbols-outlined {
         font-size: 1.2rem;
     }

    .media-buttons-tray button {
        width: 36px;
        height: 36px;
    }

    .media-buttons-tray button .material-symbols-outlined {
        font-size: 1.2rem;
    }
}

/* Height-based adjustments */
@media (max-height: 600px) {
    /* Reduce input area size on short screens */
    #send-button {
        width: 32px;
        height: 32px;
    }
    
    #send-button .material-symbols-outlined {
        font-size: 1.1rem;
    }
    
    .input-content-area {
        min-height: 32px;
        padding: 0 6px;
    }
    
    .input-content-area > #user-input {
        padding: 4px 4px;
        font-size: 13px;
        padding-right: 30px;
    }
    
    #record-audio-button {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
        color: var(--text-secondary);
    }
    
    #record-audio-button .material-symbols-outlined {
        font-size: 1rem;
    }
    
    #media-toggle-button {
        width: 32px;
        height: 32px;
    }
    
    #media-toggle-button .material-symbols-outlined {
        font-size: 1.1rem;
    }
    
    .input-area {
        padding: 5px 8px;
        min-height: 45px;
    }
    
    .main-container {
        /* Adjust height based on header for short screens */
        height: calc(100vh - 80px); /* Example adjustment */
        margin: 10px auto; /* Restore some margin if needed */
    }
}

@media (min-height: 1200px) {
    /* Limit height on very tall screens */
    .main-container {
        max-height: 1000px;
    }
}

/* Ensure input area is sticky only on desktop */
@media (min-width: 869px) {
    .input-area {
        position: sticky;
        bottom: 0;
        box-shadow: none; /* Remove mobile shadow */
    z-index: 2; /* Reset z-index */
    }
}

/* --- Audio Preview Styles --- */
/* Find this existing rule */
.input-content-area {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    /* --- REVERTED: Remove border-bottom --- */
    /* border-bottom: 2px solid transparent; */
    /* --- END REVERT --- */
    border: 1px solid var(--border-input); /* Keep the main border */
    border-radius: 25px;
    background-color: var(--bg-input);
    /* Keep the transition */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-style 0.2s ease; /* Removed border-bottom-color/style */
    min-height: 45px;
    padding: 0 15px;
}
/* Add this NEW rule block below the existing one */
/* Find and Modify this rule block */
#input-content-area.drag-over-image {
    border-color: var(--accent-primary); /* Pink color */
    border-style: dashed; /* Dashed style */
    border-width: 2px;    /* Slightly thicker dashed border */
    background-color: rgba(var(--accent-primary-rgb), 0.05); /* Optional: Keep subtle pink background tint */
    /* --- REMOVED --- */
    /* border-bottom-color: var(--accent-primary); */
    /* border-bottom-style: dashed; */
}

/* Add Dark Mode Style for the drag-over effect */
/* Find and Modify this rule */
body.dark-mode #input-content-area.drag-over-image {
    border-color: var(--accent-primary); /* Keep pink */
    border-style: dashed;
    border-width: 2px;
    /* background-color: rgba(var(--accent-primary-rgb), 0.1); */ /* Optional tint */
    /* --- REMOVED --- */
    /* border-bottom-color: var(--accent-primary); */
}

/* --- Also modify the :focus-within style slightly --- */
/* Find this existing rule */
/* Find and Modify this rule */
.input-content-area:focus-within {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-input-focus);
    background-color: var(--bg-input-focus);
    /* --- REVERTED: Ensure base border style applies on focus --- */
    border-style: solid;
    border-width: 1px; /* Back to base width */
    /* --- END REVERT --- */
}

/* Find and Modify this rule */
body.dark-mode .input-content-area:focus-within {
    border-color: var(--border-input-focus); /* Use focus variable */
    box-shadow: var(--shadow-input-focus);
    background-color: var(--bg-input-focus);
     /* --- REVERTED: Ensure base border style applies on focus --- */
    border-style: solid;
    border-width: 1px; /* Back to base width */
     /* --- END REVERT --- */
}
/* Target #user-input specifically when it's a direct child of .input-content-area */
.input-content-area > #user-input {
    /* --- Explicitly remove ALL border and appearance properties --- */
    border: none !important; /* Force remove border */
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 0 !important; /* Ensure no radius */
    outline: none !important; /* Remove default outline */
    box-shadow: none !important; /* Remove any potential shadow */
    appearance: none !important; /* Remove default browser styling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* --- End Removal --- */

    /* --- Styling for text input within the container --- */
    padding: 5px 5px; /* Adjust padding as needed inside the container */
    background-color: transparent !important; /* Make input background transparent */
    min-height: auto; /* Let container control height */
    flex: 1; /* Take available space */
    /* Keep other necessary text/font styles */
    font-family: inherit;
    font-size: 1rem;
    resize: none;
    line-height: 1.5;
    max-height: 150px;
    overflow-y: auto;
    color: var(--text-input);
    position: static; /* Reset position */
    padding-right: 0; /* Reset padding */
    width: 100%; /* Ensure it fills the flex container */
    box-sizing: border-box; /* Ensure padding doesn't increase size */
}

/* Ensure the ::after pseudo-element (icon) is also removed from the input */
.input-content-area > #user-input::after {
    content: none;
}

.audio-preview-area {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%; /* Fill the container */
    height: 100%;
    padding: 5px 0; /* Adjust vertical padding */
}

.audio-preview-area.esconde {
    display: none;
}

.audio-preview-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Smaller buttons */
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.audio-preview-button:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}
.audio-preview-button.discard {
    color: var(--accent-danger);
}
.audio-preview-button.discard:hover {
    background-color: rgba(var(--accent-danger-rgb), 0.1);
}

.audio-preview-button .material-symbols-outlined {
    font-size: 1.3rem; /* Smaller icons */
}

/* Style the new progress element */
progress#audio-preview-waveform,
.audio-preview-waveform-progress { /* Target by ID or class */
    flex-grow: 1; /* Make it take available horizontal space */
    width: 100%; /* Ensure it tries to fill width */
    height: 8px; /* Adjust height for a thinner bar */
    cursor: default; /* Indicate it's not interactive */
    appearance: none; /* Remove default browser styling */
    border: none;
    border-radius: 4px; /* Rounded corners */
    background-color: var(--border-color); /* Background of the track */
    overflow: hidden; /* Ensure progress value stays within bounds */
}

/* Styling for the progress bar value (filled part) - WebKit browsers */
progress#audio-preview-waveform::-webkit-progress-value,
.audio-preview-waveform-progress::-webkit-progress-value {
    background-color: var(--accent-primary); /* Color of the progress */
    border-radius: 4px;
    transition: width 0.1s linear; /* Smooth progress update */
}

/* Styling for the progress bar track (unfilled part) - WebKit browsers */
progress#audio-preview-waveform::-webkit-progress-bar,
.audio-preview-waveform-progress::-webkit-progress-bar {
    background-color: var(--border-color); /* Color of the track */
    border-radius: 4px;
}

/* Styling for the progress bar value (filled part) - Firefox */
progress#audio-preview-waveform::-moz-progress-bar,
.audio-preview-waveform-progress::-moz-progress-bar {
    background-color: var(--accent-primary); /* Color of the progress */
    border-radius: 4px;
    transition: width 0.1s linear; /* Smooth progress update */
}

/* Remove the old div style if it exists (optional cleanup) */
/*
.audio-preview-waveform {
    display: none;
}
*/

/* No focus icon for textarea */
#user-input:focus::after { content: none; }

/* Pink scrollbar for textarea to match app theme */
#user-input::-webkit-scrollbar { width: 8px; }
#user-input::-webkit-scrollbar-track { background: var(--bg-subtle); border-radius: 4px; }
#user-input::-webkit-scrollbar-thumb { background-color: var(--accent-primary); border-radius: 4px; border: 2px solid var(--bg-subtle); }
#user-input { scrollbar-width: thin; scrollbar-color: var(--accent-primary) var(--bg-subtle); }

/* Adjustments for mobile */
@media (max-width: 868px) {
    .audio-preview-button {
        width: 24px;
        height: 24px;
    }
    .audio-preview-button .material-symbols-outlined {
        font-size: 1.1rem;
    }
    .audio-preview-waveform {
        height: 18px;
    }
}

@media (max-height: 600px) {
    .audio-preview-button {
        width: 22px;
        height: 22px;
    }
    .audio-preview-button .material-symbols-outlined {
        font-size: 1rem;
    }
    .audio-preview-waveform {
        height: 16px;
    }
}

/* Message wrapper and options */
.message-wrapper {
    position: relative;
    margin-bottom: 8px; /* Restore original margin */
    display: flex;
    flex-direction: column;
}

.message-wrapper .message.user {
    align-self: flex-end; /* Align user messages to the right */
}

/* Message options container that appears on hover */
.message-options {
    position: absolute;
    bottom: -40px;
    left: 10px;
    display: flex;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    background-color: var(--bg-primary);
    padding: 4px;
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    z-index: 1;
}

.message-wrapper:hover .message-options {
    opacity: 1;
    visibility: visible;
}

.message-option-button {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.message-option-button:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

.message-option-button .material-symbols-outlined {
    font-size: 1.2rem;
}

/* Dark mode adjustments */
body.dark-mode .message-options {
    background-color: var(--bg-card);
}

/* Feedback toast styles are centralized in _feedback-toast.css */


#messages .message.ai .finish-feedback {
    margin-top: 8px;
}

#messages .message.ai .return-feedback {
    margin-top: 8px;
}

#messages .message.ai .return-feedback .btn-return-parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#messages .message.ai .return-feedback .btn-return-parent:hover {
    background: var(--bg-card-hover);
    box-shadow: 0 2px 6px var(--shadow-color);
}

body.dark-mode #messages .message.ai .return-feedback .btn-return-parent {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

#skip-initial-form-btn {
    position: absolute;
    bottom: calc(var(--input-area-desktop-total-height, 78px) + 10px); /* Altura da input-area desktop + 10px de margem */
    left: 20px; /* Alinha com o padding do chat-container */
    z-index: 3; /* Acima da área de chat, mas abaixo de modais e da própria input-area se houver sobreposição */
    padding: 8px 15px;
    background-color: var(--bg-card); /* Usa uma cor de fundo sutil */
    color: var(--text-primary);
    border: 1px solid var(--border-input);
    border-radius: 20px; /* Mais arredondado, estilo "pill" */
    cursor: pointer;
    font-size: 0.875rem; /* Um pouco menor */
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex; /* Para alinhar ícone e texto */
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-xs);
}

#skip-initial-form-btn:hover {
    background-color: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#skip-initial-form-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

#skip-initial-form-btn.esconde {
    display: none !important;
}

/* Ajustes para Mobile, onde a input-area é 'fixed' */
@media (max-width: 868px) {
    #skip-initial-form-btn {
        position: fixed;
        /* 
           A input-area no mobile tem padding: 8px 12px; min-height (input): 42px.
           Altura total aproximada: 8px (padding-top) + 42px (input/btn) + 8px (padding-bottom) = 58px.
           Se a media-buttons-tray estiver visível, ela pode adicionar altura.
           Considerar a altura da input-area quando o teclado mobile está aberto também pode ser relevante.
           Vamos usar uma altura base + margem.
        */
        bottom: calc(var(--input-area-mobile-total-height, 58px) + 15px); /* Altura da input-area mobile + 15px de margem */
        left: 15px; /* Padding lateral do chat no mobile */
    z-index: 1005; /* Abaixo da input-area (1010), mas acima do chat */
    /* Formato "meio-pill" à esquerda para colar com o toggle */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* Evita borda dupla com o toggle ao lado */
    border-right: none;
    }
}

/* Error Message Styles */
.message.error {
    background-color: var(--error-bg-subtle, #fef2f2);
    border: 1px solid var(--error-border, #fecaca);
    border-radius: var(--border-radius-md, 12px);
    padding: 16px;
    margin: 8px 0;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

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

.message.error p {
    color: var(--error-text, #dc2626);
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}

.error-retry-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: var(--error-text, #dc2626);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm, 8px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.error-retry-button:hover {
    background-color: var(--error-text-hover, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.error-retry-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.2);
}

.error-retry-button .material-symbols-outlined {
    font-size: 16px;
}

/* Dark mode styles for error messages */
body.dark-mode .message.error {
    background-color: var(--error-bg-subtle-dark, #1f1415);
    border-color: var(--error-border-dark, #451a1a);
}

body.dark-mode .message.error p {
    color: var(--error-text-dark, #f87171);
}

body.dark-mode .error-retry-button {
    background-color: var(--error-text-dark, #ef4444);
}

body.dark-mode .error-retry-button:hover {
    background-color: var(--error-text-hover-dark, #dc2626);
}

/* Pre-input controls (e.g., plan mode toggle) */
.pre-input-controls {
    /* Position the toggle like the skip button, but on the right side */
    position: absolute; /* anchored to .input-area (positioned) */
    right: 20px;        /* align with chat padding/right spacing */
    bottom: calc(100% + 10px); /* place just above the input area */
    z-index: 1005;      /* above chat content, below modals */
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}
.pre-input-controls.esconde { display: none !important; }
.plan-mode-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border: 1px solid var(--border-color);
        border-radius: 9999px;
        background: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: 0.9rem;
}
.plan-mode-toggle .material-symbols-outlined { font-size: 18px; color: var(--icon-color, #777); }
.plan-mode-label { font-weight: 500; color: var(--text-primary); }
.plan-mode-option { font-size: 0.85rem; color: var(--text-secondary); }
.plan-mode-toggle .toggle-switch { transform: scale(0.9); }

@media (max-width: 868px) {
    /* Esconde a palavra 'Plano:' no mobile */
    .plan-mode-label { display: none; }
    .pre-input-controls {
        /* No mobile, posicionamos FIXO e "colado" ao botão de pular, à direita dele */
        position: fixed;
        right: auto;
        left: calc(15px + var(--skip-btn-width, 0px)); /* encosta no botão de pular */
        bottom: calc(var(--input-area-mobile-total-height, 58px) + 15px);
        justify-content: flex-start;
    }
    .plan-mode-toggle { 
        font-size: 0.85rem; 
        padding: 4px 8px; 
        /* Forma "meio-pill" à direita para casar com o skip */
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        /* Evita borda dupla no meio */
        border-left: none;
    }
    .plan-mode-toggle .material-symbols-outlined { font-size: 16px; }
}
/* Chat Suggestions Component Styles */

.chat-suggestions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px; /* Ensure minimum height */
    padding: 40px 20px;
    opacity: 1;
    transition: opacity 0.3s ease, display 0.3s ease; /* Animate opacity */
    position: relative;
    overflow: hidden;
}

.chat-suggestions.hidden {
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Specific class to hide suggestions completely */
.chat-suggestions.esconde {
    display: none;
}

/* General hidden class (consider moving to utils) */
.hidden {
    visibility: hidden; /* Use visibility for elements that might affect layout */
}

.chat-suggestions h3 {
    color: var(--bg-user-message); /* Use variable */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    /* Gradient text effect */
    background: linear-gradient(45deg, var(--bg-user-message), var(--accent-primary)); /* Use variables */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    user-select: none; /* Non-selectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Refresh button styles */
.refresh-suggestions-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(45deg, var(--bg-user-message-light), var(--accent-primary-light));
    border: none;
    border-radius: 50px;
    color: var(--text-primary); /* Changed from --text-on-accent to --text-primary for better visibility in light theme */
    font-size: 0.9rem;
    font-weight: 600; /* Increased from 500 to 600 for better visibility */
    cursor: pointer;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.refresh-suggestions-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.refresh-suggestions-btn .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.5s ease;
}

.refresh-suggestions-btn.rotating .material-symbols-outlined {
    animation: rotate 0.5s ease;
}

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

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly wider cards */
    gap: 20px;
    width: 100%;
    max-width: 1000px; /* Increased max width */
    padding: 0 20px;
}

.suggestion-btn {
    display: flex;
    align-items: flex-start; /* Align icon top */
    gap: 15px;
    padding: 20px;
    background: var(--bg-primary); /* Use variable */
    border: none;
    border-radius: 16px; /* Large radius */
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px var(--shadow-color); /* Use variable */
    position: relative;
    overflow: hidden; /* For pseudo-element */
    outline: none; /* Remove default outline */
    -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
    -webkit-touch-callout: none; /* Disable callout */
    pointer-events: auto; /* Ensure clickable */
    height: 100%; /* Make all cards same height */
}

.suggestion-btn::before { /* Hover background effect */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--border-subtle-light), var(--accent-primary-border-hover)); /* Use variables */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0; /* Below content */
}

.suggestion-btn:hover {
    transform: translateY(-4px); /* Lift effect */
    box-shadow: 0 8px 12px var(--shadow-color); /* Use variable */
}

.suggestion-btn:hover::before {
    opacity: 0.1;
}

/* Category-specific styling */
.suggestion-btn.category-ciencias .suggestion-icon {
    background: linear-gradient(45deg, #4CAF50, #8BC34A);
}

.suggestion-btn.category-matematica .suggestion-icon {
    background: linear-gradient(45deg, #2196F3, #03A9F4);
}

.suggestion-btn.category-tecnologia .suggestion-icon {
    background: linear-gradient(45deg, #9C27B0, #673AB7);
}

.suggestion-btn.category-humanidades .suggestion-icon {
    background: linear-gradient(45deg, #FF9800, #FF5722);
}

.suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(45deg, var(--bg-user-message), var(--accent-primary)); /* Use variables */
    border-radius: 12px;
    flex-shrink: 0; /* Prevent icon shrinking */
    position: relative; /* Ensure icon is above pseudo-element */
    z-index: 1;
    transition: transform 0.3s ease;
}

.suggestion-btn:hover .suggestion-icon {
    transform: scale(1.1);
}

.suggestion-icon .material-symbols-outlined {
    color: var(--text-on-accent); /* Use variable */
    font-size: 24px;
    user-select: none; /* Non-selectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.suggestion-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1; /* Allow content to grow */
    position: relative; /* Ensure content is above pseudo-element */
    z-index: 1;
}

.suggestion-title {
    color: var(--bg-user-message); /* Use variable */
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
    user-select: none; /* Non-selectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.suggestion-desc {
    color: var(--text-secondary); /* Use variable */
    font-size: 0.9rem;
    line-height: 1.4;
    user-select: none; /* Non-selectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Dark Mode */
body.dark-mode .chat-suggestions h3 {
    /* color: #fff; /* Handled by gradient */
    background: linear-gradient(45deg, var(--text-heading), var(--accent-primary)); /* Use variables */
    -webkit-background-clip: text;
    background-clip: text;
}

body.dark-mode .refresh-suggestions-btn {
    background: linear-gradient(45deg, var(--bg-light-hover-subtle-dark), var(--accent-primary-light));
    color: var(--text-on-accent); /* Ensure text is white in dark mode for contrast */
}

body.dark-mode .suggestion-btn {
    background: var(--bg-card); /* Use variable */
    /* border-color: var(--border-light-dark); /* Use variable */
    color: var(--text-primary); /* Use variable */
    box-shadow: 0 4px 6px var(--shadow-color); /* Use variable */
}

body.dark-mode .suggestion-btn::before {
    background: linear-gradient(45deg, var(--bg-light-hover-subtle-dark), var(--border-light-dark)); /* Use variables */
}

body.dark-mode .suggestion-btn:hover {
    background: var(--bg-card-hover); /* Use variable */
    /* border-color: var(--accent-primary); /* Use variable */
    box-shadow: 0 8px 12px var(--shadow-color); /* Use variable */
}

body.dark-mode .suggestion-title {
    color: var(--text-heading); /* Use variable */
}

body.dark-mode .suggestion-desc {
    color: var(--text-secondary); /* Use variable */
}

/* Responsividade */
@media (max-width: 768px) {
    .chat-suggestions {
        padding: 30px 10px; /* Reduz padding lateral */
    }
    
    .chat-suggestions h3 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .refresh-suggestions-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
        margin-bottom: 20px;
    }
    
    .suggestions-grid {
        grid-template-columns: 1fr; /* Single column */
        max-width: 100%;
        padding: 0 5px; /* Reduz padding lateral do grid */
        gap: 15px; /* Reduz gap entre cards */
    }
    
    .suggestion-btn {
        padding: 18px; /* Aumenta padding interno */
        flex-direction: row; /* Keep row layout */
        align-items: center; /* Center items vertically */
        margin: 0; /* Remove qualquer margem */
    }
    
    .suggestion-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0; /* Impede que o ícone encolha */
    }
    
    .suggestion-icon .material-symbols-outlined {
        font-size: 20px;
    }
    
    .suggestion-content {
        flex: 1; /* Ocupa todo espaço disponível */
        min-width: 0; /* Permite quebra de texto */
    }
}

/* Otimizações específicas para smartphones menores */
@media (max-width: 480px) {
    .chat-suggestions {
        padding: 20px 5px; /* Padding ainda menor */
    }
    
    .suggestions-grid {
        padding: 0; /* Remove padding do grid */
        gap: 12px; /* Gap menor entre cards */
    }
    
    .suggestion-btn {
        padding: 16px; /* Padding um pouco menor */
        border-radius: 12px; /* Border radius menor */
    }
    
    .suggestion-title {
        font-size: 0.95rem; /* Fonte um pouco menor */
    }
    
    .suggestion-desc {
        font-size: 0.8rem; /* Descrição menor */
        line-height: 1.3;
    }
}

/* Animation for new suggestions */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.suggestion-btn {
    opacity: 0; /* Start with opacity 0 */
    animation: fadeIn 0.5s ease forwards;
}

/* Stagger animation for each suggestion button */
.suggestion-btn:nth-child(1) { animation-delay: 0.05s; }
.suggestion-btn:nth-child(2) { animation-delay: 0.1s; }
.suggestion-btn:nth-child(3) { animation-delay: 0.15s; }
.suggestion-btn:nth-child(4) { animation-delay: 0.2s; }
.suggestion-btn:nth-child(5) { animation-delay: 0.25s; }
.suggestion-btn:nth-child(6) { animation-delay: 0.3s; }



/* Chat Selector Component Styles */

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

.chat-search-container {
    position: relative;
    margin-bottom: 8px;
}

.chat-search-container #chat-search {
    padding-right: 40px; /* Add space for the search icon */
    padding-left: 50px; /* Add left margin to prevent text overlap with icon */
}

.chat-search-container .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
}

.chat-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
}

.chat-dropdown.active {
    display: block;
}

.chat-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.chat-item:hover {
    background-color: var(--bg-secondary);
}

.chat-item.selected {
    background-color: var(--accent-primary);
    color: white;
}

/* Light mode specific styling for better visibility */
body:not(.dark-mode) .chat-item.selected {
    background-color: #D92960;
    color: white;
}

body:not(.dark-mode) .chat-item.selected .chat-item-title {
    color: white;
    font-weight: 600;
}

body:not(.dark-mode) .chat-item.selected .chat-item-date {
    color: rgba(255, 255, 255, 0.9);
}

.chat-item-icon {
    font-size: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.chat-item.selected .chat-item-icon {
    color: white;
}

.chat-item-content {
    flex: 1;
    min-width: 0;
}

.chat-item-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.chat-item-date {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.chat-item.selected .chat-item-date {
    color: rgba(255, 255, 255, 0.8);
}

.chat-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.chat-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.chat-load-more {
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.chat-load-more:hover {
    background-color: var(--bg-secondary);
}

.chat-load-more .material-symbols-outlined {
    font-size: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

.selected-chat-display {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.selected-chat-display:hover {
    border-color: var(--primary-color);
}

.selected-chat-display.active {
    border-color: var(--primary-color);
}

.selected-chat-display .placeholder-text {
    color: var(--text-secondary);
    font-style: italic;
}

.selected-chat-display .chat-item-icon {
    font-size: 18px;
    color: var(--text-secondary);
}

.selected-chat-display .chat-item-content {
    flex: 1;
    min-width: 0;
}

.selected-chat-display .chat-item-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-chat-display .chat-item-date {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Dark mode adjustments */
body.dark-mode .chat-dropdown {
    background: var(--bg-primary);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .chat-item:hover {
    background-color: var(--bg-secondary);
}

body.dark-mode .selected-chat-display {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .selected-chat-display:hover {
    border-color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chat-dropdown {
        max-height: 250px;
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .chat-item {
        padding: 10px 12px;
    }
    
    .chat-item-title {
        font-size: 13px;
        max-width: calc(100vw - 120px);
    }
    
    .chat-item-content {
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }
    
    .selected-chat-display {
        padding: 10px 12px;
    }
    
    .selected-chat-display .chat-item-title {
        max-width: calc(100% - 60px);
    }
}

/* Scrollbar styling for chat dropdown */
.chat-dropdown::-webkit-scrollbar {
    width: 6px;
}

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

.chat-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.chat-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

body.dark-mode .chat-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

body.dark-mode .chat-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}
/* Ready Courses Grid Styles */

.ready-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 25px;
    padding: 20px; /* Padding around the grid */
    max-height: 70vh; /* Limit height */
    overflow-y: auto; /* Enable scroll */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-subtle); /* Use variables */
}

/* Scrollbar styles (WebKit) */
.ready-courses-grid::-webkit-scrollbar {
    width: 8px;
}
.ready-courses-grid::-webkit-scrollbar-track {
    background: var(--bg-subtle); /* Use variable */
    border-radius: 4px;
}
.ready-courses-grid::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary); /* Use variable */
    border-radius: 4px;
    border: 2px solid var(--bg-subtle); /* Use variable */
}

/* Individual course card */
.ready-course-item {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-hover-subtle)); /* Use variables */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 6px 12px var(--shadow-color); /* Use variable */
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* For positioning actions */
    overflow: hidden; /* For potential effects */
    cursor: pointer; /* Indicate clickable */
}

.ready-course-item:hover {
    transform: translateY(-8px); /* Lift effect */
    box-shadow: 0 10px 20px var(--shadow-dark-strong); /* Use variable */
}

.ready-course-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-primary, #292C6D); /* Brand color */
    margin-bottom: 12px;
    line-height: 1.3;
}

.ready-course-desc {
    font-size: 1rem;
    color: var(--text-input); /* Use variable */
    margin-bottom: 15px;
    line-height: 1.5;
    /* Limit description lines if needed */
    /* display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}

/* Progress bar container */
.ready-course-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px; /* Space above progress */
}

/* Reusing progress bar styles from _study-plan.css */
.ready-course-progress .progress-bar {
    /* width: 100%; /* Already set */
    /* height: 8px; /* Already set */
    /* background: #e0e0e0; /* Lighter track */
    /* border-radius: 4px; */
    /* overflow: hidden; */
    margin-top: 0; /* Reset margin if needed */
}

.ready-course-progress .progress-fill {
    /* background: linear-gradient(90deg, #D92960, #292C6D); /* Already set */
    /* height: 100%; */
    /* transition: width 0.5s ease; */
}

.ready-course-progress span { /* Percentage text */
    font-size: 0.9rem;
    color: var(--text-secondary); /* Use variable */
    font-weight: 500;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Action buttons (Edit/Delete) */
.ready-course-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
}

.ready-course-item:hover .ready-course-actions {
    opacity: 1; /* Show on hover */
}

.course-action-btn { /* Base style for action buttons */
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
}

.course-action-btn .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--text-secondary); /* Use variable */
    transition: color 0.2s ease; /* Smooth color transition */
}

.course-action-btn:hover {
    background-color: var(--border-subtle-light); /* Use variable */
}

.course-action-btn.edit:hover .material-symbols-outlined {
    color: var(--accent-secondary); /* Use variable */
}

.course-action-btn.delete:hover .material-symbols-outlined {
    color: var(--danger-color); /* Use variable */
}

/* Dark Mode */
body.dark-mode .ready-courses-grid {
    scrollbar-color: var(--accent-primary) var(--bg-card-hover); /* Use variables */
}
body.dark-mode .ready-courses-grid::-webkit-scrollbar-track {
    background: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .ready-courses-grid::-webkit-scrollbar-thumb {
    border-color: var(--bg-card-hover); /* Use variable */
}
body.dark-mode .ready-course-item {
    background: linear-gradient(145deg, var(--bg-card-hover), var(--bg-card)); /* Use variables */
    box-shadow: 0 6px 12px var(--shadow-color); /* Use variable */
}
body.dark-mode .ready-course-title {
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .ready-course-desc {
    color: var(--text-secondary); /* Use variable */
}
body.dark-mode .ready-course-progress .progress-bar {
    background: var(--border-input); /* Use variable */
}
body.dark-mode .ready-course-progress span {
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .course-action-btn {
     /* Keep base style */
}
body.dark-mode .course-action-btn .material-symbols-outlined {
     color: var(--text-secondary); /* Use variable */
}
body.dark-mode .course-action-btn:hover {
    background-color: var(--bg-light-hover-dark); /* Use variable */
}
body.dark-mode .course-action-btn.edit:hover .material-symbols-outlined {
    color: var(--info-color-dark); /* Use variable */
}
body.dark-mode .course-action-btn.delete:hover .material-symbols-outlined {
    color: var(--danger-color-dark); /* Use variable */
}



/* Edit Course Modal Styles */

#edit-course-modal .edit-title-modal-input {
    /* Assuming this is an input field within the modal */
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 15px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#edit-course-modal .edit-title-modal-input:focus {
    outline: none;
    border-color: var(--accent-primary); /* Use variable */
    box-shadow: var(--shadow-input-focus); /* Use variable */
}

/* Dark Mode */
body.dark-mode #edit-course-modal .edit-title-modal-input {
    background-color: var(--bg-input-focus); /* Use variable */
    color: var(--text-primary); /* Use variable */
    border-color: var(--border-input); /* Use variable */
}

body.dark-mode #edit-course-modal .edit-title-modal-input:focus {
    border-color: var(--border-input-focus); /* Use variable */
    box-shadow: var(--shadow-input-focus); /* Use variable */
}

/* Add other modal-specific styles here if needed */
/* e.g., modal container, buttons within the modal */



/* Feedback Toast Component Styles */

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px); /* Start below */
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* Fade in */
    }
    85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* Stay visible */
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px); /* Fade out upwards */
    }
}

/* Base class for toasts */
.feedback-toast { /* Renamed from .update-feedback for generality */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: var(--border-radius-sm); /* Use variable */
    box-shadow: 0 2px 5px var(--shadow-color); /* Use variable */
    z-index: 1000; /* Ensure visibility */
    opacity: 0; /* Start hidden */
    pointer-events: none; /* Prevent interaction */
    font-size: 0.9rem; /* Adjust font size */
    font-weight: 500;
    /* Animation applied when shown via JS */
}

/* Class added by JS to show the toast */
.feedback-toast.show {
    opacity: 1;
    pointer-events: auto;
    animation: fadeInOut 4s ease-in-out forwards; /* Increased duration to 4s */
}


/* Specific feedback types */
.feedback-toast.delete, /* Use class instead of separate class name */
.feedback-toast.error {
    background-color: var(--danger-color); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
}

/* Example for success/update */
.feedback-toast.success {
     background-color: var(--success-color); /* Use variable */
     color: var(--text-on-accent); /* Use variable */
}

/* Example for info */
.feedback-toast.info {
     background-color: var(--info-color); /* Use variable */
     color: var(--text-primary); /* Use variable */
}

/* Dark mode adjustments could go here or in _theme.css */
/* Example:
body.dark-mode .feedback-toast.success { ... }
body.dark-mode .feedback-toast.error { ... }
*/



/* Pomodoro Slider Styles */

/* Pomodoro slider track colors */
#study-time-slider.pomodoro-enabled {
    /* Default background will be replaced dynamically with gradient */
    background: linear-gradient(to right, var(--pomodoro-work-color, #D92960) 0%, var(--pomodoro-work-color, #D92960) 100%);
    pointer-events: none; /* Disable slider interaction when in pomodoro mode */
    opacity: 1; /* Keep full opacity to show colors clearly */
}

/* Define default pomodoro segment colors */
:root {
    --pomodoro-work-color: #D92960;     /* Pink for work periods */
    --pomodoro-short-break-color: #4285F4; /* Blue for short breaks */
    --pomodoro-long-break-color: #ffc107; /* Yellow for long breaks */
}

/* Dark mode color adjustments if needed */
body.dark-mode {
    --pomodoro-work-color: #E63980;     /* Slightly brighter pink for dark mode */
    --pomodoro-short-break-color: #5C9CFF; /* Brighter blue for dark mode */
    --pomodoro-long-break-color: #ffd43b; /* Brighter yellow for dark mode */
}

/* Thumb styling when pomodoro is enabled - completely hide it */
#study-time-slider.pomodoro-enabled::-webkit-slider-thumb {
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

#study-time-slider.pomodoro-enabled::-moz-range-thumb {
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Pomodoro Legend Panel Styles */
.pomodoro-legend-panel {
    position: absolute;
    top: 5%;
    right: 100%; /* Posiciona à esquerda do container pai */
    width: 320px;
    height: 90%;
    background-color: var(--card-bg-light);
    border-radius: 12px 0 0 12px; /* Cantos arredondados à esquerda */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease, z-index 0s linear 0.25s;
    transform: translateX(100%); /* Inicialmente escondido atrás do painel principal */
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.pomodoro-legend-panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
    z-index: 0;
}

.pomodoro-legend-panel.active {
    transform: translateX(0); /* Mostra o painel completamente */
    opacity: 1;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease, z-index 0s;
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.15);
}

.pomodoro-legend-content {
    padding: 30px 20px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) transparent;
}

.pomodoro-legend-content::-webkit-scrollbar {
    width: 6px;
}

.pomodoro-legend-content::-webkit-scrollbar-track {
    background: transparent;
}

.pomodoro-legend-content::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
    border-radius: 6px;
}

.pomodoro-legend-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.pomodoro-legend-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--accent-primary);
    border-radius: 2px;
}

.pomodoro-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pomodoro-legend-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.color-sample {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.work-color {
    background-color: var(--pomodoro-work-color);
}

.short-break-color {
    background-color: var(--pomodoro-short-break-color);
}

.long-break-color {
    background-color: var(--pomodoro-long-break-color);
}

.legend-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.pomodoro-legend-info {
    margin-top: 25px;
    padding: 15px;
    background-color: rgba(var(--accent-primary-rgb), 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.pomodoro-legend-info p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}

/* Dark mode adjustments */
body.dark-mode .pomodoro-legend-panel {
    background-color: var(--bg-card);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .pomodoro-legend-panel.active {
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.4);
}

body.dark-mode .pomodoro-legend-item {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .pomodoro-legend-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .pomodoro-legend-info {
    background-color: rgba(var(--accent-primary-rgb), 0.15);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .pomodoro-legend-panel {
        top: auto;
        right: 0;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 70vh;
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
    }
    
    .pomodoro-legend-panel.active {
        transform: translateY(0);
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .pomodoro-legend-panel::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);
    }
}



/* File Upload & Preview Component Styles */

/* Container for file previews (above input wrapper) */
.file-preview-container {
    display: none; /* Hidden by default, shown by JS */
    flex-wrap: wrap;
    gap: 8px; /* Space between file items */
    margin-bottom: 10px; /* Space below previews */
    padding: 8px;
    background-color: var(--bg-secondary); /* Use variable */
    border-radius: var(--border-radius-sm, 8px);
    border: 1px dashed var(--border-color); /* Use variable */
    max-height: 150px; /* Limit height */
    overflow-y: auto; /* Allow scrolling if many files */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-subtle);
}

.file-preview-container.visible { /* Class added by JS */
    display: flex;
}

.file-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background-color: var(--bg-primary); /* Use variable */
    border-radius: var(--border-radius-sm, 8px);
    box-shadow: 0 1px 2px var(--shadow-color); /* Use variable */
    font-size: 0.85rem;
    color: var(--text-secondary); /* Use variable */
    max-width: 200px; /* Limit width of individual item */
}

.file-preview-item .material-symbols-outlined {
    font-size: 16px; /* Icon size */
    flex-shrink: 0;
    color: var(--text-primary); /* Use variable */
}

.file-preview-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1; /* Allow name to take space */
}

.remove-file {
    background: none;
    border: none;
    padding: 2px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary); /* Use variable */
    transition: color 0.2s ease;
}

.remove-file:hover {
    color: var(--text-error);
}

.remove-file .material-symbols-outlined {
    font-size: 14px;
}

/* File upload button styles */
#send-file-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--bg-ai-message);
    color: var(--text-input);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

#send-file-button:hover {
    background-color: var(--bg-subtle);
}

#send-file-button .material-symbols-outlined {
    font-size: 1.6rem;
}

/* Drag and drop styles */
.input-content-area.drag-over-file {
    border-color: var(--accent-primary);
    border-style: dashed;
    border-width: 2px;
    background-color: rgba(var(--accent-primary-rgb), 0.05);
}

/* Mobile adjustments */
@media (max-width: 868px) {
    #send-file-button {
        width: 42px;
        height: 42px;
    }
    
    #send-file-button .material-symbols-outlined {
        font-size: 1.4rem;
    }
    
    .file-preview-container {
        padding: 6px;
        gap: 6px;
    }
    
    .file-preview-item {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

/* Dark Mode */
body.dark-mode .file-preview-container {
    background-color: var(--bg-card); /* Use variable */
    border-color: var(--border-input); /* Use variable */
    scrollbar-color: var(--accent-primary) var(--bg-card-hover);
}

body.dark-mode .file-preview-item {
    background-color: var(--bg-secondary); /* Use variable */
    box-shadow: 0 1px 2px var(--shadow-dark-strong); /* Use variable */
    color: var(--text-secondary); /* Use variable */
}

body.dark-mode .file-preview-item .material-symbols-outlined {
    color: var(--text-primary); /* Use variable */
}

body.dark-mode .remove-file {
    color: var(--text-secondary); /* Use variable */
}

body.dark-mode .remove-file:hover {
    color: var(--danger-color-dark); /* Use variable */
}



/* Estilos para o Jogo da Memória */

.break-game-container{
    width: 500px;
}

/* Melhorias de responsividade para PC */
@media (min-width: 1024px) {
    .break-game-container {
        width: 700px;
    }
    
    .memory-game-board {
        gap: 12px;
    }
    
    .memory-card {
        aspect-ratio: 1 / 1; /* Cards quadrados para PC */
    }
    
    .memory-card-back .material-symbols-outlined {
        font-size: 2.5rem;
    }
    
    .break-memory-game-title {
        font-size: 1.8rem;
    }
    
    .memory-game-stat {
        font-size: 1.1rem;
    }
}

@media (min-width: 1200px) {
    .break-game-container {
        width: 800px;
    }
    
    .memory-game-board {
        gap: 15px;
    }
    
    .memory-card-back .material-symbols-outlined {
        font-size: 3rem;
    }
    
    .break-memory-game-title {
        font-size: 2rem;
    }
    
    .memory-game-stat {
        font-size: 1.2rem;
    }
}


/* --- NEW: Wrapper for title and header to be on the same line on desktop --- */
.game-title-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
    gap: 1.5rem;
}

.break-memory-game-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary, #292C6D);
    margin: 0; /* Margin is now handled by the wrapper */
    flex-shrink: 0; /* Prevent title from shrinking */
}

.break-memory-game-header {
    display: flex;
    justify-content: center; /* Center the stats within the header */
    gap: 1.5rem; /* Add space between stats */
    width: auto; /* Let the content define the width */
    margin-bottom: 0; /* Margin is now handled by the wrapper */
    padding: 10px 15px; /* Adjust padding */
    background-color: var(--bg-subtle);
    border-radius: var(--border-radius-md);
}

.memory-game-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* --- FIX: Stabilize stat number width to prevent layout shift --- */
.memory-game-stat span:last-child {
    display: inline-block; /* Ensure min-width is respected */
    text-align: left;      /* Keep alignment consistent */
}
#memory-game-moves {
    min-width: 2.5ch; /* Accommodates up to 3 digits without jitter */
}
#memory-game-timer {
    min-width: 5ch; /* Accommodates MM:SS format */
}
.memory-game-stat .material-symbols-outlined {
    color: var(--accent-primary);
}

.memory-game-board {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Reduced columns for larger cards */
    gap: 8px;
    width: 100%;
    perspective: 1000px; /* Para o efeito 3D */
}

.memory-card {
    background-color: transparent;
    width: 100%; /* Width is controlled by grid */
    aspect-ratio: 4 / 3; 
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.memory-card.is-flipped {
    transform: rotateY(180deg);
}

.memory-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--border-radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.memory-card-front {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    transform: rotateY(180deg);
}

.memory-card-back {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.memory-card-back .material-symbols-outlined {
    font-size: 2rem;
    color: var(--accent-primary);
}

.memory-card-front img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.memory-card.is-matched {
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.memory-card.is-flipped.is-matched {
    transform: rotateY(180deg) scale(0.95);
}


.memory-card.no-click {
    pointer-events: none;
}

.memory-game-win-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.8);
    backdrop-filter: blur(5px);
    display: none; /* Escondido por padrão */
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--border-radius-lg, 16px);
    z-index: 10;
}

.memory-game-win-screen.show {
    display: flex;
}

.win-screen-content {
    animation: fadeIn 0.5s ease;
    padding: 20px;
}

.win-screen-content h2 {
    color: var(--brand-primary);
    font-size: 2rem;
}

.win-screen-content .celebration-icon {
    font-size: 3rem;
    color: var(--accent-primary);
}

#win-play-again-btn {
    display: block;
    margin: 0 auto;
}

/* Dark mode styles for memory game win screen */
body.dark-mode .memory-game-win-screen {
    background: rgba(var(--bg-card-rgb, 51, 51, 51), 0.9);
}

body.dark-mode .win-screen-content h2 {
    color: var(--text-heading, #f0f0f0);
}

body.dark-mode .win-screen-content .celebration-icon {
    color: var(--accent-primary);
}

/* Responsividade */
@media (max-width: 768px) {
    .break-memory-game-container {
        padding: 15px;
    }
    /* --- CHANGE: Stack title and header on smaller screens --- */
    .game-title-header-wrapper {
        flex-direction: column;
        align-items: stretch; /* Make items take full width */
        gap: 1rem;
    }
    .memory-game-board {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for tablets */
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .memory-game-board {
        grid-template-columns: repeat(4, 1fr); /* 4 colunas para telas de celular */
        gap: 5px;
    }
    .memory-game-stat {
        font-size: 0.8rem;
    }
    .memory-card-back .material-symbols-outlined {
        font-size: 1.5rem;
    }
}
/* Gradiente para o 'L' do verso da carta do jogo da memória */
.memory-card-back .memory-card-back-L {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.memory-card-back .memory-card-back-L svg {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
}

@media (max-width: 480px) {
    .memory-card-back .memory-card-back-L svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Music Playlist Window Styles */
.music-playlist-window {
    position: fixed;
    bottom: 20px;
    right: 360px; /* Position next to other tools */
    width: 400px;
    height: 600px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 25px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1054; /* Below notes window, above calculator */
    resize: both;
    min-width: 350px;
    min-height: 500px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.music-playlist-window:not(.esconde) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.music-playlist-window.dragging {
    opacity: 0.8;
    transition: opacity 0.1s ease;
    user-select: none;
}

.music-playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
    cursor: grab;
    flex-shrink: 0;
    font-weight: 600;
    gap: 8px;
}

.music-playlist-header:active {
    cursor: grabbing;
}

.music-playlist-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.music-playlist-close-btn:hover {
    background-color: var(--bg-card-hover);
    color: var(--accent-primary);
}

.music-playlist-body {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
}

/* Music Views */
.music-view {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.category-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
    border: 1px solid var(--border-subtle-light);
    border-radius: 16px; /* Aumentando um pouco o raio */
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; /* Mudar para layout de linha */
    align-items: center; /* Alinhar itens verticalmente ao centro */
    text-align: left; /* Alinhar todo o texto à esquerda */
    gap: 20px; /* Aumentar o espaço entre o ícone e o texto */
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-card:hover {
    background: linear-gradient(135deg, var(--bg-hover-subtle), var(--bg-secondary));
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-primary);
}

.category-card:hover::before {
    opacity: 1;
}

.category-icon {
    font-size: 32px;
    color: var(--accent-primary);
    background: var(--bg-primary);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Impedir que o ícone encolha */
    transition: all 0.3s ease;
}

.category-card:hover .category-icon {
    transform: scale(1.1);
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

/* Novo container para os detalhes de texto */
.category-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1; /* Faz com que o container de texto ocupe o espaço restante */
}

.category-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.category-description {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    flex-grow: 1; /* Permite que a descrição ocupe mais espaço vertical */
}

.category-track-count {
    font-size: 12px;
    color: var(--accent-primary);
    font-weight: 500;
    background: var(--bg-subtle);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle-light);
    align-self: flex-start; /* Alinha à esquerda dentro do container de detalhes */
}

/* Tracks View */
.tracks-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle-light);
}

.tracks-header .back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.tracks-header .back-btn:hover {
    background: var(--bg-hover-subtle);
    color: var(--text-primary);
}

.tracks-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.tracks-header .playlist-link {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent-primary);
    text-decoration: none;
    border: 1px solid var(--accent-primary);
    padding: 4px 8px;
    border-radius: 999px;
}
.tracks-header .playlist-link:hover { background: var(--accent-primary); color: var(--text-on-accent); }

.tracks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.track-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle-light);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.track-item:hover {
    background: var(--bg-hover-subtle);
    border-color: var(--accent-primary);
    transform: translateX(4px);
}

.track-item.active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.track-play-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle-light);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    flex-shrink: 0;
}

.track-play-btn:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

.track-item.active .track-play-btn {
    background: var(--text-on-accent);
    color: var(--accent-primary);
    border-color: var(--text-on-accent);
}

.track-info {
    flex: 1;
    min-width: 0;
}

.track-info h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.track-artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-duration {
    flex-shrink: 0;
    font-weight: 500;
}

.track-item.active .track-meta {
    color: var(--text-on-accent-muted);
}

/* Music Player */
.music-player {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle-light);
    padding: 16px;
    flex-shrink: 0;
    position: relative;
}

.player-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.player-info-left { min-width: 0; }

.track-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-category {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.player-info-actions { display: flex; align-items: center; gap: 6px; }
.control-btn.control-btn--xs { width: 32px; height: 32px; }

.control-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle-light);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.control-btn:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
    transform: scale(1.05);
}

.control-btn.play-btn {
    width: 48px;
    height: 48px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.control-btn.play-btn:hover {
    transform: scale(1.1);
}

/* Player settings overlay */
.player-options-overlay {
    position: absolute;
    right: 8px;
    bottom: 64px; /* stays above volume/progress area */
    background: var(--bg-card);
    border: 1px solid var(--border-subtle-light);
    border-radius: 10px;
    box-shadow: 0 10px 30px var(--shadow-color);
    padding: 10px 12px;
    z-index: 2;
    min-width: 240px;
}

.player-options-overlay.esconde { display: none; }

.player-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.player-options a.accent-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}
.player-options a.accent-link:hover { text-decoration: underline; }

.player-option-item {
    display: grid;
    grid-template-columns: 18px 1fr 24px;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.player-option-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.player-option-item .option-help {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-option-item .option-help:hover { color: var(--accent-primary); }

.player-progress {
    margin-bottom: 12px;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--border-subtle-light);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--accent-primary);
    border-radius: 2px;
    transition: width 0.1s linear;
}

.progress-bar input[type="range"] {
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}

/* WebKit browsers (Chrome, Safari, Edge) */
.progress-bar input[type="range"]::-webkit-slider-track {
    width: 100%;
    height: 4px;
    background: transparent;
    border-radius: 2px;
    border: none;
}

.progress-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Firefox */
.progress-bar input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: transparent;
    border-radius: 2px;
    border: none;
}

.progress-bar input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.volume-control .fa-volume-down,
.volume-control .fa-volume-up {
    cursor: pointer;
}

.volume-control input[type="range"] {
    flex: 1;
    height: 4px;
    background: var(--border-subtle-light);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .music-playlist-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        z-index: 1070;
        resize: none;
    }
    
    .music-playlist-header {
        padding: 16px 20px;
    }
    
    .music-playlist-body {
        padding: 0;
    }
    
    .music-view {
        padding: 20px;
    }
    
    .categories-grid {
        gap: 16px;
    }
    
    .category-item {
        padding: 20px;
    }
    
    .track-item {
        padding: 16px;
    }
    
    .music-player {
        padding: 20px;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .music-playlist-window {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 5px 25px var(--shadow-color);
}

[data-theme="dark"] .music-playlist-header {
    background: var(--bg-card);
    color: var(--text-heading);
}

[data-theme="dark"] .music-playlist-body {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .category-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
    border-color: var(--border-subtle-light);
}

[data-theme="dark"] .category-card:hover {
    background: linear-gradient(135deg, var(--bg-hover-subtle), var(--bg-secondary));
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .category-icon {
    background: var(--bg-primary);
}

[data-theme="dark"] .category-track-count {
    background: var(--bg-primary);
    border-color: var(--border-subtle-light);
}

[data-theme="dark"] .track-item {
    background: var(--bg-secondary);
    border-color: var(--border-subtle-light);
}

[data-theme="dark"] .track-item:hover {
    background: var(--bg-hover-subtle);
}

[data-theme="dark"] .track-play-btn {
    background: var(--bg-primary);
    border-color: var(--border-subtle-light);
    color: var(--text-primary);
}

[data-theme="dark"] .music-player {
    background: var(--bg-secondary);
    border-color: var(--border-subtle-light);
}

[data-theme="dark"] .control-btn {
    background: var(--bg-primary);
    border-color: var(--border-subtle-light);
    color: var(--text-primary);
}

[data-theme="dark"] .control-btn:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}
/* Chat audio player – adaptado ao tema LearnAI */
.chat-audio-player{display:flex;align-items:center;gap:.75rem;font-size:.85rem;user-select:none;--cap-accent:var(--accent-primary);--cap-accent-soft:var(--accent-primary-soft,#ffb3c9);--cap-bg:var(--bg-subtle);--cap-height:6px;--cap-border:var(--border-color);width:100%;min-width:300px;max-width:100%;padding:6px 10px;border:1px solid var(--cap-border);border-radius:14px;background:linear-gradient(145deg,var(--bg-secondary) 0%,var(--bg-card) 100%);box-shadow:var(--shadow-inset-sm,0 1px 2px rgba(0,0,0,.12))}
.message.user .chat-audio-player{background:linear-gradient(145deg,rgba(var(--accent-primary-rgb),0.12) 0%,rgba(var(--accent-primary-rgb),0.05) 100%);border-color:rgba(var(--accent-primary-rgb),0.35)}
body.dark-mode .chat-audio-player{background:linear-gradient(145deg,var(--bg-card) 0%,var(--bg-secondary) 100%);border-color:var(--border-input)}
.chat-audio-player .cap-btn{background:var(--cap-accent);border:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:background .2s,transform .15s ease;box-shadow:0 2px 4px rgba(var(--accent-primary-rgb,217,41,96),.35)}
.chat-audio-player .cap-btn:hover{background:var(--accent-primary-hover);transform:translateY(-2px)}
.chat-audio-player .cap-btn:active{transform:translateY(0)}
.chat-audio-player .cap-btn .material-symbols-outlined{color:var(--text-on-accent);font-size:1.6rem}
.chat-audio-player .cap-progress-wrapper{flex:1;cursor:pointer;outline:none;display:flex;align-items:center}
.chat-audio-player .cap-progress-bar{position:relative;width:100%;height:var(--cap-height);background:linear-gradient(90deg,var(--bg-subtle),var(--bg-secondary));border-radius:999px;overflow:hidden}
.chat-audio-player .cap-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--cap-accent),var(--cap-accent-soft));transition:width .08s linear,background .3s}
.chat-audio-player .cap-time{display:flex;align-items:center;gap:.25rem;color:var(--text-tertiary,rgba(0,0,0,.55));font-variant-numeric:tabular-nums;font-weight:500}
/* Light theme override: tempo em branco para maior contraste solicitado */
body:not(.dark-mode) .chat-audio-player .cap-time{color:#fff}
body.dark-mode .chat-audio-player .cap-time{color:#fff}
.chat-audio-player.cap-error .cap-time{color:var(--accent-danger)}
.chat-audio-player .cap-progress-wrapper:focus-visible .cap-progress-bar{box-shadow:0 0 0 3px rgba(var(--accent-primary-rgb,217,41,96),.35)}
.chat-audio-player .cap-time .cap-current{min-width:38px;text-align:right}
.chat-audio-player .cap-time .cap-duration{min-width:42px;text-align:left;opacity:.85}
/* Wrapper removido: ajustar margem superior do player quando dentro de mensagens */
.message .chat-audio-player{margin-top:.5rem}
/* Indicador de estado (placeholder) pode ser aplicado direto no player */
.chat-audio-player[data-transcribing="true"]{opacity:.6;pointer-events:none}
/* TTS Error & Retry Styles */
.tts-error{color:var(--accent-danger);font-size:.9rem;padding:.5rem}
.tts-retry-container{display:inline-flex;align-items:center;gap:.5rem}
.tts-retry-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:var(--accent-primary);color:var(--text-on-accent);border:none;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;transition:background .2s,transform .15s;box-shadow:0 2px 4px rgba(var(--accent-primary-rgb,217,41,96),.35)}
.tts-retry-btn:hover{background:var(--accent-primary-hover);transform:translateY(-2px)}
.tts-retry-btn:active{transform:translateY(0)}
.tts-retry-btn .material-symbols-outlined{font-size:1.2rem}
.tts-loading{opacity:.7;font-style:italic}

@media (max-width:680px){
	.chat-audio-player{padding:6px 8px;gap:.5rem;min-width:0;max-width:100%}
	.chat-audio-player .cap-btn{width:32px;height:32px;flex-shrink:0}
	.chat-audio-player .cap-btn .material-symbols-outlined{font-size:1.3rem}
	.chat-audio-player .cap-time{font-size:.75rem;flex-shrink:0}
	.chat-audio-player .cap-time .cap-current{min-width:32px}
	.chat-audio-player .cap-time .cap-duration{min-width:36px}
	.chat-audio-player .cap-time .cap-sep{display:inline}
	/* Melhorias para player dentro de relacionar colunas */
	.interactive-relacionar-colunas .chat-audio-player{min-width:0;max-width:100%;padding:4px 6px;gap:.35rem}
	.interactive-relacionar-colunas .chat-audio-player .cap-btn{width:28px;height:28px}
	.interactive-relacionar-colunas .chat-audio-player .cap-btn .material-symbols-outlined{font-size:1.1rem}
	.interactive-relacionar-colunas .chat-audio-player .cap-time{font-size:.7rem}
	.interactive-relacionar-colunas .chat-audio-player .cap-time .cap-current{min-width:28px}
	.interactive-relacionar-colunas .chat-audio-player .cap-time .cap-duration{min-width:32px}
	/* Botão de retry responsivo */
	.tts-retry-btn{padding:.4rem .75rem;font-size:.8rem}
	.tts-retry-btn .material-symbols-outlined{font-size:1.1rem}
}

/* Responsividade extrema para telas muito pequenas */
@media (max-width:480px){
	.chat-audio-player{padding:4px 6px;gap:.4rem;min-width:200px}
	.chat-audio-player .cap-btn{width:30px;height:30px}
	.chat-audio-player .cap-btn .material-symbols-outlined{font-size:1.2rem}
	.chat-audio-player .cap-time{font-size:.7rem}
	.chat-audio-player .cap-time .cap-current{min-width:30px}
	.chat-audio-player .cap-time .cap-duration{min-width:34px}
	/* Ocultar separador em telas muito pequenas para economizar espaço */
	.chat-audio-player .cap-time .cap-sep{display:none}
	/* Player dentro de relacionar colunas em mobile extremo */
	.interactive-relacionar-colunas .chat-audio-player{padding:3px 5px;gap:.3rem;min-width:0}
	.interactive-relacionar-colunas .chat-audio-player .cap-btn{width:26px;height:26px}
	.interactive-relacionar-colunas .chat-audio-player .cap-btn .material-symbols-outlined{font-size:1rem}
	.interactive-relacionar-colunas .chat-audio-player .cap-time{font-size:.65rem}
	.interactive-relacionar-colunas .chat-audio-player .cap-time .cap-current{min-width:26px}
	.interactive-relacionar-colunas .chat-audio-player .cap-time .cap-duration{min-width:28px}
	.interactive-relacionar-colunas .chat-audio-player .cap-time .cap-sep{display:none}
	/* Retry button em mobile extremo */
	.tts-retry-btn{padding:.35rem .6rem;font-size:.75rem;gap:.3rem}
	.tts-retry-btn .material-symbols-outlined{font-size:1rem}
	.tts-retry-btn span:not(.material-symbols-outlined){display:none}
	.tts-retry-btn::after{content:'Retry'}
}

/* DocChat Page Styles */

/* Centralizar o layout principal no eixo X e controlar largura/altura */
#docchat-page.main-container {
	display: flex;
	flex-direction: column;
	max-width: none;
	width: 100%;
	margin: 0;
	height: 100vh; /* ocupa toda a viewport; header sobrepõe quando visível */
	overflow: hidden; /* evita scroll horizontal por overflow interno */
	max-height: none; /* não limitar altura nesta página */
}

/* Layout interno (chat + viewer) */
.docchat-layout {
	display: flex;
	gap: 12px;
	height: 100%;
	align-items: stretch;
	min-height: 0;
}

/* Garantir que o painel do viewer fique centralizado quando o chat estiver fechado */
.docchat-layout.chat-closed {
	display: flex;
	justify-content: center;
	align-items: stretch;
}
.docchat-layout.chat-closed .docchat-chat-panel {
	display: none !important;
}
.docchat-layout.chat-closed #docchat-viewer-panel {
	max-width: none;
	width: 100%;
	margin: 0;
}

/* Esconder painel de chat quando marcado como fechado */
/* garantir que painéis possam encolher sem overflow */
.docchat-viewer-panel,
.docchat-chat-panel,
.docchat-viewer {
	min-width: 0;
}

/* Painel do viewer */


.docchat-viewer-panel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto; /* ocupa todo o espaço restante */
	max-width: none;
	margin: 0; /* em chat-closed acima centralizamos */
	transition: flex-basis 0.3s ease;
	min-height: 0; /* permitir filhos rolarem */
}

/* Em estado fechado, garantir que não ocupe 100% e fique centralizado */
.docchat-layout.chat-closed .docchat-viewer-panel {
	flex: 0 1 1000px; /* não crescer além do max */
	width: auto;
}

/* Quando o chat estiver aberto, dividir espaço proporcionalmente */
.docchat-layout.chat-open .docchat-chat-panel {
	flex: 0 0 25%;
	max-width: 25%;
}
.docchat-layout.chat-open .docchat-viewer-panel {
	flex: 0 0 75%;
	max-width: 75%;
}

/* Centralizar verticalmente o painel de chat quando aberto */
.docchat-layout.chat-open .docchat-chat-panel {
	align-self: center;
	height: 90%;
	max-height: 90%;
}

/* Ajustes de tamanho da área de input e botões apenas no DocChat (chat embutido) */
#docchat-page .input-area {
	padding: 8px 10px;
	gap: 6px;
}

#docchat-page .input-content-area {
	min-height: 36px;
	padding: 0 10px;
	border-radius: 18px;
}

#docchat-page .input-content-area > #user-input {
	font-size: 0.95rem;
	min-height: 32px;
	max-height: 120px;
	padding: 6px 8px;
}

#docchat-page #send-button,
#docchat-page #record-audio-button,
#docchat-page #media-toggle-button {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
}

#docchat-page #send-button .material-symbols-outlined,
#docchat-page #record-audio-button .material-symbols-outlined,
#docchat-page #media-toggle-button .material-symbols-outlined {
	font-size: 1.2rem;
}

#docchat-page .media-buttons-tray button {
	width: 32px;
	height: 32px;
}

#docchat-page .media-buttons-tray button .material-symbols-outlined {
	font-size: 1.0rem;
}

/* Viewer interno */
.docchat-viewer {
	position: relative;
	display: block;
	flex: 1 1 auto;
	background: var(--bg-primary, #fff);
	border-radius: var(--border-radius-md, 12px);
	box-shadow: 0 4px 8px var(--shadow-color, rgba(0,0,0,0.1));
	margin: 10px 0;
	width: 100%;
	height: 100%;
	overflow: auto; /* permitir rolagem do documento */
	padding-bottom: 72px; /* evitar sobreposição com a barra inferior */
}

/* Garantir que o conteúdo do viewer ocupe todo espaço disponível */
#docchat-viewer iframe,
#docchat-viewer embed,
#docchat-viewer object,
#docchat-viewer canvas {
	width: 100% !important;
	height: 100% !important;
	display: block;
	border: 0;
}

/* Barra de upload inferior horizontal */
.docchat-upload {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 8px 10px;
	background: var(--bg-primary, #fff);
	border-top: 1px solid var(--border-color, #CED4DA);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -2px 8px var(--shadow-color, rgba(0,0,0,0.06));
	transition: transform 0.25s ease-in-out;
}

/* Zona invisível para hover revelar a barra (como o header) */
#docchat-upload-hover-zone {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 14px;
	z-index: 89;
	background: transparent;
}

.docchat-upload #docchat-upload-btn.btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 4px;
	gap: 4px;
	border: 1px solid var(--border-color, #CED4DA);
	border-radius: 10px;
	background: var(--bg-card, #fff);
	font-size: 0.70rem;
	text-align: center;
}

.docchat-upload .btn .material-symbols-outlined {
	font-size: 22px;
}

.docchat-file-tabs {
	display: flex;
	flex-direction: row;
	gap: 6px;
	overflow-x: auto;
	flex: 1 1 auto;
	align-items: center;
}

/* Botão de fixar abas no canto direito da barra */
#docchat-tabs-pin-btn.btn {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color, #CED4DA);
	border-radius: 10px;
	background: var(--bg-card, #fff);
}

#docchat-tabs-pin-btn.btn[aria-pressed="true"] {
	background: var(--accent-primary, #D92960);
	color: #fff;
	border-color: var(--accent-primary, #D92960);
}

.docchat-file-tab {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid var(--accent-primary, #D92960);
	background: var(--accent-primary, #D92960);
	font-weight: 600;
	color: #fff;
}

.docchat-file-tab.active {
	box-shadow: 0 0 0 2px rgba(217,41,96,0.35);
}

.docchat-upload--hidden {
	transform: translateY(100%);
}

/* Estado fixo: barra sempre visível */
.docchat-upload--pinned {
	transform: translateY(0) !important;
}

/* Painel de chat: coluna com mensagens e input, sem provocar overflow horizontal */
.docchat-chat-panel {
	display: flex;
	flex-direction: column;
	background: var(--bg-primary, #fff);
	border-right: 1px solid var(--border-color, #CED4DA);
	border-radius: var(--border-radius-md, 12px);
	padding: 8px;
	height: 100%;
}
.docchat-chat-embed {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.docchat-chat-embed #chat-interface-container.main-container {
	height: 100% !important;
	max-height: none !important;
	margin: 0;
	box-shadow: none;
	border-radius: var(--border-radius-md, 12px);
	width: 100%;
	max-width: 100%;
}
.docchat-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}
.docchat-input-area {
	margin-top: 8px;
}

/* Responsivo */
@media (max-width: 868px) {
	#docchat-page.main-container {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		border-radius: 0;
	}
	.docchat-layout {
		flex-direction: column;
		gap: 12px;
	}
	.docchat-layout.chat-open .docchat-chat-panel,
	.docchat-layout.chat-open .docchat-viewer-panel {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}
}

/* Esconder sugestões do chat quando o chat principal for embutido no DocChat */
#docchat-page .chat-suggestions,
#docchat-page #chat-suggestions { display: none !important; }

/* Botão de alternar chat fixo no canto superior direito */
#docchat-toggle-chat-left.btn {
	position: fixed;
	top: 50px;
	right: 14px;
	left: auto;
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color, #CED4DA);
	border-radius: 8px;
	background: var(--bg-card, #fff);
	z-index: 92;
}



/* Floating Action Button Styles (e.g., Mobile Close) */

@keyframes floatingButton {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); } /* Adjust float height */
    100% { transform: translateY(0); }
}

.mobile-close-button {
    display: none; /* Hidden by default, shown via media query or JS */
    position: fixed; /* Fixed position */
    bottom: 20px; /* Adjust position */
    /* left: 15px; /* Adjust position */
    right: 15px; /* Example: Position on the right */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Circular */
    background: var(--accent-primary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none;
    box-shadow: 0 2px 10px var(--shadow-color); /* Use variable */
    z-index: 1010; /* Ensure it's above most content */
    cursor: pointer;
    align-items: center; /* Center icon */
    justify-content: center; /* Center icon */
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: floatingButton 2s ease-in-out infinite; /* Apply animation */
}

/* Ensure display:flex when shown */
.mobile-close-button.visible {
     display: flex; /* Ensure it's displayed when visible class is added */
}


.mobile-close-button:hover {
    background: var(--accent-primary-hover); /* Use variable */
    transform: scale(1.05); /* Slight scale effect */
    animation-play-state: paused; /* Pause animation on hover */
}

.mobile-close-button .material-symbols-outlined {
    font-size: 24px; /* Icon size */
}

/* Specific instance from style2.css (History Mobile Close) */
/* This might be better handled by adding the 'mobile-close-button' class */
/* to the history close button in the HTML */
/*
.history-mobile-close {
     bottom: 70px;
     left: 20px;
     display: flex; / * Already covered by .mobile-close-button * /
}
*/



.history-container {
    position: relative;
}

@media (max-width: 868px) {
    .history-dropdown {
        position: static;
    }

    .history-date-label {
        padding: 10px 15px;
        background: var(--bg-secondary);
        font-weight: 600;
        color: var(--bg-user-message);
        top: 0;
    }

    .history-dropdown-item {
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
    }
    .history-dropdown-item:last-child {
        border-bottom: none;
    }
}

#history-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

.history-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    display: none;
    margin-top: 5px;
    padding: 10px 0;
    width: 300px;
    max-height: 400px;
    background-color: var(--bg-dropdown);
    border: 1px solid var(--border-dropdown);
    border-radius: var(--border-radius-sm, 8px);
    box-shadow: 0 2px 4px var(--shadow-color);
    overflow-y: auto;
}

.history-dropdown.show {
    display: block;
}

.history-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    transition: background-color 0.2s ease;
    position: relative;
}

.history-dropdown-item:hover {
    background-color: var(--bg-dropdown-hover);
}

.history-dropdown .loading,
.history-dropdown .history-empty,
.history-dropdown .history-error {
    padding: 10px 15px;
    text-align: center;
    color: var(--text-secondary);
}

.history-dropdown .history-error {
    color: var(--accent-primary);
}

.history-date-label {
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: -10px;
    z-index: 1;
}

.history-dropdown-item .history-item-content {
    flex: 1;
    margin-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
    display: block;
    justify-content: initial;
    align-items: initial;
    gap: initial;
    flex-wrap: initial;
    font-weight: normal;
    font-size: 1rem;
    color: var(--text-dropdown);
}

.history-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: none;
    border-radius: 9999px;
    background: var(--border-subtle-light);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.history-action-btn:hover {
    background-color: var(--bg-dropdown-hover);
    color: var(--text-dropdown);
}

.history-action-btn.delete:hover {
    color: var(--accent-primary);
}

.history-action-btn.edit:hover {
    color: var(--accent-secondary);
}

.history-action-btn.pin:hover {
    color: var(--accent-primary);
}

.history-action-btn.pin.pinned {
    color: var(--accent-primary);
    background-color: var(--accent-primary-light, rgba(var(--accent-primary-rgb), 0.1));
}

.history-action-btn .material-symbols-outlined {
    font-size: 1rem;
}

/* Start study smaller, label hidden on very small screens */
.history-action-btn.start-study { background: var(--accent-primary); color: #fff; }
.history-action-btn.start-study .btn-label { font-size: .85rem; margin-left: 6px; }
/* Always hide label: make start-study icon-only in all sizes */
.history-action-btn.start-study .btn-label { display: none; }

.history-action-btn.view-microcourses .btn-label { font-size: .85rem; margin-left: 6px; }

@media (max-width: 520px) {
    .history-action-btn.start-study .btn-label,
    .history-action-btn.view-microcourses .btn-label { display: none; }
}

/* Ellipsis menu for history list (desktop only for history-dropdown-item-chat) */
.history-ellipsis-wrapper { position: relative; display: none; }
.history-ellipsis-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 9999px;
    background: var(--border-subtle-light);
    color: var(--text-secondary);
    cursor: pointer;
}
.history-ellipsis-btn:hover { background-color: var(--bg-dropdown-hover); color: var(--text-dropdown); }
.history-actions-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-dropdown, #fff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    z-index: 1000;
}
.history-actions-menu.open { display: flex; }
.history-actions-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-dropdown);
    cursor: pointer;
}
.history-actions-menu .menu-item:hover { background: var(--bg-dropdown-hover); }
.history-actions-menu .menu-item .material-symbols-outlined { font-size: 18px; }
.history-actions-menu .menu-item .menu-label { font-size: 0.9rem; }

/* Never show ellipsis in modal history items */
.history-dropdown-item .history-ellipsis-wrapper { display: none !important; }

/* Medium screens: show only actions ellipsis, hide header ellipsis */
@media (min-width: 769px) and (max-width: 1200px) {
    .history-dropdown-item-chat .history-item-actions .history-ellipsis-wrapper { display: inline-flex; }
    .history-dropdown-item-chat .history-ellipsis-wrapper--header { display: none; }
    /* Hide inline action buttons in medium too */
    .history-dropdown-item-chat .history-action-btn.pin,
    .history-dropdown-item-chat .history-action-btn.edit,
    .history-dropdown-item-chat .history-action-btn.delete { display: none; }
    /* Medium: show icon-only for 'Ver microcursos' (hide label) */
    .history-action-btn.view-microcourses .btn-label { display: none; }
}

/* Desktop behavior: show only header ellipsis at top-right; hide actions ellipsis */
@media (min-width: 1201px) {
    .history-dropdown-item-chat { position: relative; }
    /* Header ellipsis visible and positioned at top-right */
    .history-dropdown-item-chat .history-ellipsis-wrapper--header {
        display: inline-flex;
        position: absolute;
        top: 10px;
        right: 12px;
    }
    /* Hide actions ellipsis and inline buttons on desktop */
    .history-dropdown-item-chat .history-item-actions .history-ellipsis-wrapper { display: none; }
    .history-dropdown-item-chat .history-action-btn.pin,
    .history-dropdown-item-chat .history-action-btn.edit,
    .history-dropdown-item-chat .history-action-btn.delete { display: none; }
}

/* Support nested child microcourses inside history list */
.child-history-list {
    list-style: none;
    margin: 0 0 6px 0;
    padding: 0 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.child-history-item {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-dropdown);
}
.child-expander-btn { display: none; }
.history-title-prefix { display:inline-flex; align-items:center; margin-right: 6px; }

/* Estilo para chats fixados */
.pinned-chat {
    border-left: 3px solid var(--accent-primary);
    background-color: var(--bg-dropdown-hover, rgba(var(--accent-primary-rgb), 0.05));
}

.pinned-chat .history-action-btn.pin .material-symbols-outlined {
    color: var(--accent-primary);
    font-variation-settings: 'FILL' 1;
}
.history-section {
    width: 100%;
}

.history-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    margin: 0;
}

.history-item {
    background-color: var(--bg-card);
    padding: 18px 25px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-left-color 0.2s ease;
    border-left: 4px solid transparent;
}

.history-item:hover {
    background-color: var(--bg-card-hover);
    border-left-color: var(--accent-primary);
}


.history-item-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Ensure title wrapper spacing; visibility handled in dropdown CSS */
@media (min-width: 869px) {
    .history-item-content { justify-content: space-between; }
    .history-item-content > div:first-child { display: flex; align-items: center; gap: 8px; }
}

.history-item-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 8px;
}

/* Ensure ellipsis group sits at far right */
.history-item-actions .history-ellipsis-wrapper { margin-left: 4px; }

.history-item-actions button {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
.history-item-actions button:hover {
    color: var(--accent-primary);
}

.history-item-actions button.pin:hover {
    color: var(--accent-primary);
}

.history-item-actions button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Estilo para chats fixados na landing page */
.pinned-chat {
    border-left: 3px solid var(--accent-primary);
    background-color: var(--bg-subtle, rgba(var(--accent-primary-rgb), 0.05));
}

.pinned-chat .history-item-actions button.pin .material-symbols-outlined {
    color: var(--accent-primary);
    font-variation-settings: 'FILL' 1;
}

.history-topic {
    font-weight: 500;
    font-size: 1.05em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    margin-right: 5px;
}

.history-progress {
    font-size: 0.85em;
    color: var(--accent-primary);
    font-weight: 500;
    margin-left: 8px;
    flex-shrink: 0;
}

.history-detail {
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

/* Nested microcourses list (hierarchical UI) */
.child-history-list {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 2px solid var(--border-color);
}
.child-history-item {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background .2s ease;
}
.child-history-item:hover { background: var(--bg-card-hover); }
.child-history-item .history-topic { font-size: .95em; }
.child-history-item .history-detail { font-size: .75em; opacity: .85; }
.child-history-item.status-completed { border-left: 3px solid var(--accent-primary); }
.child-history-item.status-blocked { opacity: .7; filter: grayscale(.1); }
.child-history-item.status-unlocked { border-left: 3px solid transparent; }

.child-expander-btn { display: none; }
.history-title-prefix { display: inline-flex; align-items: center; margin-right: 6px; }

.empty-history {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    background-color: var(--bg-card);
    border-radius: var(--border-radius-sm);
    border: 1px dashed var(--border-color);
}

.empty-history p {
    margin-bottom: 15px;
}

.empty-history .icon {
    font-size: 2em;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .history-item-content {
        gap: 8px;
        flex-wrap: nowrap;
    }
    .history-topic {
        white-space: nowrap; 
        min-width: 0;
        font-size: 1em;
    }
    .history-item-actions {
        margin-left: auto;
        margin-right: 5px;
    }
    .history-detail {
        text-align: left;
        font-size: 0.8em;
        width: 100%;
    }
    .history-item {
        padding: 12px 15px;
        align-items: center;
        border-left-width: 3px;
    }
    
    /* Ensure actions are positioned correctly in mobile */
    .history-item .history-item-actions {
        position: static;
        margin-left: 0;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .history-item {
        padding: 10px 12px;
    }
    .history-topic {
        font-size: 0.95em;
    }
    .history-detail {
        font-size: 0.75em;
        width: 100%;
    }
     .history-item-actions {
        gap: 3px;
        position: static;
        margin-left: 0;
        flex-shrink: 0;
    }
     .history-item-actions button svg {
        width: 14px;
        height: 14px;
    }
}
/* Reutiliza estilos existentes; ajustes mínimos para área do DocChat */
.docchat-messages { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 12px; }
.docchat-msg { font-size: .92rem; color: var(--text-secondary); margin: 4px 0; }
.docchat-msg.system { color: var(--text-tertiary); }
.docshot-jump { background: transparent; color: var(--accent-primary); border: none; cursor: pointer; padding: 0 4px; }
.docshot-jump:hover { text-decoration: underline; }
/* Image Upload & Preview Component Styles */

/* Container for the input and preview */
.input-container {
    position: relative; /* For potential absolute elements */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between preview and input wrapper */
}

/* Wrapper for the text input and buttons */
.input-wrapper {
    display: flex;
    align-items: center; /* Align to bottom */
    gap: 10px;
    width: 100%;
}

/* Send Image Button (distinct from draw button) */
#send-image-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--bg-ai-message); /* Use variable */
    color: var(--text-input); /* Use variable */
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

#send-image-button:hover {
    background-color: var(--bg-subtle); /* Use variable */
}

#send-image-button .material-symbols-outlined {
    font-size: 1.6rem;
}

/* Image Preview Area */
.image-preview-container {
    display: none; /* Hidden by default, shown by JS */
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0; /* Spacing */
    padding: 10px; /* Add some padding */
    background-color: var(--bg-secondary); /* Use variable */
    border-radius: var(--border-radius-sm, 8px);
    border: 1px dashed var(--border-color); /* Use variable */
}

.image-preview-container.visible { /* Example class to show */
    display: flex;
}


.image-preview-item {
    position: relative;
    width: 100px; /* Preview size */
    height: 100px;
    border-radius: var(--border-radius-sm, 8px);
    overflow: hidden;
    box-shadow: 0 1px 3px var(--shadow-color); /* Use variable */
}

.image-preview-item img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area */
}

/* Remove button on preview */
.remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-color: var(--bg-overlay-dark); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none; /* Remove potential border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1; /* Ensure 'x' is centered */
    padding: 0; /* Reset padding */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.remove-image:hover {
    background-color: var(--bg-overlay-dark-hover); /* Use variable */
    transform: scale(1.1);
}

/* Responsive adjustments for image button */
@media (max-width: 868px) {
    #send-image-button {
        width: 42px; /* Match send button size */
        height: 42px;
    }
    #send-image-button .material-symbols-outlined {
        font-size: 1.4rem; /* Match send button icon size */
    }
    .image-preview-item {
        width: 80px;
        height: 80px;
    }
    /* Icon size adjustment from style3.css */
    #send-image-button .material-symbols-outlined {
        font-size: 1.4rem;
    }
}



/* LaTeX / MathJax Formatting Styles */

.latex-expression {
    overflow-x: auto; /* Allow horizontal scroll for long expressions */
    white-space: nowrap; /* Prevent wrapping */
    display: inline-block; /* Allow scroll */
    background-color: var(--bg-secondary); /* Use variable */
    padding: 4px 8px; /* Padding around expression */
    border: 1px solid var(--border-color); /* Use variable */
    max-width: 100%; /* Prevent overflow */
    margin: 4px 0; /* Vertical margin */
    border-radius: 4px; /* Slight rounding */
}


/* Style for the inner span if needed, though MathJax usually handles this */
.latex-expression span {
    display: inline-block; /* Ensure proper layout */
    min-width: min-content; /* Prevent unnecessary wrapping */
}

/* MathJax specific container styling */
mjx-container[jax="CHTML"][display="true"] {
    display: block; /* Ensure block display for centered equations */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: normal; /* Allow wrapping for display equations */
    /* background-color: #EEE; /* Slightly different background */
    padding: 8px; /* More padding for display */
    /* border: 1px solid #EEE; */
    max-width: 100%;
    margin: 8px 0; /* More margin for display */
    color: var(--text-primary); /* Use variable */
    /* top: 10px; /* Remove fixed positioning */
    border-radius: 4px;
}

/* Dark Mode */
body.dark-mode .latex-expression {
    background-color: var(--bg-input-focus); /* Use variable */
    border-color: var(--border-input); /* Use variable */
    color: var(--text-heading); /* Use variable */
}

body.dark-mode mjx-container[jax="CHTML"][display="true"] {
    /* background-color: var(--bg-input-focus); */ /* Use variable */
    /* border-color: var(--border-input); */ /* Use variable */
    color: var(--text-input); /* Use variable */
}

/* Overrides from style6.css */
mjx-container[jax="CHTML"][display="true"] {
    margin-top: -5px; /* Adjust top margin */
    margin-bottom: 25px; /* Increase bottom margin */
}
body.dark-mode mjx-container[jax="CHTML"][display="true"] {
    border: none; /* Remove border in dark mode */
    color: var(--text-heading); /* Use variable */
}

/* Styles from style7.css */
.math-display {
    margin: 1.2em 0;
    overflow-x: auto;
    max-width: 100%;
    padding: 0.5em 0;
}
.message.ai .MathJax { /* Specific to AI messages */
    color: inherit; /* Inherit color from parent */
    font-size: 1.05em; /* Slightly larger */
}
body.dark-mode .message.ai .MathJax {
    color: var(--text-heading); /* Use variable */
}
/* Ajuste para formulas grandes */
.MathJax_Display { /* Specific MathJax class */
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}



/* Login/Logout Button Component Styles (State-specific) */

/* Base styles might be in _header.css if it's part of the menu */
#loginButton {
    /* display: flex; */ /* Already in _header.css */
    /* align-items: center; */ /* Already in _header.css */
    /* gap: 8px; */ /* Already in _header.css */
    /* transition: all 0.3s ease; */ /* Already in _header.css */
    /* Add specific styles if needed */
    cursor: pointer;
    background: none;
    border: none;
    padding: 0; /* Reset padding if needed */
    font: inherit; /* Inherit font */
    color: inherit; /* Inherit color */
}

#loginButton .login-icon {
    font-size: 20px; /* Icon size */
    transition: transform 0.3s ease;
    vertical-align: middle; /* Align icon nicely */
}

#loginButton:hover .login-icon {
    transform: translateX(2px); /* Slight move on hover */
}

/* Adjust padding if it's also a menu-item */
#loginButton.menu-item {
    padding-right: 20px; /* Example adjustment */
}

/* Styles when logged IN (Logout state) */
#loginButton[data-logged="true"] {
    color: var(--accent-primary); /* Use variable */
}

#loginButton[data-logged="true"]:hover {
    /* Subtle background on hover when logged in */
    background-color: var(--accent-primary-bg-subtle); /* Use variable */
}

#loginButton[data-logged="true"] .login-icon {
    color: var(--accent-primary); /* Use variable */
}

/* Animation for state change (optional) */
@keyframes buttonStateChange {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply animation when state changes (requires JS to add/remove a class) */
/*
#loginButton.state-changing {
    animation: buttonStateChange 0.3s ease-in-out;
}
*/

/* Mobile specific overrides for login button (from style2.css) */
@media (max-width: 868px) {
    #loginButton {
        order: -1; /* Move to top in mobile menu */
        display: flex;
        width: 100%;
        padding: 15px 20px; /* Match mobile menu items */
        margin: 0;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid var(--border-subtle-light); /* Use variable */
        transition: background-color 0.2s ease;
        color: var(--text-input); /* Use variable */
    }

    #loginButton:hover {
        background-color: var(--border-subtle-light); /* Use variable */
    }

    /* Logged-in state in mobile menu */
    #loginButton[data-logged="true"] {
         color: var(--accent-primary); /* Use variable */
    }

    #loginButton[data-logged="true"]:hover {
        background-color: var(--accent-primary-bg-subtle); /* Use variable */
    }

     #loginButton[data-logged="true"] .login-icon {
         color: var(--accent-primary); /* Use variable */
     }
}



/* Media Buttons Component Styles */

  .media-buttons-container {
      position: relative; /* Anchor for the absolute tray */
      display: flex;
      align-items: center; /* Vertically align button */
  }

  .media-buttons-tray {
      position: absolute;
      bottom: calc(100% + 10px); /* Position above the toggle button with gap */
      left: 50%; /* Center horizontally */
      transform: translateX(-50%) scaleY(0); /* Start hidden and scaled down */
      display: flex;
      flex-direction: column; /* Stack buttons vertically */
      gap: 10px;
      padding: 10px;
      background: var(--bg-primary); /* Use variable */
      border-radius: 12px; /* Rounded corners */
      box-shadow: 0 4px 15px var(--shadow-color); /* Use variable */
      transform-origin: bottom; /* Animate scale from bottom */
      transition: transform 0.3s ease;
      z-index: 5; /* Ensure it's above input but below other elements */
  }

  .media-buttons-tray.active {
      transform: translateX(-50%) scaleY(1); /* Scale up when active */
  }

  /* Style for the toggle button itself */
  #media-toggle-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px; /* Match mobile button size */
      height: 42px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background-color: var(--accent-primary); /* Use variable */
      color: var(--text-on-accent); /* Use variable */
      cursor: pointer;
      transition: all 0.3s ease;
      flex-shrink: 0; /* Prevent shrinking */
  }

  #media-toggle-button.active {
      transform: rotate(45deg); /* Rotate to 'X' */
      background-color: var(--accent-primary-hover); /* Use variable */
  }

  /* Buttons inside the tray (e.g., draw, image upload) */
  /* Assuming they use IDs like #draw-button, #send-image-button */
  .media-buttons-tray button {
      /* Reset potential inherited styles */
      margin: 0;
      /* Ensure consistent size (match mobile buttons) */
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background-color: var(--bg-ai-message); /* Use variable, same as image upload */
      color: var(--text-input); /* Use variable */
      font-family: inherit;
      cursor: pointer;
      transition: background-color 0.2s ease;
      flex-shrink: 0;
  }

  .media-buttons-tray button:hover {
      background-color: var(--bg-subtle); /* Use variable */
  }

  .media-buttons-tray button .material-symbols-outlined {
      font-size: 1.4rem; /* Match mobile icon size */
  }

  /* Dark Mode Adjustments */
  body.dark-mode .media-buttons-tray {
      background-color: var(--bg-card); /* Use variable */
      box-shadow: 0 4px 15px var(--shadow-dark-strong); /* Use variable */
  }

  /* Adjust button styles inside tray for dark mode */
  body.dark-mode .media-buttons-tray button { /* Target all buttons inside */
      background-color: var(--bg-input-focus); /* Use variable */
      color: var(--text-input); /* Use variable */
  }

  body.dark-mode .media-buttons-tray button:hover {
      background-color: var(--border-input); /* Use variable */
  }

  /* Mobile adjustments */
  @media (max-width: 868px) {
      #media-toggle-button {
          width: 36px;
          height: 36px;
      }
  }



/* Message Content Specific Styles */

  /* Image container within messages */
  .message-image-container {
      display: flex; /* Layout images horizontally */
      overflow-x: auto; /* Allow horizontal scrolling */
      margin-bottom: 10px; /* Space below images */
      gap: 5px; /* Space between images */
      padding-bottom: 5px; /* Space for scrollbar */
      /* Scrollbar styles */
      scrollbar-width: thin;
      scrollbar-color: var(--accent-primary) var(--bg-subtle); /* Use variables */
  }

  .message-image-container::-webkit-scrollbar {
      height: 8px;
  }

  .message-image-container::-webkit-scrollbar-track {
      background: var(--bg-subtle); /* Use variable */
      border-radius: 4px;
  }

  .message-image-container::-webkit-scrollbar-thumb {
      background-color: var(--accent-primary); /* Use variable */
      border-radius: 4px;
      border: 2px solid var(--bg-subtle); /* Use variable */
  }

  /* Individual image style */
  .message-image {
      max-height: 200px; /* Limit image height */
      max-width: 200px; /* Limit image width */
      /* margin-right: 5px; /* Replaced by gap */
      border-radius: var(--border-radius-sm, 8px);
      object-fit: cover; /* Cover the area */
      display: block; /* Remove extra space */
      cursor: pointer; /* Indicate it might be clickable (e.g., for zoom) */
  }

  /* --- ADDED: File Display Styles --- */
  .message-files-container {
      display: flex;
      flex-direction: column; /* Stack files vertically */
      gap: 8px;
      margin-top: 10px; /* Space above files if there's text/images */
      margin-bottom: 5px; /* Space below files */
      padding: 8px 12px;
      background-color: rgba(var(--accent-primary-rgb), 0.05); /* Subtle accent background */
      border-radius: var(--border-radius-sm, 8px);
      border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  }

  .message-file-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
      color: var(--text-secondary); /* Use variable */
      background-color: var(--bg-subtle); /* Use variable */
      padding: 6px 10px;
      border-radius: 4px;
  }

  .message-file-item .material-symbols-outlined {
      font-size: 18px; /* Icon size */
      flex-shrink: 0;
      color: var(--accent-primary); /* Use variable */
  }

  .message-file-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-grow: 1;
  }

  /* Dark Mode File Display */
  body.dark-mode .message-files-container {
      background-color: rgba(var(--accent-primary-rgb), 0.15); /* Darker subtle accent */
      border-color: rgba(var(--accent-primary-rgb), 0.25);
  }

  body.dark-mode .message-file-item {
      background-color: var(--bg-card-hover); /* Use variable */
      color: var(--text-secondary); /* Use variable */
  }

  body.dark-mode .message-file-item .material-symbols-outlined {
      color: var(--accent-primary); /* Use variable */
  }
  /* --- END ADD --- */

  /* Add other message content styles here, e.g., code blocks, lists */
  /*
  .message pre { ... }
  .message ul { ... }
  */

  .message mark,
  .message-content mark {
      background-color: rgba(217, 41, 96, 0.15);
      color: var(--accent-primary, #D92960);
      padding: 2px 4px;
      border-radius: 4px;
      font-weight: 500;
  }

  /* List styling within AI messages */
  .message.ai ol,
  .message.ai ul {
      margin-left: 25px; /* Indent lists */
      padding-left: 0; /* Reset padding if needed */
      margin-top: 0.5em; /* Space above list */
      margin-bottom: 0.5em; /* Space below list */
  }

  .message.ai li {
      margin-bottom: 0.3em; /* Space between list items */
  }

  /* --- Audio Message Styles --- */

  .message-audio-container {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background-color: var(--bg-subtle); /* Slightly different background */
      border-radius: var(--border-radius-sm, 8px);
      min-width: 300px; /* Ensure it has some width */
      max-width: 100%; /* Don't overflow message bubble */
      margin-top: 8px; /* Space above audio if there's text */
  }

  /* Specific styling for user vs AI audio */
  .message.user .message-audio-container {
      background-color: rgba(255, 255, 255, 0.2); /* Lighter background for user */
  }
  body.dark-mode .message.user .message-audio-container {
      background-color: rgba(0, 0, 0, 0.2); /* Darker background for user in dark mode */
  }

  .audio-play-pause {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background-color: var(--accent-primary);
      color: var(--text-on-accent);
      cursor: pointer;
      transition: background-color 0.2s ease;
      flex-shrink: 0;
  }

  .audio-play-pause:hover {
      background-color: var(--accent-primary-hover);
  }

  .audio-play-pause .material-symbols-outlined {
      font-size: 1.5rem; /* Slightly smaller icon */
  }

  /* Placeholder for waveform/progress bar */
  .audio-waveform {
      flex-grow: 1;
      height: 30px; /* Example height */
      background-color: var(--border-color); /* Placeholder background */
      border-radius: 4px;
      /* In a real implementation, this would be replaced by a canvas or SVG */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8em;
      color: var(--text-secondary);
  }

  .audio-duration {
      font-size: 0.85em;
      color: var(--text-secondary);
      flex-shrink: 0;
      margin-left: 5px;
  }

  /* File preview styles in messages */
  .message-files-container {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .message-file-preview {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background-color: var(--bg-secondary);
      border-radius: var(--border-radius-sm);
      border: 1px solid var(--border-color);
  }

  .message-file-preview .material-symbols-outlined {
      font-size: 20px;
      color: var(--text-secondary);
  }

  .message-file-preview .file-name {
      flex-grow: 1;
      font-size: 0.9rem;
      color: var(--text-primary);
  }

  .view-pdf-button {
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      color: var(--accent-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease;
  }

  .view-pdf-button:hover {
      color: var(--accent-primary-hover);
  }

  .view-pdf-button .material-symbols-outlined {
      font-size: 18px;
  }

  /* Dark mode adjustments */
  body.dark-mode .message-file-preview {
      background-color: var(--bg-card);
      border-color: var(--border-input);
  }

  body.dark-mode .view-pdf-button {
      color: var(--accent-primary-dark);
  }

  body.dark-mode .view-pdf-button:hover {
      color: var(--accent-primary);
  }

  /* Mobile adjustments */
  @media (max-width: 868px) {
      .message-file-preview {
          padding: 6px 10px;
      }
      
      .message-file-preview .material-symbols-outlined {
          font-size: 18px;
      }
      
      .message-file-preview .file-name {
          font-size: 0.85rem;
      }
  }

  /* Memory change buttons inline */
  .memory-change-button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,0.15);
      background: var(--bg, #fff);
      color: var(--text-primary, #333);
      cursor: pointer;
      font-size: 12px;
      margin: 2px 0;
  }
  .memory-change-button:hover { background: rgba(0,0,0,0.04); }
  .memory-change-add { border-color: rgba(0,160,0,0.25); }
  .memory-change-delete { border-color: rgba(255,0,0,0.25); }
  
  /* Dark mode styles for memory change buttons */
  body.dark-mode .memory-change-button {
      background: var(--bg-card, #333);
      color: var(--text-primary, #f0f0f0);
      border-color: var(--border-input, #555);
  }
  body.dark-mode .memory-change-button:hover {
      background: var(--bg-card-hover, #444);
  }
  body.dark-mode .memory-change-add {
      border-color: rgba(0,200,0,0.4);
  }
  body.dark-mode .memory-change-delete {
      border-color: rgba(255,100,100,0.4);
  }

  /* Memory diff styling */
  .memory-diff-content { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; }
  .memory-diff-section { margin-bottom: 16px; }
  .memory-diff-title { font-weight: 600; margin-bottom: 8px; }
  .memory-diff-pre { background: var(--bg-elevated, #fafafa); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 10px; overflow: auto; }
  .memory-diff-deleted { background: #ffe6e6; color: #a40000; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
  .memory-diff-added { background: #e6ffed; color: #005a1a; border-radius: 3px; padding: 0 2px; }


/* Modal Component Styles (specifically for History Mobile Modal initially) */

.history-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Full screen overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full viewport height */
    background: var(--bg-primary); /* Use variable */
    z-index: 1100; /* High z-index */
    border: 2px solid var(--accent-primary);
    flex-direction: column; /* Stack header, content, footer */
    /* Add animation/transition if desired */
}

/* Style for when the modal is shown (JS adds/removes this class) */
.history-modal.show {
    display: flex;
}

.history-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color); /* Use variable */
    display: flex;
    justify-content: center; /* Center title */
    align-items: center;
    position: relative; /* For potential absolute elements like close buttons */
    flex-shrink: 0; /* Prevent header shrinking */
}

.history-modal-title {
    font-size: 1.2em;
    color: var(--bg-user-message); /* Use variable */
    font-weight: 600;
    margin: 0; /* Reset default margin */
}

.history-modal-content {
    flex: 1; /* Grow to fill available space */
    overflow-y: auto; /* Enable scrolling for content */
    padding: 20px;
    padding-bottom: 80px; /* Space for potential fixed footer/buttons */
    /* Scrollbar styles can be applied here or globally */
}

/* Optional overlay for behind the modal */
.history-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay-dark); /* Use variable */
    z-index: 1099; /* Below the modal */
    pointer-events: none; /* Não interfere com cliques quando invisível */
}

.history-modal-overlay.show {
    pointer-events: auto; /* Permite cliques quando visível */
}

.history-modal-overlay.show {
    display: block;
}


/* Specific close button for the mobile history modal */
.history-mobile-close {
    position: fixed; /* Fixed position relative to viewport */
    bottom: 20px; /* Position near bottom */
    left: 20px; /* Position on the left */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Circular button */
    background: var(--accent-primary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none;
    box-shadow: 0 2px 10px var(--shadow-color); /* Use variable */
    z-index: 1101; /* Above modal content */
    cursor: pointer;
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.history-mobile-close:hover {
    background: var(--accent-primary-hover); /* Use variable */
    transform: scale(1.05); /* Slight scale effect */
}

.history-mobile-close .material-symbols-outlined {
    font-size: 24px;
}

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

/* Modal header icon (brand/default) */
.modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    background: rgba(var(--accent-primary-rgb), 0.12);
}
.modal-icon span {
    color: var(--accent-primary);
    font-size: 28px;
}
/* Variant for warning (already used by delete deck) */
.modal-icon.warning {
    background: var(--warning-color-bg-subtle);
}
.modal-icon.warning span {
    color: var(--warning-color);
}

/* Small subtitle under modal title */
.modal-subtitle {
    margin: -6px 0 12px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Shared form controls used inside .modal-form */
.modal-form .form-group {
    display: flex;
    flex-direction: column;
}
.modal-form label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.95rem;
}
.modal-form input,
.modal-form textarea,
.modal-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--border-radius-sm);
    background: var(--bg-input);
    color: var(--text-input);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}
.modal-form textarea {
    min-height: 90px;
    resize: vertical;
}
.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-input-focus);
    background: var(--bg-input-focus);
}

/* Modal Overlay for new modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Header and Body for new modals */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.3em;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

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

.modal-body {
    color: var(--text-primary);
    line-height: 1.5;
}

.modal.esconde {
    display: none !important;
}

/* IMPORTANT: Limit the generic show rule to non-admin pages and non-notes modals
   Admin uses its own .modal.active toggling and should not be affected by this
   Notes modals have their own specific styling */
body:not(#adm) .modal:not(.esconde):not([id*="Modal"]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 30px;
    max-width: min(95vw, 800px);
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--border-color);
    margin: 10px;
}

/* Compact variant for simpler create/edit forms (reduces whitespace) */
.modal-content.compact-modal {
    padding: 20px 22px 18px;
    max-width: 560px; /* narrower for focus */
    border-radius: 14px;
}

@media (min-width: 900px) {
    .modal-content.compact-modal {
        max-width: 520px;
    }
}

/* Tighter heading spacing inside compact modals */
.compact-modal h4 {
    margin-bottom: 14px;
    font-size: 1.25em;
}

/* Denser form layout */
.compact-modal .modal-form .form-group {
    margin-bottom: 12px;
}

.compact-modal .modal-form .form-group:last-child {
    margin-bottom: 4px;
}

.compact-modal .modal-form label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    font-weight: 600;
}

.compact-modal .modal-form input,
.compact-modal .modal-form textarea,
.compact-modal .modal-form select {
    padding: 8px 10px;
    font-size: 0.85rem;
    border-radius: 5px;
}

.compact-modal .modal-form textarea {
    min-height: 70px;
}

/* Buttons slightly smaller & tighter gap */
.compact-modal + .modal-buttons,
.compact-modal ~ .modal-buttons {
    margin-top: 14px;
    gap: 10px;
}

.compact-modal + .modal-buttons .modal-button,
.compact-modal ~ .modal-buttons .modal-button {
    padding: 10px 18px;
    font-size: 0.9rem;
    border-radius: 6px;
}

/* Adjust close button position due to reduced padding */
.compact-modal .modal-close-button {
    top: 10px;
    right: 14px;
    font-size: 22px;
    width: 28px;
    height: 28px;
}

/* Dark mode inherits automatically; tweak inputs contrast if needed */
body.dark-mode .modal-content.compact-modal {
    background: var(--bg-primary);
}

@media (max-width: 768px) {
    .modal-content.compact-modal {
        padding: 16px 16px 14px;
        max-width: 95vw;
    }
    .compact-modal h4 {
        font-size: 1.15em;
        margin-bottom: 12px;
    }
    .compact-modal + .modal-buttons .modal-button,
    .compact-modal ~ .modal-buttons .modal-button {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .modal-content.compact-modal {
        padding: 14px 14px 12px;
    }
    .compact-modal h4 {
        font-size: 1.05em;
        margin-bottom: 10px;
    }
    .compact-modal .modal-form input,
    .compact-modal .modal-form textarea,
    .compact-modal .modal-form select {
        font-size: 0.82rem;
        padding: 7px 9px;
    }
}

/* Responsividade para o modal */
@media (max-width: 768px) {
    .modal-content {
        padding: 20px;
        max-width: 95vw;
        max-height: 95vh;
        margin: 5px;
        border-radius: 12px;
    }
    
    .modal h4 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        padding: 15px;
        max-width: 98vw;
        max-height: 98vh;
        margin: 2px;
    }
    
    .modal h4 {
        font-size: 1.1em;
        margin-bottom: 12px;
    }
    
    .modal-close-button {
        top: 10px;
        right: 15px;
        font-size: 20px;
        width: 25px;
        height: 25px;
    }
}

.modal-close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal h4 {
    margin: 0 0 20px 0;
    color: var(--text-primary);
    font-size: 1.4em;
    font-weight: 600;
}

/* Dark mode support */
body.dark-mode .modal-content {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

body.dark-mode .modal h4 {
    color: var(--text-primary);
}

body.dark-mode .modal-close-button {
    color: var(--text-secondary);
}

body.dark-mode .modal-close-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}


/* --- Confirmation Modal Styles --- */
@keyframes modalAppear { /* Define animation if not already present */
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.confirm-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay-dark); /* Use variable */
    z-index: 2000; /* High z-index */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0; /* Start transparent */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Não interfere com cliques quando invisível */
}

.confirm-modal-overlay.show {
    display: block; /* Show overlay */
    opacity: 1;
    pointer-events: auto; /* Permite cliques quando visível */
}

.confirm-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* Initial state for animation */
    pointer-events: none; /* Não interfere com cliques quando invisível */
    background: var(--bg-primary); /* Use variable */
    padding: 25px;
    border-radius: 15px; /* Larger radius */
    box-shadow: 0 10px 25px var(--shadow-dark-strong); /* Use variable */
    z-index: 2001; /* Above overlay */
    width: 90%;
    max-width: 400px; /* Max width */
    opacity: 0; /* Start transparent */
    border: 2px solid var(--accent-primary);
    /* animation: modalAppear 0.3s ease forwards; /* Apply animation */
}

/* Mobile adjustments for modal positioning */
@media (max-width: 768px) {
    .confirm-modal {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        margin: 0 !important;
        width: 90% !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .confirm-modal.show {
        transform: translate(-50%, -50%) scale(1) !important;
    }
    
    /* Ajustes específicos para o modal de configurações móvel */
    #mobile-settings-modal {
        width: 95% !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #mobile-settings-modal .confirm-modal-message {
        flex: 1 !important;
        overflow-y: auto !important;
        max-height: calc(85vh - 180px) !important;
        min-height: 0 !important;
        margin-bottom: 15px !important;
    }
    
    #mobile-settings-modal .mobile-settings-content {
        padding-right: 10px; /* Espaço para scrollbar */
    }
    
    #mobile-settings-modal .confirm-modal-buttons {
        flex-shrink: 0 !important;
        margin-top: 15px !important;
    }
    
    #mobile-settings-modal .confirm-modal-title,
    #mobile-settings-modal .confirm-modal-icon {
        flex-shrink: 0 !important;
    }
}

.confirm-modal.show {
    display: block; /* Show modal */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Final state for animation */
    animation: modalAppear 0.3s ease forwards; /* Trigger animation */
    pointer-events: auto; /* Permite cliques quando visível */
}

.confirm-modal-icon {
    width: 60px;
    height: 60px;
    background: var(--danger-color-bg-subtle); /* Use variable */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px; /* Center icon */
}

.confirm-modal-icon span { /* Assuming icon is a span, e.g., Material Icon */
    color: var(--danger-color); /* Use variable */
    font-size: 30px;
}

.confirm-modal-title {
    text-align: center;
    color: var(--text-primary); /* Use variable */
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.confirm-modal-message {
    text-align: center;
    color: var(--text-secondary); /* Use variable */
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.5;
}
/* Allow paragraphs inside message */
.confirm-modal-message p {
    margin: 0; /* Reset paragraph margin */
}
/* Allow icons inside message */
.confirm-modal-message .material-symbols-outlined {
     vertical-align: middle; /* Align icon nicely */
     margin: 0 0.2em;
}

.confirm-modal-buttons {
    display: flex;
    justify-content: center; /* Center buttons */
    gap: 15px;
}

.confirm-modal-button {
    padding: 12px 25px;
    border: none;
    border-radius: 8px; /* Consider var(--border-radius-sm) */
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-modal-button.cancel {
    background: var(--bg-secondary); /* Use variable */
    color: var(--text-primary); /* Use variable */
}

.confirm-modal-button.cancel:hover {
    background: var(--bg-dropdown-hover); /* Use variable */
}

.confirm-modal-button.delete {
    background: var(--danger-color); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
}

.confirm-modal-button.delete:hover {
    background: var(--danger-color-darker); /* Use variable */
}

/* Dark Mode for Confirmation Modal */
body.dark-mode .confirm-modal {
    background: var(--bg-card); /* Use variable */
    box-shadow: 0 10px 25px var(--shadow-dark-stronger); /* Use variable */
}
body.dark-mode .confirm-modal-title {
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .confirm-modal-message,
body.dark-mode .confirm-modal-message p,
body.dark-mode .confirm-modal-message .material-symbols-outlined {
    color: var(--text-secondary); /* Use variable */
}
body.dark-mode .confirm-modal-icon {
     background: var(--danger-color-bg-subtle-dark); /* Use variable */
}
body.dark-mode .confirm-modal-icon span {
     color: var(--danger-color-dark); /* Use variable */
}
body.dark-mode .confirm-modal-button.cancel {
    background: var(--bg-input-focus); /* Use variable */
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .confirm-modal-button.cancel:hover {
    background: var(--border-input); /* Use variable */
}
body.dark-mode .confirm-modal-button.delete {
    background: var(--danger-color-dark); /* Use variable */
    color: var(--bg-primary); /* Use variable */
}
body.dark-mode .confirm-modal-button.delete:hover {
    background: var(--danger-color-hover-dark); /* Use variable */
}
body.dark-mode .modal-gif { /* Style for potential GIF */
    box-shadow: 0 2px 5px var(--border-subtle-dark); /* Use variable */
}


/* --- Edit Title Modal Styles --- */
.edit-title-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* Initial state for animation */
    background: var(--bg-primary); /* Use variable */
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px var(--shadow-dark-strong); /* Use variable */
    z-index: 2001; /* Same level as confirm modal */
    width: 90%;
    max-width: 400px;
    opacity: 0; /* Start transparent */
    border: 2px solid var(--accent-primary);
    /* animation: modalAppear 0.3s ease forwards; /* Apply animation */
}

.edit-title-modal.show {
    display: block; /* Show modal */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Final state */
    animation: modalAppear 0.3s ease forwards; /* Trigger animation */
    /* Overlay should be shown separately using .confirm-modal-overlay.show */
}

.edit-title-modal-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-secondary-bg-subtle); /* Use variable */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.edit-title-modal-icon span { /* Assuming Material Icon */
    color: var(--accent-secondary); /* Use variable */
    font-size: 30px;
}

.edit-title-modal-title {
    text-align: center;
    color: var(--text-primary); /* Use variable */
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.edit-title-modal-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-input); /* Use variable */
    border-radius: var(--border-radius-sm); /* Use variable */
    margin: 15px 0;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.edit-title-modal-input:focus {
    outline: none;
    border-color: var(--accent-secondary); /* Use variable */
    box-shadow: var(--shadow-input-focus-secondary); /* Use variable */
}

.edit-title-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.edit-title-modal-button { /* Base class for buttons */
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-title-modal-button.cancel {
    background: var(--bg-secondary); /* Use variable */
    color: var(--text-primary); /* Use variable */
}

.edit-title-modal-button.cancel:hover {
    background: var(--bg-dropdown-hover); /* Use variable */
}

.edit-title-modal-button.save {
    background: var(--accent-secondary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
}

.edit-title-modal-button.save:hover {
    background: var(--accent-secondary-hover); /* Use variable */
}

/* Dark Mode for Edit Title Modal */
body.dark-mode .edit-title-modal {
    background: var(--bg-card); /* Use variable */
    box-shadow: 0 10px 25px var(--shadow-dark-stronger); /* Use variable */
}
body.dark-mode .edit-title-modal-title {
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .edit-title-modal-icon {
     background: var(--accent-secondary-bg-subtle-dark); /* Use variable */
}
body.dark-mode .edit-title-modal-icon span {
     color: var(--accent-secondary); /* Use variable */
}
body.dark-mode .edit-title-modal-input {
    background-color: var(--bg-input-focus); /* Use variable */
    color: var(--text-primary); /* Use variable */
    border-color: var(--border-input); /* Use variable */
}
body.dark-mode .edit-title-modal-input:focus {
    border-color: var(--accent-secondary); /* Use variable */
    box-shadow: var(--shadow-input-focus-secondary-dark); /* Use variable */
}
body.dark-mode .edit-title-modal-button.cancel {
    background: var(--bg-input-focus); /* Use variable */
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .edit-title-modal-button.cancel:hover {
    background: var(--border-input); /* Use variable */
}
body.dark-mode .edit-title-modal-button.save {
    background: var(--accent-secondary); /* Use variable */
    color: var(--bg-primary); /* Use variable */
}
body.dark-mode .edit-title-modal-button.save:hover {
    background: var(--info-color-dark); /* Use variable */
}

/* --- Modal Buttons Styles (for deck modals) --- */
.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.modal-button {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-button.cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-button.cancel:hover {
    background: var(--bg-dropdown-hover);
}

.modal-button.confirm {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.modal-button.confirm:hover {
    background: var(--accent-primary-hover);
}

.modal-button.delete {
    background: var(--danger-color);
    color: var(--text-on-accent);
}

.modal-button.delete:hover {
    background: var(--danger-color-darker);
}

/* Dark Mode for Modal Buttons */
body.dark-mode .modal-button.cancel {
    background: var(--bg-input-focus);
    color: var(--text-primary);
}

body.dark-mode .modal-button.cancel:hover {
    background: var(--border-input);
}

body.dark-mode .modal-button.confirm {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

body.dark-mode .modal-button.confirm:hover {
    background: var(--accent-primary-hover);
}

body.dark-mode .modal-button.delete {
    background: var(--danger-color-dark);
    color: var(--bg-primary);
}

body.dark-mode .modal-button.delete:hover {
    background: var(--danger-color-hover-dark);
}

/* --- PWA Schedule Notice Modal (one-time tip) --- */
#pwa-schedule-notice-modal {
    max-width: 520px;
}

.pwa-notice-content {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.pwa-notice-image {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
}

.pwa-notice-text {
    font-size: 0.98rem;
}

@media (max-width: 480px) {
    .pwa-notice-content {
        flex-direction: row;
        align-items: center;
    }
    .pwa-notice-image {
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }
    #pwa-schedule-notice-modal .confirm-modal-buttons {
        flex-direction: column;
    }
}

body.dark-mode .pwa-notice-image {
    box-shadow: 0 2px 8px var(--shadow-dark);
    border-color: var(--border-input);
}


/* --- Stop Confirmation Modal Specific Styles --- */
/* Reuses .confirm-modal structure, overrides icon and potentially colors */
#stop-confirmation-modal .confirm-modal-icon {
    background: var(--warning-color-bg-subtle); /* Use variable */
}
#stop-confirmation-modal .confirm-modal-icon span {
    color: var(--color-yellow); /* Use variable */
}

/* Optional: Override button colors if needed, otherwise uses confirm-modal defaults */
/* #stop-confirmation-modal .confirm-modal-button.delete { ... } */
/* #stop-confirmation-modal .confirm-modal-button.cancel { ... } */

/* Dark Mode for Stop Confirmation Modal */
body.dark-mode #stop-confirmation-modal .confirm-modal-icon {
    background: var(--warning-color-bg-subtle-dark); /* Use variable */
}
body.dark-mode #stop-confirmation-modal .confirm-modal-icon span {
     color: var(--color-yellow-dark); /* Use variable */
}
/* Dark mode button overrides inherit from .confirm-modal dark mode styles */


/* --- Timer Completion Modal Styles --- */
.timer-completion-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay-dark-hover); /* Use variable */
    z-index: 2100; /* Higher z-index */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.timer-completion-overlay.show {
    display: block;
    opacity: 1;
}

.timer-completion-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Initial state */
    background: var(--bg-primary); /* Use variable */
    padding: 30px;
    border-radius: 20px; /* Larger radius */
    box-shadow: 0 15px 30px var(--shadow-dark-stronger); /* Use variable */
    z-index: 2300; /* Above overlay */
    width: 90%;
    max-width: 500px;
    opacity: 0;
    border: 2px solid var(--accent-primary);
    /* animation: modalAppear 0.3s ease forwards; /* Use existing animation */
}

.timer-completion-modal.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Final state */
    animation: modalAppear 0.3s ease forwards; /* Trigger animation */
}

.timer-completion-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.timer-completion-title {
    color: var(--bg-user-message); /* Use variable */
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.celebration-icon { /* Assuming Material Icon */
    font-size: 2.5rem;
    color: var(--accent-primary); /* Use variable */
}

.timer-completion-message {
    color: var(--text-secondary); /* Use variable */
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center; /* Center message */
}

.timer-completion-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Allow buttons to wrap */
}

.timer-completion-button { /* Base class */
    padding: 14px 30px;
    border: none;
    border-radius: 10px; /* Consider var(--border-radius-md) */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.timer-completion-button.new-section {
    background-color: var(--accent-primary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
}

.timer-completion-button.new-section:hover {
    background-color: var(--accent-primary-hover); /* Use variable */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color); /* Use variable */
}

.timer-completion-button.continue-section {
    background-color: var(--bg-subtle); /* Use variable */
    color: var(--text-primary); /* Use variable */
}

.timer-completion-button.continue-section:hover {
    background-color: var(--bg-card-hover); /* Use variable */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color); /* Use variable */
}

/* Confetti Container (Positioned within modal) */
.confetti-container {
    position: absolute;
    top: -20%; /* Start above modal */
    left: 0;
    width: 100%;
    height: 120%; /* Extend below modal */
    overflow: visible; /* Allow confetti to go outside */
    pointer-events: none; /* Don't block interaction */
    perspective: 1000px; /* For 3D rotation */
    z-index: -1; /* Behind modal content */
}

.confetti-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    /* Multi-color gradient */
    background: linear-gradient(45deg, hsl(336, 100%, 60%) 0%, hsl(45, 100%, 60%) 20%, hsl(160, 100%, 60%) 40%, hsl(260, 100%, 60%) 60%, hsl(20, 100%, 60%) 80%);
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; /* Irregular shape */
    opacity: 0; /* Start hidden */
    /* Use CSS variables for animation properties */
    animation: confetti-explosion 2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Different shapes */
.confetti-particle:nth-child(3n) {
    width: 10px;
    height: 4px; /* Rectangle */
    border-radius: 2px;
}
.confetti-particle:nth-child(5n) {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Diamond */
}

@keyframes confetti-explosion {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.5);
    }
    20% {
        /* Move upwards and outwards with rotation */
        transform: translateY(-80vh) translateX(var(--tx, 0)) rotate(calc(var(--rotation, 0) * 1deg)) scale(1.2);
    }
    80% {
        opacity: 1;
        /* Start falling down */
        transform: translateY(calc(-40vh + var(--ty, 0))) translateX(calc(var(--tx, 0) * 2)) rotate(calc(var(--rotation, 0) * 5deg));
    }
    100% {
        opacity: 0;
        /* Fall further down */
        transform: translateY(100vh) translateX(calc(var(--tx, 0) * 4)) rotate(calc(var(--rotation, 0) * 10deg));
    }
}

/* Dark Mode for Timer Completion Modal */
body.dark-mode .timer-completion-modal {
    background-color: var(--bg-card); /* Use variable */
    box-shadow: 0 15px 30px var(--shadow-dark-stronger); /* Use variable */
}
body.dark-mode .timer-completion-title {
    color: var(--text-heading); /* Use variable */
}
body.dark-mode .timer-completion-message {
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .timer-completion-button.continue-section {
    background-color: var(--bg-input-focus); /* Use variable */
    color: var(--text-primary); /* Use variable */
}
body.dark-mode .timer-completion-button.continue-section:hover {
    background-color: var(--border-input); /* Use variable */
}
/* New section button keeps accent color */

/* --- Session Resume Notification Styles --- */
.session-resume-notification {
    position: fixed;
    top: 80px; /* Below header */
    right: -400px; /* Hidden initially */
    width: 380px;
    background: var(--bg-primary);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    box-shadow: 0 8px 25px var(--shadow-dark-stronger);
    z-index: 1500;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.session-resume-notification.show {
    right: 20px; /* Slide in from right */
}

.session-notification-content {
    padding: 20px;
}

.session-notification-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    position: relative;
}

.session-notification-icon {
    font-size: 1.8rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.session-notification-title {
    color: var(--text-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    flex-grow: 1;
}

.session-notification-close {
    position: absolute;
    top: -5px;
    right: -5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    color: var(--text-secondary);
}

.session-notification-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.session-notification-close .material-symbols-outlined {
    font-size: 1.2rem;
}

.session-notification-message {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 18px;
    margin-top: 0;
}

.session-notification-buttons {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.session-notification-button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.session-notification-button.primary {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.session-notification-button.primary:hover {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--shadow-color);
}

.session-notification-button.secondary {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.session-notification-button.secondary:hover {
    background-color: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--shadow-color);
}

/* Dark Mode for Session Resume Notification */
body.dark-mode .session-resume-notification {
    background-color: var(--bg-card);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 25px var(--shadow-dark-stronger);
}

body.dark-mode .session-notification-title {
    color: var(--text-heading);
}

body.dark-mode .session-notification-message {
    color: var(--text-primary);
}

body.dark-mode .session-notification-button.secondary {
    background-color: var(--bg-input-focus);
    color: var(--text-primary);
    border-color: var(--border-input);
}

body.dark-mode .session-notification-button.secondary:hover {
    background-color: var(--border-input);
}

/* Mobile responsiveness for notification */
@media (max-width: 768px) {
    .session-resume-notification {
        width: calc(100vw - 40px);
        right: -100vw;
        top: 70px;
    }
    
    .session-resume-notification.show {
        right: 20px;
    }
    
    .session-notification-buttons {
        flex-direction: row;
    }
    
    .session-notification-button {
        flex: 1;
    }
}

/* Estilos para modais móveis */
.mobile-legend-content,
.mobile-settings-content {
    text-align: left;
}

.mobile-legend-content .pomodoro-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mobile-legend-content .color-sample {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.mobile-legend-content .work-color {
    background: var(--accent-primary);
}

.mobile-legend-content .short-break-color {
    background: var(--info-color, #4A90E2);
}

.mobile-legend-content .long-break-color {
    background: var(--warning-color, #F5A623);
}

.mobile-legend-content .legend-label {
    font-size: 14px;
    color: var(--text-primary);
}

.mobile-legend-content .pomodoro-legend-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.mobile-legend-content .pomodoro-legend-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.mobile-settings-content .pomodoro-setting {
    margin-bottom: 15px;
}

.mobile-settings-content .pomodoro-setting label {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-weight: 500;
}

.mobile-settings-content .pomodoro-setting input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
}

.mobile-settings-content .pomodoro-setting input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-input-focus);
}

.mobile-settings-content .presets-button {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mobile-settings-content .presets-button:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.mobile-settings-content .save-preset-section {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.mobile-settings-content .preset-name-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
}

.mobile-settings-content .save-preset-button {
    width: 40px;
    height: 40px;
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-settings-content .save-preset-button:hover {
    background: var(--accent-primary-hover);
}

/* Dark mode para modais móveis */
body.dark-mode .mobile-legend-content .legend-label {
    color: var(--text-primary);
}

body.dark-mode .mobile-settings-content .pomodoro-setting label {
    color: var(--text-primary);
}

body.dark-mode .mobile-settings-content .pomodoro-setting input {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .mobile-settings-content .presets-button {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .mobile-settings-content .preset-name-input {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Color Picker Inline Styling */
.color-picker-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px;
    border-radius: var(--border-radius-sm, 8px);
    background-color: var(--bg-secondary, #f8f9fa);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.color-picker-inline:hover {
    background-color: var(--bg-hover-subtle, #f1f3f4);
}

.color-picker-inline input[type="color"] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border-color, #ced4da);
    border-radius: var(--border-radius-sm, 8px);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.color-picker-inline input[type="color"]:hover,
.color-picker-inline input[type="color"]:focus {
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    outline: none;
}

.color-picker-inline .hex-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ced4da);
    border-radius: var(--border-radius-sm, 8px);
    background-color: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    font-size: 14px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.color-picker-inline .hex-input:hover {
    border-color: var(--border-color-hover, #adb5bd);
}

.color-picker-inline .hex-input:focus {
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    outline: none;
}

.color-picker-inline .btn {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 60px;
}

/* Dark mode for color picker */
body.dark-mode .color-picker-inline {
    background-color: var(--dm-bg-card, #333);
}

body.dark-mode .color-picker-inline:hover {
    background-color: var(--dm-bg-card-hover, #444);
}

body.dark-mode .color-picker-inline input[type="color"] {
    border-color: var(--dm-border-color, #444);
}

body.dark-mode .color-picker-inline input[type="color"]:hover,
body.dark-mode .color-picker-inline input[type="color"]:focus {
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
}

body.dark-mode .color-picker-inline .hex-input {
    background-color: var(--dm-bg-card, #333);
    border-color: var(--dm-border-color, #444);
    color: var(--dm-text-primary, #f0f0f0);
}

body.dark-mode .color-picker-inline .hex-input:hover {
    border-color: var(--dm-border-color-hover, #555);
}

body.dark-mode .color-picker-inline .hex-input:focus {
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
}


/* --- App Modal (Unified Pattern, based on unlock modal) --- */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 4000;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.app-modal-backdrop.visible { display: flex; }
.app-modal-backdrop.shown { opacity: 1; }

.app-modal {
    width: min(520px, 100%);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-input, #ced4da);
    border-radius: 12px;
    box-shadow: var(--shadow-dark-modal, 0 15px 40px rgba(var(--text-primary-rgb, 0,0,0,0).2));
    transform: translateY(8px) scale(0.98);
    opacity: 0.98;
    transition: transform 0.2s ease, opacity 0.2s ease;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}
.app-modal-backdrop.shown .app-modal { transform: translateY(0) scale(1); opacity: 1; }

.app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-input, #ced4da);
}
.app-modal-title { margin: 0; font-size: 1.1rem; color: var(--text-heading, #343a40); }
.app-modal-close {
    border: none;
    background: transparent;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: 8px;
    padding: 6px;
}
.app-modal-close:hover { background: var(--bg-hover, #f1f3f5); }

.app-modal-body { padding: 16px; line-height: 1.5; flex: 1; overflow-y: auto; }

.app-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
}
.app-modal-actions .btn-secondary {
    background: var(--bg-card-hover, #f1f3f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-input, #ced4da);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
}
.app-modal-actions .btn-primary {
    background: linear-gradient(135deg, var(--brand-primary, #292C6D), var(--accent-primary, var(--accent-primary)));
    color: var(--text-on-accent, #fff);
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.25);
}
.app-modal-actions .btn-secondary:hover { filter: brightness(0.98); }
.app-modal-actions .btn-primary:hover { filter: brightness(1.03); }

/* Presets modal: two columns on desktop (left list, right form) */
@media (min-width: 900px) {
    .app-modal.is-presets { width: min(960px, 96vw); }
    .app-modal.is-presets .app-modal-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: start;
    }
    .app-modal.is-presets .presets-modal-content { min-width: 0; }
    .app-modal.is-presets .app-modal-form {
        min-width: 0;
        border-left: 2px solid var(--border-input, #ced4da);
        padding-left: 24px;
    }
}

/* Inputs and form controls inside App Modal */
.app-modal-label { display:block; font-weight:600; margin-top:.5rem; color: var(--text-primary, #212529); }
.app-modal-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-input, #ced4da);
    border-radius: 8px;
    background: var(--bg-input, #fff);
    color: var(--text-input, #212529);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    box-sizing: border-box;
}
.app-modal-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.12);
    background: var(--bg-input-focus, #fff);
}
.app-modal-input::placeholder { color: var(--text-secondary, #6c757d); opacity: .85; }
.app-modal-body .app-modal-input { margin-top: 8px; }
.app-modal-form { display: block; }
.app-modal-form .app-modal-input { margin-bottom: .5rem; }
.app-modal-error { display: none; color: var(--danger-color, #B00020); font-size: .85rem; margin-top: .25rem; }
/* Dark mode for App Modal inputs */
body.dark-mode .app-modal-input {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-input, #4d4d4d);
}
body.dark-mode .app-modal-input:focus {
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.18);
    background: var(--bg-input-focus, #1f1f1f);
}

/* Variants (optional hooks) */
.app-modal.is-danger .app-modal-title { color: var(--danger-color, #d32f2f); }
.app-modal.is-success .app-modal-title { color: var(--success-color, #2e7d32); }
.app-modal.is-warning .app-modal-title { color: var(--warning-color, #ff9800); }

/* Dark mode */
body.dark-mode .app-modal {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-input, #4d4d4d);
    box-shadow: var(--shadow-dark-modal, 0 15px 40px rgba(var(--text-primary-rgb, 0,0,0,0).4));
}
body.dark-mode .app-modal-header { border-bottom-color: var(--border-input, #4d4d4d); }
body.dark-mode .app-modal-close:hover { background: var(--bg-light-hover-subtle-dark, rgba(var(--bg-primary-rgb, 255,255,255,0).05)); }
body.dark-mode .app-modal-actions .btn-secondary {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-input, #4d4d4d);
}



/* Offline Screen Component Styles */

.offline-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    padding: 20px;
    overflow: auto;
}

.offline-screen.active {
    opacity: 1;
    visibility: visible;
}

.offline-container {
    max-width: 500px;
    width: 100%;
    text-align: center;
    padding: 30px;
    border-radius: var(--border-radius-md);
    background: var(--bg-card);
    box-shadow: 0 10px 30px var(--shadow-color);
    position: relative;
    overflow: hidden;
    animation: slideUpFade 0.6s ease forwards;
}

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

.offline-icon-container {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offline-icon-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--bg-user-message), var(--accent-primary));
    opacity: 0.1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.2;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.1;
    }
}

.offline-icon {
    font-size: 60px;
    color: var(--accent-primary);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.offline-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-heading);
    background: linear-gradient(45deg, var(--bg-user-message), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.offline-message {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.5;
}

.reconnect-button {
    padding: 12px 24px;
    background: linear-gradient(45deg, var(--bg-user-message), var(--accent-primary));
    color: var(--text-on-accent);
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--accent-primary-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}

.reconnect-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb), 0.4);
}

.reconnect-button:active {
    transform: translateY(-1px);
}

.reconnect-button .material-symbols-outlined {
    font-size: 20px;
}

.reconnect-status {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    height: 20px;
    transition: opacity 0.3s ease;
}

.reconnect-status.attempting {
    color: var(--warning-color);
}

.reconnect-status.success {
    color: var(--success-color);
}



.offline-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.offline-dot {
    width: 4px;
    height: 4px;
    margin: 0 2px;
    border-radius: 50%;
    background-color: currentColor;
    animation: dotPulse 1.5s infinite;
}

.offline-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.offline-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Dark Mode */
body.dark-mode .offline-container {
    background: var(--bg-card);
}

body.dark-mode .offline-icon-circle {
    background: linear-gradient(45deg, var(--bg-user-message), var(--accent-primary));
    opacity: 0.2;
}

/* Responsiveness */
@media (max-width: 768px) {
    .offline-container {
        max-width: 90%;
        padding: 25px;
    }
    
    .offline-icon-container {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
    }
    
    .offline-icon {
        font-size: 50px;
    }
    
    .offline-title {
        font-size: 1.7rem;
    }
    
    .offline-message {
        font-size: 1rem;
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {
    .offline-container {
        max-width: 95%;
        padding: 20px;
    }
    
    .offline-icon-container {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
    }
    
    .offline-icon {
        font-size: 40px;
    }
    
    .offline-title {
        font-size: 1.5rem;
    }
    
    .offline-message {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    .reconnect-button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}



/* --- BREAK GAMES MENU --- */
.break-games-title {
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-primary), #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
}

.break-games-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), #3b82f6);
    border-radius: 2px;
}

.break-games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-items: center;
    align-items: stretch;
    margin: 0 auto;
    max-width: 340px;
}

.break-game-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1);
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    min-width: 130px;
    min-height: 100px;
    outline: none;
    user-select: none;
}

.break-game-btn:hover, .break-game-btn:focus {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.12);
    border-color: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    background: rgba(255, 255, 255, 0.95);
}

.break-game-btn:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.08);
}

.break-game-btn .material-symbols-outlined {
    font-size: 2.2rem;
    color: var(--accent-primary);
    margin-bottom: 4px;
    filter: drop-shadow(0 1px 2px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.15));
    transition: all 0.2s;
}

.break-game-btn[disabled] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.5), rgba(107, 114, 128, 0.5));
    cursor: not-allowed;
    opacity: 0.5;
    color: var(--text-secondary);
    border-color: rgba(156, 163, 175, 0.3);
    pointer-events: none;
}

.break-game-btn:disabled .material-symbols-outlined {
    color: var(--text-secondary);
    filter: none;
}
@media (max-width: 600px) {
    .break-games-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 100vw;
    }
    .break-game-btn {
        min-width: 90px;
        min-height: 70px;
        font-size: 1rem;
        padding: 14px 0 10px 0;
    }
    .break-game-btn .material-symbols-outlined {
        font-size: 1.5rem;
    }
}
.break-mobile-layout {
  display: none;
}
.break-mobile-row1, .break-mobile-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.break-mobile-row1 {
  margin-bottom: 10px;
}
.break-mobile-row1 .break-icon {
  font-size: 32px;
  margin-bottom: 0;
  margin-right: 10px;
}
.break-mobile-row1 .pomodoro-break-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.break-mobile-row2 .pomodoro-break-timer {
  font-size: 24px;
  margin-right: 10px;
}
.break-mobile-row2 .pomodoro-break-button {
  padding: 8px 16px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .pomodoro-break-content {
    padding: 20px;
    border-radius: 20px;
  }
  
  .break-modal-layout {
    flex-direction: column;
    gap: 20px;
    min-height: auto;
  }
  
  .break-content-left,
  .break-content-right {
    flex: none;
    width: 100%;
    padding: 20px;
  }
  
  .break-games-grid {
    max-width: 100%;
    gap: 16px;
  }
  
  .break-game-btn {
    min-width: 110px;
    min-height: 85px;
    padding: 16px 12px 12px 12px;
  }
  
  .break-game-btn .material-symbols-outlined {
    font-size: 1.8rem;
  }
}

@media (max-width: 640px) {
  .break-mobile-layout {
    display: block;
    margin-bottom: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 217, 41, 96), 0.08) 0%, rgba(var(--accent-primary-rgb, 217, 41, 96), 0.04) 100%);
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.15);
  }
  
  .break-mobile-row1 {
    margin-bottom: 12px;
  }
  
  .break-mobile-row1 .break-icon {
    font-size: 36px;
    margin-bottom: 0;
    margin-right: 12px;
    animation: breathe 3s ease-in-out infinite;
  }
  
  .break-mobile-row1 .pomodoro-break-title {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .break-mobile-row2 .pomodoro-break-timer {
    font-size: 28px;
    font-weight: 800;
    margin-right: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-radius: 16px;
    border: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    box-shadow: 0 4px 15px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.15);
    backdrop-filter: blur(10px);
  }
  
  .break-mobile-row2 .pomodoro-break-button {
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 12px;
    font-weight: 600;
  }
  
  .pomodoro-break-header,
  .pomodoro-break-message,
  .pomodoro-break-timer:not(.break-mobile-row2 .pomodoro-break-timer),
  .pomodoro-break-buttons {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .break-sudoku-top-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    padding: 0 5px;
  }
  .break-lives-container {
    order: 1;
    margin-right: auto;
  }
  .break-sudoku-message {
    order: 2;
    margin: 0 8px;
    flex: 1 1 auto;
    text-align: center;
  }
  .break-sudoku-controls {
    order: 3;
    margin-left: auto;
    margin-top: 0;
    gap: 4px;
    justify-content: flex-end;
  }
}
/* Pomodoro Configuration Styles */
.study-time-layout {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    overflow: visible; /* Alterado para visible para permitir que o painel de configurações apareça completamente */
    min-height: 450px; /* Garante altura mínima para o painel lateral */
    transition: all 0.5s ease;
    padding: 0; /* Remove o padding para evitar problemas com o posicionamento */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

.study-time-main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    background: linear-gradient(135deg, #f9f9f9, #fff); /* Gradiente para o tema claro */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: relative; /* Garante que o z-index funcione corretamente */
    transition: all 0.3s ease;
    border: 2px solid var(--accent-primary);
    backdrop-filter: blur(5px);
    transform: translateZ(0); /* Ativa a aceleração de hardware */
    width: 100%; /* Garante que o painel ocupe toda a largura disponível */
    max-width: 100%; /* Evita que o painel ultrapasse o container */
}

/* Estilo para o tema escuro */
body.dark-mode .study-time-main-panel {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-primary);
}

.pomodoro-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 0px 30px;
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(2px);
    transition: all 0.3s ease;
    border: 1px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.pomodoro-toggle-container:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.pomodoro-toggle-label {
    margin-left: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

body.dark-mode .pomodoro-toggle-label {
    color: #f0f0f0;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

input:checked + .toggle-slider {
    background-color: var(--accent-primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:focus + .toggle-slider {
    box-shadow: 0 0 3px var(--accent-primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
    background-color: white;
}

/* Pomodoro Settings Panel */
.pomodoro-settings-panel {
    position: absolute;
    top: 5%;
    left: 100%; /* Posiciona exatamente no final do container pai */
    width: 320px;
    height: 90%;
    background-color: var(--card-bg-light);
    border-radius: 0 12px 12px 0;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease, z-index 0s linear 0.25s;
    transform: translateX(-100%); /* Inicialmente escondido atrás do painel principal */
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

.pomodoro-settings-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to right, rgba(var(--text-primary-rgb, 0,0,0,0).05), transparent);
    z-index: 0;
}

.pomodoro-settings-panel.active {
    transform: translateX(0); /* Mostra o painel completamente */
    opacity: 1;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease, z-index 0s;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.15);
}

.pomodoro-settings-content {
    padding: 30px 20px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) transparent;
}

.pomodoro-settings-content::-webkit-scrollbar {
    width: 6px;
}

.pomodoro-settings-content::-webkit-scrollbar-track {
    background: transparent;
}

.pomodoro-settings-content::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
    border-radius: 6px;
}

.pomodoro-settings-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.pomodoro-settings-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 3px;
}

body.dark-mode .pomodoro-settings-title {
    color: #f0f0f0;
}

.pomodoro-setting {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.05);
    padding: 18px;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.pomodoro-setting:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

body.dark-mode .pomodoro-setting {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .pomodoro-setting:hover {
    background: rgba(0, 0, 0, 0.3);
}

.pomodoro-setting label {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.pomodoro-setting label::before {
    content: '•';
    color: var(--accent-primary);
    margin-right: 8px;
    font-size: 18px;
}

body.dark-mode .pomodoro-setting label {
    color: #e0e0e0;
}

.pomodoro-setting input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-primary);
    background-color: var(--input-bg);
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Remove as setas de incremento/decremento nos inputs numéricos */
    -moz-appearance: textfield;
    appearance: textfield; /* Propriedade padrão para compatibilidade */
}

/* Remove as setas de incremento/decremento nos inputs numéricos para Chrome, Safari, Edge, Opera */
.pomodoro-setting input::-webkit-outer-spin-button,
.pomodoro-setting input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pomodoro-setting input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    outline: none;
}

.pomodoro-setting input:hover {
    border-color: var(--accent-primary);
}

body.dark-mode .pomodoro-setting input {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.1);
}

.pomodoro-setting:last-child {
    margin-bottom: 0;
}

.pomodoro-setting label {
    font-size: 14px;
    color: var(--text-primary);
}

.pomodoro-setting input {
    width: 70px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--input-bg);
}

/* Pomodoro Break Modal */
.pomodoro-break-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 900px;
    z-index: 1001;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Melhorias de responsividade para PC - quando jogos estiverem ativos */
@media (min-width: 1024px) {
    .pomodoro-break-modal:has(.break-memory-game-container),
    .pomodoro-break-modal:has(.break-sudoku-container) {
        max-width: 1200px;
        width: 92%;
    }
}

@media (min-width: 1200px) {
    .pomodoro-break-modal:has(.break-memory-game-container),
    .pomodoro-break-modal:has(.break-sudoku-container) {
        max-width: 1400px;
        width: 88%;
    }
}

.pomodoro-break-modal.show {
    display: block;
    animation: modalAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pomodoro-break-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 32px;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Melhorias do conteúdo da pausa para PC - quando jogos estiverem ativos */
@media (min-width: 1024px) {
    .pomodoro-break-content:has(.break-memory-game-container),
    .pomodoro-break-content:has(.break-sudoku-container) {
        padding: 35px;
    }
}

@media (min-width: 1200px) {
    .pomodoro-break-content:has(.break-memory-game-container),
    .pomodoro-break-content:has(.break-sudoku-container) {
        padding: 45px;
    }
}

.break-modal-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    min-height: 400px;
}

.break-content-left {
    flex: 1;
    text-align: center;
    align-self: center;
    padding: 24px;
    background: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.04);
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.15);
    position: relative;
}

.break-content-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-primary);
    opacity: 0.4;
    border-radius: 2px 2px 0 0;
}

.break-content-right {
    flex: 1;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
}

.break-content-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 2px 2px 0 0;
}

/* Melhorias do conteúdo direito para PC - quando jogos estiverem ativos */
@media (min-width: 1024px) {
    .break-content-right:has(.break-memory-game-container),
    .break-content-right:has(.break-sudoku-container) {
        padding: 30px;
    }
}

@media (min-width: 1200px) {
    .break-content-right:has(.break-memory-game-container),
    .break-content-right:has(.break-sudoku-container) {
        padding: 40px;
    }
}

.pomodoro-break-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
    position: relative;
}

.break-icon {
    font-size: 52px;
    color: var(--accent-primary);
    margin-bottom: 16px;
    filter: drop-shadow(0 2px 4px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2));
}

.pomodoro-break-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    background: linear-gradient(135deg, var(--accent-primary), #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pomodoro-break-message {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-weight: 500;
    opacity: 0.9;
}

.pomodoro-break-timer {
    font-size: 38px;
    font-weight: 700;
    color: var(--accent-primary);
    margin: 24px 0;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    display: inline-block;
    min-width: 140px;
    border: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1);
}

.pomodoro-break-buttons {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    gap: 16px;
}

.confirm-button {
    margin-top: 32px;
    padding: 14px 28px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
    display: inline-block;
    text-align: center;
    letter-spacing: 0.3px;
}

.confirm-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.4);
    background: var(--accent-primary-hover, var(--accent-primary-hover));
}

.confirm-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
}

.pomodoro-break-button {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
    letter-spacing: 0.3px;
}

.pomodoro-break-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.4);
    background: var(--accent-primary-hover);
}

.pomodoro-break-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
}

.pomodoro-break-button.skip-break {
    background: #6b7280;
    color: white;
}

.pomodoro-break-button.skip-break:hover {
    background: #4b5563;
    box-shadow: 0 6px 18px rgba(75, 85, 99, 0.3);
}

.pomodoro-break-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.pomodoro-break-overlay.show {
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes modalAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Dark Mode Adjustments */
body.dark-mode .pomodoro-settings {
    background-color: var(--card-bg-dark);
}

body.dark-mode .pomodoro-break-content {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .break-content-left {
    background: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.12);
    border: 1px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
}

body.dark-mode .break-content-right {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .break-content-right::before {
    background: rgba(59, 130, 246, 0.6);
}

body.dark-mode .pomodoro-break-timer {
    background: rgba(40, 40, 40, 0.9);
    border: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .break-game-btn {
    background: rgba(40, 40, 40, 0.9);
    border: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
    color: var(--text-primary);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

body.dark-mode .break-game-btn:hover {
    box-shadow: 0 15px 35px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
    border-color: var(--accent-primary);
}

body.dark-mode .break-game-btn:disabled {
    background: rgba(60, 60, 60, 0.5);
    border-color: rgba(100, 100, 100, 0.3);
}

/* Dark Mode Mobile Adjustments */
@media (max-width: 640px) {
  body.dark-mode .break-mobile-layout {
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(75, 85, 99, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }
  
  body.dark-mode .break-mobile-row2 .pomodoro-break-timer {
    background: rgba(55, 65, 81, 0.9);
    border: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
    box-shadow: 0 4px 15px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.15);
  }
}

/* Break Sudoku Styles */
.break-sudoku-container {
    text-align: center;
}

.break-sudoku-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 15px 0;
}

.break-sudoku-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.break-sudoku-main {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.break-sudoku-board-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.break-sudoku-top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    min-height: 25px;
}

.break-lives-container {
    display: flex;
    gap: 3px;
    color: var(--danger-color);
}

.break-lives-container .material-symbols-outlined {
    font-size: 20px;
}

.break-sudoku-board {
    border-collapse: collapse;
    border: 2px solid  var(--brand-primary);
    box-shadow: 0 2px 4px rgba(var(--text-primary-rgb, 0,0,0,0).1);
    min-width: 250px;
}

.break-sudoku-board td {
    width: 30px;
    height: 30px;
    text-align: center;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.break-sudoku-board tr:nth-child(3n) td { border-bottom: 2px solid var(--brand-primary); }
.break-sudoku-board td:nth-child(3n) { border-right: 2px solid var(--brand-primary); }
.break-sudoku-board tr:last-child td { border-bottom: 2px solid var(--brand-primary); }
.break-sudoku-board td:last-child { border-right: 2px solid var(--brand-primary); }

.break-cell-input {
    width: 100%;
    height: 100%;
    min-width: 7px;
    min-height: 7px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--accent-primary);
    background-color: transparent;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.break-cell-input:focus { outline: none; }

/* Remove spinners dos inputs number */
.break-cell-input::-webkit-outer-spin-button,
.break-cell-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.break-cell-input[type=number] {
    -moz-appearance: textfield;
}

.break-given-number {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: background-color 0.2s;
}

.break-highlight { background-color: rgba(var(--accent-primary-rgb), 0.1) !important; }
.break-selected-cell { background-color: rgba(var(--accent-primary-rgb), 0.2) !important; }

.break-sudoku-board td.break-highlight .break-given-number {
    background-color: transparent;
}

.break-incorrect {
    animation: shake 0.3s ease-in-out;
}

.break-incorrect::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--danger-bg-subtle);
    z-index: -1;
}

.break-cell-input.break-incorrect {
    color: var(--danger-color) !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}

.break-sudoku-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.break-sudoku-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    color: white;
    transition: all 0.3s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.break-sudoku-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

#break-new-game-btn { background-color: var(--success-color); }
#break-solve-btn { background-color: var(--warning-color); }

.break-sudoku-message {
    font-size: 12px;
    font-weight: 600;
    height: 20px;
    text-align: center;
    transition: color 0.3s;
}

.break-sudoku-message.success { color: var(--success-color); }
.break-sudoku-message.error { color: var(--danger-color); }

.break-number-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    max-width: 120px;
    align-self: center;
}

@media (max-width: 768px) {
  .break-number-pad {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: stretch;
    align-items: center;
    gap: 3px;
    max-width: 100vw;
    width: 100%;
    margin: 0 auto 10px auto;
    padding: 0 2vw;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
  }
  .break-num-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 44px;
    width: 1%;
    margin: 0 1px;
    box-sizing: border-box;
  }
}

.break-num-btn {
    width: 35px;
    height: 35px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.break-num-btn:hover {
    background-color: var(--bg-subtle);
    transform: translateY(-1px);
}

.break-num-btn.break-erase-btn {
    grid-column: span 3;
    background-color: var(--bg-subtle);
}

.break-num-btn.break-erase-btn:hover {
    background-color: var(--danger-bg-subtle);
    color: var(--danger-color);
}

/* Responsive adjustments for break modal */
@media (max-width: 768px) {
    .pomodoro-break-modal {
        width: 95%;
        max-width: 95vw;
        max-height: 90vh;
        overflow: hidden;
    }
    
    .pomodoro-break-content {
        padding: 15px;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .break-modal-layout {
        flex-direction: column;
        gap: 15px;
    }
    
    .break-content-left,
    .break-content-right {
        flex: none;
        width: 100%;
    }
    
    .break-content-right {
        padding: 15px;
    }
    
    .break-sudoku-main {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
.break-sudoku-board td {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}
    
    .break-cell-input {
        font-size: 14px;
    }
    
    .break-given-number {
        font-size: 14px;
    }

    #break-sudoku-board tr td {
  padding: 7px 13px;
}

    
    .break-number-pad {
        margin-top: 8px;
        max-width: 105px;
    }
    
    .break-num-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .break-sudoku-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .break-sudoku-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .pomodoro-break-title {
        font-size: 20px;
    }
    
    .pomodoro-break-timer {
        font-size: 28px;
        margin: 15px 0;
        padding: 8px;
    }
    
    .pomodoro-break-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Media Queries para Responsividade */
/* Esconder botões móveis no desktop */
.mobile-controls {
    display: none;
}

@media (max-width: 1024px) {
    .study-time-layout {
        max-width: 650px;
    }
    
    .pomodoro-settings-panel {
        width: 320px;
        padding: 30px;
    }
}

@media (min-width: 641px) {
    /* Forçar esconder botões móveis em telas maiores que 640px */
    .mobile-controls {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .study-time-main-panel {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .study-time-layout {
        max-width: 90%;
    }
    
    .study-time-main-panel {
        padding: 25px;
    }
    
    .pomodoro-settings-panel {
        width: 280px;
    }
    
    .pomodoro-settings-title {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .study-time-layout {
        flex-direction: column;
        min-height: auto;
        overflow: visible;
        display: flex;
    }
    
    .pomodoro-legend-panel {
        order: 1;
    }
    
    .study-time-main-panel {
        width: 100%;
        margin-bottom: 0;
        order: 2;
    }
    
    /* Botões móveis */
    .mobile-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin: 15px 0 20px 0;
        padding: 0 30px;
        position: relative;
        z-index: 100; /* Abaixo dos modais */
        order: 3;
    }
    
    .pomodoro-settings-panel {
        order: 4;
    }
    
    .mobile-control-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: none;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-control-button.legend-button {
        background: var(--bg-primary);
        color: var(--text-primary);
        border: 1.5px solid var(--border-color);
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 13px;
        flex: 1;
        max-width: 120px;
    }
    
    .mobile-control-button.settings-button {
        background: var(--accent-primary);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0;
        flex-shrink: 0;
    }
    
    .mobile-control-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .mobile-control-button.legend-button:hover {
        border-color: var(--accent-primary);
        background: var(--bg-hover);
    }
    
    .mobile-control-button.settings-button:hover {
        background: var(--accent-hover);
    }
    
    .mobile-control-button .material-symbols-outlined {
        font-size: 18px;
    }
    
    .mobile-control-button.settings-button .material-symbols-outlined {
        font-size: 16px;
    }
    
    /* Dark mode para botões móveis */
    body.dark-mode .mobile-control-button.legend-button {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    
    body.dark-mode .mobile-control-button.legend-button:hover {
        background: var(--bg-hover);
        border-color: var(--accent-primary);
    }
    
    .pomodoro-settings-panel {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 0;
        border-radius: 12px;
        transform: translateY(-20px);
        opacity: 0;
    }
    
    .pomodoro-settings-panel.active {
        transform: translateY(0);
        max-height: 500px;
        margin-top: 20px;
        opacity: 1;
    }
    
    .pomodoro-settings-content {
        padding: 20px 15px;
    }
    
    .pomodoro-toggle-container {
        margin: 20px 0;
    }
    
    .pomodoro-setting {
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .study-time-main-panel {
        padding: 20px 15px;
    }
    
    .pomodoro-setting {
        padding: 12px 10px;
    }
    
    .pomodoro-setting input {
        padding: 10px;
    }
    
    #back-to-study-selection {
        top: 15px;
        left: 15px;
    }
    
    .pomodoro-toggle-container {
        padding: 10px;
    }
    
    .pomodoro-toggle-label {
        font-size: 14px;
    }
    
    .confirm-button,
    .pomodoro-break-button {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Ajustes específicos para o modal de pausa em telas muito pequenas */
    .pomodoro-break-content {
        padding: 10px;
    }
    
    .break-content-right {
        padding: 10px;
    }
    
    .break-sudoku-board td {
        width: 22px;
        height: 22px;
    }
    
    .break-cell-input {
        font-size: 12px;
    }
    
    .break-given-number {
        font-size: 12px;
    }
    
    .break-number-pad {
        max-width: 300px;
        gap: 3px;
    }
    
    .break-num-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    .break-sudoku-btn {
        width: 28px;
        height: 28px;
    }
    
    .break-sudoku-controls {
        gap: 6px;
    }
    
    .break-sudoku-title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .pomodoro-break-title {
        font-size: 18px;
    }
    
    .pomodoro-break-timer {
        font-size: 24px;
        margin: 10px 0;
        padding: 6px;
        min-width: 100px;
    }
    
    .break-modal-layout {
        gap: 10px;
    }
}



/* Presets Button */
.presets-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
    width: fit-content;
}

.presets-button:hover {
    background: var(--accent-primary-hover);
    transform: translateY(-1px);
}

.presets-button .material-symbols-outlined {
    font-size: 18px;
}

/* Save Preset Section */
.save-preset-section {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    /* Corrigir glitches visuais */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.preset-name-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
    /* Corrigir glitches visuais */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.preset-name-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.save-preset-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-size: 14px;
    font-weight: 500;
}

.save-preset-button:hover {
    background: var(--accent-primary-hover);
    transform: translateY(-1px);
}

.save-preset-button .material-symbols-outlined {
    font-size: 18px;
    transition: all 0.3s ease;
}

/* Estilos específicos para o botão da página principal (circular) */
#save-preset-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
}

#save-preset-button.saving .material-symbols-outlined {
    animation: spin 0.8s linear infinite;
}

#save-preset-button.success {
    background: var(--success-color, #4CAF50);
}

#save-preset-button.success .material-symbols-outlined {
    animation: none;
}

#save-preset-button:hover {
    transform: translateY(-1px) scale(1.05);
}

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

/* Presets Modal Styles */
.presets-modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Layout responsivo para telas grandes */
@media (min-width: 769px) {
    .presets-modal-content {
        flex-direction: row;
        gap: 30px;
        align-items: flex-start;
    }
    
    .presets-list-section {
        flex: 1;
        min-width: 0;
    }
    
    .create-preset-section {
        flex: 1;
        min-width: 0;
        border: none;
        border-left: 2px solid var(--border-color);
        padding: 0 0 0 30px;
        background: transparent;
        border-radius: 0;
    }
    
    .create-preset-section:hover {
        border-left-color: var(--accent-primary);
        background: transparent;
    }
}

.presets-list {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-secondary);
    /* Corrigir glitches visuais */
    will-change: scroll-position;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}

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

.presets-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.presets-list::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}

.presets-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary-hover);
}

.preset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* Corrigir glitches visuais */
    transform: translateZ(0);
    backface-visibility: hidden;
}

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

.preset-item:hover {
    background: var(--bg-hover);
}

.preset-name {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

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

.preset-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-edit-button {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.preset-edit-button:hover {
    background: var(--accent-primary-hover);
}

.preset-delete-button {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.preset-delete-button:hover {
    background: var(--accent-primary-hover);
}

.preset-action-button .material-symbols-outlined {
    font-size: 16px;
}

/* Create Preset Section */
.create-preset-section {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    background: var(--bg-secondary);
    transition: border-color 0.2s ease;
}

.create-preset-section:hover {
    border-color: var(--accent-primary);
}

/* Animação de sucesso para o botão do modal */
#save-preset-modal-button.saving {
    pointer-events: none;
}

#save-preset-modal-button.success {
    background: var(--success-color, #4CAF50);
    pointer-events: none;
}

#save-preset-modal-button.success .material-symbols-outlined {
    animation: none;
}

#save-preset-modal-button .success-text {
    display: none;
    margin-left: 4px;
}

#save-preset-modal-button.success .success-text {
    display: inline;
}

.create-preset-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.preset-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preset-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preset-form-row label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.preset-form-row input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
}

.preset-form-row input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.preset-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.preset-form-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preset-name-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.preset-name-row .preset-name-input {
    flex: 1;
}

/* Empty State */
.presets-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Dark Mode Adjustments */
body.dark-mode .preset-name-input,
body.dark-mode .preset-form-row input {
    background: var(--bg-tertiary);
    border-color: var(--border-color-dark);
}

body.dark-mode .presets-list {
    background: var(--bg-tertiary);
    border-color: var(--border-color-dark);
}

body.dark-mode .preset-item {
    border-color: var(--border-color-dark);
}

body.dark-mode .preset-item:hover {
    background: var(--bg-hover-dark);
}

body.dark-mode .create-preset-section {
    border-color: var(--border-color-dark);
    background: var(--bg-tertiary);
}

body.dark-mode .create-preset-section:hover {
    border-color: var(--accent-primary);
}

@media (min-width: 769px) {
    body.dark-mode .create-preset-section {
        border-left-color: var(--border-color-dark);
        background: transparent;
    }
    
    body.dark-mode .create-preset-section:hover {
        border-left-color: var(--accent-primary);
        background: transparent;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .presets-modal-content {
        gap: 15px;
        height: 100%;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }
    
    .presets-list {
        max-height: 100px;
    }
    
    .create-preset-section {
        padding: 15px;
        margin-top: 10px;
    }
    
    .preset-form {
        gap: 12px;
    }
    
    .preset-form-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .preset-name-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .save-preset-section {
        flex-direction: column;
        align-items: stretch;
    }
    
    .presets-button {
        width: 100%;
        justify-content: center;
    }
    
    .create-preset-title {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .preset-form-row label {
        font-size: 13px;
    }
    
    .preset-form-row input {
        padding: 6px 10px;
        font-size: 13px;
    }
}
/* Quick Chat Component Styles */

.quick-chat-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 350px;
    height: 450px;
    background: var(--bg-card);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 25px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1061;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Make the container resizable */
    resize: both;
    min-width: 300px;
    min-height: 350px;
    max-width: 90vw;
    max-height: 80vh;
}

.quick-chat-container.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.quick-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
}

.quick-chat-title {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-chat-title .material-symbols-outlined {
    font-size: 18px;
}

.quick-chat-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-chat-close, 
.quick-chat-clear,
.quick-chat-pin {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.quick-chat-close:hover, 
.quick-chat-clear:hover,
.quick-chat-pin:hover {
    background-color: var(--bg-card-hover);
    color: var(--accent-primary);
}

.quick-chat-pin.active {
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--text-on-accent);
}

.quick-chat-pin.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.quick-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--bg-primary);
    /* Ensure this container has the scroll, not the messages */
    overflow-y: auto;
    overflow-x: hidden;
}

.quick-chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    animation: fadeIn 0.3s ease;
    /* Ensure messages don't have their own scroll */
    overflow: visible;
    word-wrap: break-word;
    white-space: normal;
}

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

.quick-chat-message.user {
    align-self: flex-end;
    background-color: var(--bg-user-message);
    color: var(--text-user-message);
    border-bottom-right-radius: 4px;
}

.quick-chat-message.ai {
    align-self: flex-start;
    background-color: var(--bg-ai-message);
    color: var(--text-ai-message);
    border-bottom-left-radius: 4px;
    line-height: 1.5;
    font-size: 14px;
}

.quick-chat-message.ai p {
    margin-bottom: 12px;
}

.quick-chat-message.ai p:last-child {
    margin-bottom: 0;
}

.quick-chat-message.ai ul, 
.quick-chat-message.ai ol {
    margin-left: 20px;
    margin-bottom: 12px;
}

.quick-chat-message.ai li {
    margin-bottom: 4px;
}

.quick-chat-message.ai h1, 
.quick-chat-message.ai h2, 
.quick-chat-message.ai h3, 
.quick-chat-message.ai h4 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}

.quick-chat-message.ai h1 {
    font-size: 18px;
}

.quick-chat-message.ai h2 {
    font-size: 16px;
}

.quick-chat-message.ai h3, 
.quick-chat-message.ai h4 {
    font-size: 15px;
}

.quick-chat-message.ai pre {
    margin: 12px 0;
    white-space: pre-wrap;
}

.quick-chat-message.ai code {
    font-family: 'Roboto Mono', monospace;
    background-color: var(--bg-code);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 13px;
}

.quick-chat-message.ai a {
    color: var(--accent-primary);
    text-decoration: none;
}

.quick-chat-message.ai a:hover {
    text-decoration: underline;
}

.quick-chat-message.ai blockquote {
    border-left: 3px solid var(--accent-primary);
    padding-left: 12px;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: var(--text-secondary);
}

.quick-chat-message.ai .code-block-container {
    margin: 12px 0;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--bg-code);
    border: 1px solid var(--border-color);
}

.quick-chat-message.ai .code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background-color: var(--bg-code-header);
    border-bottom: 1px solid var(--border-color);
}

.quick-chat-message.ai .code-language-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.quick-chat-message.ai .copy-code-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--border-radius-xs);
}

.quick-chat-message.ai .copy-code-button:hover {
    background-color: var(--bg-hover);
}

.quick-chat-message.ai .copy-code-button .material-symbols-outlined {
    font-size: 16px;
}

.quick-chat-message.ai .code-block-content {
    padding: 10px;
    overflow-x: auto;
    max-height: 300px;
}

.quick-chat-message.ai .code-block-content pre {
    margin: 0;
}

.quick-chat-message.ai .code-block-content code {
    background-color: transparent;
    padding: 0;
    font-size: 13px;
    white-space: pre;
}

.quick-chat-message-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.quick-chat-message-options {
    display: flex;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    margin-left: 10px;
}

.quick-chat-message-wrapper:hover .quick-chat-message-options {
    opacity: 1;
    visibility: visible;
}

.quick-chat-message-option {
    background: var(--bg-card);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
    box-shadow: 0 2px 4px var(--shadow-color);
}

.quick-chat-message-option:hover {
    background-color: var(--bg-hover-subtle);
    color: var(--accent-primary);
}

.quick-chat-message-option .material-symbols-outlined {
    font-size: 16px;
}

.quick-chat-typing {
    align-self: flex-start;
    background-color: var(--bg-ai-message);
    color: var(--text-ai-message);
    padding: 10px 14px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    animation: typingDot 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.quick-chat-input-area {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.quick-chat-clear-input {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-right: 4px;
}

.quick-chat-clear-input:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
}

.quick-chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-input);
    border-radius: 20px;
    background-color: var(--bg-input);
    color: var(--text-input);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-chat-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
}

.quick-chat-send {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.quick-chat-send:hover {
    background-color: var(--accent-primary-hover);
    transform: scale(1.05);
}

.quick-chat-send:active {
    transform: scale(0.95);
}

.quick-chat-send .material-symbols-outlined {
    font-size: 18px;
}

.quick-chat-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    z-index: 1100;
    font-size: 0.9rem;
    animation: toastAppear 0.3s ease-out, toastDisappear 0.3s ease-out 1.7s forwards;
}

@keyframes toastAppear {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes toastDisappear {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
}

/* Scrollbar styles matching LearnAI standard */
.quick-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.quick-chat-messages::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 4px;
}

.quick-chat-messages::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border-radius: 4px;
    border: 2px solid var(--bg-subtle);
}

/* For Firefox */
.quick-chat-messages {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-subtle);
}

/* Resize handle styling */
.quick-chat-container::-webkit-resizer {
    border-bottom-right-radius: var(--border-radius-md);
    background-color: var(--accent-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27white%27%3E%3Cpath d=%27M22 22H2v-2h20v2zM22 18H2v-2h20v2zM22 14H2v-2h20v2zM22 10H2V8h20v2zM22 6H2V4h20v2z%27/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

/* Context menu for quick chat */
.quick-chat-context-menu {
    position: absolute;
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 4px 12px var(--shadow-color);
    padding: 8px 0;
    z-index: 1100;
    animation: fadeIn 0.2s ease;
    border: 1px solid var(--border-color);
}

.quick-chat-context-menu-item {
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.quick-chat-context-menu-item:hover {
    background-color: var(--bg-hover-subtle);
}

.quick-chat-context-menu-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--accent-primary);
}

/* Context menu input mode */
.quick-chat-context-menu-item.input-mode {
    padding: 4px 8px;
    cursor: default;
}

.quick-chat-context-menu-item.input-mode:hover {
    background-color: transparent;
}

.quick-chat-context-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 250px;
}

.quick-chat-context-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background-color: var(--bg-input);
    color: var(--text-input);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.quick-chat-context-input:focus {
    border-color: var(--accent-primary);
}

.quick-chat-context-send {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quick-chat-context-send:hover {
    background-color: var(--accent-primary-hover);
}

.quick-chat-context-send .material-symbols-outlined {
    font-size: 16px;
}

/* Quick chat popup input */
.quick-chat-popup-input {
    position: absolute;
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 4px 12px var(--shadow-color);
    padding: 12px;
    z-index: 1100;
    animation: fadeIn 0.2s ease;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 300px;
    max-width: 400px;
}

.quick-chat-popup-input-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-chat-popup-input-header .material-symbols-outlined {
    font-size: 18px;
    color: var(--accent-primary);
}

.quick-chat-popup-input-field {
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background-color: var(--bg-input);
    color: var(--text-input);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-chat-popup-input-field:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
}

.quick-chat-popup-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.quick-chat-popup-input-button {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quick-chat-popup-input-button.cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.quick-chat-popup-input-button.send {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
}

.quick-chat-popup-input-button.cancel:hover {
    background: var(--bg-hover-subtle);
}

.quick-chat-popup-input-button.send:hover {
    background: var(--accent-primary-hover);
}

/* Message wrapper and message options */
.quick-chat-container .message-wrapper {
    position: relative;
    margin-bottom: 24px; /* Match main chat margin */
    display: flex;
    flex-direction: column;
}

.quick-chat-container .message-wrapper .message.user {
    align-self: flex-end; /* Align user messages to the right */
}

.quick-chat-container .message-options {
    position: absolute;
    bottom: -30px; /* Slightly smaller for the mini chat */
    left: 10px;
    display: flex;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    background-color: var(--bg-primary);
    padding: 4px;
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    z-index: 1;
}

.quick-chat-container .message-wrapper:hover .message-options {
    opacity: 1;
    visibility: visible;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .quick-chat-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        z-index: 1070;
        min-width: none;
        min-height: none;
        resize: none;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .quick-chat-header {
        padding: 12px 16px;
    }
    
    .quick-chat-title {
        font-size: 1.1rem;
    }
    
    .quick-chat-messages {
        padding: 16px;
    }
    
    .quick-chat-input-container {
        padding: 12px 16px;
    }
    
    .quick-chat-input {
        font-size: 16px;
        padding: 12px 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .quick-chat-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 70%;
        border-radius: 16px 16px 0 0;
        z-index: 1070;
        resize: none;
    }
}

@media (max-width: 480px) {
    .quick-chat-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        z-index: 1070;
        resize: none;
    }
}

/* Dark Mode */
body.dark-mode .quick-chat-container {
    background: var(--bg-card);
}

body.dark-mode .quick-chat-messages {
    background-color: var(--bg-primary);
}

body.dark-mode .quick-chat-message.ai {
    background-color: var(--bg-card);
}

body.dark-mode .quick-chat-input {
    background-color: var(--bg-input);
    color: var(--text-input);
}

body.dark-mode .quick-chat-typing {
    background-color: var(--bg-card);
}

body.dark-mode .quick-chat-context-menu,
body.dark-mode .quick-chat-popup-input {
    background: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .quick-chat-context-menu-item:hover {
    background-color: var(--bg-hover-subtle);
}

body.dark-mode .quick-chat-message-option {
    background: var(--bg-card);
    color: var(--text-secondary);
}

body.dark-mode .quick-chat-message-option:hover {
    background-color: var(--bg-hover-subtle);
    color: var(--accent-primary);
}

body.dark-mode .quick-chat-toast {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* Draggable styles */
.quick-chat-container.dragging {
    opacity: 0.7;
    transition: opacity 0.1s ease;
    pointer-events: none;
    user-select: none;
}

.quick-chat-container.dragging .quick-chat-header {
    pointer-events: auto;
}

.quick-chat-header {
    cursor: grab;
}

.quick-chat-header:active {
    cursor: grabbing;
}



/* Loading Overlay (reusable) */
.loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 9999; /* Above app UI */
    background: var(--bg-overlay-light);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.dark-mode .loading-overlay {
    background: var(--bg-overlay-dark);
}

/* Generic spinner (usable anywhere) */
.spinner {
    display: inline-block;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--accent-primary);
    border-right-color: rgba(var(--accent-primary-rgb), 0.4);
    animation: loading-spin 0.8s linear infinite;
}

.loading-overlay .spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* Make rotation obvious: accent on top, subtle on right, transparent on left/bottom */
    border: 4px solid transparent;
    border-top-color: var(--accent-primary);
    border-right-color: rgba(var(--accent-primary-rgb), 0.4);
    animation: loading-spin 0.8s linear infinite;
    will-change: transform;
}

body.dark-mode .loading-overlay .spinner {
    border: 4px solid transparent;
    border-top-color: var(--accent-primary);
    border-right-color: rgba(var(--accent-primary-rgb), 0.5);
}

.loading-overlay .loading-text {
    font-weight: 600;
    color: var(--text-primary);
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* Utility: when present on a container, blur content beneath the overlay as fallback */
.blurred-underlay {
    filter: blur(2px);
}

/* Recommendations Component Styles */

.recommendations-container {
    margin: 4px 0 12px 0;
    padding: 8px;
    background-color: var(--bg-subtle, #f8f9fa);
    border-radius: 8px;
    max-width: 100%;
    width: fit-content;
    display: inline-block;
    position: relative;
    clear: both;
}

/* Title styles removed - no title needed */

.recommendations-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    counter-reset: recommendation-counter;
}

.recommendation-button {
    background: var(--bg-card, #fff);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-input, rgba(var(--text-primary-rgb, 0,0,0,0).12));
    border-radius: 999px;
    padding: 6px 12px;
    margin: 0 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.12));
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    word-wrap: break-word;
    text-align: left;
    line-height: 1.2;
}

.recommendation-button.disabled {
    background: var(--bg-card-hover, #f1f3f5);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: 0 1px 4px rgba(var(--text-primary-rgb, 0,0,0,0).15);
}

.recommendation-button.disabled:hover {
    background: var(--bg-card-hover, #f1f3f5);
    transform: none;
    box-shadow: 0 1px 4px rgba(var(--text-primary-rgb, 0,0,0,0).15);
}

.recommendation-button:hover {
    background: var(--bg-card-hover, #f1f3f5);
    border-color: var(--accent-primary, #E63980);
    color: var(--accent-primary, #E63980);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.24);
}

.recommendation-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
}

.recommendation-button.clicked {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 217, 41, 96), 0.12), rgba(var(--accent-primary-rgb, 217, 41, 96), 0.22));
    color: var(--accent-primary, #E63980);
    border-color: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.4);
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.22);
    position: relative;
}



.recommendation-button.clicked:hover {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 217, 41, 96), 0.16), rgba(var(--accent-primary-rgb, 217, 41, 96), 0.26));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28);
}

body.dark-mode .recommendation-button {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).18));
    box-shadow: var(--shadow-dark-strong, 0 4px 12px rgba(0, 0, 0, 0.35));
}

body.dark-mode .recommendation-button:hover {
    background: var(--bg-card-hover, #353535);
    color: var(--accent-primary, #E63980);
    border-color: var(--accent-primary, #E63980);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28);
}

body.dark-mode .recommendation-button.disabled {
    background: var(--bg-card-hover, #353535);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

body.dark-mode .recommendation-button.disabled:hover {
    background: var(--bg-card-hover, #353535);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

body.dark-mode .recommendation-button.clicked {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 217, 41, 96), 0.18), rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28));
    color: var(--accent-primary, #E63980);
    border-color: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.45);
}

body.dark-mode .recommendation-button.clicked:hover {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 217, 41, 96), 0.22), rgba(var(--accent-primary-rgb, 217, 41, 96), 0.32));
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.32);
}

.recommendation-button::before {
    counter-increment: recommendation-counter;
    content: counter(recommendation-counter) ".";
    font-weight: bold;
    font-size: 12px;
    opacity: 0.8;
    margin-right: 2px;
}

/* Dark mode adjustments */
body.dark-mode .recommendations-container {
    background-color: var(--bg-secondary, #2a2a2a);
}

body.dark-mode .recommendations-container h4 {
    color: var(--text-primary);
}

/* Responsive design */
@media (max-width: 768px) {
    .recommendations-buttons {
        flex-direction: column;
    }
    
    .recommendation-button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
}

/* Animation for when recommendations appear */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recommendations-container {
    animation: fadeInUp 0.4s ease-out;
}

.recommendation-button {
    animation: fadeInUp 0.4s ease-out;
    animation-fill-mode: both;
}

.recommendation-button:nth-child(1) { animation-delay: 0.1s; }
.recommendation-button:nth-child(2) { animation-delay: 0.2s; }
.recommendation-button:nth-child(3) { animation-delay: 0.3s; }
.recommendation-button:nth-child(4) { animation-delay: 0.4s; }
.recommendation-button:nth-child(5) { animation-delay: 0.5s; }
/* Styles for PWA update notification (replaces inline <style> in JS) */
.pwa-update-notification {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #4B70E2;
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  animation: pwaSlideIn 0.3s ease-out;
}
.pwa-update-content { display:flex; align-items:center; gap:12px; }
.pwa-update-content button { border:none; padding:6px 12px; border-radius:4px; cursor:pointer; font-weight:500; transition: background .2s; }
#update-app-btn { background:#fff; color:#4B70E2; }
#dismiss-update-btn { background:transparent; color:#fff; }
@keyframes pwaSlideIn { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.install-pwa-btn { display:inline-flex; align-items:center; gap:8px; background:#4B70E2; color:#fff; border:none; padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer; transition: background .2s; }
.install-pwa-btn:hover { background:#3A5BC9; }
.install-pwa-btn .material-symbols-outlined { font-size:20px; }
/* Generic alert/toast modal used by showModal() (JS toggles classes only) */

.alert-modal-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background-color: #fff;
  color: var(--text-primary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px 20px;
  max-width: 80%;
  width: 400px;
  text-align: center;
  transition: opacity 0.3s ease;
  opacity: 1;
}

body.dark-mode .alert-modal-container {
  background-color: #333;
  color: #fff;
}

.alert-modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
  justify-content: center;
}

.alert-modal-title {
  margin: 0;
  font-size: 18px;
}

.alert-modal-icon {
  font-size: 24px;
  color: var(--accent-primary);
}

.alert-modal-message {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Memory diff (used by showModal for memory changes) */
.alert-modal-message .memory-diff-content {
  max-height: 60vh;
  overflow: auto;
  text-align: left;
}
.alert-modal-message .memory-diff-pre {
  white-space: pre-wrap;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-subtle, #f6f6f6);
  border: 1px solid var(--border-color, #e2e2e2);
}
.alert-modal-message .memory-diff-deleted {
  background: rgba(220, 53, 69, 0.18);
  color: inherit;
  text-decoration: line-through;
}
.alert-modal-message .memory-diff-added {
  background: rgba(40, 167, 69, 0.18);
  color: inherit;
}
.alert-modal-message .memory-diff-section { margin-bottom: 12px; }
.alert-modal-message .memory-diff-title { font-weight: 600; margin: 0 0 6px 0; }

.alert-modal-button {
  background-color: #D92960;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

/* Color variants via classes */
.alert-modal-container.is-info .alert-modal-icon { color: var(--accent-primary); }
.alert-modal-container.is-error .alert-modal-icon { color: var(--danger-color); }
.alert-modal-container.is-warning .alert-modal-icon { color: var(--warning-color); }
.alert-modal-container.is-success .alert-modal-icon { color: var(--success-color); }

/* Fade-out helper */
.alert-modal-container.is-closing {
  opacity: 0;
}

/* Specific Question Component Styles (from style7.css) */

/* Estilos para o botão de upload de imagem no solucionador */
/* Note: Duplicated styles for .question-image-button exist below, consolidating */
/*
.question-image-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: var(--accent-primary, #D92960);
    color: white;
    cursor: pointer;
    margin-bottom: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.question-image-button:hover {
    background-color: var(--accent-primary-darker, #bf2156);
    transform: scale(1.05);
}
.question-image-button .material-symbols-outlined {
    font-size: 1.8rem;
}
*/

/* Contêiner de upload de imagem no solucionador */
.question-image-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Contêiner de Preview */
.question-image-preview-container {
    display: none; /* Hidden by default, shown via JS */
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    padding: 15px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 12px;
    border: 1px solid var(--accent-primary, #D92960);
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Item de Preview */
.question-image-preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px; /* Adjusted from 10px for consistency */
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adjusted from 3px 6px */
    background: white;
}

.question-image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.question-image-preview-item .question-remove-image {
    position: absolute;
    top: 5px; /* Adjusted from 8px */
    right: 5px; /* Adjusted from 8px */
    width: 20px; /* Adjusted from 24px */
    height: 20px; /* Adjusted from 24px */
    background-color: rgba(220, 53, 69, 0.8); /* var(--danger-color) with alpha */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px; /* Adjusted from 16px */
    line-height: 1;
    transition: background-color 0.3s ease;
}

.question-image-preview-item .question-remove-image:hover {
    background-color: rgba(191, 33, 86, 0.9); /* var(--danger-color-darker) with alpha */
}

/* Dark Mode for Preview */
body.dark-mode .question-image-preview-container {
    background: var(--dm-bg-secondary, #353535);
    border-color: var(--dm-border-color, #6c757d);
}

body.dark-mode .question-image-preview-item {
    background: var(--dm-bg-surface, #4d4d4d);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Adjusted */
}

body.dark-mode .question-image-preview-item .question-remove-image {
    background-color: rgba(220, 53, 69, 0.8);
}

body.dark-mode .question-image-preview-item .question-remove-image:hover {
    background-color: rgba(191, 33, 86, 0.9);
}

/* Contêiner para o textarea e botão de imagem */
.question-input-container {
    position: relative;
    margin-bottom: 20px;
}

/* Estilo do Textarea para Questões */
.question-textbox-styled {
    width: 100%;
    min-height: 150px;
    padding: 15px 50px 15px 15px; /* Space for button */
    border: 2px solid var(--accent-primary, #D92960);
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary, #333);
    background-color: var(--bg-secondary, #f8f9fa);
    box-shadow: inset 0 2px 4px rgba(var(--text-primary-rgb, 0,0,0,0).05);
    resize: vertical;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.question-textbox-styled:focus {
    outline: none;
    border-color: var(--brand-primary, #292C6D);
    box-shadow: 0 0 5px rgba(41, 44, 109, 0.5);
    background-color: var(--bg-primary, #ffffff);
}

/* Drag & Drop Styles for Question Textarea */
.question-textbox-styled.drag-over {
    border-color: var(--brand-primary, #292C6D);
    border-style: dashed;
    border-width: 3px;
    background-color: rgba(41, 44, 109, 0.05); /* brand-primary with alpha */
    box-shadow: 0 0 10px rgba(41, 44, 109, 0.3);
}

.question-textbox-styled.drag-over::before {
    content: "Solte a imagem aqui";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--brand-primary, #292C6D);
    font-weight: bold;
    font-size: 1.2rem;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 8px;
    z-index: 1;
}

/* Paste Animation for Question Textarea */
@keyframes question-paste-pulse {
    0% { border-color: var(--accent-primary, #D92960); }
    50% { border-color: var(--brand-primary, #292C6D); box-shadow: 0 0 10px rgba(41, 44, 109, 0.5); }
    100% { border-color: var(--accent-primary, #D92960); }
}

.question-textbox-styled.paste-animation {
    animation: question-paste-pulse 0.8s ease;
}

/* Dark Mode for Question Textarea */
body.dark-mode .question-textbox-styled {
    background-color: var(--dm-bg-surface, #3d3d3d);
    color: var(--dm-text-primary, #f5f5f5);
    border-color: var(--dm-border-color, #6c757d);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .question-textbox-styled:focus {
    border-color: var(--accent-primary, #D92960);
    box-shadow: 0 0 5px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.7);
    background-color: var(--dm-bg-surface-hover, #4d4d4d);
}

body.dark-mode .question-textbox-styled.drag-over {
    background-color: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1); /* accent-primary with alpha */
    border-color: var(--accent-primary, #D92960);
}

body.dark-mode .question-textbox-styled.drag-over::before {
    color: var(--accent-primary, #D92960);
    background-color: rgba(45, 45, 45, 0.8); /* Dark background for indicator */
}

body.dark-mode .question-textbox-styled.paste-animation {
    animation: question-paste-pulse 0.8s ease; /* Ensure animation runs in dark mode */
}

/* Botão de Upload de Imagem (posicionado dentro/perto do Textarea) */
.question-image-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: var(--accent-primary, #D92960);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 5; /* Ensure it's above textarea */
}

.question-image-button:hover {
    background-color: var(--accent-primary-darker, #bf2156);
    transform: scale(1.05);
}

.question-image-button .material-symbols-outlined {
    font-size: 1.5rem;
}

/* Dark Mode for Image Button */
body.dark-mode .question-image-button {
    background-color: var(--accent-primary, #D92960); /* Keep accent color */
}

body.dark-mode .question-image-button:hover {
    background-color: var(--accent-primary-darker, #bf2156);
}

/* Estilos para o container de questão (Melhorado) */
.questao-container {
    background: linear-gradient(145deg, #fff, #f0f0f0); /* Gradiente suave */
    border-radius: 12px; /* Mais arredondado */
    padding: 25px; /* Mais padding */
    margin: 20px 0; /* Mais margem */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra mais suave */
    border-left: 5px solid var(--accent-primary, #D92960); /* Borda esquerda mais grossa */
    transition: all 0.3s ease, background-color 0.3s ease, border-left-color 0.3s ease;
    position: relative; /* Needed for absolute positioned children like drawing button */
}

/* Layout com header padronizado (semelhante às ferramentas) */
.questao-container.with-header,
.interactive-exercise-container.with-header {
    padding: 0; /* O padding fica no corpo quando há header */
    border-radius: 12px;
    overflow: hidden; /* Garante bordas arredondadas contínuas */
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
}

.question-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.question-title .material-symbols-outlined {
    color: var(--accent-primary);
}

.question-type-badge {
    display: none !important; /* Removido de todos os headers de questões */
}

.question-body {
    background: var(--bg-secondary);
    padding: 16px;
}

/* Centralizar exercise-instructions no header (RC e V/F) */
/* Alinhamento vertical já é garantido pelo flex no header; nenhum centramento horizontal */
.question-header { align-items: center; }

/* Ajustes de margens quando o enunciado está no header */
.with-header .questao-pergunta,
.with-header .question-statement,
.with-header .exercise-instructions {
    margin: 0;
    color: var(--text-heading);
}

.questao-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Error State */
.questao-container.erro {
    animation: tremer 0.5s;
    background: linear-gradient(145deg, #ffe8e8, #ffdcdc); /* Fundo de erro mais suave */
    border-left-color: var(--danger-color, #dc3545); /* Vermelho de erro */
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

.questao-erro-mensagem {
    color: rgba(255, 80, 80, 0.8); /* Lighter red for visibility */
    font-size: 14px;
    margin-top: 8px;
    font-weight: 500;
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.questao-container.erro .questao-erro-mensagem {
    display: block; /* Show when error class is present */
    opacity: 1;
}

.questao-pergunta {
    color: var(--text-secondary);
    margin-bottom: 25px;
}
.questao-pergunta::before {
    content: '❓';
    margin-right: 10px;
    font-size: 1.2em;
    color: var(--accent-primary);
    /* margin-top e flex-shrink REMOVIDOS */
    /* margin-right também seria removido se estivesse presente */
}

/* Answer Area */
.questao-resposta {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Mais espaço */
}

/* Answer Textarea */
.questao-textarea {
    width: 100%;
    min-height: 120px; /* Ligeiramente maior */
    padding: 15px; /* Mais padding */
    border: 2px solid var(--border-color, #ced4da); /* Borda mais visível */
    font-family: inherit;
    font-size: 1rem; /* Tamanho padrão */
    resize: vertical;
    transition: all 0.2s ease;
    background-color: var(--bg-primary, #fff); /* Fundo branco */
    position: relative; /* For drawing button positioning */
}

.questao-textarea:focus {
    outline: none;
    border-color: var(--accent-primary, #D92960);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.25); /* Sombra de foco mais proeminente */
    background-color: var(--bg-primary, #fff);
}

.questao-textarea:disabled {
    background-color: var(--bg-disabled, #e9ecef); /* Fundo desabilitado mais claro */
    cursor: not-allowed;
    opacity: 0.7;
}

/* =========================
   Dissertativa de Código (Editor)
   ========================= */
.questao-codigo .code-answer-editor {
    margin-top: 0; /* Sem margem superior */
    display: flex;
    flex: 1 1 auto; /* Ocupa todo o espaço disponível do question-body */
}

.questao-codigo .code-editor-container {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 0; /* Sem bordas arredondadas */
    background-color: var(--bg-secondary); /* Alinha com .code-block-content */
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
    overflow: auto;
    min-height: 180px;
    flex: 1 1 auto; /* Estica dentro do answer-editor */
    height: 100%;
}

.questao-codigo .code-editor-highlight {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 12px 14px; /* confortável, sem números de linha */
    overflow: hidden;
    pointer-events: none; /* Não captura cliques, só exibe highlight */
}

.questao-codigo .code-editor-highlight code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95em;
    line-height: 1.25;
    color: var(--text-primary);
    display: block;
    white-space: pre;
}

.questao-codigo .code-editor-input {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0; /* herdará a altura do container */
    height: 100%;
    border: none;
    outline: none;
    resize: vertical;
    padding: 12px 14px;
    background: transparent !important; /* Deixa o fundo mostrar a grade do container */
    background-color: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    color: transparent; /* Esconde o texto para não sobrepor o highlight */
    caret-color: var(--text-primary); /* Mostra o cursor */
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95em;
    line-height: 1.25;
    white-space: pre; /* Evita quebra automática */
}

.questao-codigo .code-editor-input:focus {
    outline: none;
    box-shadow: none !important; /* Remove a linha rosa no foco */
    background: transparent !important;
}

/* Placeholder para contenteditable */
.questao-codigo .code-editor-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    opacity: 0.6;
    pointer-events: none;
}
body.dark-mode .questao-codigo .code-editor-input:empty::before {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Estado desabilitado preserva a aparência do highlight de fundo */
.questao-codigo .code-editor-input:disabled {
    background: transparent;
    color: transparent;
}

/* Dark Mode - Editor de Código */
body.dark-mode .questao-codigo .code-editor-container {
    /* Aumenta o contraste em relação ao question-body no tema escuro */
    background-color: var(--bg-card);
    background-image:
        linear-gradient(to right, var(--grid-line-color-dark, rgba(255, 255, 255, 0.08)) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line-color-dark, rgba(255, 255, 255, 0.08)) 1px, transparent 1px);
    border-color: var(--border-input);
}

body.dark-mode .questao-codigo .code-editor-highlight code {
    color: var(--text-primary);
}

/* Prism token fallbacks for the editor overlay (Light) - softer */
.questao-codigo .code-editor-highlight code .token.keyword { color: #5b3cc4 !important; font-weight: 600; }
.questao-codigo .code-editor-highlight code .token.string { color: #0f766e !important; }
.questao-codigo .code-editor-highlight code .token.number { color: #b45309 !important; }
.questao-codigo .code-editor-highlight code .token.comment { color: #6b7280 !important; font-style: italic; }
.questao-codigo .code-editor-highlight code .token.function { color: #1d4ed8 !important; }
.questao-codigo .code-editor-highlight code .token.tag { color: #b91c1c !important; }
.questao-codigo .code-editor-highlight code .token.attr-name { color: #7c3aed !important; }
.questao-codigo .code-editor-highlight code .token.property { color: #2563eb !important; }
.questao-codigo .code-editor-highlight code .token.selector { color: #b45309 !important; }

/* Prism token fallbacks for the editor overlay (Dark) - stronger */
body.dark-mode .questao-codigo .code-editor-highlight code .token.keyword { color: #c4b5fd !important; font-weight: 700; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.string { color: #86efac !important; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.number { color: #facc15 !important; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.comment { color: #94a3b8 !important; font-style: italic; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.function { color: #93c5fd !important; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.tag { color: #fda4af !important; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.attr-name { color: #c4b5fd !important; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.property { color: #a5b4fc !important; }
body.dark-mode .questao-codigo .code-editor-highlight code .token.selector { color: #fcd34d !important; }

/* Controls container for submit button */
.questao-container .controls {
    display: flex;
    justify-content: center;
}

/* Submit Button */
.questao-botao-enviar {
    background: linear-gradient(135deg, var(--accent-primary, #D92960), var(--accent-primary-darker, #bf2156)); /* Gradiente no botão */
    color: white;
    border: none;
    border-radius: 25px; /* Botão mais arredondado (pill) */
    padding: 12px 25px; /* Mais padding */
    font-size: 1rem; /* Tamanho padrão */
    font-weight: 600; /* Mais negrito */
    cursor: pointer;
    align-self: flex-end;
    display: inline-flex; /* Para centralizar ícone e texto verticalmente */
    align-items: center;   /* Alinha no eixo Y */
    justify-content: center; /* Alinha no eixo X quando necessário */
    gap: 8px; /* Espaço entre ícone e texto */
    line-height: 1; /* Evita desalinhamento por linha de base */
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.questao-botao-enviar:hover {
    background: linear-gradient(135deg, var(--accent-primary-darker, #bf2156), var(--accent-primary-darkest, #a61c4a));
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.questao-botao-enviar:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Garante alinhamento vertical do ícone Material Symbols dentro do botão */
.questao-botao-enviar .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.questao-botao-enviar:disabled {
    background: var(--bg-disabled-dark, #ced4da); /* Cinza claro para desabilitado */
    color: #ffffff; /* Texto branco para visibilidade */
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.questao-botao-enviar.enviado {
    background: linear-gradient(135deg, var(--success-color, #28a745), var(--success-color-darker, #218838)); /* Gradiente verde */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: default;
}

/* Sent Answer State */
.resposta-enviada { /* Class added to .questao-container when sent */
    border-left-color: var(--success-color, #28a745); /* Verde para enviado */
}

.resposta-enviada .questao-textarea {
    border-color: var(--success-color, #28a745);
    background-color: var(--success-bg-subtle, #f0fff0); /* Fundo levemente verde */
}


/* Image Container within Question */
.questao-images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.questao-image-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.questao-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.questao-remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.questao-remove-image:hover {
    background-color: rgba(220, 53, 69, 0.9);
}

/* Dark Mode for Question Container */
body.dark-mode .questao-container {
    background: linear-gradient(145deg, #353535, #2d2d2d);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-left-color: var(--accent-primary, #D92960);
}

/* Dark mode - header padrão */
body.dark-mode .question-header {
    background: var(--bg-card);
    color: var(--text-heading);
    border-bottom-color: var(--border-subtle-dark, var(--border-color));
}

/* Badge só em desktop */
@media (max-width: 768px) {
  .question-type-badge { display: none; }
}

/* Dissertativa: textarea ocupar toda a área do corpo */
.questao-container.with-header .question-body {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 0; /* Remover padding para o textarea ocupar 100% */
}
.questao-container.with-header .question-body .questao-textarea {
    flex: 1 1 auto;
    height: auto; /* deixa o flex controlar a altura */
}

body.dark-mode .questao-container.erro {
    background: linear-gradient(145deg, #5a2d2d, #4d2525);
    border-left-color: var(--dm-danger-color, #ff6b6b);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

body.dark-mode .questao-erro-mensagem {
    color: rgba(255, 120, 120, 0.9); /* Lighter red for dark mode */
}

body.dark-mode .questao-pergunta {
    color: var(--text-secondary);
}

body.dark-mode .questao-pergunta::before {
    color: var(--dm-accent-primary-lighter, #ff80ab); /* Cor do ícone mais clara */
}

body.dark-mode .questao-textarea {
    background-color: var(--dm-bg-surface, #3d3d3d);
    border-color: var(--dm-border-color, #555);
    color: var(--dm-text-primary, #f0f0f0);
}

body.dark-mode .questao-textarea:focus {
    border-color: var(--accent-primary, #D92960);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.4);
    background-color: var(--dm-bg-surface-hover, #444);
}

body.dark-mode .questao-textarea:disabled {
    background-color: var(--dm-bg-disabled, #2a2a2a);
    opacity: 0.6;
}

body.dark-mode .questao-botao-enviar:disabled {
    background: var(--dm-bg-disabled-dark, #495057);
    color: #ffffff; /* Texto branco para melhor visibilidade no tema escuro */
}

body.dark-mode .resposta-enviada {
    border-left-color: var(--success-color, #28a745);
}

body.dark-mode .resposta-enviada .questao-textarea {
    border-color: var(--success-color, #28a745);
    background-color: var(--dm-success-bg-subtle, #2a3a2a); /* Fundo verde escuro */
}

body.dark-mode .questao-image-item {
    box-shadow: 0 1px 3px rgba(var(--text-primary-rgb, 0,0,0,0).4);
}

body.dark-mode .questao-remove-image {
    background-color: rgba(255, 255, 255, 0.3); /* Lighter remove button */
}
body.dark-mode .questao-remove-image:hover {
    background-color: rgba(255, 100, 100, 0.7); /* Lighter danger color */
}

/* Responsividade */
@media (max-width: 768px) {
    .questao-container {
        padding: 18px; /* Slightly less padding for mobile */
        margin: 15px 0; /* Consistent margin */
    }

    .questao-pergunta {
        font-size: 0.85rem; /* Slightly smaller on mobile */
        margin-bottom: 15px;
        padding-left: 1.8em; /* Adjust for smaller icon */
    }

    .questao-pergunta::before {
        font-size: 1.1em; /* Smaller icon */
        top: 0.15em; /* Adjust vertical alignment */
    }

    .questao-resposta {
        gap: 10px; /* Reduce gap between answer elements */
    }

    .questao-textarea {
        min-height: 90px; /* Smaller min-height for mobile */
        padding: 10px; /* Reduced padding */
    }

    .question-textbox-styled {
        min-height: 100px; /* Adjust height for question input */
        padding: 10px 40px 10px 10px; /* Adjust padding for image button */
    }

    .question-image-button {
        width: 32px;
        height: 32px;
        bottom: 6px;
        right: 6px;
    }

    .question-image-button .material-symbols-outlined {
        font-size: 1.2rem;
    }

    .question-image-preview-container {
        gap: 8px; /* Further reduce gap */
        padding: 8px;
    }

    .question-image-preview-item {
        width: 70px; /* Smaller preview */
        height: 70px;
    }

    .question-image-preview-item .question-remove-image {
        width: 16px;
        height: 16px;
        top: 3px;
        right: 3px;
        font-size: 10px;
    }

    .questao-botao-enviar {
        padding: 10px 20px; /* Smaller padding for button */
        font-size: 0.9rem; /* Smaller font size for button */
        align-self: stretch; /* Make button full width */
    }


    .questao-images-container {
        gap: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .questao-image-item {
        width: 50px;
        height: 50px;
    }

    .questao-remove-image {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }


}

/* Animation for error shake */
@keyframes tremer {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}

/* Adicionar tremer para questões interativas */
.interactive-multipla-escolha.erro,
.interactive-vf.erro,
.interactive-relacionar-colunas.erro {
    animation: tremer 0.5s;
}


.solution-content-card.solution-step-card .step-content {
    text-align: left; /* Alinha o texto à esquerda */
}

/* Se você também quiser que o enunciado e a resposta final alinhem à esquerda: */
.solution-content-card.solution-enunciado-card .enunciado-content {
text-align: left;
}

.solution-content-card.solution-answer-card .answer-content {
text-align: left;
}

/* =========================
   Grupo de Questões (submit único)
   ========================= */
.questoes-grupo {
margin-top: 10px;
}

/* Esconde botões individuais dentro do grupo, mantendo apenas o botão do grupo visível */
.questoes-grupo .questao-botao-enviar:not(.questoes-grupo-submit) {
display: none !important;
}

.questoes-grupo-actions {
display: flex;
justify-content: center;
margin-top: 12px;
}

.questoes-grupo .questoes-grupo-submit {
align-self: center;
}

/* Estado de erro no agrupamento */
.questoes-grupo.erro {
animation: tremer 0.5s;
}
/* Styles for displaying ready course cards */

.ready-course-item {
    background: linear-gradient(145deg, #fff, #f5f5f5);
    border-radius: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ready-course-item:hover {
    transform: translateY(-3px); /* Add hover effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
}

.ready-course-cover {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ready-course-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color, #292C6D); /* Use variable */
    margin-bottom: 12px;
    line-height: 1.3;
}

.ready-course-desc {
    font-size: 1rem;
    color: var(--text-secondary, #495057); /* Use variable */
    margin-bottom: 15px;
    line-height: 1.5;
}

.ready-course-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5; /* Ensure actions are above content */
}

.ready-course-item:hover .ready-course-actions {
    opacity: 1;
}

.course-action-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
}

.course-action-btn .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--icon-color, #6c757d); /* Use variable */
    transition: color 0.2s ease; /* Add transition for icon color */
}

.course-action-btn.edit:hover .material-symbols-outlined {
    color: var(--info-color, #0d6efd); /* Use variable */
}

.course-action-btn.delete:hover .material-symbols-outlined {
    color: var(--danger-color, #dc3545); /* Use variable */
}

.course-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Dark Mode */
body.dark-mode .ready-course-item {
    background: linear-gradient(145deg, #353535, #2d2d2d);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .ready-course-cover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode .ready-course-title {
    color: var(--dm-text-primary, #fff); /* Use variable */
}

body.dark-mode .ready-course-desc {
    color: var(--dm-text-secondary, #aaa); /* Use variable */
}

body.dark-mode .course-action-btn .material-symbols-outlined {
    color: var(--dm-icon-color, #adb5bd); /* Use variable */
}

body.dark-mode .course-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .course-action-btn.edit:hover .material-symbols-outlined {
    color: var(--dm-info-color, #58a6ff); /* Use variable */
}

body.dark-mode .course-action-btn.delete:hover .material-symbols-outlined {
    color: var(--dm-danger-color, #ff7b72); /* Use variable */
}



/* Review Cards Styles */

.review-overall-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.stat-pending {
    color: var(--warning-color);
}

.stat-done {
    color: var(--success-color);
}

.review-stats {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    font-size: 0.9em;
    justify-content: center;
}

.review-stats .stat-pending,
.review-stats .stat-done {
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(var(--warning-color-rgb), 0.1);
}

.review-stats .stat-done {
    background: rgba(var(--success-color-rgb), 0.1);
}

/* Flashcard Styles */
.flashcard-container {
    perspective: 1000px;
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
}

/* Garantir que tags sublin dentro do flashcard-area sejam inline */
#flashcard-area sublin {
    display: inline;
}

.flashcard {
    position: relative;
    width: 100%;
    height: 300px;
    max-height: 60vh;
    cursor: pointer;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    margin: 0 auto;
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.flashcard:hover:not(.flipped) {
    transform: scale(1.02);
}

.flashcard.flipped:hover {
    transform: rotateY(180deg) scale(1.02);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 16px;
    border: 2px solid var(--border-color);
    background: var(--card-background);
    display: block;
    text-align: left;
    font-size: 1.1em;
    line-height: 1.6;
    backface-visibility: hidden;
    transition: all 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.flashcard-front {
    background: linear-gradient(135deg, var(--primary-color-light), var(--primary-color));
    font-weight: 500;
}

.flashcard-back {
    background: linear-gradient(135deg, var(--secondary-color-light), var(--secondary-color));
    transform: rotateY(180deg);
}

/* Conteúdo interno dos flashcards */
.flashcard-front,
.flashcard-back {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.flashcard-front > *,
.flashcard-back > * {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: inherit !important;
}

/* Estilos específicos para tags mark dentro dos flashcards */
.flashcard-front mark,
.flashcard-back mark {
    display: inline !important;
    background-color: rgba(255, 255, 255, 0.3);
    color: inherit;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: baseline;
}

/* Garantir que elementos inline não quebrem o layout */
.flashcard-front p,
.flashcard-back p {
    margin: 0 0 10px 0;
    line-height: 1.6;
    display: block;
}

.flashcard-front p:last-child,
.flashcard-back p:last-child {
    margin-bottom: 0;
}

/* Garantir que o texto seja tratado como fluxo normal */
.flashcard-front *,
.flashcard-back * {
    box-sizing: border-box;
}

.flashcard-front div,
.flashcard-back div {
    display: block;
    width: 100%;
}

/* Scrollbar personalizada para flashcards */
.flashcard-front::-webkit-scrollbar,
.flashcard-back::-webkit-scrollbar {
    width: 6px;
}

.flashcard-front::-webkit-scrollbar-track,
.flashcard-back::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.flashcard-front::-webkit-scrollbar-thumb,
.flashcard-back::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.flashcard-front::-webkit-scrollbar-thumb:hover,
.flashcard-back::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.flashcard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    flex-wrap: wrap;
}

.flashcard-navigation button {
    min-width: 100px;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
    background: var(--primary-color);
    color: var(--text-on-accent);
}

.flashcard-navigation button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3);
}

.flashcard-navigation button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#flashcard-counter {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.2em;
    padding: 8px 16px;
    background: var(--card-background);
    border-radius: 20px;
    border: 2px solid var(--border-color);
    min-width: 80px;
    text-align: center;
}

.flashcard-feedback {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.flashcard-feedback button {
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flashcard-feedback button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Botões do Sistema Anki */
#flashcard-again-btn {
    background-color: #dc3545 !important;
    color: var(--text-on-accent);
    border: none;
}

#flashcard-again-btn:hover {
    background-color: #c82333 !important;
    transform: translateY(-2px);
}

#flashcard-hard-btn {
    background-color: #fd7e14 !important;
    color: white !important;
    border: none;
}

#flashcard-hard-btn:hover {
    background-color: #e8690b !important;
    transform: translateY(-2px);
}

#flashcard-good-btn {
    background-color: #28a745 !important;
    color: var(--text-on-accent);
    border: none;
}

#flashcard-good-btn:hover {
    background-color: #218838 !important;
    transform: translateY(-2px);
}

#flashcard-easy-btn {
    background-color: #007bff !important;
    color: var(--text-on-accent);
    border: none;
}

#flashcard-easy-btn:hover {
    background-color: #0069d9 !important;
    transform: translateY(-2px);
}

/* Flashcard Message Area */
#flashcard-message-area {
    margin-top: 15px;
    text-align: center;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#flashcard-message-area p {
    color: var(--text-secondary);
    font-size: 1.1em;
    margin: 0;
}

#flashcard-message-area .landing-action-button {
    margin: 0 5px;
}

/* Modal Options */
.modal-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.modal-options .landing-action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    min-width: 150px;
    justify-content: center;
}

/* Review Complete Styles */
.review-complete {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-color);
}

.review-complete h3 {
    margin: 20px 0 10px;
    color: var(--success-color);
}

.review-complete p {
    color: var(--text-secondary);
    font-size: 1.1em;
}

/* No Content Message */
.no-content-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

.no-content-message .material-symbols-outlined {
    font-size: 64px;
    color: var(--text-tertiary);
    margin-bottom: 20px;
}

.no-content-message h3 {
    margin: 20px 0 10px;
    color: var(--text-color);
}

.no-content-message p {
    font-size: 1.1em;
    max-width: 400px;
    margin: 0 auto;
}

/* Action Card Enhancements for Reviews */
.action-card {
    position: relative;
}

.action-card .action-card-icon .material-symbols-outlined {
    font-size: 32px;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Delete Cards Button */
.delete-cards-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff4757;
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.delete-cards-btn:hover {
    background: #ff3742;
    transform: scale(1.05);
}

.delete-cards-btn .material-symbols-outlined {
    font-size: 18px;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.delete-cards-btn:active {
    transform: scale(0.95);
}

/* Desktop/Large screens adjustments */
@media (min-width: 1024px) {
    .delete-cards-btn {
        top: 20px;
        right: 20px;
        padding: 8px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(255, 71, 87, 0.25);
        width: 36px;
        height: 36px;
        justify-content: center;
        font-size: 0;
        line-height: 0;
    }
    
    .delete-cards-btn .material-symbols-outlined {
        font-size: 18px !important;
        display: block;
    }
    
    /* Hide text content but keep icon */
    .delete-cards-btn {
        text-indent: -9999px;
        overflow: hidden;
    }
    
    .delete-cards-btn .material-symbols-outlined {
        text-indent: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: white !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .delete-cards-btn:hover {
        box-shadow: 0 3px 12px rgba(255, 71, 87, 0.35);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .review-overall-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .flashcard-navigation {
        gap: 10px;
    }
    
    .flashcard-navigation button {
        flex: 1;
        min-width: 70px;
    }
    
    .flashcard-feedback {
        flex-direction: column;
        gap: 10px;
    }
    
    .flashcard-feedback button {
        width: 100%;
    }
    
    /* Delete button adjustments for mobile */
    .delete-cards-btn {
        top: 8px;
        right: 8px;
        padding: 5px 8px;
        font-size: 0.75em;
    }
    
    .delete-cards-btn .material-symbols-outlined {
        font-size: 14px;
    }
    
    .review-stats {
        flex-direction: column;
        gap: 8px;
    }
    
    .review-complete {
        padding: 20px 15px;
    }
    
    .review-complete h3 {
        margin: 10px 0 5px;
    }
    
    .review-complete p {
        font-size: 1em;
    }
    
    .modal-content .review-stats {
        flex-direction: column;
        gap: 8px;
    }
}

/* Responsividade Mobile */
@media (max-width: 768px) {
    .flashcard-container {
        margin: 15px 0;
    }
    
    .flashcard {
        height: 250px;
        max-height: 50vh;
    }
    
    .flashcard-front,
    .flashcard-back {
        padding: 16px;
        font-size: 1em;
        border-radius: 12px;
    }
    
    .flashcard-navigation {
        margin: 15px 0;
    }
    
    .flashcard-navigation button {
        padding: 10px 16px;
        font-size: 0.9em;
    }
    
    #flashcard-counter {
        font-size: 1em;
        padding: 6px 12px;
        min-width: 70px;
    }
    
    .flashcard-feedback {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 20px;
    }
    
    .flashcard-feedback button {
        padding: 12px 8px;
        font-size: 0.85em;
    }
    
    .review-overall-stats {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .review-stats {
        flex-direction: row;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .flashcard {
        height: 220px;
        max-height: 45vh;
    }
    
    .flashcard-front,
    .flashcard-back {
        padding: 12px;
        font-size: 0.95em;
    }
    
    .flashcard-feedback {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .flashcard-feedback button {
        padding: 14px 12px;
        font-size: 0.9em;
    }
    
    .flashcard-navigation button {
        min-width: 70px;
        padding: 8px 12px;
        font-size: 0.85em;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .flashcard-front,
    .flashcard-back {
        border-color: var(--border-color-dark);
    }
    
    .review-overall-stats {
        background: var(--card-background-dark);
        border-color: var(--border-color-dark);
    }
    
    #flashcard-counter {
        background: var(--card-background-dark);
        border-color: var(--border-color-dark);
    }
}
/* Scroll to Bottom Button */
.scroll-to-bottom {
    position: fixed; /* Fixed relative to viewport */
    left: 50%; /* Center horizontally initially */
    bottom: var(--scroll-to-bottom-offset, 120px); /* Position above input area, dynamic */
    z-index: 20; /* Keep below input-area z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%; /* Circular */
    background-color: var(--accent-primary, #D92960);
    color: white; /* Consider var(--text-on-accent) */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Consider var(--shadow-sm) */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hidden by default */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease, box-shadow 0.2s ease, left 0.5s ease; /* Added left transition */
    transform: translateX(-50%) translateY(20px); /* Start below and centered */
}

.scroll-to-bottom.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Move up */
}

.scroll-to-bottom:hover {
    background-color: #bf2156; /* Darken accent */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Consider var(--shadow-md) */
    transform: translateX(-50%) translateY(-2px); /* Slight lift */
}

/* Adjust position when whiteboard is open */
/* This relies on the chat container having the 'with-whiteboard' class */
.chat-container.with-whiteboard .scroll-to-bottom {
    left: 25%; /* Move to the center of the chat area (50% of 50%) */
}

/* Responsive adjustments if needed */
@media (max-width: 868px) {
    .scroll-to-bottom {
    bottom: var(--scroll-to-bottom-offset-mobile, 70px); /* Dynamic for mobile too */
    }
    /* Keep the left adjustment for whiteboard mode */
    .chat-container.with-whiteboard .scroll-to-bottom {
       left: 50%; /* Recenter when chat takes full width */
    }
     /* If whiteboard takes full height on mobile, adjust left based on chat container */
    /* Removed empty rule for whiteboard-panel visible state */
}



/* Search Component Styles */
.search-container {
    width: 100%;
    max-width: 700px; /* Limita largura da busca */
    margin: 0 auto; /* Centraliza */
    position: relative;
}

.search-input {
    width: 100%;
    padding: 15px 20px 15px 50px; /* Espaço para o ícone */
    font-size: 1.1em;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(230, 57, 128, 0.3); /* Sombra de foco */
}

/* Autofill normalization */
.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0px 1000px var(--bg-card) inset;
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-card) inset;
    transition: background-color 9999s ease-in-out 0s;
}
body.dark-mode .search-input:-webkit-autofill,
body.dark-mode .search-input:-webkit-autofill:hover,
body.dark-mode .search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dm-text-primary);
    box-shadow: 0 0 0px 1000px var(--dm-bg-card) inset;
    -webkit-box-shadow: 0 0 0px 1000px var(--dm-bg-card) inset;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none; /* Ícone não interfere no clique */
    width: 20px;
    height: 20px;
}

/* Responsividade */
@media (max-width: 480px) {
    .search-input {
        padding: 12px 15px 12px 40px;
        font-size: 1em;
    }
    .search-icon {
        left: 12px;
        width: 18px;
        height: 18px;
    }
}



/* Session History Display Styles */

/* Container for the entire history view */
#session-history-content {
    /* Add padding or other container styles if needed */
    padding: 20px;
}
#session-history-content.hidden {
    display: none;
}

/* Section for each date */
.session-date-section {
    margin-bottom: 30px;
    border-bottom: 2px solid #e0e0e0; /* Separator */
    padding-bottom: 20px;
    position: relative; /* For potential absolute elements */
}
.session-date-section:last-child {
    border-bottom: none; /* Remove border on last section */
    margin-bottom: 0;
}

.session-date-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-primary, #292C6D); /* Brand color */
    margin-bottom: 15px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    padding-left: 15px; /* Indent slightly */
    text-align: center; /* Center date */
    margin-top: 15px;
    position: sticky; /* Make date sticky */
    top: 0; /* Stick to top */
    background: white; /* Add background to prevent overlap */
    padding-top: 10px;
    padding-bottom: 5px;
    z-index: 1; /* Ensure it's above items */
}

/* Individual session item */
.session-item {
    padding: 25px;
    border-radius: 18px; /* Rounded corners */
    background: linear-gradient(145deg, #fff, #f5f5f5); /* Light gradient */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow */
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden; /* For pseudo-elements */
    margin-left: 15px; /* Indent session items */
    margin-right: 15px; /* Add right margin */
}
.session-item:last-child {
    margin-bottom: 0;
}

.session-item:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}

/* Optional hover shine effect */
.session-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.session-item:hover::before {
    opacity: 1;
}

.session-details {
    display: flex;
    align-items: flex-start; /* Align items top */
    gap: 25px;
}

.session-time-range {
    font-size: 1.1rem;
    color: #495057; /* Dark gray text */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Prevent shrinking */
    min-width: 130px; /* Ensure consistent width */
    position: relative; /* For pseudo-element */
}

.session-time-range::before { /* Time icon */
    content: "schedule"; /* Material Symbols icon name */
    font-family: "Material Symbols Outlined";
    font-size: 1.3rem;
    color: var(--accent-primary, #D92960); /* Accent color */
    line-height: 1; /* Ensure proper alignment */
}

/* Summary list within session item */
.session-item .summary-list {
    /* Styles inherited from _summary-dropdown.css */
    /* Override if needed */
    margin-top: 15px; /* Add margin above summary */
    margin-bottom: 0; /* Remove bottom margin */
    max-height: 120px; /* Adjust max height */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    display: flex; /* Ensure flex for wrapping */
    flex-wrap: wrap;
    gap: 10px;
}
.session-item .summary-list li {
     /* Styles inherited */
     /* Override if needed */
     margin-bottom: 0; /* Remove bottom margin */
     background-color: rgba(217, 41, 96, 0.1); /* Light accent background */
     color: var(--accent-primary, #D92960); /* Accent text */
     box-shadow: none; /* Remove shadow */
}
.session-item .summary-list li:hover {
     filter: brightness(0.9); /* Darken slightly */
}


/* Loading state placeholder */
.session-item.loading::after {
    content: "Loading..."; /* Or use a spinner */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); /* Semi-transparent overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    color: #333;
    font-weight: 500;
}


/* Dark Mode */
body.dark-mode #session-history-content {
     /* Add dark background if needed */
     /* background-color: #1a1a1a; */
}
body.dark-mode .session-date-section {
    border-bottom-color: #444; /* Darker separator */
}
body.dark-mode .session-date-label {
    color: #fff; /* Light text */
    background: #2d2d2d; /* Dark background for sticky */
    text-shadow: none;
}
body.dark-mode .session-item {
    background: linear-gradient(145deg, #353535, #2d2d2d); /* Dark gradient */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow */
}
body.dark-mode .session-item:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Enhanced dark shadow */
}
body.dark-mode .session-item::before {
    background: rgba(255, 255, 255, 0.05); /* Subtle light shine */
}
body.dark-mode .session-time-range {
    color: #eee; /* Light text */
}
body.dark-mode .session-item .summary-list li {
     background-color: rgba(217, 41, 96, 0.2); /* Darker accent background */
     color: #ff8cc4; /* Lighter accent text */
}
body.dark-mode .session-item .summary-list li:hover {
     filter: brightness(0.8);
}
body.dark-mode .session-item.loading::after {
    background: rgba(0, 0, 0, 0.7); /* Darker overlay */
    color: #eee; /* Light text */
}

/* Responsive */
@media (max-width: 868px) {
    #session-history-content {
         padding: 15px;
    }
    .session-date-label {
        font-size: 1.1rem;
        padding-left: 0; /* Remove indent */
    }
    .session-details {
        flex-direction: column; /* Stack vertically */
        align-items: stretch; /* Stretch items */
        gap: 15px; /* Reduce gap */
    }
    .session-item {
        padding: 20px;
        margin-left: 0; /* Remove indent */
        margin-right: 0;
    }
    .session-time-range {
        margin-bottom: 10px;
        justify-content: center; /* Center time */
        min-width: auto; /* Reset min-width */
    }
    .session-item .summary-list {
        justify-content: center; /* Center summary items */
        max-height: 100px;
    }
}



/* Session Toolbar Styles */

 .session-toolbar {
    position: fixed;
    top: 50%;
    left: 20px; /* Distância da lateral esquerda */
    transform: translateY(-50%);
    /* Fundo claro translúcido */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 32px; /* Mais arredondado para coluna */
    padding: 14px 10px;
    display: flex;
    flex-direction: column; /* Agora em coluna */
    gap: 12px;
    z-index: 1060;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hidden state */
 .session-toolbar.esconde {
    transform: translate(-160%, -50%); /* Sai para a esquerda */
    opacity: 0;
    pointer-events: none;
}

 .toolbar-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #555);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

 .toolbar-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary, #333);
}

 .toolbar-btn .material-symbols-outlined {
    font-size: 22px;
}

/* Dark Mode Adjustments */
body.dark-mode .session-toolbar {
    /* Dark background with transparency */
    background-color: rgba(45, 45, 45, 0.9);
    /* Original darker shadow for dark mode */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for dark mode */
}

body.dark-mode .toolbar-btn {
    color: var(--dm-text-primary, #f0f0f0); /* Light color for dark background */
}

body.dark-mode .toolbar-btn:hover {
    /* Light hover for dark background */
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Ensure icon color inherits correctly in dark mode */
body.dark-mode .toolbar-btn .material-symbols-outlined {
    color: inherit;
}

/* Mobile Responsive Design */
@media (max-width: 868px) {
    /* Oculta completamente no mobile */
    .session-toolbar { display: none !important; }
}

/* Media query removida - session-toolbar está oculto em dispositivos móveis */



/* src/css/components/_notes-window.css */

.notes-window {
    position: fixed;
    bottom: 20px;
    right: 80px; /* Position next to toolbar */
    width: 720px; /* 3:2 ratio default width */
    height: 480px; /* 3:2 ratio default height */
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 25px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1055; /* Below toolbar, above calculator */
    resize: none; /* Usamos handles JS para redimensionar em todas as bordas */
    min-width: 320px;
    min-height: 400px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Enable container queries so layout responds to this window's width */
    container-type: inline-size;
    container-name: notes;
    /* Ensure proper positioning */
    box-sizing: border-box;
}

/* Handles para redimensionar (todas as bordas/cantos) */
.resize-handle { position: absolute; z-index: 20; background: transparent; }
.handle-n { top: 0; left: 0; width: 100%; height: 8px; cursor: n-resize; }
.handle-s { bottom: 0; left: 0; width: 100%; height: 8px; cursor: s-resize; }
.handle-e { top: 0; right: 0; width: 8px; height: 100%; cursor: e-resize; }
.handle-w { top: 0; left: 0; width: 8px; height: 100%; cursor: w-resize; }
.handle-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: ne-resize; }
.handle-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nw-resize; }
.handle-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: se-resize; }
.handle-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: sw-resize; }

.notes-window:not(.esconde) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.notes-window.dragging {
    opacity: 0.8;
    transition: opacity 0.1s ease;
    user-select: none;
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient(45deg, var(--bg-user-message), var(--accent-primary));
    color: var(--text-on-accent);
    border-bottom: 1px solid transparent;
    cursor: grab;
    flex-shrink: 0;
}

.notes-header:active {
    cursor: grabbing;
}

.notes-tabs {
    display: flex;
    align-items: center; /* Alinha verticalmente o título e as abas */
}

/* --- CORREÇÃO: Estilo do título da janela --- */
.notes-window-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    margin-right: 15px; /* Espaço entre título e a primeira aba */
    padding-left: 5px; /* Pequeno espaçamento da borda */
}

.notes-window-title .material-symbols-outlined {
    font-size: 20px;
}
/* --- FIM CORREÇÃO --- */

.notes-tab {
    display: flex; 
    align-items: center;
    gap: 8px; 
    padding: 10px 15px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7); 
    transition: all 0.2s ease;
}

.notes-tab.active {
    color: white;
    border-bottom-color: white;
    font-weight: 600;
}

.notes-tab:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.notes-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notes-save-status {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--success-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notes-save-status.show {
    opacity: 1;
}

.notes-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.notes-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.notes-body {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-primary); 
}

.notes-tab-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: none;
    padding: 15px;
    box-sizing: border-box;
}

.notes-tab-content.active {
    display: flex;
    flex-direction: column;
}

#notes-menu-content {
    position: relative; /* For FAB positioning */
    padding: 0;
}

.notes-category-list, .notes-list-for-category {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: auto;
    padding: 15px;
}

.notes-category-item, .note-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-subtle-light);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notes-category-item:hover, .note-item:hover {
    background-color: var(--bg-hover-subtle);
}

.notes-list-for-category.esconde {
    display: none;
}

.note-item-title {
    font-weight: 500;
}

.note-item-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.notes-list-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: var(--bg-secondary);
    font-weight: 600;
}

.notes-list-header .back-to-categories {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

/* Floating Action Button (FAB) */
.notes-new-item-fab-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.notes-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    color: white;
    font-size: 24px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.notes-fab:hover {
    background-color: var(--accent-primary-hover);
    transform: scale(1.05);
}

.notes-fab-options {
    position: absolute;
    bottom: 65px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notes-fab-options button {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}

.notes-fab-options.esconde {
    display: none;
}

/* Form Styles inside #notes-content-container */
.notes-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notes-form h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-heading);
}

.notes-form label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.notes-form input[type="text"],
.notes-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    box-sizing: border-box;
}

.note-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
}

#note-editor-textarea {
    flex-grow: 1; 
    padding: 12px 15px;
    border: 1px solid var(--border-input);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-input);
    color: var(--text-input);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    outline: none;
    resize: none; 
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#note-editor-textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
}

.notes-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* Dark Mode */
body.dark-mode .notes-window {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .notes-header {
    border-bottom-color: var(--border-subtle-dark);
}

body.dark-mode .notes-body {
    background-color: var(--bg-primary);
}

body.dark-mode .notes-tab {
    color: var(--text-on-accent-muted-dark);
}
body.dark-mode .notes-tab.active {
    color: var(--text-on-accent);
    border-bottom-color: var(--text-on-accent);
}

body.dark-mode .notes-close-btn {
    color: var(--text-on-accent-muted-dark);
}
body.dark-mode .notes-close-btn:hover {
    background-color: var(--bg-light-hover-dark);
    color: var(--text-on-accent);
}

body.dark-mode .notes-category-item,
body.dark-mode .note-item {
    border-bottom-color: var(--border-subtle-dark);
}
body.dark-mode .notes-category-item:hover,
body.dark-mode .note-item:hover {
    background-color: var(--bg-card-hover);
}
body.dark-mode .notes-form input,
body.dark-mode .notes-form select {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-input);
}

/* --- CORREÇÃO: Adicionada regra para o título do formulário em dark mode --- */
body.dark-mode .notes-form h3 {
    color: var(--text-heading);
}

body.dark-mode #note-editor-textarea {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-input);
}

body.dark-mode #note-editor-textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.3);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .notes-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        z-index: 1070;
        min-width: 0;
        min-height: 0;
        resize: none;
        box-sizing: border-box;
        overflow: hidden;
        /* Ensure it's positioned correctly */
        margin: 0;
        padding: 0;
    }
    
    .notes-header {
        padding: 12px 16px;
    }
    
    .notes-window-title {
        font-size: 1.1rem;
    }
    
    .notes-tab {
        padding: 12px 16px;
        font-size: 1rem;
    }
    
    .notes-content {
        padding: 16px;
    }
    
    .note-textarea {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* Removed overlapping medium breakpoint to keep full-screen behavior on all <=768px widths */

/* ================================
   LearnAI Notes - New Scoped Styles
   (All rules scoped under #notes-window)
   ================================ */

#notes-window .notes-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

/* Header */
#notes-window .notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
    cursor: grab;
}

#notes-window .notes-header:active { cursor: grabbing; }

#notes-window .header-left { display: flex; align-items: center; }
#notes-window .app-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.25rem; color: var(--text-heading); font-weight: 600;
}
#notes-window .icon-notes { color: var(--accent-primary); }
#notes-window .header-right { display: flex; gap: 0.5rem; }

/* Chat Switcher (header-left) */
#notes-window .chat-switcher { position: relative; margin-left: 0.75rem; }
#notes-window .btn-chat-switcher {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.6rem; border-radius: 999px;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); cursor: pointer;
    font-size: 0.85rem; line-height: 1; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#notes-window .btn-chat-switcher:hover { background: var(--bg-card-hover); }
#notes-window .btn-chat-switcher .chevron { opacity: 0.8; }

#notes-window .chat-switcher-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 0.5rem;
    box-shadow: 0 8px 20px var(--shadow-color);
    min-width: 240px; max-height: 300px; overflow: auto;
    padding: 0.25rem; z-index: 1400; display: none;
}
#notes-window .chat-switcher-menu.open { display: block; }
#notes-window .chat-switcher-list { display: flex; flex-direction: column; gap: 0.25rem; }
#notes-window .chat-switcher-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: transparent; color: var(--text-primary);
    border: none; border-radius: 0.375rem; text-align: left;
    padding: 0.5rem 0.6rem; cursor: pointer; font-size: 0.9rem;
}
#notes-window .chat-switcher-item:hover { background: var(--bg-card-hover); }
#notes-window .chat-switcher-item .item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notes-window .chat-switcher-item .item-check { color: var(--accent-primary); margin-left: 0.5rem; }

/* Search Bar */
#notes-window .search-bar {
    display: none;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    gap: 1rem; align-items: center;
}
#notes-window .search-bar.active { display: flex; }
#notes-window .search-input {
    flex: 1; padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}
#notes-window .search-input:focus {
    outline: none; border-color: var(--border-input-focus); box-shadow: var(--shadow-input-focus);
}

/* Main Layout */
#notes-window .notes-main { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
#notes-window .categories-sidebar {
    width: 280px; background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    display: flex; flex-direction: column;
}
#notes-window .sidebar-header {
    padding: 1.5rem 1rem; border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
}
#notes-window .sidebar-header h2 { font-size: 1rem; font-weight: 600; color: var(--text-heading); }
#notes-window .categories-list { flex: 1; overflow-y: auto; padding: 0.5rem; }

#notes-window .category-item {
    display: flex; align-items: center; padding: 0.75rem 1rem; margin-bottom: 0.25rem;
    border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; position: relative;
}
#notes-window .category-item:hover { background: var(--bg-card-hover); }
#notes-window .category-item.active { background: rgba(var(--accent-primary-rgb), 0.1); border-left: 3px solid var(--accent-primary); }
#notes-window .category-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 0.75rem; flex-shrink: 0; }
#notes-window .category-name { flex: 1; font-size: 0.875rem; color: var(--text-primary); }
#notes-window .category-count { font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-secondary); padding: 0.125rem 0.5rem; border-radius: 0.75rem; }
#notes-window .category-actions { display: none; gap: 0.25rem; margin-left: 0.5rem; }
#notes-window .category-item:hover .category-actions { display: flex; }

/* Notes Area */
#notes-window .notes-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-secondary); }
#notes-window .notes-toolbar {
    padding: 1.5rem; background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
}
#notes-window .current-category { font-size: 1.25rem; color: var(--text-heading); font-weight: 500; }
#notes-window .notes-grid {
    flex: 1; padding: 1.5rem; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem; align-content: start;
}

/* Note Cards */
#notes-window .note-card {
    background: var(--bg-card); border-radius: 0.5rem; padding: 1.25rem;
    border: 1px solid var(--border-color); cursor: pointer; transition: all 0.2s ease;
    display: flex; flex-direction: column; max-height: 250px;
    animation: notes-fade-in 0.3s ease;
}
#notes-window .note-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-color); border-color: var(--accent-primary); }
#notes-window .note-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
#notes-window .note-title { font-size: 1rem; font-weight: 600; color: var(--text-heading); margin: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notes-window .note-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s ease; }
#notes-window .note-card:hover .note-actions { opacity: 1; }
#notes-window .note-content { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; overflow: hidden; display: -webkit-box; line-clamp: 4; -webkit-line-clamp: 4; -webkit-box-orient: vertical; flex: 1; }
#notes-window .note-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
#notes-window .note-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; }
#notes-window .note-tag { font-size: 0.75rem; padding: 0.125rem 0.5rem; background: rgba(var(--accent-primary-rgb), 0.1); color: var(--accent-primary); border-radius: 0.25rem; }
#notes-window .note-date { font-size: 0.75rem; color: var(--text-secondary); }

/* Empty State */
#notes-window .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); grid-column: 1 / -1; }
#notes-window .empty-state svg { margin-bottom: 1rem; }
#notes-window .empty-state p { font-size: 1rem; }

/* Buttons */
#notes-window .btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    background: var(--accent-primary); color: var(--text-on-accent);
    border: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
}
#notes-window .btn-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3); }
#notes-window .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

#notes-window .btn-secondary {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
}
#notes-window .btn-secondary:hover { background: var(--bg-card-hover); }

#notes-window .btn-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    padding: 0; background: transparent; color: var(--text-secondary);
    border: none; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease;
}
#notes-window .btn-icon:hover { background: var(--bg-card-hover); color: var(--accent-primary); }

#notes-window .btn-add {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    padding: 0; background: var(--accent-primary); color: var(--text-on-accent);
    border: none; border-radius: 50%; cursor: pointer; transition: all 0.2s ease;
}
#notes-window .btn-add:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3); }

#notes-window .btn-text { background: transparent; border: none; color: var(--accent-secondary); font-size: 0.875rem; cursor: pointer; transition: color 0.2s ease; }
#notes-window .btn-text:hover { color: var(--accent-primary); }

#notes-window .btn-close { background: transparent; border: none; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; transition: all 0.2s ease; }
#notes-window .btn-close:hover { background: var(--bg-card-hover); color: var(--danger-color); }

#notes-window .btn-mini { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: all 0.2s ease; }
#notes-window .btn-mini:hover { background: var(--bg-card-hover); }
#notes-window .btn-mini.delete:hover { color: var(--danger-color); }
#notes-window .btn-mini.edit:hover { color: var(--accent-primary); }

/* Modals */
#notes-window .modal { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100; align-items: center; justify-content: center; }
#notes-window .modal.active { display: flex; }
#notes-window .modal-content { background: var(--bg-card); border-radius: 0.5rem; width: 90%; max-width: 500px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
#notes-window .modal-content.modal-large { max-width: 700px; }
#notes-window .modal-header { padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
#notes-window .modal-header h3 { font-size: 1.25rem; color: var(--text-heading); font-weight: 600; }
#notes-window .modal-body { padding: 1rem; overflow-y: auto; }
#notes-window .modal-footer { padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Forms */
#notes-window .form-group { margin-bottom: 0.75rem; }
#notes-window .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-heading); }
#notes-window .form-input, #notes-window .form-textarea {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary); color: var(--text-primary); transition: all 0.2s ease;
}
#notes-window .form-textarea { resize: vertical; font-family: inherit; }
#notes-window .form-input:focus, #notes-window .form-textarea:focus { outline: none; border-color: var(--border-input-focus); box-shadow: var(--shadow-input-focus); }

/* Color Picker */
#notes-window .color-picker {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
    width: auto; /* override generic .color-picker from schedule page */
    height: auto; /* override generic .color-picker from schedule page */
}
#notes-window .color-option {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.08);
    cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    appearance: none; outline: none; padding: 0;
}
#notes-window .color-option:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
#notes-window .color-option:focus-visible { box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb),0.35); }
#notes-window .color-option.selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.25); }

/* Scrollbars - LearnAI pink style scoped to Notes */
#notes-window .categories-list::-webkit-scrollbar,
#notes-window .notes-grid::-webkit-scrollbar,
#notes-window .chat-switcher-menu::-webkit-scrollbar,
#notes-window .modal-body::-webkit-scrollbar {
    width: 8px;
}

#notes-window .categories-list::-webkit-scrollbar-track,
#notes-window .notes-grid::-webkit-scrollbar-track,
#notes-window .chat-switcher-menu::-webkit-scrollbar-track,
#notes-window .modal-body::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 4px;
}

#notes-window .categories-list::-webkit-scrollbar-thumb,
#notes-window .notes-grid::-webkit-scrollbar-thumb,
#notes-window .chat-switcher-menu::-webkit-scrollbar-thumb,
#notes-window .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border-radius: 4px;
    border: 2px solid var(--bg-subtle);
}

/* Firefox */
#notes-window .categories-list,
#notes-window .notes-grid,
#notes-window .chat-switcher-menu,
#notes-window .modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-subtle);
}

/* Dark mode fine-tuning */
body.dark-mode #notes-window .categories-list::-webkit-scrollbar-track,
body.dark-mode #notes-window .notes-grid::-webkit-scrollbar-track,
body.dark-mode #notes-window .chat-switcher-menu::-webkit-scrollbar-track,
body.dark-mode #notes-window .modal-body::-webkit-scrollbar-track {
    background: var(--bg-card-hover);
}
body.dark-mode #notes-window .categories-list::-webkit-scrollbar-thumb,
body.dark-mode #notes-window .notes-grid::-webkit-scrollbar-thumb,
body.dark-mode #notes-window .chat-switcher-menu::-webkit-scrollbar-thumb,
body.dark-mode #notes-window .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
    border: 2px solid var(--bg-card-hover);
}
body.dark-mode #notes-window .categories-list,
body.dark-mode #notes-window .notes-grid,
body.dark-mode #notes-window .chat-switcher-menu,
body.dark-mode #notes-window .modal-body {
    scrollbar-color: var(--accent-primary) var(--bg-card-hover);
}

/* Responsive */
@media (max-width: 768px) {
    #notes-window .categories-sidebar { width: 200px; }
    #notes-window .notes-grid { grid-template-columns: 1fr; }
    #notes-window .modal-content { width: 95%; margin: 1rem; max-width: none; }
}

@media (max-width: 576px) {
    #notes-window .notes-main { flex-direction: column; }
    #notes-window .categories-sidebar { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid var(--border-color); }
    #notes-window .categories-list { display: flex; overflow-x: auto; padding: 0.5rem; gap: 0.5rem; }
    #notes-window .category-item { flex-shrink: 0; min-width: 150px; }
    #notes-window .modal-content { width: 95%; margin: 0.5rem; max-width: none; }
}

/* ================================
   Class-based responsive (JS ResizeObserver fallback)
   Ensures behavior even if container queries are not supported
   ================================ */
#notes-window.is-compact .categories-sidebar { width: 200px; }
#notes-window.is-compact .notes-grid { grid-template-columns: 1fr; }

#notes-window.is-mobile .notes-main { flex-direction: column; }
#notes-window.is-mobile .categories-sidebar {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
}
#notes-window.is-mobile .categories-list {
    display: flex;
    overflow-x: auto;
    padding: 0.5rem;
    gap: 0.5rem;
}
#notes-window.is-mobile .category-item { flex-shrink: 0; min-width: 150px; }
#notes-window.is-mobile .notes-grid { grid-template-columns: 1fr; }

/* Animations */
@keyframes notes-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes notes-slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
#notes-window .category-item { animation: notes-slide-in 0.2s ease; }

/* ================================
   Container Queries (component-responsive)
   Make the layout adapt when the notes window itself is narrow,
   regardless of the overall viewport width.
   ================================ */
@container notes (max-width: 768px) {
    #notes-window .categories-sidebar { width: 200px; }
    #notes-window .notes-grid { grid-template-columns: 1fr; }
}

@container notes (max-width: 576px) {
    #notes-window .notes-main { flex-direction: column; }
    #notes-window .categories-sidebar {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    #notes-window .categories-list {
        display: flex;
        overflow-x: auto;
        padding: 0.5rem;
        gap: 0.5rem;
    }
    #notes-window .category-item { flex-shrink: 0; min-width: 150px; }
    #notes-window .notes-grid { grid-template-columns: 1fr; }
}
/* Study Plan Subtopic Actions & Drag/Drop Styles */

/* --- Actions within the Study Plan Tab View --- */
.subtopic-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* Push actions to the right */
    flex-shrink: 0; /* Prevent shrinking */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
}

/* Show actions on hover/focus of the item */
.subtopic-item:hover .subtopic-actions,
.subtopic-item:focus-within .subtopic-actions {
    opacity: 1;
}

.drag-handle,
.edit-icon,
.delete-icon {
    cursor: pointer;
    color: #6c757d; /* Muted color */
    transition: color 0.3s ease;
    padding: 4px; /* Add padding for easier clicking */
    border-radius: 4px;
}
.drag-handle:hover,
.edit-icon:hover {
    color: var(--brand-primary, #292C6D); /* Brand color on hover */
    background-color: rgba(0, 0, 0, 0.05);
}
.delete-icon:hover {
    color: #dc3545; /* Red on hover */
    background-color: rgba(220, 53, 69, 0.1);
}
.drag-handle {
    cursor: grab;
}
.drag-handle:active {
    cursor: grabbing;
}

/* --- Actions within the Study Plan Message View --- */
.subtopic-actions-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Push actions right */
    flex-shrink: 0;
    /* Position absolutely on mobile */
}

.drag-handle-message,
.edit-icon-message,
.delete-icon-message {
    cursor: pointer;
    color: #6c757d; /* Muted color */
    transition: color 0.3s ease, background-color 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

.drag-handle-message {
    cursor: grab;
    margin-right: 8px; /* Space after handle */
}
.drag-handle-message:active {
    cursor: grabbing;
}

.edit-icon-message:hover,
.delete-icon-message:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */
}

.edit-icon-message:hover {
     color: var(--brand-primary, #292C6D); /* Brand color */
}

.delete-icon-message:hover {
    color: #dc3545; /* Red */
}

/* --- SortableJS Styles (Applied to .plano-topico li) --- */
.plano-topico li {
    /* Base styles in _study-plan.css */
    cursor: grab; /* Indicate draggable */
    /* Ensure flex properties are set for alignment */
    display: flex;
    align-items: center;
    gap: 10px;
    /* background-color: #fff; /* Base background */
    /* border-radius: 4px; */
    /* transition: all 0.3s ease; /* Base transition */
}

/* Style for the ghost element during drag */
.plano-topico li.sortable-ghost {
    opacity: 0.5;
    background-color: #f0f0f0; /* Light background for placeholder */
}

/* Style for the element being dragged */
.plano-topico li.sortable-chosen {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Add shadow when dragging */
    background-color: #fff; /* Ensure background doesn't change */
}

/* Ensure text is not selectable during drag */
.subtopico-text {
    flex: 1; /* Allow text to take space */
    pointer-events: none; /* Prevent text interaction during drag */
    user-select: none; /* Disable text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* --- Edit Input Field --- */
#edit-subtopic-input {
    background-color: white;
    color: #333;
    border: 1px solid #ced4da; /* Light border */
    border-radius: 4px;
    padding: 8px;
    width: 100%; /* Full width within its container */
    margin-top: 10px; /* Space above input */
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box; /* Include padding/border in width */
}

#edit-subtopic-input:focus {
    outline: none;
    border-color: #0d6efd; /* Blue focus border */
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); /* Blue focus shadow */
}


/* --- Dark Mode Adjustments --- */
body.dark-mode .drag-handle,
body.dark-mode .edit-icon,
body.dark-mode .delete-icon {
    color: #adb5bd; /* Lighter muted color */
}
body.dark-mode .drag-handle:hover,
body.dark-mode .edit-icon:hover {
    color: var(--accent-primary, #D92960); /* Use accent color */
    background-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .delete-icon:hover {
    color: #ff6b6b; /* Lighter red */
    background-color: rgba(255, 107, 107, 0.15);
}

body.dark-mode .drag-handle-message,
body.dark-mode .edit-icon-message,
body.dark-mode .delete-icon-message {
    color: #adb5bd; /* Lighter muted color */
}
body.dark-mode .edit-icon-message:hover,
body.dark-mode .delete-icon-message:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle light background */
}
body.dark-mode .edit-icon-message:hover {
    color: var(--accent-primary, #D92960); /* Accent color */
}
body.dark-mode .delete-icon-message:hover {
    color: #ff6b6b; /* Lighter red */
}

body.dark-mode .plano-topico li {
    /* background-color: #2d2d2d; /* Dark background */
}
body.dark-mode .plano-topico li.sortable-ghost {
    background-color: #3d3d3d; /* Darker placeholder */
}
body.dark-mode .plano-topico li.sortable-chosen {
    background-color: #353535; /* Slightly different dark background when chosen */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Darker shadow */
}

body.dark-mode #edit-subtopic-input {
    background-color: #3d3d3d; /* Dark input background */
    color: #fff; /* Light text */
    border-color: #4d4d4d; /* Dark border */
}
body.dark-mode #edit-subtopic-input:focus {
    border-color: #0d6efd; /* Keep blue focus border */
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); /* Keep blue focus shadow */
}

/* --- Responsive Adjustments for Actions in Message --- */
@media (max-width: 868px) {
     .plano-topico li {
         /* Ensure flex properties for mobile layout */
         display: flex;
         align-items: center; /* Align items vertically */
         padding: 12px 8px; /* Increased padding for better touch targets */
         gap: 8px;
         position: relative; /* Needed for absolute positioning of actions */
         flex-wrap: nowrap; /* Prevent wrapping */
         min-height: 44px; /* Minimum touch target size */
     }
     
     .plano-topico li:before {
         left: 8px;
         top: 50%;
         transform: translateY(-50%);
         font-size: 0.8em;
     }
     
     .subtopic-actions-message {
         position: absolute; /* Position actions absolutely */
         right: 8px;
         top: 50%;
         transform: translateY(-50%);
         display: flex;
         gap: 6px;
         background: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
         padding: 4px 6px;
         border-radius: 6px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(4px);
     }
     
     .edit-icon-message, .delete-icon-message {
         padding: 8px;
         font-size: 16px; /* Appropriate size for mobile */
         min-width: 32px;
         min-height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 4px;
     }
     
     .drag-handle-message {
         padding: 8px;
         font-size: 16px;
         min-width: 32px;
         min-height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 4px;
     }
     
     .subtopico-text {
         flex: 1;
         min-width: 0; /* Allow shrinking */
         word-wrap: break-word;
         padding-right: 120px; /* More space for actions */
         line-height: 1.4;
         font-size: 0.95em;
     }
}

@media (max-width: 640px) {
     .plano-topico li {
         padding: 10px 6px;
         gap: 6px;
         min-height: 40px;
     }
     
     .plano-topico li:before {
         left: 6px;
         font-size: 0.75em;
     }
     
     .subtopic-actions-message {
         right: 6px;
         gap: 4px;
         padding: 3px 5px;
         border-radius: 5px;
     }
     
     .edit-icon-message, .delete-icon-message, .drag-handle-message {
         padding: 6px;
         font-size: 14px;
         min-width: 28px;
         min-height: 28px;
     }
     
     .subtopico-text {
         padding-right: 100px;
         font-size: 0.9em;
     }
}

@media (max-width: 480px) {
     .plano-topico li {
         padding: 8px 4px;
         gap: 4px;
         min-height: 36px;
     }
     
     .plano-topico li:before {
         left: 4px;
         font-size: 0.7em;
     }
     
     .subtopic-actions-message {
         right: 4px;
         gap: 2px;
         padding: 2px 4px;
         border-radius: 4px;
     }
     
     .edit-icon-message, .delete-icon-message, .drag-handle-message {
         padding: 4px;
         font-size: 12px;
         min-width: 24px;
         min-height: 24px;
     }
     
     .subtopico-text {
         padding-right: 80px;
         font-size: 0.85em;
         line-height: 1.3;
     }
}

/* Dark mode adjustments for mobile */
@media (max-width: 868px) {
     body.dark-mode .subtopic-actions-message {
         background: rgba(45, 45, 45, 0.9);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     }
}



/* Study Plan Component Styles */

/* Common Progress Bar Styles (Used in Tab View) */
.progress-bar {
    width: 100%;
    height: 8px; /* Increased height for tab view */
    background: var(--bg-secondary, #f0f0f0); /* Lighter background */
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
    position: relative; /* For potential labels */
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary, var(--accent-primary)), var(--brand-primary, var(--brand-primary))); /* Gradient fill */
    width: 0; /* Initial width */
    transition: width 0.5s ease-out;
    border-radius: 4px; /* Match parent */
    min-width: 0; /* Ensure it can be 0 */
    max-width: 100%;
    will-change: width; /* Optimize animation */
}

/* Style 1: Study Plan embedded within a message */
.message .plano-estudos { /* Scoped to messages */
    background: var(--bg-primary, #fff); /* White background inside message */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin: 15px 0 0; /* Add margin top inside message */
    border: 1px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2); /* Accent border */
    font-size: 0.95em; /* Slightly smaller font */
}

.message .plano-estudos .plano-titulo {
    color: var(--brand-primary, var(--brand-primary));
    font-size: 1.3em; /* Smaller title */
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2); /* Lighter border */
    text-align: center;
    font-weight: 600;
}

.message .plano-estudos .plano-topico {
    margin: 15px 0;
}

.message .plano-estudos .plano-topico h3 {
    color: var(--accent-primary);
    font-size: 1.1em; /* Smaller topic heading */
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.05); /* Subtle background */
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600; /* Added weight */
}

.message .plano-estudos .plano-topico h3::before {
    content: "📚";
    font-size: 0.9em; /* Smaller icon */
    margin-right: 0; /* Removed margin, using gap */
}

.message .plano-estudos .plano-topico ul {
    list-style: none;
    padding-left: 5px; /* Reduced padding */
    margin: 0;
}

.message .plano-estudos .plano-topico li {
    position: relative;
    padding: 6px 0 6px 25px; /* Adjusted padding */
    color: var(--text-secondary, #495057); /* Consider var(--text-secondary) */
    font-size: 0.95em; /* Match parent */
    line-height: 1.4;
    border-left: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1); /* Subtle left border */
    margin-left: 8px; /* Indentation */
    transition: all 0.2s ease;
}

.message .plano-estudos .plano-topico li:before {
    content: "→";
    color: var(--brand-primary, var(--brand-primary));
    position: absolute;
    left: 8px;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.message .plano-estudos .plano-topico li:hover {
    color: var(--accent-primary); /* Accent color on hover */
    border-left-color: var(--accent-primary, var(--accent-primary));
    background: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.03);
    padding-left: 30px; /* Shift text slightly */
}

.message .plano-estudos .plano-topico li:hover:before {
    color: var(--accent-primary);
    left: 13px; /* Shift arrow */
}

/* Version choice: buttons para escolher versões do plano */
.message .version-choice { margin-top: 10px; }
.message .version-choice .version-choice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.message .version-choice .choose-version-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: linear-gradient(135deg, var(--brand-primary, var(--brand-primary)), var(--accent-primary, var(--accent-primary)));
    color: var(--text-on-accent, #fff);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.22);
}
body.dark-mode .message .version-choice .choose-version-btn { box-shadow: 0 8px 24px rgba(var(--text-primary-rgb, 0,0,0,0).45); }


/* Style 2: Study Plan in its own Tab/View */
.study-plan-view {
    padding: 25px;
    height: 100%; /* Fill container */
    overflow-y: auto; /* Enable scrolling */
    background: linear-gradient(165deg, var(--bg-primary, #fff), var(--bg-secondary, #f8f9fa)); /* Subtle gradient background */
    /* Scrollbar styles in _scrollbar.css */
}

/* Topic actions within inline message plan */
.message .plano-estudos .plano-topico-titulo { display:flex; align-items:center; justify-content: space-between; gap:8px; }
.message .plano-estudos .plano-topico-titulo .plano-topico-titulo-text { flex: 1 1 auto; }
.message .plano-estudos .topic-actions-message { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.message .plano-estudos .topic-actions-message .material-symbols-outlined { border: 1px solid var(--border-input, rgba(var(--text-primary-rgb, 0,0,0,0).12)); background: var(--bg-card, #fff); border-radius: 8px; padding: 2px 4px; cursor: pointer; }
body.dark-mode .message .plano-estudos .topic-actions-message .material-symbols-outlined { background: var(--bg-card, #2d2d2d); color: var(--text-primary, #f0f0f0); border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).12)); }

/* Topic-add button styling for inline plan inside messages */
.message .plano-estudos .topic-global-actions { display: flex; justify-content: flex-start; margin: 12px 0; }
.study-plan-view .topic-global-actions { display: flex; justify-content: flex-start; margin: 16px 0; }
.message .plano-estudos .topic-global-actions .topic-add,
.study-plan-view .topic-global-actions .topic-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-input, rgba(var(--text-primary-rgb, 0,0,0,0).12));
    background: var(--bg-card, #fff);
    color: var(--text-primary, #212529);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.12));
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.message .plano-estudos .topic-global-actions .topic-add .material-symbols-outlined,
.study-plan-view .topic-global-actions .topic-add .material-symbols-outlined { font-size: 18px; }
.message .plano-estudos .topic-global-actions .topic-add:hover,
.message .plano-estudos .topic-global-actions .topic-add:focus,
.study-plan-view .topic-global-actions .topic-add:hover,
.study-plan-view .topic-global-actions .topic-add:focus {
    background: var(--bg-card-hover, #f1f3f5);
    border-color: var(--accent-primary, #E63980);
    color: var(--accent-primary, #E63980);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.24);
    outline: none;
}
.message .plano-estudos .topic-global-actions .topic-add:active,
.study-plan-view .topic-global-actions .topic-add:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
}
body.dark-mode .message .plano-estudos .topic-global-actions .topic-add,
body.dark-mode .study-plan-view .topic-global-actions .topic-add {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).18));
    box-shadow: var(--shadow-dark-strong, 0 4px 12px rgba(0, 0, 0, 0.35));
}
body.dark-mode .message .plano-estudos .topic-global-actions .topic-add:hover,
body.dark-mode .message .plano-estudos .topic-global-actions .topic-add:focus,
body.dark-mode .study-plan-view .topic-global-actions .topic-add:hover,
body.dark-mode .study-plan-view .topic-global-actions .topic-add:focus {
    background: var(--bg-card-hover, #353535);
    border-color: var(--accent-primary, #E63980);
    color: var(--accent-primary, #E63980);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28);
}

/* Container for overall progress */
.study-plan-view .overall-progress {
    background: white;
    padding: 25px;
    border-radius: 15px; /* Larger radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Softer shadow */
    margin-bottom: 35px;
    border: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1); /* Subtle accent border */
}

.study-plan-view .overall-progress h2 {
    color: var(--brand-primary, var(--brand-primary));
    font-size: 1.6em; /* Larger title */
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

/* Individual topic section */
.study-plan-view .topic-section {
    margin-bottom: 25px;
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInUp 0.5s ease-out forwards; /* Add fade-in animation */
    opacity: 0; /* Start hidden for animation */
}

.study-plan-view .topic-section:hover {
    transform: translateY(-3px); /* Lift effect */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Enhanced shadow */
}

.study-plan-view .topic-actions { display: inline-flex; gap: 8px; }
.study-plan-view .topic-actions button { border: 1px solid var(--border-input, rgba(var(--text-primary-rgb, 0,0,0,0).12)); background: var(--bg-card, #fff); border-radius: 999px; padding: 6px 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.study-plan-view .topic-actions button .material-symbols-outlined { font-size: 18px; }
body.dark-mode .study-plan-view .topic-actions button { background: var(--bg-card, #2d2d2d); color: var(--text-primary, #f0f0f0); border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).12)); }

.study-plan-view .topic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1); /* Subtle separator */
    gap: 10px; /* Add gap */
}

.study-plan-view .topic-title {
    color: var(--brand-primary, var(--brand-primary));
    font-size: 1.3em; /* Larger topic title */
    font-weight: 600;
}

.study-plan-view .topic-progress-text {
    background: var(--accent-primary, var(--accent-primary));
    color: white; /* Consider var(--text-on-accent) */
    padding: 5px 12px;
    border-radius: 20px; /* Pill shape */
    font-weight: 500;
    font-size: 0.9em;
    min-width: 45px; /* Ensure minimum width */
    text-align: right; /* Align text right */
    flex-shrink: 0; /* Prevent shrinking */
}

/* List of subtopics */
.study-plan-view .subtopic-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.study-plan-view .subtopic-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle separator */
    transition: background-color 0.3s ease;
}

.study-plan-view .subtopic-item:last-child {
    border-bottom: none; /* Remove border for last item */
}

.study-plan-view .subtopic-item:hover {
    background-color: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.03); /* Subtle hover background */
}

.study-plan-view .subtopic-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-primary, var(--accent-primary));
    border-radius: 4px;
    margin-right: 15px; /* Increased margin */
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

.study-plan-view .subtopic-checkbox:checked {
    background-color: var(--accent-primary, var(--accent-primary));
    border-color: var(--accent-primary, var(--accent-primary));
}

.study-plan-view .subtopic-checkbox:checked::after {
    content: "✓";
    position: absolute;
    color: white;
    font-size: 14px;
    font-weight: bold; /* Make checkmark bolder */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.study-plan-view .subtopic-text {
    /* margin-left: 15px; /* Handled by checkbox margin */
    color: var(--text-secondary, #495057); /* Consider var(--text-secondary) */
    font-size: 1.1em; /* Slightly larger text */
    flex-grow: 1; /* Allow text to take space */
    line-height: 1.4;
}

/* Container for study plan content when in a tab */
#study-plan-content {
    padding: 0; /* Remove padding, handled by .study-plan-view */
    height: 100%;
    overflow-y: auto;
    background: var(--bg-primary, #fff); /* Base background */
}

#study-plan-content.hidden {
    display: none;
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure animation applies correctly */
.study-plan-view .topic-section {
    animation: fadeInUp 0.5s ease-out forwards;
}


/* --- Study Plan in Message - Expand/Collapse --- */
.message .plano-estudos {
    /* Existing styles... */
    /* Add styles for expand/collapse */
    max-height: 240px; /* Limit initial height */
    overflow: hidden;
    position: relative; /* For positioning button and pseudo-element */
    transition: max-height 0.3s ease-out;
    padding-bottom: 60px; /* Space for expand button */
    margin-bottom: 20px; /* Ensure margin below */
    /* Scroll behavior */
    scroll-behavior: auto; /* Prevent smooth scroll interference */
    overflow-anchor: none; /* Prevent browser adjusting scroll on content change */
}

/* Style for list items within message plan */
.message .plano-estudos .plano-topico li {
     scroll-margin: 0; /* Reset scroll margin */
     /* Ensure flex is applied if not already */
     display: flex;
     align-items: center;
     gap: 10px;
     /* background-color: #fff; /* Base background */
     /* border-radius: 4px; */
}


/* Fade effect at the bottom when collapsed */
.message .plano-estudos::after {
    content: "";
    position: absolute;
    bottom: 60px; /* Position above the button area */
    left: 0;
    right: 0;
    height: 40px; /* Height of the fade */
    background: linear-gradient(to bottom, transparent, white); /* Fade to background */
    pointer-events: none; /* Allow clicking through */
    transition: opacity 0.3s ease;
    opacity: 1; /* Visible by default */
}

/* Expanded state */
.message .plano-estudos.expanded {
    max-height: none; /* Allow full height */
}

.message .plano-estudos.expanded::after {
    opacity: 0; /* Hide fade when expanded */
}

/* Expand Button */
.expand-button {
    position: absolute;
    bottom: 20px; /* Position within the bottom padding */
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary, var(--accent-primary));
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px; /* Pill shape */
    cursor: pointer;
    z-index: 1; /* Above pseudo-element */
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.expand-button:hover {
    background: var(--accent-primary-hover, #bf2156); /* Darken accent */
    transform: translateX(-50%) translateY(-2px); /* Lift effect */
}

.expand-button .material-symbols-outlined {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* Rotate icon when expanded */
.message .plano-estudos.expanded .expand-button .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Dark mode for expand/collapse */
body.dark-mode .message .plano-estudos::after {
    /* Use dark background variable for fade */
    --bg-color: var(--dm-bg-card, #2d2d2d); /* Match dark mode plan background */
    background: linear-gradient(to bottom, transparent, var(--bg-color));
}
/* Expand button dark mode styles are implicitly handled if using variables */


/* --- Study Plan Tab View - Scrollbar --- */
.study-plan-view {
    /* Existing styles... */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, var(--accent-primary)) #f0f0f0; /* thumb track */
}

.study-plan-view::-webkit-scrollbar {
    width: 8px;
}

.study-plan-view::-webkit-scrollbar-track {
    background: var(--bg-secondary, #f0f0f0); /* Light track */
    border-radius: 4px;
}

.study-plan-view::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, var(--accent-primary));
    border-radius: 4px;
    border: 2px solid #f0f0f0; /* Match track */
}

/* Dark Mode Scrollbar for Tab View */
body.dark-mode .study-plan-view {
    scrollbar-color: var(--accent-primary, var(--accent-primary)) #353535; /* Dark track */
}

body.dark-mode .study-plan-view::-webkit-scrollbar-track {
    background: #353535; /* Dark track */
}

body.dark-mode .study-plan-view::-webkit-scrollbar-thumb {
    border-color: #353535; /* Match dark track */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Study Plan Tab View - Mobile Optimizations */
    .study-plan-view {
        padding: 15px;
        background: var(--bg-secondary, #f8f9fa); /* Simpler background on mobile */
    }
    /* Hide inline plan inside messages on mobile to use fullscreen view button */
    .message .plano-estudos { display: none; }
    
    .study-plan-view .overall-progress {
        padding: 20px;
        margin-bottom: 25px;
        border-radius: 12px;
    }
    
    .study-plan-view .overall-progress h2 {
        font-size: 1.4em;
        margin-bottom: 15px;
    }
    
    .study-plan-view .topic-section {
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 12px;
    }
    
    .study-plan-view .topic-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .study-plan-view .topic-title {
        font-size: 1.2em;
        width: 100%;
    }
    
    .study-plan-view .topic-progress-text {
        align-self: flex-end;
        font-size: 0.85em;
        padding: 4px 10px;
    }
    
    .study-plan-view .subtopic-item {
        padding: 15px 0;
        flex-wrap: wrap;
    }
    
    .study-plan-view .subtopic-checkbox {
        width: 18px;
        height: 18px;
        margin-right: 12px;
    }
    
    .study-plan-view .subtopic-text {
        font-size: 1.05em;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    /* Extra small screens - Further optimizations */
    .study-plan-view {
        padding: 10px;
    }
    
    .study-plan-view .overall-progress {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .study-plan-view .overall-progress h2 {
        font-size: 1.3em;
    }
    
    .study-plan-view .topic-section {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .study-plan-view .topic-title {
        font-size: 1.1em;
    }
    
    .study-plan-view .topic-progress-text {
        font-size: 0.8em;
        padding: 3px 8px;
    }
    
    .study-plan-view .subtopic-item {
        padding: 12px 0;
    }
    
    .study-plan-view .subtopic-text {
        font-size: 1em;
    }
    
    /* Message embedded study plan - Mobile: hide inline to favor fullscreen view */
    .message .plano-estudos { display: none; }
}

/* Additional mobile improvements for subtopic lists */
@media (max-width: 640px) {
    /* Pruned */
}

@media (max-width: 480px) {
    /* Pruned */
}


/* --- Preview Study Plan Mode (mobile) and View Plan button --- */

/* Button shown inside chat message on mobile */
.view-plan-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-primary, var(--accent-primary));
    color: var(--text-on-accent, #fff);
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--text-primary-rgb, 0,0,0,0).12);
    transition: transform 0.15s ease, filter 0.2s ease;
}
.view-plan-button:hover { filter: brightness(0.96); transform: translateY(-1px); }
.view-plan-button:active { transform: translateY(0); }
.view-plan-button .material-symbols-outlined { font-size: 18px; }

/* When the whiteboard is used to preview the plan for confirmation */
.whiteboard-panel.preview-study-plan {
    background: var(--bg, #fff);
}
.whiteboard-panel.preview-study-plan .tabs {
    display: none !important; /* Hide tabs in preview */
}
.whiteboard-panel.preview-study-plan .whiteboard-content {
    padding-top: 0;
}
.whiteboard-panel.preview-study-plan #study-plan-content {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 96px; /* space for floating confirm button */
}

/* Hide progress-related UI in preview */
.whiteboard-panel.preview-study-plan #study-plan-content .overall-progress,
.whiteboard-panel.preview-study-plan #study-plan-content .topic-progress-text,
.whiteboard-panel.preview-study-plan #study-plan-content .progress-bar,
.whiteboard-panel.preview-study-plan #study-plan-content .subtopic-checkbox,
.whiteboard-panel.preview-study-plan #study-plan-content .study-graph .node-progress { 
    display: none !important; 
}

/* Typography adjustments in preview (mobile-first) */
.whiteboard-panel.preview-study-plan #study-plan-content .plan-main-title { font-size: 1.15em; }
.whiteboard-panel.preview-study-plan #study-plan-content .subtopic-text { font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whiteboard-panel.preview-study-plan #study-plan-content .topic-title { font-size: 1.05em; }

/* Compact single-line subtopic items, keep actions visible */
.whiteboard-panel.preview-study-plan #study-plan-content .subtopic-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    flex-wrap: nowrap;
}
.whiteboard-panel.preview-study-plan #study-plan-content .subtopic-actions {
    opacity: 1 !important; /* Always visible */
}

/* Floating confirm button */
.confirm-plan-floating-btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-primary, var(--accent-primary));
    color: var(--text-on-accent, #fff);
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(var(--text-primary-rgb, 0,0,0,0).2);
    cursor: pointer;
}
.confirm-plan-floating-btn .material-symbols-outlined { font-size: 20px; }
.confirm-plan-floating-btn:hover { filter: brightness(0.96); }

/* Dark mode adjustments */
body.dark-mode .whiteboard-panel.preview-study-plan { background: var(--dm-bg, #222); }
body.dark-mode .confirm-plan-floating-btn { box-shadow: 0 8px 24px rgba(var(--text-primary-rgb, 0,0,0,0).5); }

/* ---- Study Graph (DAG) styles ---- */
.study-graph { margin-top: 16px; border-top: 1px solid var(--border-color, rgba(var(--text-primary-rgb, 0,0,0,0).06)); padding-top: 12px; }
.tool-modal { position: fixed; bottom: 16px; right: 16px; width: 360px; max-height: 70vh; background: #fff; border: 1px solid rgba(var(--text-primary-rgb, 0,0,0,0).1); border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--text-primary-rgb, 0,0,0,0).15); display: none; flex-direction: column; z-index: 1000; }
.tool-modal.visible { display: flex; }
.tool-modal .tool-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-color, rgba(var(--text-primary-rgb, 0,0,0,0).06)); }
.tool-modal .tool-modal-content { padding: 12px; overflow: auto; }
.tool-modal .close-modal { border: none; background: transparent; cursor: pointer; }
.graph-node-item { padding: 8px 10px; border: 1px solid var(--border-color, rgba(var(--text-primary-rgb, 0,0,0,0).06)); border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
.graph-node-item.current { border-color: var(--accent-primary); background: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.06); }

 /* Unlock Modal */
 .unlock-modal-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(var(--text-primary-rgb, 0,0,0,0).4);
   display: none;
   align-items: center;
   justify-content: center;
   padding: 16px;
   z-index: 1100;
   opacity: 0;
   transition: opacity 0.2s ease;
 }
 .unlock-modal-backdrop.visible { display: flex; }
 .unlock-modal-backdrop.shown { opacity: 1; }
 .unlock-modal {
   width: min(520px, 100%);
   background: var(--bg-primary, #fff);
   color: var(--text-primary);
   border: 1px solid var(--border-input, #ced4da);
   border-radius: 12px;
   box-shadow: var(--shadow-dark-modal, 0 15px 40px rgba(var(--text-primary-rgb, 0,0,0,0).2));
   transform: translateY(8px) scale(0.98);
   opacity: 0.98;
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .unlock-modal-backdrop.shown .unlock-modal { transform: translateY(0) scale(1); opacity: 1; }
 .unlock-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-input, #ced4da);
 }
 .unlock-modal-header h3 { margin: 0; font-size: 1.05rem; color: var(--text-heading, #343a40); }
 .unlock-modal-header .close-unlock-modal {
   border: none;
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
   border-radius: 8px;
   padding: 6px;
 }
 .unlock-modal-header .close-unlock-modal:hover { background: var(--bg-hover, #f1f3f5); }
 .unlock-modal-body { padding: 16px; line-height: 1.45; }
 .unlock-modal-body p { margin: 0 0 10px; }
 .unlock-modal-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   padding: 12px 16px 16px;
 }
 .unlock-modal-actions .btn-cancel {
   background: var(--bg-hover);
   color: var(--text-primary);
   border: 1px solid var(--border-input, #ced4da);
   border-radius: 999px;
   padding: 8px 14px;
   cursor: pointer;
 }
 .unlock-modal-actions .btn-unlock {
   background: transparent;
   color: var(--accent-primary);
   border: 1px solid var(--accent-primary);
   border-radius: 999px;
   padding: 8px 14px;
   font-weight: 600;
   cursor: pointer;
 }
 .unlock-modal-actions .btn-unlock-open {
   background: linear-gradient(135deg, var(--brand-primary, var(--brand-primary)), var(--accent-primary, var(--accent-primary)));
   color: var(--text-on-accent, #fff);
   border: 0;
   border-radius: 999px;
   padding: 8px 14px;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.25);
 }
 .unlock-modal-actions .btn-cancel:hover { filter: brightness(0.98); }
 .unlock-modal-actions .btn-unlock:hover { filter: brightness(1.05); }
 .unlock-modal-actions .btn-unlock-open:hover { filter: brightness(1.03); }
 body.dark-mode .unlock-modal {
   background: var(--bg-card, #2d2d2d);
   color: var(--text-primary, #f0f0f0);
   border-color: var(--border-input, #4d4d4d);
   box-shadow: var(--shadow-dark-modal, 0 15px 40px rgba(var(--text-primary-rgb, 0,0,0,0).4));
 }
 body.dark-mode .unlock-modal-header { border-bottom-color: var(--border-input, #4d4d4d); }
 body.dark-mode .unlock-modal-header .close-unlock-modal:hover { background: var(--bg-light-hover-subtle-dark, rgba(var(--bg-primary-rgb, 255,255,255,0).05)); }
 body.dark-mode .unlock-modal-actions .btn-cancel {
   background: var(--bg-card, #2d2d2d);
   color: var(--text-primary, #f0f0f0);
   border-color: var(--border-input, #4d4d4d);
 }
 body.dark-mode .unlock-modal-actions .btn-unlock {
   color: var(--accent-primary, var(--accent-primary));
   border-color: var(--accent-primary, var(--accent-primary));
 }

.study-graph h2 { font-size: 1.2rem; margin: 8px 0 12px; }
.study-graph h2 .graph-add-node {
    border: 1px solid var(--border-input, rgba(var(--text-primary-rgb, 0,0,0,0).12));
    background: var(--bg-card, #fff);
    color: var(--text-primary, #212529);
    border-radius: 999px;
    padding: 6px 10px;
    margin-left: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.12));
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.study-graph h2 .graph-add-node .material-symbols-outlined { font-size: 18px; }
.study-graph h2 .graph-add-node:hover {
    background: var(--bg-card-hover, #f1f3f5);
    border-color: var(--accent-primary, #E63980);
    color: var(--accent-primary, #E63980);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.22);
    transform: translateY(-1px);
}
.study-graph .graph-section { margin-bottom: 16px; }
.study-graph .graph-section h3 { font-size: 1rem; margin: 8px 0; opacity: 0.8; }
.study-graph .graph-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.study-graph .graph-node { border: 1px solid var(--border-color, rgba(var(--text-primary-rgb, 0,0,0,0).08)); border-radius: 8px; padding: 10px; background: var(--bg-primary, #fff); }
.study-graph .graph-node .node-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.study-graph .graph-node .node-title { font-weight: 600; }
.study-graph .graph-node .node-actions { display: inline-flex; gap: 6px; }
.study-graph .graph-node .node-actions .graph-edit-node, .study-graph .graph-node .node-actions .graph-delete-node { border: 1px solid var(--border-input, rgba(var(--text-primary-rgb, 0,0,0,0).12)); background: var(--bg-card, #fff); color: var(--text-heading, #1F2937); border-radius: 8px; padding: 4px 6px; cursor: pointer; }
.study-graph .graph-node .node-actions .graph-edit-node:hover, .study-graph .graph-node .node-actions .graph-delete-node:hover {
    filter: brightness(0.98);
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.1);
}
.study-graph .graph-node .node-prereqs { margin-top: 6px; font-size: 0.85rem; opacity: 0.7; }
.study-graph .unlock-node { display: none; }
.study-graph .graph-node.available { border-color: rgba(0, 128, 0, 0.25); }
.study-graph .graph-node.available.has-microcourse { border-color: rgba(0, 128, 0, 0.5); background: rgba(0, 128, 0, 0.06); }
.study-graph .graph-node.blocked { opacity: 0.6; }
.study-graph .graph-node.passed { border-color: rgba(0, 0, 0, 0.05); background: #f7f7f7; }
.study-graph .open-microcourse { font-size: 0.85rem; padding: 6px 10px; border: none; background: var(--accent-primary); color: #fff; border-radius: 6px; cursor: pointer; }
.study-graph .open-microcourse:hover {
    filter: brightness(0.95);
    background: var(--accent-primary-hover);
}
.study-graph .open-microcourse.existing { background: var(--success-color, #4caf50); }
.study-graph .node-status.created { display: inline-block; margin-left: 6px; font-size: 0.75rem; color: #2e7d32; background: rgba(46,125,50,0.12); padding: 2px 6px; border-radius: 999px; }

/* Disabled state visuals for open-microcourse buttons */
.study-graph .open-microcourse.is-disabled,
.study-graph .open-microcourse[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.1) brightness(0.95);
}

/* Wrapper and overlay to catch clicks on disabled buttons and show toast */
.study-graph .open-microcourse-wrap {
    position: relative;
    display: inline-block;
}
.study-graph .open-microcourse-overlay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    /* Overlay is only visible for pointer events; no visual change */
    background: transparent;
}

/* Ensure overlay only captures clicks when button is disabled */
.study-graph .open-microcourse-wrap .open-microcourse-overlay { pointer-events: auto; }
.study-graph .open-microcourse-wrap .open-microcourse:not(.is-disabled)[disabled] ~ .open-microcourse-overlay { pointer-events: auto; }
.study-graph .open-microcourse-wrap .open-microcourse:not(.is-disabled):not([disabled]) ~ .open-microcourse-overlay { pointer-events: none; }

/* Progress bar dentro dos nós do grafo (somente quando has-microcourse) */
.study-graph .graph-node .node-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.study-graph .graph-node .node-progress .progress-bar { height: 6px; margin: 0; flex: 1; background: #ededed; }
.study-graph .graph-node .node-progress .progress-fill { background: linear-gradient(90deg, var(--accent-primary, var(--accent-primary)), var(--brand-primary, var(--brand-primary))); }
.study-graph .graph-node .node-progress .node-progress-text { font-size: 0.8rem; opacity: 0.8; min-width: 34px; text-align: right; }

/* Dark Mode Styles for Tool Modal and Graph Nodes */
body.dark-mode .tool-modal {
    background: #333;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .tool-modal .tool-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .tool-modal .tool-modal-content {
    color: #b0b0b0;
}

body.dark-mode .tool-modal .close-modal {
    color: #b0b0b0;
}

body.dark-mode .tool-modal .close-modal:hover {
    color: #e0e0e0;
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .graph-node-item {
    background-color: #3a3a3a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .graph-node-item:hover {
    background-color: #444;
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .graph-node-item.current {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
    color: var(--text-on-accent, #fff);
}

body.dark-mode .study-graph {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .study-graph h2,
body.dark-mode .study-graph .graph-section h3 {
    color: #e0e0e0;
}

body.dark-mode .study-graph .graph-node {
    background: #3a3a3a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}
body.dark-mode .study-graph h2 .graph-add-node {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).18));
    box-shadow: var(--shadow-dark-strong, 0 4px 12px rgba(0, 0, 0, 0.35));
}
body.dark-mode .study-graph h2 .graph-add-node:hover {
    background: var(--bg-card-hover, #353535);
    color: var(--accent-primary, #E63980);
    border-color: var(--accent-primary, #E63980);
    box-shadow: 0 6px 16px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28);
}
body.dark-mode .study-graph .graph-node .node-actions .graph-edit-node, body.dark-mode .study-graph .graph-node .node-actions .graph-delete-node { background: var(--bg-card, #2a2a2a); color: var(--text-primary, #f0f0f0); border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).12)); }

body.dark-mode .study-graph .graph-node.passed {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .study-graph .graph-node .node-progress .progress-bar {
    background: #555;
}

/* -------- Dedicated Course Page Layout -------- */
#course-page { display: block; height: 100%; overflow-y: auto; }
.course-page-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--border-color, rgba(var(--text-primary-rgb, 0,0,0,0).06));
}
.course-back-btn, .course-open-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    background: var(--accent-primary, var(--accent-primary));
    color: var(--text-on-accent, #fff);
}
.course-open-chat-btn { background: var(--brand-primary, var(--brand-primary)); }
.course-page-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--brand-primary, var(--brand-primary)); position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }

.course-graph-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px clamp(16px, 6vw, 48px);
    min-height: calc(100vh - 120px);
}

/* Make the graph roomier on the dedicated page */
.course-graph-container .study-graph { margin-top: 0; border-top: none; padding-top: 0; }
.course-graph-container .study-graph h2 { font-size: 1.35rem; margin: 0 0 12px; }
.course-graph-container .study-graph .graph-section { margin-bottom: 20px; }
.course-graph-container .study-graph .graph-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.course-graph-container .study-graph .graph-node { padding: 14px; }

/* --- Course Graph: Polished, responsive node design (scoped) --- */
.course-graph-container .study-graph .graph-list {
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.course-graph-container .study-graph .graph-node {
  position: relative;
  background: var(--bg, #fff);
  border: 1px solid var(--border-input, rgba(var(--border-input-rgb, 0,0,0,0.08)));
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(var(--text-primary-rgb, 0,0,0,0).06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  overflow: hidden;
}

/* Accent stripe indicating state */
.course-graph-container .study-graph .graph-node::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-primary, var(--accent-primary));
  opacity: 0.85;
}
.course-graph-container .study-graph .graph-node.available::before {
  background: linear-gradient(180deg, #10B981, #059669); /* success */
}
.course-graph-container .study-graph .graph-node.available.has-microcourse::before {
  background: linear-gradient(180deg, var(--success-color, #22C55E), var(--success-color-dark, #16A34A)); /* stronger success */
}
.course-graph-container .study-graph .graph-node.blocked::before {
  background: rgba(var(--border-input-rgb, 0,0,0,0.12));
}
.course-graph-container .study-graph .graph-node.passed::before {
  background: var(--brand-primary, var(--brand-primary));
  opacity: 0.35;
}

.course-graph-container .study-graph .graph-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--text-primary-rgb, 0,0,0,0).10);
  border-color: var(--accent-primary-border-subtle, rgba(var(--accent-primary-rgb, 217, 41, 96), 0.25));
}

.course-graph-container .study-graph .graph-node:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.18), 0 10px 28px rgba(var(--text-primary-rgb, 0,0,0,0).10);
}

/* Header + title */
.course-graph-container .study-graph .graph-node .node-header {
  gap: 10px;
  align-items: flex-start;
}
.course-graph-container .study-graph .graph-node .node-title {
  font-weight: 700;
  color: var(--text-heading, #1F2937);
}

/* Status badge */
.course-graph-container .study-graph .node-status.created {
  margin-left: 8px;
  font-weight: 600;
  color: #047857;
  background: rgba(16,185,129,0.15);
  border-radius: 999px;
  padding: 2px 8px;
}

/* State-specific card visuals */
.course-graph-container .study-graph .graph-node.available.has-microcourse {
  border-color: rgba(16,185,129,0.35);
  background: linear-gradient(180deg, rgba(16,185,129,0.06), transparent), var(--bg, #fff);
}
.course-graph-container .study-graph .graph-node.blocked {
  filter: grayscale(0.05);
  opacity: 0.9;
  background: var(--bg, #fff);
  border-style: dashed;
}
.course-graph-container .study-graph .graph-node.passed {
  background: linear-gradient(180deg, rgba(var(--brand-primary-rgb, 41,44,109),0.03), transparent), var(--bg-secondary, #fafbfc);
  border-color: var(--border-color, rgba(var(--text-primary-rgb, 0,0,0,0).06));
}

/* Prerequisites styling */
.course-graph-container .study-graph .graph-node .node-prereqs {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary, #6B7280);
  padding-left: 22px;
  position: relative;
}
.course-graph-container .study-graph .graph-node .node-prereqs::before {
  content: "🔗";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 14px;
  line-height: 14px;
  opacity: 0.8;
}

/* Open microcourse button - premium look */
.course-graph-container .study-graph .open-microcourse {
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, var(--brand-primary, var(--brand-primary)), var(--accent-primary, var(--accent-primary)));
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.25);
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.course-graph-container .study-graph .open-microcourse:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 10px 28px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28);
}
.course-graph-container .study-graph .open-microcourse:active {
  transform: translateY(0);
  filter: brightness(0.96);
}
.course-graph-container .study-graph .open-microcourse.existing {
  background: linear-gradient(135deg, var(--success-color-dark, #16A34A), #10B981);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.22);
}

/* Node progress refinements */
.course-graph-container .study-graph .graph-node .node-progress { margin-top: 10px; }
.course-graph-container .study-graph .graph-node .node-progress .progress-bar {
  height: 8px;
  margin: 0;
  background: var(--bg-card-hover, #ededed);
  border-radius: 999px;
  overflow: hidden;
}
.course-graph-container .study-graph .graph-node .node-progress .progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-primary, var(--accent-primary)), var(--brand-primary, var(--brand-primary)));
  transition: width 0.35s ease;
}
.course-graph-container .study-graph .graph-node .node-progress .node-progress-text {
  font-size: 0.82rem;
  opacity: 0.85;
  min-width: 34px;
  text-align: right;
}

/* Section headings */
.course-graph-container .study-graph h2 { letter-spacing: 0.2px; }
.course-graph-container .study-graph .graph-section h3 {
  font-weight: 700;
  color: var(--text-heading, #111827);
  margin-top: 8px;
}

/* Responsiveness */
@media (max-width: 1100px) {
  .course-graph-container .study-graph .graph-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .course-graph-container .study-graph .graph-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }
  .course-graph-container .study-graph .graph-node .node-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .course-graph-container .study-graph .open-microcourse {
    width: 100%;
    justify-content: center;
  }
}

/* Dark mode (scoped) */
body.dark-mode .course-graph-container .study-graph .graph-node {
  background: var(--bg-card, #1f1f1f);
  border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).12));
  box-shadow: 0 8px 24px rgba(var(--text-primary-rgb, 0,0,0,0).35);
}
body.dark-mode .course-graph-container .study-graph .graph-node.passed {
  background: linear-gradient(180deg, rgba(var(--bg-primary-rgb, 255,255,255,0).02), transparent), var(--bg-card, #1f1f1f);
  border-color: var(--border-light-dark, rgba(var(--bg-primary-rgb, 255,255,255,0).08));
}
body.dark-mode .course-graph-container .study-graph .graph-node.available.has-microcourse {
  background: linear-gradient(180deg, rgba(34,197,94,0.12), transparent), var(--bg-card, #1f1f1f);
  border-color: rgba(34,197,94,0.45);
}
body.dark-mode .course-graph-container .study-graph .graph-node .node-prereqs {
  color: var(--text-secondary, #b0b0b0);
}
body.dark-mode .course-graph-container .study-graph .node-status.created {
  background: rgba(34,197,94,0.2);
  color: #86efac;
}
body.dark-mode .course-graph-container .study-graph .open-microcourse {
  box-shadow: 0 8px 24px rgba(var(--text-primary-rgb, 0,0,0,0).45);
}
body.dark-mode .course-graph-container .study-graph .graph-node:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.35), 0 8px 24px rgba(var(--text-primary-rgb, 0,0,0,0).45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .course-graph-container .study-graph .graph-node,
  .course-graph-container .study-graph .open-microcourse {
    transition: none;
  }
}

/* Dark mode tweaks */
body.dark-mode .course-page-header { background: var(--dm-bg, #1f1f1f); border-bottom-color: rgba(var(--bg-primary-rgb, 255,255,255,0).08); }
body.dark-mode .course-page-title { color: #fff; }

@media (max-width: 768px) {
  .course-page-header { position: relative; padding: 10px 12px; }
  .course-page-title { font-size: 1.1rem; }
  .course-graph-container { padding: 12px; }
  .course-graph-container .study-graph .graph-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
}

/* Unlock button for blocked nodes (scoped to course page) */
.course-graph-container .study-graph .graph-node.blocked .unlock-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-input, rgba(var(--border-input-rgb, 0,0,0,0.12)));
  background: var(--bg-card-hover, #f1f3f5);
   color: var(--text-heading);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.course-graph-container .study-graph .graph-node.blocked .unlock-node .material-symbols-outlined { font-size: 20px; }
.course-graph-container .study-graph .graph-node.blocked .unlock-node:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 6px 18px rgba(var(--text-primary-rgb, 0,0,0,0).10);
}
.course-graph-container .study-graph .graph-node:not(.blocked) .unlock-node { display: none; }
body.dark-mode .course-graph-container .study-graph .graph-node.blocked .unlock-node {
  border-color: var(--border-input, rgba(var(--bg-primary-rgb, 255,255,255,0).12));
  background: var(--bg-card, #2d2d2d);
  color: var(--text-primary, #f0f0f0);
  box-shadow: 0 6px 18px rgba(var(--text-primary-rgb, 0,0,0,0).35);
}

/* Study Selection Button Group Styles */

.study-selection-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px; /* Context specific margin */
    margin-bottom: 20px; /* Context specific margin */
    border-radius: 45px; /* Very rounded container */
    border: #000 1px solid; /* Black border */
    padding: 10px;
    max-width: 400px; /* Limit width */
    /* align-self: center; /* Handled by parent? */
    margin-left: auto; /* Center container */
    margin-right: auto; /* Center container */
    flex-wrap: wrap; /* Allow wrapping */
}

.study-selection-group {
    position: relative; /* For absolute positioning of sub-options */
}

.study-selection-main-button {
    padding: 15px 50px; /* Large padding */
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--brand-primary, #292C6D); /* Brand color text */
    background-color: #fff; /* White background */
    border: 1px solid #ddd; /* Light border */
    border-radius: 35px; /* Very rounded button */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    display: block; /* Ensure it takes width */
    width: 100%; /* Take full width of group */
    text-align: center;
}

.study-selection-main-button:hover {
    background-color: #f0f0f0; /* Light gray hover */
    border-color: #ccc; /* Darker border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
}

/* Sub-options dropdown */
.study-selection-sub-options {
    position: absolute;
    left: 0;
    top: calc(100% + 5px); /* Position below button with gap */
    width: 100%;
    background-color: #fff; /* White background */
    border: 1px solid #ddd; /* Light border */
    /* border-top: none; /* Remove top border */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
    padding: 15px 20px;
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 10px;
    z-index: 10; /* Ensure it's above other elements */
}

.study-selection-sub-options.show {
    display: flex; /* Show dropdown */
}

/* Style buttons within the dropdown */
.study-selection-sub-options .landing-action-button {
    border-radius: 8px; /* Standard radius */
    box-shadow: none; /* Remove shadow */
    padding: 12px 20px; /* Adjust padding */
    font-size: 1rem; /* Adjust font size */
    margin: 0; /* Reset margin */
    width: 100%; /* Full width */
    text-align: center;
}

.study-selection-sub-options .landing-action-button:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow on hover */
    transform: translateY(-1px); /* Slight lift */
}

/* Dark Mode */
body.dark-mode .study-selection-buttons-container {
     border-color: #555; /* Darker border */
}
body.dark-mode .study-selection-main-button {
    background-color: #3d3d3d; /* Dark background */
    color: #eee; /* Light text */
    border-color: #555; /* Darker border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
body.dark-mode .study-selection-main-button:hover {
    background-color: #4d4d4d; /* Lighter dark */
    border-color: #666;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode .study-selection-sub-options {
    background-color: #2d2d2d; /* Dark dropdown background */
    border-color: #555;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Dark mode for buttons inside sub-options */
body.dark-mode .study-selection-sub-options .landing-action-button.resolver-button {
    background-color: #3d3d3d;
    color: #eee;
}
body.dark-mode .study-selection-sub-options .landing-action-button.resolver-button:hover {
     background-color: #4d4d4d;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Accent buttons keep their colors */
body.dark-mode .study-selection-sub-options .landing-action-button:hover {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* Responsive */
@media (max-width: 768px) {
    .study-selection-buttons-container {
        flex-direction: column; /* Stack vertically */
        gap: 10px;
        border: none; /* Remove border */
        padding: 0; /* Remove padding */
        max-width: 100%;
    }
    .study-selection-group {
        width: 100%;
    }
    .study-selection-main-button {
        width: 100%;
        text-align: center;
    }
    .study-selection-sub-options {
        width: 100%; /* Full width */
        left: 0; /* Align left */
        border-radius: 12px; /* Keep radius */
        position: static; /* Change from absolute */
        display: none; /* Keep hidden by default */
        margin-top: 10px; /* Add margin */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adjust shadow */
    }
     .study-selection-group.open .study-selection-sub-options { /* Use JS class to show */
         display: flex;
     }
}



/* Study Timer Component Styles */

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

@keyframes pulse-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(217, 41, 96, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


.study-timer {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 10000; /* High z-index */
    width: 160px;
    height: 160px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
    cursor: grab; /* Indicate draggable */
}
.study-timer:active {
    cursor: grabbing;
}

.study-timer:hover {
    transform: scale(1.05) translateY(-5px);
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.2));
}

/* Class added by JS to show the timer */
.study-timer.show {
    animation: fadeIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.timer-circle {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 50%, #f0f0f0 100%); /* Light gradient */
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.15),
        0 5px 10px rgba(0, 0, 0, 0.05),
        inset 0 -3px 10px rgba(0, 0, 0, 0.05),
        inset 0 3px 10px rgba(255, 255, 255, 0.8); /* Inner/outer shadows */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
    border: 2px solid rgba(217, 41, 96, 0.15); /* Subtle accent border */
    overflow: hidden;
    transform-origin: center;
    /* Transition for hide/show */
    transform: scale(1);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hidden state */
.timer-circle.hidden-timer {
    transform: scale(0);
    opacity: 0;
}
/* Visible state (redundant if default is visible) */
/* .timer-circle.visible-timer {
    transform: scale(1);
    opacity: 1;
} */

.timer-circle .timer-display{
    bottom: 5px;
}


.timer-progress {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Use --progress variable set by JS */
    background: conic-gradient(from 0deg, rgba(217, 41, 96, 0.3) var(--progress, 0%), transparent var(--progress, 0%));
    transition: background 0.1s linear; /* Smooth progress update */
    z-index: 0; /* Behind pointer/center */
}

/* Glow effect */
.timer-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Use --progress variable */
    background: conic-gradient(from 0deg, rgba(255, 107, 152, 0.4) calc(var(--progress, 0%) - 0.5%), transparent var(--progress, 0%));
    filter: blur(3px);
    transition: background 0.1s linear;
    z-index: 0;
    opacity: 0.7; /* Adjust glow opacity */
}

.timer-pointer {
    position: absolute;
    top: 8%; /* Position start */
    left: 50%;
    width: 3px;
    height: 42%; /* Length of pointer */
    background: linear-gradient(to bottom, transparent, var(--accent-primary, #D92960), #FF6B98); /* Gradient */
    border-radius: 4px;
    transform-origin: bottom center;
    /* Use --angle variable set by JS */
    transform: translateX(-50%) rotate(var(--angle, 0deg));
    transition: transform 0.5s cubic-bezier(0.4, 2.08, 0.55, 0.44); /* Bouncy transition */
    box-shadow: 0 0 10px rgba(217, 41, 96, 0.4);
    z-index: 3; /* Above progress */
}

/* Arrow tip */
.timer-pointer::after {
    content: '';
    position: absolute;
    top: -8px; /* Position above pointer */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--accent-primary, #D92960); /* Arrow color */
    filter: drop-shadow(0 0 5px rgba(217, 41, 96, 0.7));
}

/* Dot at arrow tip */
.timer-pointer::before {
    content: '';
    position: absolute;
    top: -10px; /* Position slightly above arrow */
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--accent-primary, #D92960);
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.7;
}

.timer-center {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, var(--accent-primary, #D92960), #b7234e); /* Accent gradient */
    border-radius: 50%;
    z-index: 4; /* Above pointer */
    box-shadow:
        0 0 8px rgba(217, 41, 96, 0.5),
        inset 0 -1px 3px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.6); /* Inner/outer shadow */
}

.timer-display { 
    font-size: 1rem; /* Base size */
    color: var(--brand-primary, #292C6D); /* Brand color */
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    z-index: 5; /* Above center */
    white-space: nowrap; /* Prevent line break */
}

/* Digital timer display (if separate element) */
#digital-timer.timer-display {
    /* top: 50%; /* Already centered */
}

.timer-button {
    position: absolute;
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: var(--brand-primary, #292C6D);
    z-index: 3000; /* Ensure buttons are clickable */
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

#timer-pause-resume {
    top: 65%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#timer-stop-button {
    top: 65%;
    left: 65%;
    transform: translate(-50%, -50%);
}

.timer-button:hover {
    background: var(--accent-primary, #D92960);
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.1); /* Scale effect */
    box-shadow:
        0 5px 10px rgba(217, 41, 96, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.timer-button:active {
    transform: translate(-50%, -50%) scale(0.95); /* Press effect */
    box-shadow:
        0 2px 5px rgba(217, 41, 96, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.timer-button .material-symbols-outlined {
    font-size: 18px;
    font-weight: 600;
}

/* Time markers */
.timer-markers {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1; /* Below pointer/center */
    pointer-events: none; /* Don't interfere with clicks */
}

.timer-marker {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 2px;
    height: 8px;
    background-color: rgba(41, 44, 109, 0.2); /* Subtle marker color */
    transform-origin: bottom center;
    /* JS will position these with rotate transforms */
}

/* Decorative rings */
.timer-ring-outer {
    position: absolute;
    width: 92%;
    height: 92%;
    border-radius: 50%;
    border: 2px dashed rgba(217, 41, 96, 0.15); /* Dashed accent */
    top: 4%;
    left: 4%;
    animation: rotate-slow 180s linear infinite;
    z-index: 1;
    pointer-events: none;
}

.timer-ring-inner {
    position: absolute;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    border: 1px dotted rgba(41, 44, 109, 0.1); /* Dotted brand */
    top: 12.5%;
    left: 12.5%;
    animation: rotate-slow 120s linear infinite reverse;
    z-index: 1;
    pointer-events: none;
}

/* Timer ending state */
.timer-ending .timer-circle {
    animation: pulse-glow 1s infinite;
    border-color: rgba(217, 41, 96, 0.6); /* Stronger accent border */
}

.timer-ending .timer-display {
    color: var(--accent-primary, #D92960); /* Accent color text */
    font-weight: 800;
}

/* Timer paused state */
.timer-paused .timer-pointer {
    opacity: 0.5;
    filter: grayscale(40%);
}

.timer-paused .timer-circle {
    filter: saturate(70%); /* Desaturate slightly */
}

.timer-paused .timer-display {
    opacity: 0.7;
}

/* Dark Mode Timer Styles */
body.dark-mode .timer-circle {
    background: linear-gradient(135deg, #3a3a3a 0%, #333333 50%, #2d2d2d 100%); /* Dark gradient */
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25),
        0 5px 10px rgba(0, 0, 0, 0.15),
        inset 0 -3px 10px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.1); /* Dark shadows */
    border-color: rgba(255, 107, 152, 0.25); /* Lighter accent border */
}

body.dark-mode .timer-progress {
    background: conic-gradient(from 0deg, rgba(255, 107, 152, 0.4) var(--progress, 0%), transparent var(--progress, 0%));
}

body.dark-mode .timer-progress::after {
    background: conic-gradient(from 0deg, rgba(255, 155, 184, 0.5) calc(var(--progress, 0%) - 0.5%), transparent var(--progress, 0%));
}

body.dark-mode .timer-display {
    color: #f0f0f0; /* Light text */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Darker shadow */
}

body.dark-mode .timer-button {
    background: rgba(58, 58, 58, 0.9); /* Dark button background */
    color: #f0f0f0; /* Light icon */
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

body.dark-mode .timer-button:hover {
    background: #FF6B98; /* Lighter accent hover */
    color: #1a1a1a; /* Dark icon on hover */
}

body.dark-mode .timer-marker {
    background-color: rgba(255, 255, 255, 0.15); /* Lighter markers */
}

body.dark-mode .timer-ring-outer {
    border-color: rgba(255, 107, 152, 0.25); /* Lighter accent dashed */
}

body.dark-mode .timer-ring-inner {
    border-color: rgba(255, 255, 255, 0.1); /* Lighter dotted */
}

body.dark-mode .timer-ending .timer-display {
    color: #FF6B98; /* Lighter accent text */
}

body.dark-mode .timer-ending .timer-circle {
    box-shadow: 0 10px 30px rgba(255, 107, 152, 0.3); /* Lighter glow */
    border-color: rgba(255, 107, 152, 0.6); /* Stronger lighter accent border */
}

/* Responsividade */
@media (max-width: 768px) {
    .study-timer {
        width: 140px;
        height: 140px;
        bottom: 20px;
        left: 20px;
    }
    .timer-display {
        font-size: 0.9rem;
    }
    .timer-button {
        width: 32px;
        height: 32px;
    }
    .timer-button .material-symbols-outlined {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .study-timer {
        width: 120px;
        height: 120px;
        bottom: 15px;
        left: 15px;
    }
    .timer-display {
        font-size: 0.8rem;
    }
    .timer-button {
        width: 28px;
        height: 28px;
    }
}

/* Digital Timer Pause Button (Header) */
.timer-button-digital {
    display: none; /* Hidden by default, shown by JS/context */
    align-items: center;
    justify-content: center;
    width: 28px; /* Match header button size */
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--accent-primary, #D92960);
    color: white;
    cursor: pointer;
    margin-left: 8px; /* Space from time display */
    transition: background-color 0.2s ease;
}
.timer-button-digital:hover {
    background-color: #bf2156; /* Darken accent */
}
.timer-button-digital .material-symbols-outlined {
    font-size: 1.2rem; /* Adjust icon size */
}
/* Dark mode for digital button */
body.dark-mode .timer-button-digital {
     /* Keep accent color */
}

/* --- Styles from style8.css --- */

/* Note: .timer-circle styles already exist, merging/overwriting if needed */
/* .timer-circle { ... } */

.timer-visibility-toggle {
    position: absolute;
    top: -15px; /* Position outside the circle */
    right: -15px;
    z-index: 10;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 1; /* Visible by default, maybe controlled by JS/hover */
    transition: opacity 0.3s ease;
}

.timer-visibility-toggle .material-symbols-outlined {
    font-size: 18px;
    color: var(--accent-primary, #d92960);
}

/* Hover effect on parent might control visibility */
.study-timer:hover .timer-visibility-toggle {
    opacity: 1;
}

/* Hide toggle when dragging */
.timer-circle.mouse-down .timer-visibility-toggle {
    opacity: 0;
}

body.dark-mode .timer-visibility-toggle {
    background-color: rgba(40, 40, 40, 0.9);
}

body.dark-mode .timer-visibility-toggle .material-symbols-outlined {
    color: var(--dm-accent-primary-lighter, #ff6b98);
}

/* Duplicate dark mode rule removed */

.study-timer.hidden { /* Class to hide the entire timer */
    display: none;
}

/* Note: .timer-progress styles already exist, merging/overwriting if needed */
/* .timer-progress { ... } */



/* Summary Dropdown Component Styles */

.summary-dropdown {
    margin-top: 20px;
    border-top: 1px solid #eee; /* Separator */
    padding-top: 20px;
}

.summary-dropdown-title {
    font-weight: 600;
    color: var(--brand-primary, #292C6D); /* Brand color */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* Center title */
    gap: 8px;
    user-select: none; /* Non-selectable */
    margin-bottom: 10px; /* Reduced margin */
}

.summary-dropdown-title .material-symbols-outlined { /* Arrow icon */
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

/* Rotate arrow when dropdown is open (requires JS class) */
.summary-dropdown.open .summary-dropdown-title .material-symbols-outlined {
    transform: rotate(180deg);
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0; /* Reset margin */
    /* margin-top: 10px; /* Removed, handled by title margin */
    max-height: 200px; /* Limit height */
    overflow-y: auto; /* Enable scroll */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) #f0f0f0; /* Accent scrollbar */
    margin-bottom: 25px; /* Space below list */
    padding: 5px; /* Add padding for scrollbar */
    border: 1px solid #eee; /* Add subtle border */
    border-radius: 8px;
}

/* Scrollbar styles (WebKit) */
.summary-list::-webkit-scrollbar {
    width: 8px;
}
.summary-list::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}
.summary-list::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border-radius: 4px;
    border: 2px solid #f0f0f0;
}

/* Individual summary item */
.summary-list li {
    padding: 8px 16px; /* Adjust padding */
    border-radius: 20px; /* Pill shape */
    margin-bottom: 8px; /* Increased gap */
    color: #495057; /* Darker text */
    transition: filter 0.2s ease, background-color 0.2s ease;
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis */
    /* Use distinct background colors */
    background-color: #f8f9fa; /* Default light gray */
}
.summary-list li:nth-child(odd) {
     background-color: #e9ecef; /* Slightly darker gray for odd items */
}

.summary-list li:hover {
    filter: brightness(0.95); /* Slight darken on hover */
}

/* Hidden state for list */
.summary-list.hidden {
    display: none;
}

/* Dark Mode */
body.dark-mode .summary-dropdown {
     border-top-color: #444; /* Darker separator */
}
body.dark-mode .summary-dropdown-title {
    color: #fff; /* Light text */
}
body.dark-mode .summary-list {
     scrollbar-color: var(--accent-primary, #D92960) #353535; /* Dark track */
     border-color: #444;
}
body.dark-mode .summary-list::-webkit-scrollbar-track {
    background: #353535; /* Dark track */
}
body.dark-mode .summary-list::-webkit-scrollbar-thumb {
    border-color: #353535; /* Match dark track */
}
body.dark-mode .summary-list li {
    background-color: #3d3d3d; /* Dark background */
    color: #f5f5f5; /* Light text */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.dark-mode .summary-list li:nth-child(odd) {
     background-color: #495057; /* Slightly different dark */
}
body.dark-mode .summary-list li:hover {
    filter: brightness(0.85); /* Darken more on hover */
}

/* Responsive */
@media (max-width: 868px) {
    .summary-list {
        max-height: 150px; /* Reduce max height */
    }
}



/* src/css/components/_table.css */

.table-container {
    overflow-x: auto; /* Enable horizontal scrolling for wide tables */
    margin: 1.5em 0; /* Add vertical spacing */
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: var(--border-radius-sm); /* Use variable */
    background-color: var(--bg-secondary); /* Use variable */
    box-shadow: var(--shadow-inset-sm); /* Use variable */
    max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em; /* Slightly smaller font */
    min-width: 400px; /* Minimum width to encourage scrolling instead of bad wrapping */
}

thead {
    background-color: var(--bg-card-hover); /* Use variable */
    border-bottom: 2px solid var(--border-color); /* Use variable */
}

th, td {
    border: 1px solid var(--border-color); /* Use variable */
    padding: 10px 14px; /* Adjust padding */
    text-align: left;
    line-height: 1.5; /* Improve readability */
    vertical-align: top; /* Align content top */
}

th {
    font-weight: 600;
    color: var(--text-heading); /* Use variable */
}

tbody tr:nth-child(even) {
    background-color: var(--bg-subtle); /* Use variable for subtle striping */
}

tbody tr:hover {
    background-color: var(--bg-card-hover); /* Use variable */
}

/* Dark Mode Table Styles */
body.dark-mode .table-container {
    border-color: var(--border-input); /* Use variable */
    background-color: var(--bg-card); /* Use variable */
}

body.dark-mode table {
    /* No color change needed if inheriting */
}

body.dark-mode thead {
    background-color: var(--bg-card-hover); /* Use variable */
    border-bottom-color: var(--border-input); /* Use variable */
}

body.dark-mode th,
body.dark-mode td {
    border-color: var(--border-input); /* Use variable */
}

body.dark-mode th {
    color: var(--text-heading); /* Use variable */
}

body.dark-mode tbody tr:nth-child(even) {
    background-color: var(--bg-card-hover); /* Use variable for dark striping */
}

body.dark-mode tbody tr:hover {
    background-color: var(--border-input); /* Use variable */
}

/* Allow inline code inside tables */
td .inline-code,
th .inline-code {
    white-space: normal; /* Allow inline code to wrap */
}

/* Markdown Table Styles */
.markdown-table-container {
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    max-width: 100%;
}

.markdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.markdown-table thead {
    background-color: var(--primary-light);
    color: var(--text-heading);
}

.markdown-table th,
.markdown-table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
}

.markdown-table tbody tr:nth-child(odd) {
    background-color: var(--bg-secondary);
}

.markdown-table tbody tr:nth-child(even) {
    background-color: var(--bg-subtle);
}

.markdown-table tbody tr:hover {
    background-color: var(--bg-card-hover);
    transition: background-color 0.2s ease;
}

/* Text alignment classes */
.markdown-table .text-left {
    text-align: left;
}

.markdown-table .text-center {
    text-align: center;
}

.markdown-table .text-right {
    text-align: right;
}

/* Dark mode styles for markdown tables */
body.dark-mode .markdown-table-container {
    background-color: var(--bg-card);
    border-color: var(--border-input);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

body.dark-mode .markdown-table thead {
    background-color: var(--primary-dark);
    color: var(--text-contrast);
}

body.dark-mode .markdown-table th,
body.dark-mode .markdown-table td {
    border-color: var(--border-input);
}

body.dark-mode .markdown-table tbody tr:nth-child(odd) {
    background-color: var(--bg-card);
}

body.dark-mode .markdown-table tbody tr:nth-child(even) {
    background-color: var(--bg-card-hover);
}

body.dark-mode .markdown-table tbody tr:hover {
    background-color: var(--border-input);
}


/* Textarea Component Styles */

/* Base Textarea (Example) */
/*
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
}
*/

/* Styled Question Textbox */
.question-textbox-styled {
    width: 100%;
    min-height: 150px; /* Minimum height */
    padding: 15px;
    /* padding-right: 50px; /* Adjust if button is inside */
    border: 2px solid var(--accent-primary, #D92960); /* Accent border */
    border-radius: 12px; /* Larger radius */
    font-size: 1rem;
    font-family: 'Poppins', sans-serif; /* Specific font */
    color: #333; /* Consider var(--text-primary) */
    background-color: #f8f9fa; /* Light background */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* Inner shadow */
    resize: vertical; /* Allow vertical resize */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    position: relative; /* For pseudo-elements */
    box-sizing: border-box;
}

.question-textbox-styled:focus {
    outline: none;
    border-color: var(--brand-primary, #292C6D); /* Brand color focus */
    box-shadow: 0 0 5px rgba(41, 44, 109, 0.5); /* Brand color shadow */
    background-color: #ffffff; /* White background on focus */
}

/* Drag-over state for image drop */
.question-textbox-styled.drag-over {
    border-color: var(--brand-primary, #292C6D); /* Brand color border */
    border-style: dashed;
    border-width: 3px;
    background-color: rgba(41, 44, 109, 0.05); /* Light brand color background */
    box-shadow: 0 0 10px rgba(41, 44, 109, 0.3); /* Brand color shadow */
}

/* Drag-over indicator text */
.question-textbox-styled.drag-over::before {
    content: "Solte a imagem aqui"; /* Drop image text */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--brand-primary, #292C6D);
    font-weight: bold;
    font-size: 1.2rem;
    pointer-events: none; /* Don't interfere with drop */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px 20px;
    border-radius: 8px;
    z-index: 1; /* Above textarea content */
    text-align: center;
}

/* Dark Mode Textbox Styles */
body.dark-mode .question-textbox-styled {
    background-color: #3d3d3d; /* Dark background */
    color: #f5f5f5; /* Light text */
    border-color: #6c757d; /* Darker border */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Darker inner shadow */
}
body.dark-mode .question-textbox-styled:focus {
    border-color: var(--accent-primary, #D92960); /* Accent focus */
    box-shadow: 0 0 5px rgba(217, 41, 96, 0.7); /* Accent shadow */
    background-color: #4d4d4d; /* Slightly lighter dark background */
}

/* Dark Mode Drag-over */
body.dark-mode .question-textbox-styled.drag-over {
    background-color: rgba(217, 41, 96, 0.1); /* Accent transparent background */
    border-color: var(--accent-primary, #D92960); /* Accent border */
    box-shadow: 0 0 10px rgba(217, 41, 96, 0.4); /* Accent shadow */
}

body.dark-mode .question-textbox-styled.drag-over::before {
    color: var(--accent-primary, #D92960); /* Accent text */
    background-color: rgba(45, 45, 45, 0.8); /* Dark transparent background */
}

/* --- Styles from style7.css for #user-input --- */

/* Drag-over style for main user input */
#user-input.drag-over {
    border-color: var(--brand-primary, #292C6D);
    border-style: dashed;
    border-width: 2px;
    background-color: rgba(41, 44, 109, 0.05); /* brand-primary with alpha */
    box-shadow: 0 0 10px rgba(41, 44, 109, 0.3);
}

/* Paste animation for main user input */
@keyframes paste-pulse {
    0% { box-shadow: 0 0 0 0 rgba(41, 44, 109, 0.7); } /* brand-primary with alpha */
    70% { box-shadow: 0 0 0 10px rgba(41, 44, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(41, 44, 109, 0); }
}

#user-input.paste-animation {
    animation: paste-pulse 0.8s ease-out;
}

/* Dark Mode for #user-input drag/paste */
body.dark-mode #user-input.drag-over {
    background-color: rgba(217, 41, 96, 0.1); /* accent-primary with alpha */
    border-color: var(--accent-primary, #D92960);
}

/* Note: Dark mode paste animation might need specific keyframes if colors differ significantly */
/* body.dark-mode #user-input.paste-animation { ... } */

/* Responsive adjustment from style7.css (might conflict/duplicate chat.css) */
/*
@media (max-width: 868px) {
    #user-input {
        padding-right: 40px;
        background-position: right 10px center;
    }
}
*/



/* Typing Indicator Component Styles */

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 15px 20px; /* Match message padding */
    align-self: flex-start; /* Align like AI message */
    background-color: #EEE; /* Match AI message background */
    border-radius: 20px 20px 20px 0; /* Match AI message shape */
    max-width: 80px; /* Small default width */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Match message shadow */
    /* Add transition if needed for appearance */
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--accent-primary, #D92960), var(--brand-primary, #292C6D)); /* Use variables */
    animation: typingPulse 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Special style for the planning indicator */
.typing-indicator.planning-indicator {
    gap: 12px;
    padding: 20px;
    background: linear-gradient(145deg, #f5f5f5, #fff); /* Lighter gradient */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    border: 1px solid rgba(217, 41, 96, 0.1); /* Subtle accent border */
    min-width: 200px; /* Wider */
    max-width: none; /* Allow full width if needed */
}

.typing-indicator.planning-indicator .typing-dot {
    /* Gradient already set, could override if needed */
    /* background: linear-gradient(45deg, var(--accent-primary), var(--brand-primary)); */
}

.typing-indicator-text {
    color: var(--brand-primary, #292C6D);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.typing-indicator-text::before {
    content: "🎯"; /* Target emoji */
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .typing-indicator {
        padding: 12px 16px;
        gap: 3px;
        max-width: 70px;
    }
    
    .typing-dot {
        width: 5px;
        height: 5px;
    }
    
    .typing-indicator.planning-indicator {
        gap: 8px;
        padding: 16px 18px;
        min-width: 180px;
        max-width: calc(100vw - 40px); /* Prevent overflow on small screens */
    }
    
    .typing-indicator-text {
        font-size: 0.9rem;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .typing-indicator {
        padding: 10px 14px;
        gap: 2px;
        max-width: 60px;
    }
    
    .typing-dot {
        width: 4px;
        height: 4px;
    }
    
    .typing-indicator.planning-indicator {
        gap: 6px;
        padding: 14px 16px;
        min-width: 200px;
        max-width: calc(100vw - 30px);
        border-radius: 16px 16px 16px 0;
    }
    
    .typing-indicator-text {
        font-size: 0.85rem;
        gap: 4px;
        line-height: 1.3;
    }
    
    .typing-indicator-text::before {
        font-size: 0.9em;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .typing-indicator.planning-indicator {
        min-width: 140px;
        max-width: calc(100vw - 20px);
        padding: 12px 14px;
    }
    
    .typing-indicator-text {
        font-size: 0.8rem;
    }
}

/* Old animation, keeping for reference if needed */
/* @keyframes typingAnimation {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
} */



/* User Settings Icon and Modal Styles */

/* Settings Icon (often in header or menu) */
.settings-icon {
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px; /* Adjust as needed */
    transition: background-color 0.2s ease;
}

.settings-icon:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover */
}

.settings-icon.hidden { /* Class to hide the icon if needed */
    display: none;
}

.settings-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--icon-color, #666);
}

/* Dark Mode Settings Icon */
body.dark-mode .settings-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .settings-icon .material-symbols-outlined {
    color: var(--dm-icon-color, #ccc);
}

/* Settings Icon in Mobile Menu */
@media (max-width: 868px) {
    .menu .settings-icon { /* Scoped to mobile menu */
        width: 50px;
        height: 50px;
        margin: 10px auto 0; /* Example positioning */
    }

    .menu .settings-icon .material-symbols-outlined {
        font-size: 28px;
    }
}

/* User Settings Modal */
.user-settings-modal, 
#user-settings-modal.confirm-modal {
    /* Remove generic confirm-modal padding to allow header/body/buttons to control spacing */
    padding: 0 !important;
}
.user-settings-modal { /* Specific class for the settings modal content */
    max-width: 1000px; /* Wider modal */
    width: 95%;
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Limita a altura do modal */
    overflow: visible; /* Assegura que os botões fiquem visíveis */
    /* Unify look with .app-modal */
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-input, #ced4da);
    border-radius: 12px;
    box-shadow: var(--shadow-dark-modal, 0 15px 40px rgba(var(--text-primary-rgb, 0,0,0,0).2));
}

/* Header row: icon + title side by side */
#user-settings-modal .confirm-modal-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 8px 0;
    border-bottom: 1px solid var(--border-input, #ced4da);
}

#user-settings-modal .confirm-modal-header-row .confirm-modal-icon {
    margin: 0; /* remove margens grandes do ícone neste contexto */
}

#user-settings-modal .confirm-modal-header-row .confirm-modal-title {
    margin: 0; /* alinhar com o ícone */
    font-weight: 700;
}

/* Icon colorization to match app modal visual */
#user-settings-modal .confirm-modal-header-row .confirm-modal-icon { background: var(--accent-secondary-bg-subtle, rgba(108,99,255,0.12)); }
#user-settings-modal .confirm-modal-header-row .confirm-modal-icon .material-symbols-outlined { color: var(--accent-primary, var(--accent-primary)); }

/* Body and buttons spacing similar to .app-modal */
#user-settings-modal .confirm-modal-message { padding: 0 16px; }
#user-settings-modal .confirm-modal-buttons { padding: 12px 16px 16px; border-top: 1px solid var(--border-input, #ced4da); }

/* Overlay tint closer to app modal backdrop */
#user-settings-modal-overlay.confirm-modal-overlay { background: rgba(0, 0, 0, 0.4); }

/* Dark mode: unify with app modal dark */
body.dark-mode #user-settings-modal.user-settings-modal {
    background: var(--bg-card, #2d2d2d);
    border-color: var(--border-input, #4d4d4d);
    box-shadow: var(--shadow-dark-modal, 0 15px 40px rgba(var(--text-primary-rgb, 0,0,0,0).4));
}
body.dark-mode #user-settings-modal .confirm-modal-header-row { border-bottom-color: var(--border-input, #4d4d4d); }
body.dark-mode #user-settings-modal .confirm-modal-buttons { border-top-color: var(--border-input, #4d4d4d); }

/* Estilos para o conteúdo do modal com scroll padrão do site */
.user-settings-modal .confirm-modal-message {
    height: calc(70vh - 140px); /* Altura fixa um pouco menor para evitar variação do modal */
    overflow: hidden; /* Scroll controlado internamente */
    margin-bottom: 20px; /* Espaço para os botões ficarem bem posicionados */
    padding-right: 10px; /* Espaço para o scroll */
    
    /* Estilo de scroll padrão - Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, var(--accent-primary)) var(--bg-subtle, #f0f0f0);
}

/* Estilo de scroll padrão - Webkit */
.user-settings-modal .confirm-modal-message::-webkit-scrollbar {
    width: 8px;
}

.user-settings-modal .confirm-modal-message::-webkit-scrollbar-track {
    background: var(--bg-subtle, #f0f0f0);
    border-radius: 4px;
}

.user-settings-modal .confirm-modal-message::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, var(--accent-primary));
    border-radius: 4px;
    border: 2px solid var(--bg-subtle, #f0f0f0);
}

.user-settings-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 30px; /* Espaço entre as seções */
}

/* --- New two-column settings layout --- */
.user-settings-two-col {
    display: flex;
    gap: 20px;
    align-items: stretch;
    height: 100%;
}

.user-settings-nav {
    flex: 0 0 28%; /* coluna esquerda mais estreita */
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    align-self: center; /* centralizar verticalmente dentro do container */
    max-height: 100%;
}

.user-settings-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color-light, rgba(var(--text-primary-rgb, 0,0,0,0).1));
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary, #333);
    transition: background .2s ease, border-color .2s ease;
    text-align: left;
}

.user-settings-nav .nav-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--icon-color, #777);
}

.user-settings-nav .nav-item:hover {
    background: var(--bg-hover-subtle, #e9ecef);
}

.user-settings-nav .nav-item.active {
    background: var(--accent-primary, var(--accent-primary));
    color: #fff;
    border-color: var(--accent-primary, var(--accent-primary));
}

.user-settings-nav .nav-item.active .material-symbols-outlined {
    color: #fff;
}

.user-settings-panel {
    flex: 1; /* coluna direita mais larga */
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* Back button hidden by default (desktop) */
#user-settings-back-btn {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0 8px 0 0;
    position: static; /* override generic .back-button absolute positioning */
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: var(--text-primary, #333);
    cursor: pointer;
}

#user-settings-back-btn .material-symbols-outlined { font-size: 20px; }

.settings-pane { 
    display: none; 
    height: 100%;
    overflow-y: auto;
    padding-right: 6px;
    padding-bottom: 10px; /* evitar corte do conteúdo próximo ao fim */
}
.settings-pane.active { display: block; }

/* Left Panel (User Info) */
.user-settings-left {
    flex: 1;
    border-right: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
    padding-right: 20px;
}

.user-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    text-align: center; /* Center text */
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--accent-primary, var(--accent-primary));
}

.user-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 5px;
    word-break: break-word; /* Break long names */
}

.user-email {
    font-size: 1rem;
    color: var(--text-secondary, #666);
    margin-bottom: 20px;
    word-break: break-all; /* Break long emails */
}

.user-settings-actions { /* Container for logout/delete */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: auto; /* Push actions to bottom if needed */
}

/* Right Panel (Settings Sections) */
.user-settings-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section {
    background-color: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px; /* Consistent spacing */
}
.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
}

/* Toggle Switch Container */
.settings-toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.settings-toggle-container:last-child {
    margin-bottom: 0;
}

.settings-toggle-label {
    font-size: 0.95rem;
    color: var(--text-secondary, #555);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-toggle-label .material-symbols-outlined {
    font-size: 20px;
    color: var(--icon-color, #777);
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    flex-shrink: 0; /* Prevent shrinking */
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--accent-primary, var(--accent-primary));
}

input:focus + .toggle-slider {
    box-shadow: 0 0 1px var(--accent-primary, var(--accent-primary));
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Action Buttons (Logout, Delete) */
.settings-action-btn {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: left;
    gap: 10px;
    width: 100%; /* Make buttons full width */
}

.settings-action-btn .material-symbols-outlined {
    font-size: 20px; /* Match toggle icon size */
}

.settings-action-btn.logout {
    background-color: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #333);
}

.settings-action-btn.logout:hover {
    background-color: var(--bg-hover-subtle, #e9ecef);
}

.settings-action-btn.delete-account {
    background-color: rgba(220, 53, 69, 0.1); /* danger-color with alpha */
    color: var(--danger-color, #dc3545);
}

.settings-action-btn.delete-account:hover {
    background-color: rgba(220, 53, 69, 0.2);
}

/* Dark Mode User Settings Modal */
body.dark-mode .user-name {
    color: var(--dm-text-primary, #fff);
}

body.dark-mode .user-email {
    color: var(--dm-text-secondary, #ccc);
}

body.dark-mode .user-settings-left {
    border-right-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
}

body.dark-mode .settings-section {
    background-color: var(--dm-bg-surface, #333);
}

body.dark-mode .settings-section-title {
    color: var(--dm-text-primary, #f0f0f0);
    border-bottom-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
}

body.dark-mode .settings-toggle-label {
    color: var(--dm-text-secondary, #ccc);
}

body.dark-mode .settings-toggle-label .material-symbols-outlined {
    color: var(--dm-icon-color, #aaa);
}

body.dark-mode .toggle-slider {
    background-color: #555; /* Darker inactive toggle */
}

body.dark-mode input:checked + .toggle-slider {
    background-color: var(--accent-primary, var(--accent-primary)); /* Keep accent for active */
}

body.dark-mode .settings-action-btn.logout {
    background-color: var(--dm-bg-surface, #333);
    color: var(--dm-text-primary, #fff);
}

body.dark-mode .settings-action-btn.logout:hover {
    background-color: var(--dm-bg-surface-hover, #444);
}

body.dark-mode .settings-action-btn.delete-account {
    background-color: rgba(220, 53, 69, 0.2); /* Keep some transparency */
    color: var(--dm-danger-color, #ff7b72); /* Lighter red */
}

body.dark-mode .settings-action-btn.delete-account:hover {
    background-color: rgba(220, 53, 69, 0.3);
}

/* Responsive User Settings Modal */
@media (max-width: 768px) {
    .user-settings-content {
        flex-direction: column;
    }

    .user-settings-left {
        border-right: none;
        border-bottom: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    body.dark-mode .user-settings-left {
        border-bottom-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
    }
}

/* Configurações de Resposta */
.answers-settings-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 30px;
}

.answers-settings-left, 
.answers-settings-right {
    flex: 1;
}

/* Adicionar separator entre left e right */
.answers-settings-left {
    border-right: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
    padding-right: 20px;
}

.settings-section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
}

.answers-option-container {
    margin-bottom: 10px;
}

.answers-option-btn {
    width: 100%;
    padding: 10px 15px;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.answers-option-btn:hover {
    background-color: var(--bg-hover-subtle, #e9ecef);
}

.answers-option-btn.selected {
    background-color: var(--accent-primary, var(--accent-primary));
    color: white;
    border-color: var(--accent-primary, var(--accent-primary));
}

/* Exercícios por assunto */
.exercises-section {
    margin-bottom: 15px;
}

.centered-title {
    text-align: center;
}

.slider-container {
    width: 100%;
    padding: 0 20px;
    margin-top: 20px;
}

.exercises-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #ddd;
    outline: none;
    margin-bottom: 15px;
}

.exercises-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary, var(--accent-primary));
    cursor: pointer;
}

.exercises-slider::-moz-range-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary, var(--accent-primary));
    cursor: pointer;
    border: none;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.slider-labels span {
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
}

/* Dark Mode Styles */
body.dark-mode .answers-settings-content,
body.dark-mode .user-settings-content {
    border-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
}

body.dark-mode .settings-section-subtitle {
    color: var(--dm-text-primary, #eee);
    border-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
}

body.dark-mode .answers-option-btn {
    background-color: var(--dm-bg-secondary, #383838);
    border-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
    color: var(--dm-text-primary, #eee);
}

body.dark-mode .answers-option-btn:hover {
    background-color: var(--dm-bg-hover-subtle, #444);
}

body.dark-mode .answers-option-btn.selected {
    background-color: var(--accent-primary, var(--accent-primary));
    color: white;
}

body.dark-mode .exercises-slider {
    background: #444;
}

body.dark-mode .slider-labels span {
    color: var(--dm-text-secondary, #bbb);
}

/* Responsividade */
@media (max-width: 768px) {
    .user-settings-content,
    .answers-settings-content {
        flex-direction: column;
        gap: 15px;
    }

    .user-settings-two-col { flex-direction: column; height: auto; }
    /* Nav ocupa mais espaço no mobile para toque mais confortável */
    .user-settings-nav { flex: none; max-width: none; width: 100%; }
    .user-settings-nav .nav-item { padding: 14px 16px; font-size: 1rem; }
    .user-settings-panel { width: 100%; }
    .user-settings-modal .confirm-modal-message {
        height: calc(90vh - 150px);
    }

    .user-settings-left,
    .user-settings-right,
    .answers-settings-left,
    .answers-settings-right {
        width: 100%;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    body.dark-mode .user-settings-left,
    body.dark-mode .answers-settings-left {
        border-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
    }
    
    .user-settings-right,
    .answers-settings-right {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Mostrar botão de voltar quando em mobile, controlado por classe .pane-open */
    #user-settings-modal.pane-open #user-settings-back-btn { display: inline-flex; }
    /* Quando um pane estiver ativo no mobile, podemos opcionalmente esconder a nav com CSS-only fallback */
    #user-settings-modal.pane-open .user-settings-nav { display: none; }
    /* Header alinhado à esquerda no mobile */
    #user-settings-modal .confirm-modal-header-row { justify-content: flex-start; gap: 8px; }
}

/* Novo divisor de seção com título */
.settings-section-divider {
    margin: 25px 0 20px;
    text-align: center;
    position: relative;
}

.settings-section-header {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0 15px;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #333);
}

/* Botão de fechar com altura aumentada */
.user-settings-modal .confirm-modal-buttons {
    margin-bottom: 10px;
}

.user-settings-modal .confirm-modal-button {
    padding: 15px 30px; /* Aumentar altura e largura do botão */
}

/* Dark mode para o novo divisor */
body.dark-mode .settings-section-divider:before {
    background-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
}

/* Dark mode para o scroll */
body.dark-mode .user-settings-modal .confirm-modal-message {
    scrollbar-color: var(--accent-primary, var(--accent-primary)) var(--dm-bg-subtle, #333);
}

body.dark-mode .user-settings-modal .confirm-modal-message::-webkit-scrollbar-track {
    background: var(--dm-bg-subtle, #333);
}

body.dark-mode .user-settings-modal .confirm-modal-message::-webkit-scrollbar-thumb {
    border-color: var(--dm-bg-subtle, #333);
}

/* Estilos para a seção de prompt personalizado */
.user-prompt-settings-content {
    margin-bottom: 30px;
}

.user-prompt-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.user-custom-prompt {
    width: 100%;
    min-height: 120px;
    padding: 12px 15px;
    border: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: var(--text-primary, #333);
    background-color: var(--bg-secondary, #f8f9fa);
    resize: vertical;
    transition: all 0.2s ease;
}

.user-custom-prompt:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.user-custom-prompt:focus {
    outline: none;
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.2);
}

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

.prompt-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color-light, rgba(0, 0, 0, 0.1));
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-action-btn:hover:not(:disabled) {
    background-color: var(--bg-hover-subtle, #e9ecef);
}

.prompt-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.prompt-action-btn .material-symbols-outlined {
    font-size: 18px;
}

#save-prompt-btn:not(:disabled) {
    background-color: var(--accent-primary, var(--accent-primary));
    color: white;
    border-color: var(--accent-primary, var(--accent-primary));
}

#save-prompt-btn:hover:not(:disabled) {
    background-color: var(--accent-primary-dark, #C12554);
}

/* Dark mode styles for user prompt section */
body.dark-mode .user-custom-prompt {
    background-color: var(--dm-bg-secondary, #383838);
    border-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
    color: var(--dm-text-primary, #eee);
}

body.dark-mode .prompt-action-btn {
    background-color: var(--dm-bg-secondary, #383838);
    border-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
    color: var(--dm-text-primary, #eee);
}

body.dark-mode .prompt-action-btn:hover:not(:disabled) {
    background-color: var(--dm-bg-hover-subtle, #444);
}

body.dark-mode #save-prompt-btn:not(:disabled) {
    background-color: var(--accent-primary, var(--accent-primary));
    color: white;
}

body.dark-mode #save-prompt-btn:hover:not(:disabled) {
    background-color: var(--accent-primary-dark, #C12554);
}

/* Tools configuration grid */
.tools-config-grid {
    display: flex; /* linha única */
    flex-wrap: nowrap; /* não quebrar linha */
    gap: 8px; /* menos espaçamento entre cards */
    align-items: center;
    overflow-x: auto; /* scroll horizontal quando necessário */
    padding: 4px 2px; /* padding mínimo do container */
        touch-action: pan-x; /* permite scroll horizontal por padrão */
}

/* Desabilita gestos padrão enquanto arrastando */
.tools-config-grid.dragging { touch-action: none; }

/* Melhorias específicas para mobile */
@media (max-width: 768px) {
    .tools-config-grid {
        gap: 6px;
        padding: 6px 4px;
        scroll-snap-type: x mandatory; /* snap entre cards */
        -webkit-overflow-scrolling: touch;
    }
    .tools-config-grid::-webkit-scrollbar { display: none; }

    .tool-card {
        scroll-snap-align: start;
        padding: 6px;
        gap: 6px;
        border-radius: 10px;
    }
    .tool-card .tool-icon {
        width: 52px;
        height: 52px;
    }
    .tool-card .tool-icon .material-symbols-outlined { font-size: 30px; }

    /* Aumenta área de toque das ações mantendo design compacto */
    .tool-card .hide-btn,
    .tool-card .drag-handle {
        width: 36px;
        height: 36px;
    }
}

/* Evita scroll durante o gesto de arrastar pelo handle */
.tool-card .drag-handle { touch-action: none; }

.tool-card {
    display: flex;
    flex-direction: row; /* ícone à esquerda, ações empilhadas à direita */
    align-items: center;
    justify-content: flex-start;
    gap: 8px; /* mais compacto */
    padding: 6px 8px; /* mais compacto */
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color-light, rgba(var(--text-primary-rgb, 0,0,0,0).1));
    border-radius: 8px;
    user-select: none;
    flex: 0 0 auto; /* não esticar em flex row */
}

.tool-card.dragging {
    opacity: 0.85;
    transform: scale(0.98);
}

.tool-card .tool-icon {
    width: 56px; /* maior ícone principal da ferramenta */
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover-subtle, #e9ecef);
}

.tool-card .tool-icon .material-symbols-outlined {
    font-size: 32px; /* aumenta tamanho do símbolo principal */
}

.tool-card .tool-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.tool-card .tool-actions {
    display: flex;
    flex-direction: column; /* esconder/mostrar acima, drag abaixo */
    align-items: center;
    gap: 4px; /* menor espaçamento entre ações */
    width: auto; /* não ocupar largura toda do card */
}

.tool-card .hide-btn {
    width: 28px; /* ainda mais compacto */
    height: 28px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-color-light, rgba(var(--text-primary-rgb, 0,0,0,0).1));
    background: #fff;
    color: var(--text-primary, #333);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tool-card .hide-btn.active {
    background: rgba(220,53,69,0.1);
    color: var(--danger-color, #dc3545);
    border-color: rgba(220,53,69,0.25);
}

.tool-card .drag-handle {
    width: 28px; /* ainda mais compacto */
    height: 28px;
    padding: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--bg-hover-subtle, #e9ecef);
    color: var(--text-secondary, #666);
    cursor: grab;
}

/* Ícones menores dentro das ações para manter compacidade */
.tool-card .hide-btn .material-symbols-outlined,
.tool-card .drag-handle .material-symbols-outlined {
    font-size: 18px;
}

.tool-card .drag-handle:active { cursor: grabbing; }

/* Dark mode */
body.dark-mode .tool-card { background: var(--dm-bg-secondary, #383838); border-color: var(--dm-border-color-light, rgba(var(--bg-primary-rgb, 255,255,255,0).1)); }
body.dark-mode .tool-card .tool-icon { background: var(--dm-bg-hover-subtle, #444); }
body.dark-mode .tool-card .tool-name { color: var(--dm-text-primary, #eee); }
body.dark-mode .tool-card .hide-btn { background: var(--dm-bg-secondary, #383838); color: var(--dm-text-primary, #eee); border-color: var(--dm-border-color-light, rgba(var(--bg-primary-rgb, 255,255,255,0).1)); }
body.dark-mode .tool-card .drag-handle { background: var(--dm-bg-hover-subtle, #444); color: var(--dm-text-secondary, #bbb); }

/* Responsive styles for user prompt section */
@media (max-width: 768px) {
    .user-prompt-container {
        gap: 10px;
    }
    
    .user-custom-prompt {
        min-height: 100px;
    }
}

body.dark-mode .answers-settings-left {
    border-right-color: var(--dm-border-color-light, rgba(255, 255, 255, 0.1));
}

/* Dark mode para o título */
body.dark-mode .settings-section-header {
    color: var(--dm-text-primary, #fff);
}

/* Models Settings Styles */
.models-settings-content {
    margin-top: 20px;
    padding-bottom: 16px; /* espaço adicional para evitar corte no fim */
}

.model-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.model-config-item {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.model-config-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.model-config-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary, #333);
    margin-bottom: 15px;
}

.model-config-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--accent-primary, #007bff);
}

.model-config-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.model-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #333);
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.model-select:focus {
    outline: none;
    border-color: var(--accent-primary, #007bff);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.thinking-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thinking-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.thinking-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary, #007bff);
}

.thinking-budget {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: var(--bg-tertiary, #f0f0f0);
    border-radius: 6px;
    font-size: 13px;
}

.thinking-budget label {
    font-weight: 500;
    color: var(--text-secondary, #666);
}

.thinking-budget-input {
    width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #333);
    font-size: 13px;
    text-align: center;
}

.thinking-budget-input:focus {
    outline: none;
    border-color: var(--accent-primary, #007bff);
}

.budget-unit {
    color: var(--text-secondary, #666);
    font-size: 12px;
}

/* Dark Mode Styles for Models Settings */
body.dark-mode .model-config-item {
    background: var(--dm-bg-secondary, #2a2a2a);
    border-color: var(--dm-border-color, #444);
}

body.dark-mode .model-config-title {
    color: var(--dm-text-primary, #fff);
}

body.dark-mode .model-select {
    background: var(--dm-bg-primary, #1a1a1a);
    border-color: var(--dm-border-color, #444);
    color: var(--dm-text-primary, #fff);
}

body.dark-mode .thinking-toggle {
    color: var(--dm-text-secondary, #ccc);
}

body.dark-mode .thinking-budget {
    background: var(--dm-bg-tertiary, #333);
}

body.dark-mode .thinking-budget label {
    color: var(--dm-text-secondary, #ccc);
}

body.dark-mode .thinking-budget-input {
    background: var(--dm-bg-primary, #1a1a1a);
    border-color: var(--dm-border-color, #444);
    color: var(--dm-text-primary, #fff);
}

body.dark-mode .budget-unit {
    color: var(--dm-text-secondary, #ccc);
}

/* Responsive Design for Models Settings */
@media (max-width: 768px) {
    .model-config-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .model-config-item {
        padding: 15px;
    }
    
    .thinking-budget {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .thinking-budget-input {
        width: 70px;
    }
}



/* Whiteboard Component Styles */

.whiteboard-panel {
    display: none; /* Hidden by default */
    flex-direction: column;
    width: 0; /* Start with zero width for transition */
    min-height: 0; /* Allow shrinking */
    opacity: 0; /* Start transparent for transition */
    background-color: white; /* Consider var(--bg-surface) */
    transition: width 0.5s ease, opacity 0.5s ease;
    border-left: 1px solid #CED4DA; /* Add a separator */
}

.whiteboard-panel.visible {
    display: flex; /* Show when visible */
    width: 50%; /* Target width */
    opacity: 1; /* Target opacity */
}

/* Tabs within the whiteboard */
.tabs {
    display: flex;
    border-bottom: 1px solid #CED4DA; /* Consider var(--border-color-light) */
    flex-shrink: 0; /* Prevent tabs from shrinking */
}

.tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    border: none;
    border-bottom: 3px solid transparent; /* Indicator for active tab */
    background-color: transparent;
    font-family: inherit;
    font-weight: 600;
    color: #495057; /* Consider var(--text-secondary) */
    cursor: pointer;
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.tab .material-symbols-outlined {
    font-size: 1.4rem;
}

.tab.active {
    border-bottom-color: var(--accent-primary, #D92960);
    color: var(--accent-primary, #D92960);
}

/* Close button specific tab style */
.tab.close-whiteboard {
    margin-left: auto; /* Push to the right */
    order: 3; /* Ensure it's last visually if needed */
    border-bottom: none; /* No active indicator */
    padding: 0px 15px 0px 15px;
}

.tab.close-whiteboard:hover {
    background-color: #f0f0f0; /* Consider var(--bg-hover-subtle) */
}

.tab.close-whiteboard .material-symbols-outlined {
    color: var(--accent-primary, #D92960);
}

/* Content area of the whiteboard */
.whiteboard-content {
    position: relative; /* For potential absolute children */
    flex: 1; /* Grow to fill remaining space */
    display: flex; /* Use flex for content switching */
    flex-direction: column; /* Stack content vertically */
    min-height: 0; /* Allow shrinking */
    overflow: hidden; /* Hide overflowing content */
}

#whiteboard-iframe,
#whiteboard-list-content {
    width: 100%;
    height: 100%;
    border: none; /* Remove iframe border */
}

#whiteboard-list-content {
    overflow-y: auto; /* Enable scrolling for the list */
    height: 100%; /* Fill the content area */
    /* Scrollbar styles moved to _scrollbar.css */
}

/* Hide inactive content */
#whiteboard-list-content.hidden,
#whiteboard-iframe.hidden {
    display: none;
}

/* Individual item in the whiteboard list */
.whiteboard-list-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e9ecef; /* Consider var(--border-color-lighter) */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.whiteboard-list-item:hover {
    background-color: #F5F5F5; /* Consider var(--bg-hover-subtle) */
}

.whiteboard-number {
    min-width: 24px; /* Ensure consistent spacing */
    margin-right: 10px;
    color: var(--accent-primary, #D92960);
    font-weight: 600;
    text-align: right; /* Align number nicely */
}

.whiteboard-title {
    flex: 1; /* Take remaining space */
    overflow: hidden; /* Prevent long titles breaking layout */
    white-space: nowrap;
    text-overflow: ellipsis;
}

.goto-message {
    margin-left: 10px;
    padding: 5px;
    border-radius: 50%; /* Circular button */
    color: #6c757d; /* Consider var(--text-muted) */
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
}

.goto-message:hover {
    color: var(--accent-primary, #D92960);
    background-color: rgba(217, 41, 96, 0.1); /* Accent color with low alpha */
}


/* --- Responsive Whiteboard Adjustments --- */
@media (max-width: 868px) {
    .whiteboard-panel,
    .whiteboard-panel.visible {
        /* Make it a full-screen overlay on mobile */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1000; /* Ensure it's above chat */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        background: white; /* Ensure background */
        border-radius: 0; /* Remove radius */
        border-left: none; /* Remove left border */
        min-height: auto; /* Reset min-height */
    }

    .whiteboard-panel.visible {
        opacity: 1;
        visibility: visible;
    }

    /* Adjust tabs for mobile */
    .tabs {
        justify-content: space-around; /* Distribute tabs */
        position: sticky; /* Stick tabs to top */
        top: 0;
        z-index: 1; /* Above content */
    }

    .tab {
        padding: 12px 16px; /* Adjust padding */
        font-size: 0.9rem; /* Smaller font */
        gap: 5px; /* Reduce gap */
        flex: 1; /* Allow tabs to grow */
        justify-content: center; /* Center content */
        text-align: center;
    }

    .tab .material-symbols-outlined {
        font-size: 1.2rem; /* Smaller icon */
    }

    /* Hide desktop close button */
    .tab.close-whiteboard {
        display: flex;
    }

    /* Style "Lousa" tab specifically if needed */
    .tab[data-target="whiteboard"] {
        /* Example: Hide text, show icon only */
        /* font-size: 0; */
    }
    .tab[data-target="whiteboard"] .material-symbols-outlined {
        /* margin-right: 4px; */ /* Adjust spacing */
    }
    /* Example: Add text using ::after */
    /* .tab[data-target="whiteboard"]::after {
        content: "Lousa";
        font-size: 1rem;
        font-weight: 500;
    } */

    /* Adjust list item padding */
    .whiteboard-list-item {
        padding: 12px;
        font-size: 0.9rem;
    }

    /* Add a header for mobile whiteboard view */
    .whiteboard-header { /* Requires adding this element in HTML */
        display: flex; /* Use flex for layout */
        align-items: center;
        justify-content: space-between; /* Space out title and close button */
        padding: 15px;
        border-bottom: 1px solid #eee; /* Separator */
        background: white; /* Ensure background */
        position: sticky; /* Stick to top */
        top: 0;
        z-index: 1001; /* Above tabs/content */
    }

    .whiteboard-title { /* Style for the title in the header */
        font-size: 1.1em;
        font-weight: 600;
        color: var(--brand-primary, #292C6D);
    }

    /* Mobile close button (might be the same as history modal close) */
    .close-whiteboard { /* New class for mobile close button */
        /* Position absolutely or within header */
        /* Example: position: absolute; right: 15px; top: 15px; */
        background: none;
        border: none;
        font-size: 24px;
        color: var(--accent-primary, #D92960);
        cursor: pointer;
        z-index: 1002; /* Above header content */
        padding: 5px; /* Add padding for easier clicking */
    }

    /* Adjust content area */
    .whiteboard-content {
        /* Adjust padding/height if header/tabs are sticky */
        padding-top: 0; /* Remove padding if header exists */
    }
}

/* Desktop-specific overrides if needed */
@media (min-width: 869px) {
    /* Reset mobile-specific styles */
    .whiteboard-panel {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        z-index: auto;
        opacity: 0; /* Keep initial state */
        visibility: visible; /* Keep initial state */
        transition: width 0.5s ease, opacity 0.5s ease; /* Restore original transition */
        border-left: 1px solid #CED4DA;
    }
    .whiteboard-panel.visible {
         opacity: 1;
         width: 50%; /* Restore desktop width */
    }
    .tabs {
        position: static;
    }
    .tab.close-whiteboard {
        display: flex; /* Show desktop close button */
    }
    .whiteboard-header {
        display: none; /* Hide mobile header */
    }
    .close-whiteboard { /* Reset mobile close button styles */
       position: static;
       font-size: inherit;
       color: inherit;
     padding: 0;
    }

    /* Responsive iframe margin */
    .whiteboard-content iframe {
        margin-bottom: 30px; /* Add margin below iframe on small screens */
    }
}

/* --- Whiteboard Loading/Complete Styles (from style7.css) --- */

/* Estilos para o contêiner de carregamento da lousa */
.lousa-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary, #f5f5f5); /* Use variable */
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    min-height: 150px;
    transition: all 0.3s ease;
}

.lousa-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color-lighter, #eee); /* Use variable */
    border-top: 4px solid var(--accent-primary, #D92960); /* Use variable */
    border-radius: 50%;
    animation: lousa-spin 1.5s linear infinite;
    margin-bottom: 15px;
}

.lousa-loading-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary, #555); /* Use variable */
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .lousa-loading-container {
        flex-direction: row;
        justify-content: center;
        padding: 10px;
        min-height: auto;
    }

    .lousa-loading-spinner {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-width: 3px;
    margin-bottom: 0;
    margin-right: 10px;
    box-sizing: border-box;
}

    .lousa-loading-text {
        font-size: 0.85rem;
    }
}

/* Estilos para o container quando a lousa estiver completa */
.lousa-complete-container {
    background-color: var(--success-bg-subtle, #f0f8f0); /* Use variable */
    border-left: 4px solid var(--success-color, #28a745); /* Use variable */
    cursor: pointer;
    position: relative;
    padding: 20px;
    padding-bottom: 60px; /* Space for button */
    margin: 15px 0; /* Match loading container */
    border-radius: 8px; /* Match loading container */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Match loading container */
    transition: all 0.3s ease;
}

.lousa-complete {
    color: var(--success-color, #28a745); /* Use variable */
    font-weight: 600;
}

/* Botão de visualização */
.lousa-view-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--success-color, #28a745); /* Use variable */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lousa-view-button:hover {
    background-color: var(--success-color-darker, #218838); /* Use variable */
    transform: translatey(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.lousa-view-button .material-symbols-outlined {
    font-size: 18px;
}

/* Efeito de hover no container completo */
.lousa-complete-container:hover {
    background-color: var(--success-bg-hover, #e8f5e8); /* Use variable */
    transform: translatey(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@keyframes lousa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Estilo para o modo escuro */
body.dark-mode .lousa-loading-container {
    background-color: var(--dm-bg-secondary, #333); /* Use variable */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .lousa-loading-spinner {
    border: 4px solid var(--dm-border-color-lighter, #444); /* Use variable */
    border-top: 4px solid var(--accent-primary, #D92960); /* Use variable */
}

body.dark-mode .lousa-loading-text {
    color: var(--dm-text-secondary, #ccc); /* Use variable */
}

/* Estilos para o modo escuro quando a lousa estiver completa */
body.dark-mode .lousa-complete-container {
    background-color: var(--dm-success-bg-subtle, #2a3a2a); /* Use variable */
    border-left: 4px solid var(--success-color, #28a745); /* Use variable */
}

body.dark-mode .lousa-complete {
    color: var(--dm-success-color, #5cb85c); /* Use variable */
}

body.dark-mode .lousa-view-button {
    background-color: var(--dm-success-color-darker, #2c7a3f); /* Use variable */
}

body.dark-mode .lousa-view-button:hover {
    background-color: var(--dm-success-color-darkest, #3c8c4f); /* Use variable */
}

body.dark-mode .lousa-complete-container:hover {
    background-color: var(--dm-success-bg-hover, #324832); /* Use variable */
}



/* Authentication Modal Styles (Login, Signup, etc.) */

/* Login Options (e.g., Google, Email buttons) */
.login-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.login-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px;
    background-color: var(--bg-primary); /* Use variable */
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary); /* Use variable */
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-option-btn:hover {
    background-color: var(--bg-hover-subtle); /* Use variable */
    transform: translateY(-2px);
    box-shadow: 0 3px 5px var(--shadow-color); /* Use variable */
}

.login-option-btn img { /* For provider logos */
    width: 20px;
    height: 20px;
}

/* Login/Signup Form Styles */
.login-form { /* Assuming a common class for email forms */
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-secondary); /* Use variable */
}

.form-control { /* Common class for input fields */
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px;
    font-size: 16px;
    background-color: var(--bg-primary); /* Use variable */
    color: var(--text-primary); /* Use variable */
    box-sizing: border-box; /* Include padding and border in width */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary); /* Use variable */
    box-shadow: var(--shadow-input-focus); /* Use variable */
}

/* Links (e.g., Forgot Password, Sign Up) */
.form-links {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
}

.form-links a {
    color: var(--accent-primary); /* Use variable */
    text-decoration: none;
}

.form-links a:hover {
    text-decoration: underline;
}

/* Error/Success Messages */
.error-message {
    color: var(--danger-color); /* Use variable */
    font-size: 14px;
    margin-top: 5px;
}

.success-message {
    color: var(--success-color); /* Use variable */
    font-size: 14px;
    margin-top: 5px;
}

/* Terms and Conditions Checkbox Area */
.terms-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px; /* Add some space above */
}

.terms-group input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.terms-group label {
    font-size: 14px;
    font-weight: normal;
    color: var(--text-secondary); /* Use variable */
    line-height: 1.4; /* Improve readability */
}

.terms-group a {
    color: var(--accent-primary); /* Use variable */
    text-decoration: none;
}

.terms-group a:hover {
    text-decoration: underline;
}

/* Resend Verification Button */
.resend-verification-btn {
    display: block; /* Or inline-block if needed */
    margin: 10px 0;
    padding: 8px 12px;
    background-color: var(--warning-color); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center; /* Center text if block */
}

.resend-verification-btn:hover {
    background-color: var(--warning-color-darker); /* Use variable */
}

/* Dark Mode Styles */
body.dark-mode .login-option-btn {
    background-color: var(--bg-card); /* Use variable */
    border-color: var(--border-color); /* Use variable */
    color: var(--text-primary); /* Use variable */
}

body.dark-mode .login-option-btn:hover {
    background-color: var(--bg-card-hover); /* Use variable */
}

body.dark-mode .form-control {
    background-color: var(--bg-input); /* Use variable */
    border-color: var(--border-input); /* Use variable */
    color: var(--text-input); /* Use variable */
}

body.dark-mode .form-control:focus {
     border-color: var(--border-input-focus); /* Use variable */
     box-shadow: var(--shadow-input-focus); /* Use variable */
}

body.dark-mode .form-group label {
    color: var(--text-secondary); /* Use variable */
}

body.dark-mode .form-links a,
body.dark-mode .terms-group a {
    color: var(--accent-primary-lighter-dark); /* Use variable */
}

body.dark-mode .terms-group label {
    color: var(--text-secondary); /* Use variable */
}

body.dark-mode .error-message {
    color: var(--danger-color-dark); /* Use variable */
}

body.dark-mode .success-message {
    color: var(--success-color-dark); /* Use variable */
}

body.dark-mode .resend-verification-btn {
    background-color: var(--warning-color-dark); /* Use variable */
}

body.dark-mode .resend-verification-btn:hover {
    background-color: var(--warning-color-darker-dark); /* Use variable */
}



/* Code Block and Inline Code Styles */

/* Code Block Container */
.code-block-container {
    margin: 20px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow-color); /* Use variable */
    background-color: var(--bg-secondary); /* Use variable */
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    border: 1px solid var(--border-color); /* Use variable */
    transition: all 0.3s ease;
    position: relative;
}

.code-block-container:hover {
    box-shadow: 0 8px 30px var(--shadow-dark-stronger); /* Use variable */
    transform: translateY(-2px);
}

/* Code Block Header */
.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(to right, var(--bg-subtle), var(--bg-dropdown-hover)); /* Use variables */
    border-bottom: 1px solid var(--border-color); /* Use variable */
    position: relative;
}

.code-block-header::before {
    display: none; /* Decorative circles removed */
}

.code-language-label {
    font-size: 0.85em;
    color: var(--text-secondary); /* Use variable */
    font-weight: 600;
    text-transform: lowercase;
    margin-left: 0;
    letter-spacing: 0.5px;
}

/* Copy Code Button */
.copy-code-button {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: var(--text-secondary); /* Use variable */
    font-weight: 500;
    font-size: 0.85em;
}

.copy-code-button:hover {
    background-color: var(--bg-overlay-light-subtle); /* Use variable */
    color: var(--info-color); /* Use variable */
}

.copy-code-button:active {
    transform: scale(0.95);
}

.copy-code-button .material-symbols-outlined {
    font-size: 18px;
    margin-right: 4px;
}

/* Copy Success Animation */
@keyframes copySuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.copy-code-button.success .material-symbols-outlined {
    color: var(--success-color); /* Use variable */
    animation: copySuccess 0.5s ease;
}

/* Code Block Content Area */
.code-block-content {
    position: relative;
    padding: 16px 0;
    overflow-x: auto;
    background-color: var(--bg-secondary); /* Use variable */
    max-width: 100%;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
}

.code-block-content pre {
    margin: 0;
    padding: 0 16px 0 36px; /* Space for line numbers */
    white-space: pre;
    overflow-wrap: normal;
    tab-size: 4;
    counter-reset: line;
    position: relative;
    width: fit-content; /* Allow pre to expand */
    min-width: 100%; /* Ensure it fills container */
}

.code-block-content code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95em;
    line-height: 1;
    color: var(--text-primary); /* Use variable */
    display: block;
    position: relative;
    overflow-x: visible; /* Allow content to overflow pre for scrolling */
    word-wrap: normal;
    word-break: normal;
}

/* Line Numbers */
.code-block-content code > span.line {
    display: block;
    position: relative;
    counter-increment: line;
    min-height: 0.4em; /* Reduzido ainda mais de 0.6em para 0.4em */
    line-height: 0.6; /* Reduzido de 1.2 para 1 */
    padding: 0; /* Removido padding */
    margin: 0; /* Removido margin */
}

.code-block-content code > span.line::before {
    content: counter(line);
    position: absolute;
    left: -40px;
    width: 30px;
    text-align: right;
    color: var(--text-line-number, #909090); /* Fallback color if variable undefined */
    font-size: 0.85em;
    opacity: 0.6;
    user-select: none; /* Prevent selecting line numbers */
}

/* Empty line fix */
.code-block-content code > span.line:empty::before {
    counter-increment: line;
    content: counter(line);
}

.code-block-content code > span.line:empty {
    min-height: 0.4em; /* Reduzido de 0.6em para 0.4em */
    line-height: 0.8; /* Reduzido de 1 para 0.8 */
}

/* Prism.js integration */
.code-block-content pre[class*="language-"] {
    background: transparent;
    margin: 0;
    padding: 0 16px 0 56px;
    overflow: visible;
}

.code-block-content code[class*="language-"] {
    background: transparent;
    padding: 0;
    text-shadow: none;
}

/* Line highlight for Prism */
.line-highlight {
    background: rgba(var(--primary-rgb), 0.1);
    border-left: 3px solid var(--primary);
}

/* Syntax Highlighting - Light Mode */
.code-keyword { color: var(--syntax-keyword); font-weight: bold; }
.code-string { color: var(--syntax-string); }
.code-number { color: var(--syntax-number); }
.code-comment { color: var(--syntax-comment); font-style: italic; }
.code-function { color: var(--syntax-function); }
.code-tag { color: var(--syntax-tag); }
.code-attr { color: var(--syntax-attr); }
.code-property { color: var(--syntax-property); }
.code-value { color: var(--syntax-value); }
.code-selector { color: var(--syntax-selector); }

/* Inline Code */
.inline-code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    background-color: var(--bg-inline-code-light); /* Use variable */
    padding: 0.1em 0.2em;
    border-radius: 6px;
    font-size: 0.9em;
    color: var(--text-primary); /* Use variable */
    border: 1px solid var(--bg-inline-code-light); /* Use variable */
}

/* Dark Mode Code Block */
body.dark-mode .code-block-container {
    background-color: var(--bg-primary); /* Use variable */
    box-shadow: 0 4px 20px var(--shadow-color); /* Use variable */
    border: 1px solid var(--border-color-dark-alt); /* Use variable */
}

body.dark-mode .code-block-container:hover {
    box-shadow: 0 8px 30px var(--shadow-dark-stronger); /* Use variable */
}

body.dark-mode .code-block-header {
    background: linear-gradient(to right, var(--bg-secondary), var(--bg-card)); /* Use variables */
    border-bottom: 1px solid var(--border-input); /* Use variable */
}

body.dark-mode .code-language-label {
    color: var(--text-secondary); /* Use variable */
}

body.dark-mode .copy-code-button {
    color: var(--text-secondary); /* Use variable */
}

body.dark-mode .copy-code-button:hover {
    background-color: var(--bg-light-hover-dark); /* Use variable */
    color: var(--info-color-dark); /* Use variable */
}

body.dark-mode .copy-code-button .material-symbols-outlined {
    color: var(--text-secondary); /* Use variable */
}

body.dark-mode .copy-code-button.success .material-symbols-outlined {
    color: var(--success-color-dark); /* Use variable */
}

body.dark-mode .code-block-content {
    background-color: var(--bg-primary); /* Use variable */
    background-image:
        linear-gradient(to right, var(--grid-line-color-dark, rgba(255, 255, 255, 0.05)) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line-color-dark, rgba(255, 255, 255, 0.05)) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
}

body.dark-mode .code-block-content code {
    color: var(--text-primary); /* Use variable */
}

body.dark-mode .code-block-content code > span.line::before {
    color: var(--text-line-number-dark, rgba(255, 255, 255, 0.5)); /* Fallback color if variable undefined */
}

/* Syntax Highlighting - Dark Mode */
body.dark-mode .code-keyword { color: var(--syntax-keyword-dark); font-weight: bold; }
body.dark-mode .code-string { color: var(--syntax-string-dark); }
body.dark-mode .code-number { color: var(--syntax-number-dark); }
body.dark-mode .code-comment { color: var(--syntax-comment-dark); font-style: italic; }
body.dark-mode .code-function { color: var(--syntax-function-dark); }
body.dark-mode .code-tag { color: var(--syntax-tag-dark); }
body.dark-mode .code-attr { color: var(--syntax-attr-dark); }
body.dark-mode .code-property { color: var(--syntax-property-dark); }
body.dark-mode .code-value { color: var(--syntax-value-dark); }
body.dark-mode .code-selector { color: var(--syntax-selector-dark); }

/* Dark Mode Inline Code */
body.dark-mode .inline-code {
    background-color: var(--bg-inline-code-dark); /* Use variable */
    color: var(--text-primary); /* Use variable */
    border: 1px solid var(--bg-inline-code-dark); /* Use variable */
}



/* Calculator Component Styles (Enhanced Design - Compact Height) */
.study-calculator {
    position: fixed;
    bottom: 20px; /* Position near the bottom */
    right: 20px; /* Position near the right */
    width: 280px; /* Slightly wider for better spacing */
    /* Light mode gradient background */
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary)); /* Use variables */
    border-radius: 16px; /* More rounded corners */
    /* Softer, layered shadow */
    box-shadow: 0 4px 10px var(--border-subtle-light), 0 10px 30px var(--shadow-color); /* Use variables */
    z-index: 1050; /* Ensure it's above most elements but below modals */
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-subtle-light); /* Use variable */
}

/* Style when dragging */
.study-calculator.dragging {
    opacity: 0.8; /* Slightly less transparent */
    cursor: grabbing;
    /* Slightly lift and increase shadow */
    transform: scale(1.02);
    box-shadow: 0 12px 35px var(--shadow-dark-strong); /* Use variable */
}

/* Hidden state */
.study-calculator.esconde {
    transform: scale(0.9) translateY(20px); /* Add slight vertical movement */
    opacity: 0;
    pointer-events: none;
}

/* Header aligned with Notes window style */
.calculator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
    cursor: grab;
    font-weight: 600;
    gap: 8px;
}

.calculator-header:active {
    cursor: grabbing;
}

.calculator-header .material-symbols-outlined {
    font-size: 1.1rem; /* Kept size */
    margin-right: 8px;
    vertical-align: middle;
}

.calculator-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 0.375rem;
    font-size: 1.2rem;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.calculator-close-btn:hover {
    background-color: var(--bg-card-hover);
    color: var(--accent-primary);
}

.calculator-body {
    padding: 15px; /* Reduced padding */
}

.calculator-display {
    width: 100%;
    background-color: var(--bg-card-hover); /* Use variable */
    border: none; /* Remove default border */
    border-radius: 8px; /* Reduced radius */
    padding: 10px 12px; /* Reduced padding */
    font-size: 2rem; /* Slightly smaller display font */
    text-align: right;
    margin-bottom: 15px; /* Reduced space below display */
    color: var(--bg-user-message); /* Use variable */
    box-sizing: border-box;
    font-family: 'Poppins', 'Roboto Mono', monospace; /* Use Poppins, fallback to monospace */
    font-weight: 500; /* Slightly bolder display */
    /* Subtle inset shadow */
    box-shadow: var(--shadow-inset-sm); /* Use variable */
    overflow: hidden; /* Prevent text overflow */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
    white-space: nowrap; /* Keep display on one line */
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; /* Reduced gap */
}

/* Collapsible advanced panel directly inside the buttons grid */
.calc-advanced {
    grid-column: 1 / -1; /* span full width of the grid */
    display: grid; /* keep in the flow to allow transitions */
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    /* collapsed state */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: scaleY(0.98);
    transform-origin: top;
    margin-top: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease, margin-top 0.25s ease;
}

.calc-advanced[aria-hidden='false'] {
    max-height: 500px; /* large enough for contents */
    opacity: 1;
    transform: scaleY(1);
    margin-top: 4px;
}

/* Toggle button visual feedback */
.calc-toggle .material-symbols-outlined {
    transition: transform 0.2s ease;
}

.calc-toggle[aria-expanded='true'] .material-symbols-outlined {
    transform: rotate(180deg);
}

.calc-btn {
    background-color: var(--bg-primary); /* Use variable */
    border: none;
    border-radius: 10px; /* Slightly less rounded buttons */
    padding: 12px 0; /* Reduced vertical padding */
    font-size: 1.05rem; /* Slightly smaller button text */
    font-weight: 600; /* Bolder button text */
    color: var(--text-primary); /* Use variable */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    /* Subtle button shadow */
    box-shadow: var(--shadow-xs); /* Use variable */
    user-select: none; /* Prevent text selection */
}

.calc-btn:hover {
    filter: brightness(95%); /* Slightly darken on hover */
    box-shadow: var(--shadow-color); /* Use variable */
    transform: translateY(-1px); /* Subtle lift */
}

.calc-btn:active {
    transform: scale(0.96); /* Slightly more pronounced active scale */
    box-shadow: var(--shadow-xs); /* Use variable */
    filter: brightness(90%);
}

.calc-btn.function {
    background-color: var(--bg-dropdown-hover); /* Use variable */
    color: var(--text-input); /* Use variable */
}

.calc-btn.operator {
    background-color: var(--bg-user-message-darker); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    font-size: 1.2rem; /* Kept size */
}

.calc-btn.equals {
    background-color: var(--accent-primary); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    grid-column: span 1; /* Default span */
    font-size: 1.3rem; /* Slightly smaller equals symbol */
    font-weight: 700; /* Boldest */
}

.calc-btn.zero {
    grid-column: span 2; /* Make zero button wider */
}

/* Dark Mode Adjustments for Calculator */
body.dark-mode .study-calculator {
    background: linear-gradient(145deg, var(--bg-card), var(--bg-card-hover)); /* Use variables */
    border-color: var(--border-color); /* Use variable */
    box-shadow: 0 4px 10px var(--shadow-dark-strong), 0 10px 30px var(--shadow-dark-stronger); /* Use variables */
}

/* --- CORREÇÃO: Regra de Dark Mode para o header REMOVIDA para manter a consistência --- */

body.dark-mode .calculator-close-btn {
    color: var(--text-on-accent-muted-dark); /* Use variable */
}

body.dark-mode .calculator-close-btn:hover {
    background-color: var(--bg-light-hover-dark); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
}

body.dark-mode .calculator-display {
    background-color: var(--dm-bg-input); /* Use variable */
    color: var(--dm-text-input); /* Use variable */
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .study-calculator {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        z-index: 1070;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .calculator-header {
        padding: 12px 16px;
        font-size: 1rem;
    }
    
    .calculator-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        height: calc(100% - 60px);
    }
    
    .calculator-display {
        font-size: 2.5rem;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .calculator-buttons {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    
    .calculator-btn {
        height: auto;
        min-height: 60px;
        font-size: 1.2rem;
        border-radius: 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .study-calculator {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 70%;
        border-radius: 16px 16px 0 0;
        z-index: 1070;
    }
    
    .calculator-body {
        height: calc(100% - 50px);
    }
}

body.dark-mode .calc-btn {
    background-color: var(--bg-button-dark); /* Use variable */
    color: var(--text-primary); /* Use variable */
    box-shadow: var(--shadow-button-dark); /* Use variable */
}

body.dark-mode .calc-btn:hover {
    filter: brightness(115%); /* Brighter on hover */
    box-shadow: var(--shadow-button-hover-dark); /* Use variable */
}

body.dark-mode .calc-btn:active {
    filter: brightness(105%);
    box-shadow: var(--shadow-button-active-dark); /* Use variable */
}

body.dark-mode .calc-btn.function {
    background-color: var(--bg-button-function-dark); /* Use variable */
    color: var(--text-button-function-dark); /* Use variable */
}

body.dark-mode .calc-btn.operator {
    background-color: var(--bg-user-message-darker); /* Use variable */
}

body.dark-mode .calc-btn.equals {
    background-color: var(--accent-primary); /* Use variable */
}

/* Draggable class (Generic, could be moved to utilities) */
.draggable {
    cursor: grab;
}
.dragging {
    cursor: grabbing;
    opacity: 0.8;
    z-index: 1100; /* Ensure it's above other elements while dragging */
}
/* Back Button Component Style */

.back-button {
    position: absolute; /* Position relative to parent */
    top: 120px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--border-radius-sm, 6px);
    color: var(--bg-user-message); /* Use variable */
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    padding: 8px 12px; /* Add padding for easier clicking */
    z-index: 10; /* Ensure it's clickable */
}

.back-button:hover {
    background-color: var(--accent-primary, #D92960);
    color: white;
    border-color: var(--accent-primary, #D92960);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(217, 41, 96, 0.2);
}

.back-button .material-symbols-outlined {
    font-size: 1.2rem; /* Icon size */
    font-weight: bold; /* Make icon bolder */
}

/* Responsive Adjustments */
@media (max-width: 868px) {
    .back-button {
        top: 80px; /* Adjust position for smaller header */
        left: 15px;
    }
}

/* Dark Mode */
body.dark-mode .back-button {
    background-color: var(--bg-tertiary, #2d3748);
    border-color: var(--border-color-dark, #4a5568);
    color: var(--text-primary); /* Use variable */
}

body.dark-mode .back-button:hover {
    background-color: var(--accent-primary, #D92960);
    color: white;
    border-color: var(--accent-primary, #D92960);
}



/* src/css/components/_questao-relacionar-colunas.css */
.interactive-relacionar-colunas .exercise-instructions {
    color: var(--text-secondary);
}
.interactive-relacionar-colunas .exercise-instructions::before {
    content: '🔗';
    margin-right: 10px;
    font-size: 1.2em;
    color: var(--accent-primary);
}
.interactive-relacionar-colunas .columns-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
.interactive-relacionar-colunas .column {
    width: calc(50% - 10px);
    background-color: var(--bg-card);
    padding: 15px; /* Reduzido */
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}
.interactive-relacionar-colunas .column h2 {
    text-align: center;
    color: var(--text-primary);
    font-size: 1.1rem; /* Reduzido */
    margin-top: 0;
    margin-bottom: 15px; /* Reduzido */
    padding-bottom: 8px; /* Reduzido */
    border-bottom: 2px solid var(--accent-primary);
}
.interactive-relacionar-colunas .item {
    padding: 10px 15px; /* Reduzido */
    margin: 10px 0; /* Reduzido */
    border: 1px solid var(--item-border-color, var(--border-color));
    border-radius: var(--border-radius-sm);
    background-color: var(--item-bg, var(--bg-secondary));
    cursor: grab;
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.interactive-relacionar-colunas .item:hover {
    background-color: var(--item-hover-bg, #e9ecef);
    transform: translateY(-2px);
}
.interactive-relacionar-colunas .item.selected {
    background-color: var(--item-selected-bg, rgba(var(--accent-primary-rgb), 0.15));
    border-color: var(--item-selected-border, rgba(var(--accent-primary-rgb), 0.5));
    font-weight: 600;
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.25);
}
.interactive-relacionar-colunas .item.correct {
    background-color: var(--success-bg-subtle);
    border-color: var(--success-border-subtle);
    color: var(--success-text-subtle);
}
.interactive-relacionar-colunas .item.incorrect {
    background-color: var(--error-bg-subtle);
    border-color: var(--error-border-subtle);
    color: var(--error-text-subtle);
}
.interactive-relacionar-colunas .column#columnB .item::before, /* Seleciona a coluna B por ID dinâmico depois */
.interactive-relacionar-colunas .column .item[data-column="B"]::before { /* Alternativa com data-attribute */
    content: '';
    width: 10px; /* Reduzido */
    height: 10px; /* Reduzido */
    background-color: var(--border-color);
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: var(--shadow-sm);
    left: -6px; /* Ajustado */
}
.interactive-relacionar-colunas canvas { /* Seleciona o canvas pelo ID dinâmico */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}
.interactive-relacionar-colunas .controls {
    margin-top: 20px; /* Reduzido */
    display: flex;
    gap: 15px;
    justify-content: center;
}
.interactive-relacionar-colunas .controls button {
    padding: 12px 25px; /* Padronizado com outras questões */
    font-size: 1rem; /* Padronizado com outras questões */
    /* Estilos de botão herdados ou definidos em _button.css */
}
.interactive-relacionar-colunas .feedback-area { /* Classe comum para feedback */
    margin-top: 15px; /* Reduzido */
    padding: 10px 15px; /* Reduzido */
    border-radius: var(--border-radius-md);
    font-size: 1rem; /* Reduzido */
    font-weight: bold;
    text-align: center;
}
.interactive-relacionar-colunas .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle);
    color: var(--success-text-subtle);
    border: 1px solid var(--success-border-subtle);
}
.interactive-relacionar-colunas .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle);
    color: var(--error-text-subtle);
    border: 1px solid var(--error-border-subtle);
}
.interactive-relacionar-colunas .gabarito-display {
    margin-top: 15px; /* Reduzido */
    padding: 15px; /* Reduzido */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 0.9rem; /* Reduzido */
}
.interactive-relacionar-colunas .gabarito-display h3 {
    margin-top: 0;
    color: var(--accent-primary);
    font-size: 1rem; /* Reduzido */
    margin-bottom: 10px; /* Reduzido */
}
.interactive-relacionar-colunas .gabarito-display p {
    margin-bottom: 6px; /* Reduzido */
}


/* Dark mode adjustments para relacionar colunas */
body.dark-mode .interactive-relacionar-colunas .column {
    background-color: var(--bg-card-dark, #2d2d2d); /* Usar variável específica se existir */
    border-color: var(--border-color-dark, #444);
}
body.dark-mode .interactive-relacionar-colunas .item {
    background-color: var(--item-bg-dark, var(--bg-secondary-dark, #222));
    border-color: var(--item-border-color-dark, var(--border-color-dark, #444));
    color: var(--text-primary-dark, #f0f0f0);
}
body.dark-mode .interactive-relacionar-colunas .item:hover {
    background-color: var(--item-hover-bg-dark, #333);
}
body.dark-mode .interactive-relacionar-colunas .item.selected {
    background-color: var(--item-selected-bg-dark, rgba(var(--accent-primary-rgb), 0.25)); /* Ajustar opacidade se necessário */
    border-color: var(--item-selected-border-dark, rgba(var(--accent-primary-rgb), 0.6));
}
body.dark-mode .interactive-relacionar-colunas .column .item[data-column="B"]::before {
    background-color: var(--border-color-dark, #444);
    border-color: var(--bg-card-dark, #2d2d2d);
}
body.dark-mode .interactive-relacionar-colunas .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle-dark, #2a3a2a);
    color: var(--success-text-subtle-dark, #7ee29a);
    border-color: var(--success-border-subtle-dark, #4a7e5c);
}
body.dark-mode .interactive-relacionar-colunas .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle-dark, #4a2a2d);
    color: var(--error-text-subtle-dark, #ff9b9b);
    border-color: var(--error-border-subtle-dark, #7e4a4e);
}
body.dark-mode .interactive-relacionar-colunas .gabarito-display {
    background-color: var(--bg-secondary-dark, #222);
    border-color: var(--border-color-dark, #444);
}
body.dark-mode .interactive-relacionar-colunas .gabarito-display h3 {
    color: var(--accent-primary); /* Manter acento ou usar variável dark */
}
@media (max-width: 768px) {
    .interactive-relacionar-colunas .columns-wrapper {
        gap: 10px; /* Further reduce gap for smaller screens */
    }

    .interactive-relacionar-colunas .column {
        width: calc(50% - 5px); /* Adjust width for side-by-side on mobile */
        padding: 8px; /* Reduce column padding */
    }

    .interactive-relacionar-colunas .column h2 {
        font-size: 0.9rem; /* Smaller font size for titles */
        margin-bottom: 8px;
        padding-bottom: 4px;
    }

    .interactive-relacionar-colunas .item {
        padding: 6px 8px; /* Reduce item padding */
        margin: 6px 0; /* Reduce item margin */
        font-size: 0.8rem; /* Smaller font size for items */
    }

    .interactive-relacionar-colunas .controls {
        /* flex-direction: column; */ /* Removed to keep buttons side-by-side */
        gap: 8px; /* Reduce gap for controls */
    }

    .interactive-relacionar-colunas .feedback-area {
        padding: 6px 8px; /* Reduce feedback area padding */
        font-size: 0.85rem; /* Smaller font size for feedback */
    }

    .interactive-relacionar-colunas .gabarito-display {
        padding: 8px; /* Reduce gabarito display padding */
        font-size: 0.8rem; /* Smaller font size for gabarito display */
    }

    .interactive-relacionar-colunas .gabarito-display h3 {
        font-size: 0.9rem; /* Smaller font size for gabarito title */
        margin-bottom: 6px;
    }
    
    /* Audio player dentro dos itens de relacionar colunas */
    .interactive-relacionar-colunas .item .chat-audio-player {
        margin-top: 4px;
        margin-bottom: 2px;
    }
}

/* Responsividade adicional para telas muito pequenas */
@media (max-width: 480px) {
    .interactive-relacionar-colunas .columns-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .interactive-relacionar-colunas .column {
        width: 100%;
    }
    
    /* Audio player em full-width quando colunas empilham */
    .interactive-relacionar-colunas .item .chat-audio-player {
        max-width: 100%;
    }
}

/* src/css/components/_questao-multipla-escolha.css */
.interactive-multipla-escolha .question-statement {
    color: var(--text-secondary);
    line-height: 1.5;
}
.interactive-multipla-escolha .question-statement::before {
    content: '❓';
    margin-right: 10px;
    font-size: 1.2em;
    color: var(--accent-primary);
}
.interactive-multipla-escolha .options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.interactive-multipla-escolha .option-item {
    padding: 12px 18px;
    border: 1px solid var(--item-border-color, var(--border-color));
    border-radius: var(--border-radius-md);
    background-color: var(--item-bg, var(--bg-secondary));
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.interactive-multipla-escolha .option-item:hover {
    background-color: var(--item-hover-bg, #e9ecef);
    transform: translateY(-2px);
}
.interactive-multipla-escolha .option-item .option-label {
    font-weight: bold;
    color: var(--accent-primary);
    margin-right: 10px;
    min-width: 20px;
}
.interactive-multipla-escolha .option-item .option-text {
    flex-grow: 1;
}
.interactive-multipla-escolha .option-item.selected {
    background-color: var(--item-selected-bg, rgba(var(--accent-primary-rgb), 0.15));
    border-color: var(--item-selected-border, rgba(var(--accent-primary-rgb), 0.5));
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.25);
}
.interactive-multipla-escolha .option-item.selected .option-label {
    color: var(--accent-primary-hover, #bf2156);
}
.interactive-multipla-escolha .option-item.correct {
    background-color: var(--success-bg-subtle);
    border-color: var(--success-border-subtle);
    color: var(--success-text-subtle);
}
.interactive-multipla-escolha .option-item.correct .option-label {
    color: var(--success-color);
}
.interactive-multipla-escolha .option-item.incorrect {
    background-color: var(--error-bg-subtle);
    border-color: var(--error-border-subtle);
    color: var(--error-text-subtle);
}
.interactive-multipla-escolha .option-item.incorrect .option-label {
    color: var(--error-color);
}
.interactive-multipla-escolha .option-item.reveal-correct { /* Para quando o usuário erra e mostramos a correta */
    background-color: var(--success-bg-subtle) !important; /* Garante que sobrescreva o 'incorrect' */
    border-color: var(--success-border-subtle) !important;
    color: var(--success-text-subtle) !important;
    font-weight: bold;
}
.interactive-multipla-escolha .option-item.reveal-correct .option-label {
    color: var(--success-color) !important;
}
.interactive-multipla-escolha .controls {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.interactive-multipla-escolha .controls button:disabled {
    background-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}
.interactive-multipla-escolha .feedback-area {
    margin-top: 20px;
    padding: 12px 18px;
    border-radius: var(--border-radius-md);
    font-size: 1.05em;
    font-weight: bold;
    text-align: center;
}
.interactive-multipla-escolha .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle);
    color: var(--success-text-subtle);
    border: 1px solid var(--success-border-subtle);
}
.interactive-multipla-escolha .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle);
    color: var(--error-text-subtle);
    border: 1px solid var(--error-border-subtle);
}
.interactive-multipla-escolha .explanation-me {
    margin-top: 15px;
    padding: 10px;
    background-color: var(--bg-subtle);
    border-left: 3px solid var(--accent-secondary, var(--accent-primary)); /* Usar uma cor de acento secundária se disponível */
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
}

/* Dark mode para múltipla escolha */
body.dark-mode .interactive-multipla-escolha .option-item {
    background-color: var(--item-bg-dark, var(--bg-secondary-dark, #222));
    border-color: var(--item-border-color-dark, var(--border-color-dark, #444));
    color: var(--text-primary-dark, #f0f0f0);
}
body.dark-mode .interactive-multipla-escolha .option-item:hover {
    background-color: var(--item-hover-bg-dark, #333);
}
body.dark-mode .interactive-multipla-escolha .option-item.selected {
    background-color: var(--item-selected-bg-dark, rgba(var(--accent-primary-rgb), 0.25));
    border-color: var(--item-selected-border-dark, rgba(var(--accent-primary-rgb), 0.6));
}
body.dark-mode .interactive-multipla-escolha .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle-dark, #2a3a2a);
    color: var(--success-text-subtle-dark, #7ee29a);
    border-color: var(--success-border-subtle-dark, #4a7e5c);
}
body.dark-mode .interactive-multipla-escolha .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle-dark, #4a2a2d);
    color: var(--error-text-subtle-dark, #ff9b9b);
    border-color: var(--error-border-subtle-dark, #7e4a4e);
}
body.dark-mode .interactive-multipla-escolha .explanation-me {
    background-color: var(--bg-subtle-dark, #252525);
    border-left-color: var(--accent-secondary-dark, var(--accent-primary));
}

/* Ajuste de contraste no dark mode para .reveal-correct */
body.dark-mode .interactive-multipla-escolha .option-item.reveal-correct {
    background-color: var(--success-bg-subtle-dark, #233523) !important;
    border-color: var(--success-border-subtle-dark, #4a7e5c) !important;
    color: var(--success-text-subtle-dark, #a5f3c5) !important;
}
body.dark-mode .interactive-multipla-escolha .option-item.reveal-correct .option-label {
    color: var(--success-color-dark, #5cb85c) !important;
}

/* Dark mode tuning for reveal-correct to avoid being too bright */
body.dark-mode .interactive-multipla-escolha .option-item.reveal-correct {
    background-color: var(--success-bg-subtle-dark, #203221) !important;
    border-color: var(--success-border-subtle-dark, #315b3c) !important;
    color: var(--success-text-subtle-dark, #9de7b3) !important;
}
body.dark-mode .interactive-multipla-escolha .option-item.reveal-correct .option-label {
    color: var(--success-color-dark, #6ddf92) !important;
}
/* src/css/components/_questao-vf.css */
.interactive-vf .exercise-instructions {
    color: var(--text-secondary);
}
.interactive-vf .exercise-instructions::before {
    content: '⚖️';
    margin-right: 10px;
    font-size: 1.2em;
    color: var(--accent-primary);
}
.interactive-vf .vf-statements-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduzido */
}
.interactive-vf .vf-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-card);
    gap: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.interactive-vf .vf-item-statement {
    flex-grow: 1;
    line-height: 1.5;
}
.interactive-vf .vf-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.interactive-vf .vf-button {
    padding: 8px 15px;
    font-size: 0.95rem;
    font-weight: bold;
    border: 1px solid var(--vf-button-border, var(--border-color));
    border-radius: var(--border-radius-sm);
    background-color: var(--vf-button-bg, var(--bg-secondary));
    color: var(--text-secondary);
    cursor: pointer;
    min-width: 45px;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.interactive-vf .vf-button:hover {
    background-color: var(--vf-button-hover-bg, #e2e6ea);
}
.interactive-vf .vf-button.selected.true {
    background-color: var(--vf-button-selected-v-bg, var(--success-bg-subtle));
    border-color: var(--vf-button-selected-v-border, var(--success-border-subtle));
    color: var(--vf-button-selected-v-text, var(--success-color));
}
.interactive-vf .vf-button.selected.false {
    background-color: var(--vf-button-selected-f-bg, var(--error-bg-subtle));
    border-color: var(--vf-button-selected-f-border, var(--error-border-subtle));
    color: var(--vf-button-selected-f-text, var(--error-color));
}
.interactive-vf .vf-item.correct {
    background-color: var(--success-bg-subtle);
    border-color: var(--success-border-subtle);
}
.interactive-vf .vf-item.incorrect {
    background-color: var(--error-bg-subtle);
    border-color: var(--error-border-subtle);
}
.interactive-vf .vf-item.incorrect .vf-buttons .selected { /* Botão que o usuário clicou e errou */
    opacity: 0.7;
}
.interactive-vf .vf-item.incorrect .vf-buttons .vf-button.reveal-correct { /* Botão que era o correto */
    font-weight: bold;
    animation: pulse-correct 0.8s ease-in-out;
}
@keyframes pulse-correct { /* Para destacar a resposta correta quando o usuário erra */
    0%, 100% { transform: scale(1); box-shadow: none; }
    50% { transform: scale(1.05); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.3); }
}
.interactive-vf .controls {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.interactive-vf .controls button:disabled {
    background-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}
.interactive-vf .feedback-area { /* Classe comum para feedback */
    margin-top: 20px;
    padding: 12px 18px;
    border-radius: var(--border-radius-md);
    font-size: 1.05em;
    font-weight: bold;
    text-align: center;
}
.interactive-vf .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle);
    color: var(--success-text-subtle);
    border: 1px solid var(--success-border-subtle);
}
.interactive-vf .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle);
    color: var(--error-text-subtle);
    border: 1px solid var(--error-border-subtle);
}
.interactive-vf .gabarito-vf-display {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 0.95rem;
}
.interactive-vf .gabarito-vf-display ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.interactive-vf .gabarito-vf-display li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}
.interactive-vf .gabarito-vf-display li:last-child {
    border-bottom: none;
}
.interactive-vf .gabarito-vf-display .gabarito-statement-num {
    font-weight: bold;
    color: var(--text-primary);
    margin-right: 5px;
}
.interactive-vf .gabarito-vf-display .gabarito-statement-text {
    color: var(--text-secondary);
}
.interactive-vf .gabarito-vf-display .gabarito-correct-answer {
    font-weight: bold;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-size: 0.9em;
}
.interactive-vf .gabarito-vf-display .gabarito-correct-answer.true {
    color: var(--success-color);
    background-color: var(--success-bg-subtle);
}
.interactive-vf .gabarito-vf-display .gabarito-correct-answer.false {
    color: var(--error-color);
    background-color: var(--error-bg-subtle);
}

/* Dark mode para V/F */
body.dark-mode .interactive-vf .vf-item {
    background-color: var(--bg-card-dark, #2d2d2d);
    border-color: var(--border-color-dark, #444);
    color: var(--text-primary-dark, #f0f0f0);
}
body.dark-mode .interactive-vf .vf-button {
    background-color: var(--vf-button-bg-dark, var(--bg-secondary-dark, #222));
    border-color: var(--vf-button-border-dark, var(--border-color-dark, #444));
    color: var(--text-secondary-dark, #aaa);
}
body.dark-mode .interactive-vf .vf-button:hover {
    background-color: var(--vf-button-hover-bg-dark, #333);
}
body.dark-mode .interactive-vf .vf-button.selected.true {
    background-color: var(--vf-button-selected-v-bg-dark, var(--success-bg-subtle-dark, #2a3a2a));
    border-color: var(--vf-button-selected-v-border-dark, var(--success-border-subtle-dark, #4a7e5c));
    color: var(--vf-button-selected-v-text-dark, var(--success-text-subtle-dark, #7ee29a));
}
body.dark-mode .interactive-vf .vf-button.selected.false {
    background-color: var(--vf-button-selected-f-bg-dark, var(--error-bg-subtle-dark, #4a2a2d));
    border-color: var(--vf-button-selected-f-border-dark, var(--error-border-subtle-dark, #7e4a4e));
    color: var(--vf-button-selected-f-text-dark, var(--error-text-subtle-dark, #ff9b9b));
}
body.dark-mode .interactive-vf .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle-dark, #2a3a2a);
    color: var(--success-text-subtle-dark, #7ee29a);
    border-color: var(--success-border-subtle-dark, #4a7e5c);
}
body.dark-mode .interactive-vf .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle-dark, #4a2a2d);
    color: var(--error-text-subtle-dark, #ff9b9b);
    border-color: var(--error-border-subtle-dark, #7e4a4e);
}
body.dark-mode .interactive-vf .gabarito-vf-display {
    background-color: var(--bg-secondary-dark, #222);
    border-color: var(--border-color-dark, #444);
}
body.dark-mode .interactive-vf .gabarito-vf-display .gabarito-correct-answer.true {
    color: var(--success-text-subtle-dark, #7ee29a);
    background-color: var(--success-bg-subtle-dark, #2a3a2a);
}
body.dark-mode .interactive-vf .gabarito-vf-display .gabarito-correct-answer.false {
    color: var(--error-text-subtle-dark, #ff9b9b);
    background-color: var(--error-bg-subtle-dark, #4a2a2d);
}

@media (max-width: 768px) {
    .interactive-vf .vf-item {
        padding: 8px 10px; /* Menor padding para mobile */
        gap: 10px; /* Menor espaçamento entre itens */
    }
    .interactive-vf .vf-statements-container{
        gap: 8px;
    }

    .interactive-vf .vf-item-statement {
        font-size: 0.85rem; /* Fonte menor para botões */
    }

    .interactive-vf .vf-button {
        padding: 6px 10px; /* Menor padding para botões */
        font-size: 0.85rem; /* Fonte menor para botões */
        min-width: 35px; /* Largura mínima menor */
    }
}   
/* Adicionar ao seu arquivo CSS principal ou um arquivo específico para questões */
.custom-underline {
    text-decoration: underline;
    /* Você pode adicionar mais estilos aqui, como cor ou espessura */
    /* text-decoration-color: var(--accent-primary); */ /* Exemplo */
    /* text-decoration-thickness: 2px; */ /* Exemplo */
}

.custom-mark { /* Se você quiser diferenciar do <mark> padrão */
    background-color: rgba(var(--accent-primary-rgb), 0.2); /* Exemplo de cor de destaque */
    padding: 0.1em 0.2em;
    border-radius: 3px;
}

/* Estilos gerais para containers de exercícios interativos */
.interactive-exercise-container {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 .5rem 1rem rgba(0,0,0,.1));
    padding: 20px 25px; /* Padding um pouco menor */
    margin: 20px 0; /* Margem vertical */
    border-left: 4px solid var(--accent-primary); /* Borda de destaque */
    font-size: 0.95rem; /* Tamanho de fonte base um pouco menor para caber mais */
}

@media (max-width: 768px) {
    .interactive-exercise-container {
        padding: 15px 15px; /* Menor padding para mobile */
        font-size: 0.9rem; /* Fonte um pouco menor para mobile */
    }
}

.interactive-exercise-container .feedback-area { /* Nova classe para feedback */
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}
.interactive-exercise-container .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle);
    color: var(--success-text-subtle);
    border: 1px solid var(--success-border-subtle);
}
.interactive-exercise-container .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle);
    color: var(--error-text-subtle);
    border: 1px solid var(--error-border-subtle);
}


/* Dark Mode geral para interactive-exercise-container (base) */
body.dark-mode .interactive-exercise-container {
    background-color: var(--bg-card-dark, #2d2d2d);
    border-color: var(--border-color-dark, #444); /* Para a borda principal se houver */
    border-left-color: var(--accent-primary); /* Manter acento */
    color: var(--text-primary-dark, #f0f0f0);
}

body.dark-mode .interactive-exercise-container .feedback-area.correct-feedback {
    background-color: var(--success-bg-subtle-dark, #2a3a2a);
    color: var(--success-text-subtle-dark, #7ee29a);
    border-color: var(--success-border-subtle-dark, #4a7e5c);
}
body.dark-mode .interactive-exercise-container .feedback-area.incorrect-feedback {
    background-color: var(--error-bg-subtle-dark, #4a2a2d);
    color: var(--error-text-subtle-dark, #ff9b9b);
    border-color: var(--error-border-subtle-dark, #7e4a4e);
}

/* Dark Mode para custom-underline e custom-mark */
body.dark-mode .custom-underline {
    text-decoration-color: var(--accent-primary); /* A cor do texto herdada deve funcionar */
}
body.dark-mode .custom-mark {
    background-color: rgba(var(--accent-primary-rgb), 0.3); /* Um pouco mais de opacidade no dark mode */
    color: var(--accent-primary); /* Manter a cor do acento, assumindo que ela já é contrastante */
}

/* Importar os CSS específicos de cada tipo de questão que você criou */
/* Se você criou os arquivos: */
/* Create Course Page Styles */

#create-course-page {
    /* Assuming this ID is on a main container or body */
    background: linear-gradient(135deg, #f9f9f9, #fff); /* Light gradient */
    padding: 30px; /* Add padding */
    min-height: calc(100vh - 80px); /* Adjust based on header */
}

.create-course-form {
    background: linear-gradient(145deg, #fff, #f5f5f5); /* Form background */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Form shadow */
    max-width: 700px; /* Limit form width */
    margin: 0 auto; /* Center form */
}

/* Form Inputs & Textarea */
.form-input,
.form-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--accent-primary, #D92960); /* Accent border */
    border-radius: 12px;
    font-size: 1rem;
    font-family: "Poppins", sans-serif; /* Consistent font */
    color: #333; /* Dark text */
    background-color: #f8f9fa; /* Light background */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* Inner shadow */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px; /* Space below inputs */
    box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-primary, #292C6D); /* Brand color focus */
    box-shadow: 0 0 5px rgba(41, 44, 109, 0.5); /* Brand color shadow */
    background-color: #fff; /* White background on focus */
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Image Upload Section */
.image-upload-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.image-upload-label {
    font-size: 1rem;
    color: #495057; /* Dark gray text */
    margin-bottom: 0; /* Adjust spacing */
    display: block;
    font-weight: 500; /* Make label slightly bolder */
}

/* Image Preview Grid (Scoped to this page) */
#create-course-page .image-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

#create-course-page .image-preview-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#create-course-page .image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Filename display */
#create-course-page .image-preview-item span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay */
    color: white;
    font-size: 0.8rem; /* Smaller font */
    padding: 5px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Remove button (Scoped) */
#create-course-page .image-preview-item .remove-image {
    position: absolute; /* Ensure positioning */
    top: 5px;
    right: 5px;
    width: 22px; /* Slightly larger */
    height: 22px;
    background-color: rgba(220, 53, 69, 0.8); /* Red background */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border: none;
    padding: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
#create-course-page .image-preview-item .remove-image:hover {
     background-color: rgba(220, 53, 69, 1); /* Opaque red */
     transform: scale(1.1);
}


/* Submit Button (reuse .new-chat-button or create specific) */
/* Example using existing button style */
#create-course-page .new-chat-button {
     margin-top: 10px; /* Adjust margin */
     width: 100%; /* Full width */
}


/* Dark Mode */
body.dark-mode #create-course-page {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a); /* Dark gradient */
}
body.dark-mode .create-course-form {
    background: linear-gradient(145deg, #353535, #2d2d2d); /* Dark form background */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Darker shadow */
}
body.dark-mode .form-input,
body.dark-mode .form-textarea {
    background-color: #3d3d3d; /* Dark input background */
    color: #f5f5f5; /* Light text */
    border-color: #6c757d; /* Darker border */ /* Merged: was var(--accent-primary, #D92960) then #6c757d */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
body.dark-mode .form-input:focus,
body.dark-mode .form-textarea:focus {
    border-color: var(--accent-primary, #D92960); /* Accent focus */ /* Merged: was #D92960 then var(--accent-primary, #D92960) */
    box-shadow: 0 0 5px rgba(217, 41, 96, 0.7); /* Accent shadow */
    background-color: #4d4d4d; /* Slightly lighter dark */
}
body.dark-mode .image-upload-label {
     color: #ccc; /* Lighter label text */
}
body.dark-mode #create-course-page .image-preview-item { /* Scoped to page */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
body.dark-mode #create-course-page .image-preview-item span { /* Scoped to page */
     background: rgba(0, 0, 0, 0.7);
}
body.dark-mode #create-course-page .image-preview-item .remove-image {
     background-color: rgba(255, 107, 107, 0.8); /* Lighter red */
}
body.dark-mode #create-course-page .image-preview-item .remove-image:hover {
     background-color: rgba(255, 107, 107, 1);
}
/* END OF MERGED "Additional Dark Mode Overrides" */
/* Em /src/css/pages/_landing-page.css */



/* Garante que o solution-text-container ocupe a largura disponível */
#solution-page .landing-container #solution-text-container {
    width: 100%;
}
.landing-page {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Changed from center to flex-start to allow proper scrolling */
    /* height: calc(100vh - 80px); /* Adjust based on header height */
    /* Let content determine height, ensure full viewport height available */
    min-height: calc(100vh - 80px); /* Example: Adjust 80px based on actual header height */
    /* height: 100%; /* Removed - this was causing scroll issues on mobile */
    padding: 30px;
    text-align: center;
    background: linear-gradient(135deg, #f9f9f9, #fff); /* Light gradient */
    box-sizing: border-box; /* Include padding in height calculation */
}

.landing-container {
    max-width: 900px;
    width: 100%;
}

.landing-title {
    font-size: 2.8rem;
    color: var(--brand-primary, #292C6D);
    margin-bottom: 50px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Horizontal scroll container for recent chats */
.user-chats-scroll {
    display: flex;
    gap: 25px;
    padding-bottom: 15px; /* Space for scrollbar */
    margin-bottom: 40px;
    cursor: grab;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch */
    /* Scrollbar styles */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) #e0e0e0; /* thumb track */
}

.user-chats-scroll.dragging { /* Class added by JS during drag */
    cursor: grabbing;
}
.user-chats-scroll:active { /* Fallback for non-JS */
    cursor: grabbing;
}

.user-chats-scroll::-webkit-scrollbar {
    height: 10px;
}

.user-chats-scroll::-webkit-scrollbar-track {
    background: #e0e0e0; /* Light track */
    border-radius: 5px;
}

.user-chats-scroll::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border-radius: 5px;
    border: 3px solid #e0e0e0; /* Match track color */
}

/* Individual chat item card in the scroll container */
/* Reusing .history-dropdown-item-chat class name from original CSS */
.history-dropdown-item-chat {
    min-width: 220px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    align-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    /* Removed dynamic hover gradient overlay */
}

.history-dropdown-item-chat:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}

/* Wrapper for title and date */
.history-item-content-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center; /* Align title and date */
    width: 100%; /* Take full width */
    /* flex-grow: 1 !important; */ /* Removed, let content determine height */
    /* margin-right: 10px !important; */ /* Removed, using gap in parent */
    overflow: hidden !important;
}

.chat-item-title {
    flex-grow: 1 !important;
    margin-right: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 500; /* Make title slightly bolder */
}

.chat-item-date {
    flex-shrink: 0 !important;
    /* margin-left: auto !important; /* Removed, handled by flex */
    white-space: nowrap !important;
    font-size: 0.85rem; /* Smaller date */
    color: #666; /* Consider var(--text-secondary) */
}

/* Actions specific to landing page chat items */
/* Styles for .history-item-actions are in _history-dropdown.css */
.history-dropdown-item-chat .history-item-actions {
     justify-content: flex-end; /* Align actions to the right */

}


/* New Chat Button */
.new-chat-button {
    padding: 18px 35px;
    font-size: 1.3rem;
    background-color: var(--accent-primary, #D92960);
    color: white; /* Consider var(--text-on-accent) */
    border: none;
    border-radius: 12px; /* Consider var(--border-radius-md) */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Shadow */
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 20px; /* Space above button */
}

.new-chat-button:hover {
    background-color: #bf2156; /* Darken accent */
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

.new-chat-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Press effect */
}


/* Dark Mode */
body.dark-mode .landing-page {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a); /* Dark gradient */
}
body.dark-mode .landing-title {
    color: #fff;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.05);
}
body.dark-mode .user-chats-scroll::-webkit-scrollbar-track {
    background: #4d4d4d; /* Dark track */
}
body.dark-mode .user-chats-scroll::-webkit-scrollbar-thumb {
    border-color: #353535; /* Match dark track */
}
body.dark-mode .user-chats-scroll {
     scrollbar-color: var(--accent-primary, #D92960) #4d4d4d; /* Dark track */
}
body.dark-mode .history-dropdown-item-chat {
    background-color: #2d2d2d; /* Dark card background */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow */
    color: #eee; /* Light text */
}
body.dark-mode .history-dropdown-item-chat:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); /* Enhanced dark shadow */
}
body.dark-mode .chat-item-date {
     color: #aaa; /* Lighter gray date */
}

.landing-subtitle {
    margin: 20px 10px; /* Adjust spacing */
    text-align: center;
    color: var(--text-secondary, #666); /* Use variable */
    font-size: 1.1rem; /* Adjust size */
}
body.dark-mode .landing-subtitle {
    color: #aaa; /* Lighter gray */
}

/* Dark mode action button styles are handled in _history-dropdown.css */


/* --- Responsive Landing Page --- */
@media (max-width: 768px) {
    .landing-page {
        padding: 20px;
        min-height: calc(100vh - 70px); /* Adjust for mobile header */
        height: auto; /* Allow content height */
        align-items: flex-start; /* Align top on mobile - now consistent with desktop */
        padding-top: 40px; /* Add some top padding for better spacing */
    }
    .landing-title {
        font-size: 2rem; /* Smaller title */
        margin-bottom: 30px;
    }
    .user-chats-scroll {
        gap: 15px; /* Reduce gap */
        margin-bottom: 30px; /* Reduce margin */
    }
    .history-dropdown-item-chat {
        min-width: 180px; /* Adjust min-width */
        padding: 15px;
        font-size: 1rem;
        flex-shrink: 0; /* Prevent shrinking in scroll container */
        /* display: inline-block; /* Removed, flex handles layout */
        /* vertical-align: top; */ /* Removed */
        /* margin-right: 15px; /* Use gap instead */
        width: auto; /* Allow flex to determine width */
        max-width: none; /* Remove max-width */
    }
     .user-chats-scroll > .history-dropdown-item-chat:last-child {
         margin-right: 0; /* Ensure no margin on last item */
     }
    .new-chat-button {
        padding: 15px 25px;
         font-size: 1.1rem;
    }
}


/* --- Landing Page Actions --- */
.landing-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.landing-action-button {
    padding: 14px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Consider var(--border-radius-md) */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.landing-action-button.resolver-button {
    background-color: #f8f9fa; /* Light gray */
    color: var(--brand-primary, #292C6D); /* Brand color text */
}
.landing-action-button.resolver-button:hover {
    background-color: #e9ecef; /* Darker gray */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.landing-action-button.aprender-button,
.landing-action-button.novo-curso-button {
    background-color: var(--accent-primary, #D92960); /* Accent color */
    color: white; /* Consider var(--text-on-accent) */
}
.landing-action-button.aprender-button:hover,
.landing-action-button.novo-curso-button:hover {
    background-color: #bf2156; /* Darken accent */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.landing-action-button:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
}

/* Dark Mode Landing Actions */
body.dark-mode .landing-action-button.resolver-button {
    background-color: #3d3d3d; /* Dark gray */
    color: #eee; /* Light text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode .landing-action-button.resolver-button:hover {
     background-color: #4d4d4d; /* Lighter dark gray */
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
/* Accent buttons keep their colors in dark mode */
body.dark-mode .landing-action-button.aprender-button,
body.dark-mode .landing-action-button.novo-curso-button {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode .landing-action-button.aprender-button:hover,
body.dark-mode .landing-action-button.novo-curso-button:hover {
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
body.dark-mode .landing-action-button:active {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive Landing Actions */
@media (max-width: 768px) {
    .landing-actions {
        gap: 15px;
        margin-top: 20px;
    }
    .landing-action-button {
        padding: 12px 25px;
        font-size: 1rem;
    }
}



/* Welcome Portfolio Page Styles */

/* Portfolio Theme Variables */
:root {
    /* --- Paleta Portfólio - MODO CLARO (Baseado no LearnAI Light) --- */
    --portfolio-primary: var(--accent-primary); /* #D92960 */
    --portfolio-secondary: var(--primary-color); /* #292C6D */
    --portfolio-accent: var(--accent-secondary); /* #007bff */

    --portfolio-background-start: var(--bg-secondary); /* #f8f9fa */
    --portfolio-background-end: var(--bg-primary); /* #ffffff */

    --portfolio-card-bg: var(--bg-card); /* #ffffff */
    --portfolio-card-border: rgba(217, 41, 96, 0.2);
    --portfolio-card-hover-bg: rgba(217, 41, 96, 0.05);

    --portfolio-text: var(--text-primary); /* #212529 */
    --portfolio-text-muted: var(--text-secondary); /* #6c757d */
    --portfolio-text-heading: var(--text-heading); /* #343a40 */
    --portfolio-text-on-primary: var(--text-on-accent); /* #ffffff */

    /* RGBs para uso com rgba() */
    --portfolio-primary-rgb: var(--accent-primary-rgb); /* 217, 41, 96 */
    --portfolio-secondary-rgb: var(--brand-primary-rgb); /* 41, 44, 109 */

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

/* --- Paleta Portfólio - MODO ESCURO (Baseado no LearnAI Dark) --- */
body.dark-mode {
    --portfolio-primary: var(--accent-primary); /* #E63980 */
    --portfolio-secondary: var(--primary-color); /* #3A3F99 */
    --portfolio-accent: var(--accent-secondary); /* #4dabf7 */

    --portfolio-background-start: var(--bg-secondary); /* #222 */
    --portfolio-background-end: var(--bg-primary); /* #1a1a1a */

    --portfolio-card-bg: var(--bg-card); /* #2d2d2d */
    --portfolio-card-border: rgba(230, 57, 128, 0.25);
    --portfolio-card-hover-bg: rgba(230, 57, 128, 0.1);

    --portfolio-text: var(--text-primary); /* #f0f0f0 */
    --portfolio-text-muted: var(--text-secondary); /* #adb5bd */
    --portfolio-text-heading: var(--text-heading); /* #ffffff */
    --portfolio-text-on-primary: var(--text-on-accent); /* #ffffff */

    /* RGBs para uso com rgba() */
    --portfolio-primary-rgb: var(--accent-primary-rgb); /* 230, 57, 128 */
    --portfolio-secondary-rgb: 58, 63, 153; /* RGB for #3A3F99 */
}

/* Welcome Portfolio Page Specific Styles */
#welcome-page.portfolio-style {
    font-family: var(--font-main);
    background: linear-gradient(-45deg, var(--portfolio-background-start), var(--portfolio-background-end));
    color: var(--portfolio-text);
    line-height: 1.7;
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    min-height: 100vh;
    padding: 0;
}

#welcome-page.portfolio-style .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    margin-bottom: 4rem;
}

/* Header Styles */
#welcome-page.portfolio-style .project-header {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(var(--portfolio-primary-rgb), 0.1);
}

#welcome-page.portfolio-style .project-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

#welcome-page.portfolio-style .header-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

#welcome-page.portfolio-style .back-button {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 1000;
    background: rgba(var(--portfolio-primary-rgb), 0.05);
    border: 1px solid var(--portfolio-primary);
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    color: var(--portfolio-primary);
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-weight: 600;
    cursor: pointer;
}

#welcome-page.portfolio-style .back-button:hover {
    background: var(--portfolio-primary);
    color: var(--portfolio-text-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--portfolio-primary-rgb), 0.2);
}

/* Botão de Toggle de Tema */
#welcome-page.portfolio-style .theme-toggle-button-portfolio {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1001;
    background-color: var(--portfolio-card-bg);
    color: var(--portfolio-primary);
    border: 1px solid var(--portfolio-primary);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#welcome-page.portfolio-style .theme-toggle-button-portfolio:hover {
    background-color: var(--portfolio-primary);
    color: var(--portfolio-text-on-primary);
    transform: scale(1.1);
}

#welcome-page.portfolio-style .theme-toggle-button-portfolio .material-symbols-outlined {
    font-size: 24px;
    transition: transform 0.4s ease-out;
}

#welcome-page.portfolio-style .project-title {
    font-size: clamp(2.8rem, 7vw, 4.2rem);
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, var(--portfolio-primary), var(--portfolio-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(var(--portfolio-primary-rgb), 0.25);
    font-weight: 700;
}

#welcome-page.portfolio-style .project-subtitle {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    color: var(--portfolio-text-muted);
    margin-bottom: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

#welcome-page.portfolio-style .tech-stack {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
}

#welcome-page.portfolio-style .tech-item {
    background: rgba(var(--portfolio-primary-rgb), 0.1);
    padding: 0.7rem 1.4rem;
    border-radius: 25px;
    border: 1px solid var(--portfolio-primary);
    font-size: 0.95rem;
    color: var(--portfolio-primary);
    font-weight: 500;
    transition: all 0.3s ease;
}

#welcome-page.portfolio-style .tech-item:hover {
    background: rgba(var(--portfolio-primary-rgb), 0.2);
    transform: scale(1.05);
}

/* Main Content Sections */
#welcome-page.portfolio-style section {
    padding: clamp(4rem, 8vw, 6rem) 0;
}

#welcome-page.portfolio-style .section-title {
    font-size: clamp(2.2rem, 5.5vw, 2.8rem);
    margin-bottom: 3.5rem;
    text-align: center;
    color: var(--portfolio-text-heading);
    position: relative;
    padding-bottom: 1.2rem;
}

#welcome-page.portfolio-style .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 5px;
    background: linear-gradient(90deg, var(--portfolio-primary), var(--portfolio-secondary));
    border-radius: 3px;
}

#welcome-page.portfolio-style .feature-card {
    background: var(--portfolio-card-bg);
    border-radius: 18px;
    padding: 2.5rem;
    border: 1px solid var(--portfolio-card-border);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

#welcome-page.portfolio-style .feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--portfolio-primary);
    background: var(--portfolio-card-hover-bg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}


#welcome-page.portfolio-style .feature-card h3 {
    color: var(--portfolio-text-heading);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
}

#welcome-page.portfolio-style .feature-card p {
    color: var(--portfolio-text-muted);
    font-size: 0.95rem;
    flex-grow: 1;
}

#welcome-page.portfolio-style .feature-card .feature-image {
    width: 100%;
    max-width: 900px;
    height: auto;
    /* Provide stable box to reduce CLS on initial load */
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    margin-bottom: 1rem;
    object-fit: cover;
}

#welcome-page.portfolio-style .grid-2-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2.5rem;
}

#welcome-page.portfolio-style .grid-4-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 2rem;
}

#welcome-page.portfolio-style .image-full-width {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 15px;
    margin: 1.5rem auto;
    display: block;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

#welcome-page.portfolio-style .image-full-width-scrollable-container {
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 15px;
    margin: 1.5rem auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--portfolio-card-border);
    scrollbar-width: thin;
    scrollbar-color: var(--portfolio-primary) var(--portfolio-card-bg);
}

#welcome-page.portfolio-style .image-full-width-scrollable-container::-webkit-scrollbar {
    width: 8px;
}

#welcome-page.portfolio-style .image-full-width-scrollable-container::-webkit-scrollbar-track {
    background: var(--portfolio-card-bg);
    border-radius: 4px;
}

#welcome-page.portfolio-style .image-full-width-scrollable-container::-webkit-scrollbar-thumb {
    background-color: var(--portfolio-primary);
    border-radius: 4px;
    border: 2px solid var(--portfolio-card-bg);
}

#welcome-page.portfolio-style .image-full-width-scrollable-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Carousel Styles */
#welcome-page.portfolio-style .carousel-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto 4rem;
    overflow: hidden;
    background: var(--portfolio-card-bg);
    border-radius: 15px;
    border: 1px solid var(--portfolio-card-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    min-height: 450px;
    isolation: isolate;
}

#welcome-page.portfolio-style .carousel-track {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#welcome-page.portfolio-style .carousel-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
}

#welcome-page.portfolio-style .carousel-slide.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 1;
}

#welcome-page.portfolio-style .carousel-image {
    width: 100%;
    max-width: 550px;
    height: auto;
    max-height: 350px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#welcome-page.portfolio-style .carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

#welcome-page.portfolio-style .carousel-content {
    text-align: center;
}

#welcome-page.portfolio-style .carousel-content h3 {
    font-size: 1.3rem;
    color: var(--portfolio-text-heading);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

#welcome-page.portfolio-style .carousel-content p {
    color: var(--portfolio-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

#welcome-page.portfolio-style .carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--portfolio-primary);
    color: var(--portfolio-text-on-primary);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#welcome-page.portfolio-style .carousel-button:hover {
    background: var(--portfolio-secondary);
    transform: translateY(-50%) scale(1.1);
}

#welcome-page.portfolio-style .carousel-button.prev {
    left: 1rem;
}

#welcome-page.portfolio-style .carousel-button.next {
    right: 1rem;
}

#welcome-page.portfolio-style .study-link {
    color: var(--portfolio-primary) !important;
    font-weight: 600;
    text-decoration: underline;
}

#welcome-page.portfolio-style .study-link:hover {
    color: var(--portfolio-secondary) !important;
}

/* CTA Section */
#welcome-page.portfolio-style .cta-section {
    text-align: center;
    background: linear-gradient(45deg, rgba(var(--portfolio-primary-rgb), 0.08), rgba(var(--portfolio-secondary-rgb), 0.08));
    border-radius: 25px;
    padding: clamp(3.5rem, 7vw, 5rem) 2rem;
    margin: 4rem 0;
    border: 1px solid var(--portfolio-card-border);
    overflow: hidden;
    position: relative;
}

#welcome-page.portfolio-style .cta-section h2 {
    color: var(--portfolio-text-heading);
    margin-bottom: 1rem;
    font-size: 2.2rem;
}

#welcome-page.portfolio-style .cta-section p {
    color: var(--portfolio-text-muted);
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
}

#welcome-page.portfolio-style .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.1rem 2.6rem;
    background: linear-gradient(45deg, var(--portfolio-primary), var(--portfolio-secondary));
    color: var(--portfolio-text-on-primary);
    text-decoration: none;
    border-radius: 35px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    box-shadow: 0 6px 20px rgba(var(--portfolio-primary-rgb), 0.25);
    border: none;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

#welcome-page.portfolio-style .cta-button:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 30px rgba(var(--portfolio-primary-rgb), 0.35);
}

#welcome-page.portfolio-style .cta-button i {
    margin: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#welcome-page.portfolio-style .cta-button .material-symbols-outlined {
    font-size: 22px;
}

/* Footer */
#welcome-page.portfolio-style footer {
    text-align: center;
    padding: 3rem 0;
    margin-top: 4rem;
    border-top: 1px solid rgba(var(--portfolio-primary-rgb), 0.1);
    color: var(--portfolio-text-muted);
    font-size: 0.9rem;
}

#welcome-page.portfolio-style footer a {
    color: var(--portfolio-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

#welcome-page.portfolio-style footer a:hover {
    color: var(--portfolio-secondary);
    text-decoration: underline;
}

/* Page TOC Styles */
#welcome-page.portfolio-style .page-toc {
    position: fixed;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 1000;
    padding: 1rem;
    max-height: 250px;
    overflow: hidden;
}

#welcome-page.portfolio-style .toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#welcome-page.portfolio-style .toc-item {
    position: relative;
    padding-bottom: 2rem;
}

#welcome-page.portfolio-style .toc-item:last-child {
    padding-bottom: 0;
}

#welcome-page.portfolio-style .toc-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 24px;
    width: 2px;
    height: calc(100% - 24px);
    background-color: rgba(var(--portfolio-primary-rgb), 0.3);
    transition: background-color 0.3s ease;
}

#welcome-page.portfolio-style .toc-item.active:not(:last-child)::after {
    background-color: var(--portfolio-primary);
}

#welcome-page.portfolio-style .toc-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--portfolio-text-muted);
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

#welcome-page.portfolio-style .toc-link:hover {
    color: var(--portfolio-primary);
}

#welcome-page.portfolio-style .toc-bullet {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--portfolio-primary-rgb), 0.3);
    border-radius: 50%;
    margin-right: 0.8rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background-color: transparent;
}

#welcome-page.portfolio-style .toc-link:hover .toc-bullet {
    border-color: var(--portfolio-primary);
    background-color: rgba(var(--portfolio-primary-rgb), 0.1);
}

#welcome-page.portfolio-style .toc-link.active {
    color: var(--portfolio-primary);
    font-weight: 500;
}

#welcome-page.portfolio-style .toc-link.active .toc-bullet {
    border-color: var(--portfolio-primary);
    background-color: var(--portfolio-primary);
}

/* Responsividade */
@media (max-width: 1400px) {
    #welcome-page.portfolio-style .page-toc {
        display: none;
    }
}

@media (max-width: 768px) {
    #welcome-page.portfolio-style .project-header {
        min-height: 70vh;
        padding: 2.25rem 0;
    }
    
    #welcome-page.portfolio-style .back-button,
    #welcome-page.portfolio-style .theme-toggle-button-portfolio {
        top: 1.5rem;
    }
    
    #welcome-page.portfolio-style .back-button {
        left: 1.5rem;
        padding: 0.7rem 1.3rem;
    }
    
    #welcome-page.portfolio-style .theme-toggle-button-portfolio {
        right: 1.5rem;
        width: 40px;
        height: 40px;
    }
    
    #welcome-page.portfolio-style .theme-toggle-button-portfolio .material-symbols-outlined {
        font-size: 20px;
    }
    
    #welcome-page.portfolio-style section {
        padding: 2.25rem 0;
    }
    
    #welcome-page.portfolio-style .grid-2-cols,
    #welcome-page.portfolio-style .grid-4-cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Tech stack em layout de grid no mobile/tablet para evitar 1 por linha */
    #welcome-page.portfolio-style .tech-stack {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.6rem;
        justify-content: stretch;
    }
    #welcome-page.portfolio-style .tech-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.6rem 0.8rem;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
        font-size: 0.9rem;
    }
    
    #welcome-page.portfolio-style .image-full-width-scrollable-container {
        max-height: 420px;
    }

    #welcome-page.portfolio-style .feature-card {
        padding: 1.5rem;
    }

    #welcome-page.portfolio-style .tech-stack {
        gap: 0.6rem;
        margin-bottom: 2rem;
    }

    #welcome-page.portfolio-style .cta-section {
        padding: 2.5rem 1.25rem;
        margin: 3rem 0;
    }

    /* Aumentar imagens do carrossel em telas médias/pequenas */
    #welcome-page.portfolio-style .carousel-image {
        max-height: 320px;
    }
    #welcome-page.portfolio-style .carousel-image img {
        object-fit: cover;
    }
    /* Deixar imagens das feature-cards maiores e consistentes */
    #welcome-page.portfolio-style .feature-card .feature-image {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        max-height: none;
    }
}

@media (max-width: 480px) {
    #welcome-page.portfolio-style .project-header {
        min-height: 60vh;
        padding: 1.75rem 0;
    }
    
    #welcome-page.portfolio-style .project-title {
        font-size: 2.5rem;
    }
    
    #welcome-page.portfolio-style .project-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    #welcome-page.portfolio-style .back-button,
    #welcome-page.portfolio-style .theme-toggle-button-portfolio {
        top: 1rem;
    }
    
    #welcome-page.portfolio-style .back-button {
        left: 1rem;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    
    #welcome-page.portfolio-style .theme-toggle-button-portfolio {
        right: 1rem;
    }
    
    #welcome-page.portfolio-style .container {
        padding: 0 0.9rem;
    }
    
    /* Forçar 2 colunas na grade de techs no mobile estreito */
    #welcome-page.portfolio-style .tech-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.6rem;
    }
    #welcome-page.portfolio-style .tech-item {
        font-size: 0.82rem;
        padding: 0.55rem 0.75rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }
    
    #welcome-page.portfolio-style .cta-button {
        padding: 0.9rem 2rem;
        font-size: 0.98rem;
        gap: 0.6rem;
    }
    
    #welcome-page.portfolio-style .carousel-container {
        padding: 0.95rem;
        min-height: 420px;
    }
    
    #welcome-page.portfolio-style .carousel-image {
        max-width: 100%;
        height: auto;
        max-height: 320px;
    }
    
    #welcome-page.portfolio-style .carousel-content h3 {
        font-size: 1.1rem;
    }
    
    #welcome-page.portfolio-style .carousel-content p {
        font-size: 0.84rem;
    }
    
    #welcome-page.portfolio-style .carousel-button {
        display: none;
    }

    #welcome-page.portfolio-style .feature-card {
        padding: 1.2rem;
    }

    #welcome-page.portfolio-style .image-full-width-scrollable-container {
        max-height: 420px;
    }

    /* Feature images maiores em mobile estreito */
    #welcome-page.portfolio-style .feature-card .feature-image {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        max-height: none;
    }

    #welcome-page.portfolio-style section {
        padding: 2rem 0;
    }

    #welcome-page.portfolio-style .cta-section {
        padding: 2rem 1rem;
        margin: 2.5rem 0;
    }
}

/* Modal para Imagens */
#welcome-page.portfolio-style .modal-overlay-portfolio {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#welcome-page.portfolio-style .modal-overlay-portfolio.active {
    opacity: 1;
    visibility: visible;
}

#welcome-page.portfolio-style .modal-content-portfolio {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--portfolio-card-bg);
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

#welcome-page.portfolio-style .modal-overlay-portfolio.active .modal-content-portfolio {
    transform: scale(1);
}

#welcome-page.portfolio-style .modal-close-button-portfolio {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: var(--portfolio-primary);
    color: var(--portfolio-text-on-primary);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#welcome-page.portfolio-style .modal-close-button-portfolio:hover {
    background: var(--portfolio-secondary);
    transform: scale(1.1);
}

#welcome-page.portfolio-style #modalImagePortfolio {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(90vh - 2rem);
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

@media (max-width: 768px) {
    #welcome-page.portfolio-style .modal-content-portfolio {
        max-width: 95vw;
        max-height: 95vh;
        padding: 0.5rem;
    }
    
    #welcome-page.portfolio-style .modal-close-button-portfolio {
        width: 35px;
        height: 35px;
        font-size: 20px;
        top: -8px;
        right: -8px;
    }
}



/* /src/css/pages/_solution.css */

#solution-text-container {
    max-width: 800px; /* Ou var(--container-max-width) se definido */
    margin: 30px auto;
    padding: 0 15px; /* Adiciona padding lateral para telas menores */
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    color: var(--text-primary);
}

.solution-content-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-lg, 16px); /* Use variável ou valor padrão */
    margin-bottom: 35px; /* Espaço entre cards */
    box-shadow: var(--shadow-md, 0 4px 15px rgba(0,0,0,0.08));
    padding: 25px;
    position: relative;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.solution-content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 8px 25px rgba(0,0,0,0.12));
}

.solution-section-title {
    font-size: 1.3rem; /* Tamanho do título da seção */
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px; /* Espaço entre ícone e texto */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.solution-section-title .material-symbols-outlined {
    font-size: 1.9rem; /* Tamanho do ícone */
    flex-shrink: 0;
}

/* --- Enunciado Card --- */
.solution-enunciado-card {
    border-top: 4px solid var(--brand-primary);
}

.solution-enunciado-card .solution-section-title .material-symbols-outlined {
    color: var(--brand-primary);
}

.enunciado-content {
    color: var(--text-primary);
}
.enunciado-content p:last-child {
    margin-bottom: 0;
}

/* --- Step Card (Passo) --- */
.solution-step-card {
    border-left: 4px solid var(--accent-primary);
}

.solution-step-card .solution-section-title .material-symbols-outlined {
    color: var(--accent-primary);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 12px;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}

.step-title-text {
    flex-grow: 1;
}

.step-content {
    margin-top: 15px;
    color: var(--text-primary);
}

/* Conector entre os passos */
.step-connector {
    width: 3px;
    height: 30px; /* Altura da linha conectora */
    background-color: var(--border-color);
    margin: 25px auto -25px auto; /* Posiciona entre o card atual e o próximo */
    position: relative;
    z-index: -1; /* Atrás dos cards */
}
.solution-step-card:last-of-type .step-connector {
    display: none; /* Não mostrar conector após o último passo */
}


/* --- Answer Card --- */
.solution-answer-card {
    background: linear-gradient(135deg, var(--accent-secondary), var(--success-color)); /* Novo gradiente */
    color: var(--text-on-accent);
    border: none;
    padding: 30px;
}

.solution-answer-card .solution-section-title,
.solution-answer-card .solution-section-title .material-symbols-outlined {
    color: var(--text-on-accent);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}
.solution-answer-card .solution-section-title .material-symbols-outlined {
    color: #FFD700; /* Amarelo para lâmpada, ou var(--warning-color) */
}


.answer-content {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-on-accent);
}
.answer-content p:last-child {
    margin-bottom: 0;
}

/* --- Estilos para tags de formatação e conteúdo --- */
.solution-mark, mark { /* 'mark' para compatibilidade se a IA gerar a tag HTML */
    background-color: rgba(var(--accent-primary-rgb), 0.2);
    color: var(--accent-primary);
    padding: 0.15em 0.4em;
    border-radius: var(--border-radius-sm, 6px);
    font-weight: 500;
}

.solution-underline, sublin { /* 'sublin' se for tag customizada */
    text-decoration: underline;
    text-decoration-color: var(--accent-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

/* Estilos para conteúdo gerado por Markdown dentro dos cards */
.enunciado-content p,
.step-content p,
.answer-content p {
    margin-bottom: 1em;
}

.enunciado-content ul, .enunciado-content ol,
.step-content ul, .step-content ol,
.answer-content ul, .answer-content ol {
    margin-left: 25px;
    padding-left: 0;
    margin-bottom: 1em;
}

.enunciado-content li,
.step-content li,
.answer-content li {
    margin-bottom: 0.5em;
}

/* MathJax */
#solution-text-container mjx-container {
    font-size: 1em; /* Base size, MathJax will scale from this */
    margin: 10px 0;
    line-height: normal; /* Reset line-height for MathJax containers */
}

#solution-text-container mjx-container[display="true"] {
    display: block;
    overflow-x: auto;
    padding: 15px;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin: 20px 0;
    /* Custom scrollbar for MathJax blocks */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-primary);
}
#solution-text-container mjx-container[display="true"]::-webkit-scrollbar {
    height: 6px;
    background-color: var(--bg-primary);
}
#solution-text-container mjx-container[display="true"]::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
    border-radius: 3px;
}


/* Tabelas Markdown (reutilizando e adaptando de _table.css) */
#solution-text-container .markdown-table-container {
    margin: 25px 0;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    background-color: var(--bg-primary); /* Fundo da tabela */
    border: 1px solid var(--border-color);
    overflow-x: auto; /* Já tem em _table.css mas reforça aqui */
}

#solution-text-container .markdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

#solution-text-container .markdown-table thead {
    background-color: var(--bg-card-hover); /* Cor de fundo do cabeçalho */
}

#solution-text-container .markdown-table th,
#solution-text-container .markdown-table td {
    padding: 0.8em 1em; /* Padding das células */
    border: 1px solid var(--border-color);
    text-align: left;
}

#solution-text-container .markdown-table th {
    font-weight: 600;
    color: var(--text-heading);
}

#solution-text-container .markdown-table tbody tr:nth-child(even) {
    background-color: var(--bg-subtle); /* Linhas zebradas */
}
#solution-text-container .markdown-table tbody tr:hover {
    background-color: var(--bg-card-hover);
}


/* --- Dark Mode --- */
body.dark-mode #solution-text-container {
    color: var(--text-primary-dark, #f0f0f0); /* Ajustar se necessário */
}

body.dark-mode .solution-content-card {
    background-color: var(--bg-card-dark, #2d2d2d);
    box-shadow: var(--shadow-md-dark, 0 5px 20px rgba(0,0,0,0.25));
}

body.dark-mode .solution-section-title {
    color: var(--text-heading-dark, #ffffff);
    border-bottom-color: var(--border-color-dark, #444);
}

body.dark-mode .solution-enunciado-card {
    border-top-color: var(--brand-primary); /* Manter brand, ou usar var(--brand-primary-dark) */
}
body.dark-mode .solution-enunciado-card .solution-section-title .material-symbols-outlined {
    color: var(--text-heading-dark); /* Ou uma cor específica para ícone */
}
body.dark-mode .enunciado-content {
    color: var(--text-primary-dark);
}


body.dark-mode .solution-step-card {
    border-left-color: var(--accent-primary); /* Manter accent, ou var(--accent-primary-dark) */
}
body.dark-mode .solution-step-card .solution-section-title .material-symbols-outlined {
    color: var(--accent-primary);
}
body.dark-mode .step-number {
    background-color: var(--accent-primary); /* Já adaptado em _variables.css */
    color: var(--text-on-accent);
}
body.dark-mode .step-content {
    color: var(--text-primary-dark);
}
body.dark-mode .step-connector {
    background-color: var(--border-color-dark, #444);
}

body.dark-mode .solution-answer-card {
    background: linear-gradient(135deg, var(--accent-secondary-dark, #4dabf7), var(--success-color-dark, #5cb85c));
    color: var(--bg-primary); /* Texto escuro sobre fundo claro do gradiente no dark mode */
}
body.dark-mode .solution-answer-card .solution-section-title,
body.dark-mode .solution-answer-card .solution-section-title .material-symbols-outlined {
    color: var(--bg-primary);
    border-bottom-color: rgba(0,0,0, 0.2);
}
body.dark-mode .solution-answer-card .solution-section-title .material-symbols-outlined {
     color: var(--color-yellow-dark, #ffd43b);
}
body.dark-mode .answer-content {
    color: var(--bg-primary);
}


body.dark-mode .solution-mark, body.dark-mode mark {
    background-color: rgba(var(--accent-primary-rgb), 0.3); /* Usar o RGB do accent no dark mode */
    color: var(--accent-primary); /* Já adaptado */
}

body.dark-mode .solution-underline, body.dark-mode sublin {
    text-decoration-color: var(--accent-primary); /* Já adaptado */
}

body.dark-mode #solution-text-container mjx-container[display="true"] {
    background-color: var(--bg-card-hover-dark, #353535);
    border-color: var(--border-input-dark, #4d4d4d);
    scrollbar-color: var(--accent-primary) var(--bg-card-dark, #2d2d2d);
}
body.dark-mode #solution-text-container mjx-container[display="true"]::-webkit-scrollbar {
    background-color: var(--bg-card-dark, #2d2d2d);
}
body.dark-mode #solution-text-container mjx-container[display="true"]::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
}

body.dark-mode #solution-text-container .markdown-table-container {
    background-color: var(--bg-card-dark, #2d2d2d);
    border-color: var(--border-input-dark, #4d4d4d);
    box-shadow: var(--shadow-sm-dark, 0 2px 5px rgba(0,0,0,0.2));
}
body.dark-mode #solution-text-container .markdown-table thead {
    background-color: var(--bg-card-hover-dark, #353535);
}
body.dark-mode #solution-text-container .markdown-table th,
body.dark-mode #solution-text-container .markdown-table td {
    border-color: var(--border-input-dark, #4d4d4d);
}
body.dark-mode #solution-text-container .markdown-table th {
    color: var(--text-heading-dark, #ffffff);
}
body.dark-mode #solution-text-container .markdown-table tbody tr:nth-child(even) {
    background-color: var(--bg-card-hover-dark, #353535);
}
body.dark-mode #solution-text-container .markdown-table tbody tr:hover {
    background-color: var(--border-input-dark, #4d4d4d); /* Usar uma cor de hover sutil */
}

/* Responsividade */
@media (max-width: 768px) {
    #solution-text-container {
        padding: 0 10px; /* Menor padding lateral em mobile */
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .solution-content-card {
        padding: 20px;
        margin-bottom: 25px;
    }
    .solution-section-title {
        font-size: 1.15rem;
        gap: 8px;
        margin-bottom: 15px;
    }
    .solution-section-title .material-symbols-outlined {
        font-size: 1.6rem;
    }
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 1rem;
        margin-right: 10px;
    }
    .answer-content {
        font-size: 1.05rem;
    }
    #solution-text-container mjx-container[display="true"] {
        padding: 10px;
    }
    #solution-text-container .markdown-table th,
    #solution-text-container .markdown-table td {
        padding: 0.6em 0.8em;
    }
}

@media (max-width: 480px) {
    .solution-content-card {
        padding: 15px;
        margin-bottom: 20px;
    }
    .solution-section-title {
        font-size: 1.1rem; /* Um pouco menor */
    }
    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}

/* Study Selection Page Specific Styles */

/* Assuming #study-selection-page is a main container for this view */
#study-selection-page {
    display: flex;
    flex-direction: column;
    align-items: normal; /* Reset alignment if needed, defaults to stretch for block items */
    justify-content: flex-start; /* Align content to top */
    min-height: calc(100vh - 80px); /* Adjust based on header height */
    height: auto; /* Allow content to determine height */
    padding: 0; /* Reset padding, page content (.dashboard-content) will have its own */
    /* Mostly-white background with a subtle pink glow at the top-right */
    background-color: #fff; /* Fallback */
    background-image:
        radial-gradient(1200px 600px at 85% 5%, rgba(var(--accent-primary-rgb, 230, 57, 128), 0.12), rgba(var(--accent-primary-rgb, 230, 57, 128), 0) 62%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    text-align: left; /* Default text alignment */
    overflow-y: auto; /* Allow scrolling if content exceeds viewport */

    /* Scrollbar styles */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, var(--accent-primary)) #f0f0f0; /* thumb track */
}

#study-selection-page::-webkit-scrollbar {
    width: 8px;
}

#study-selection-page::-webkit-scrollbar-track {
    background: #f0f0f0; /* Consider var(--bg-subtle) */
    border-radius: 4px;
}

#study-selection-page::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, var(--accent-primary));
    border-radius: 4px;
    border: 2px solid #f0f0f0; /* Match track background */
}

/* Dark mode adjustments for this page */
body.dark-mode #study-selection-page {
    /* Keep dark mode clean; optional subtle dark gradient */
    background-image:
        radial-gradient(1200px 600px at 85% 5%, rgba(var(--accent-primary-rgb, 230, 57, 128), 0.10), rgba(var(--accent-primary-rgb, 230, 57, 128), 0) 62%),
        linear-gradient(180deg, var(--dm-bg, #2a2a2a) 0%, var(--dm-bg, #2a2a2a) 100%);
    /* Dark mode scrollbar */
    scrollbar-color: var(--accent-primary, var(--accent-primary)) #353535; /* Dark track */
}

body.dark-mode #study-selection-page::-webkit-scrollbar-track {
    background: #353535; /* Dark track */
}

body.dark-mode #study-selection-page::-webkit-scrollbar-thumb {
    border: 2px solid #353535; /* Match dark track */
}

/* Mobile specific adjustments for better scrolling */
@media (max-width: 868px) {
    #study-selection-page {
        min-height: calc(100vh - 70px); /* Adjust for mobile header height */
        height: auto; /* Ensure content can expand beyond viewport */
        overflow-y: auto; /* Ensure scrolling is enabled */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        position: relative; /* Ensure proper positioning */
    }
    
    #study-selection-page .dashboard-content {
        padding-bottom: 50px; /* Add extra bottom padding for better scroll experience */
        min-height: auto; /* Allow content to determine height */
    }
}

/* Desktop layout overrides specific to Study Selection page */
@media (min-width: 992px) {
    /* Two-column layout: left = heading, search, actions; right = history */
    #study-selection-page .dashboard-content {
        display: grid;
        /* Expandir para ocupar toda a largura disponível nesta página */
        width: 100%;
        max-width: none; /* remove o limite de 1100px/1400px aqui */
        grid-template-columns: minmax(520px, 620px) 1fr; /* esquerda fixa (~520-620), direita ocupa o restante */
        /* Linhas para centralizar verticalmente o bloco esquerda (heading + search + actions) */
        grid-template-rows: 1fr auto auto auto 1fr; /* espaçadores 1fr acima e abaixo do bloco */
        column-gap: 36px; /* um pouquinho mais de espaço entre as colunas */
        align-items: start;
        /* Margens laterais suaves (não grandes) */
        padding-right: 28px; /* mais margem nas laterais */
        padding-left: 28px;  /* mais margem nas laterais */
        padding-top: 20px; /* diminuir padding top padrão desta página */
        padding-bottom: 0;
        /* Faz o grid ocupar a altura visual útil (menos o header) */
        min-height: calc(100vh - 80px);
    }

    #study-selection-page .main-heading,
    #study-selection-page .search-container,
    #study-selection-page .actions-section { grid-column: 1; }

    /* Centraliza verticalmente o conjunto: heading (linha 2), search (linha 3), actions (linha 4) */
    #study-selection-page .main-heading { grid-row: 2; }
    #study-selection-page .search-container { grid-row: 3; }
    #study-selection-page .actions-section { grid-row: 4; }

    #study-selection-page .history-section {
        grid-column: 2;
        grid-row: 1 / -1; /* ocupa todas as linhas do grid (inclui a linha 1fr) */
        align-self: stretch; /* estica na altura do grid */
        display: grid; /* header + lista */
        grid-template-rows: auto 1fr;
        min-height: 0; /* permite que o filho 1fr encolha quando necessário */
        width: 100%;
        height: 100%;
        padding-right: 0;
    }

    /* Left column alignment */
    #study-selection-page .main-heading {
        text-align: left;
        margin-bottom: 10px;
    }

    #study-selection-page .search-container {
        margin: 0 0 20px 0; /* override center from component */
    }

    /* Actions grid: 2x2 with smaller cards */
    #study-selection-page .actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    #study-selection-page .action-card {
        padding: 18px 14px;
        min-height: 110px;
        border-radius: 10px;
    }

    #study-selection-page .action-card .material-symbols-outlined {
        font-size: 1.8em;
        margin-bottom: 8px;
    }

    #study-selection-page .action-title {
        font-size: 1.05em;
        margin-bottom: 0;
    }

    /* History list in two columns within the right panel */
    #study-selection-page .history-section .history-list {
        display: grid !important; /* Override flex from component/page styles */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 12px;
        align-content: start;
        justify-items: stretch;
        min-width: 0; /* prevent overflow */
        min-height: 0; /* permite usar 1fr do pai */
        height: 100%;
        overflow-y: auto; /* lista expande e pode rolar se necessário */
    }

    /* Remove bottom margins so grid gaps handle spacing */
    #study-selection-page .history-section .history-list .history-dropdown-item-chat {
        margin: 0 !important; /* use grid gaps for spacing */
        width: 100%; /* fill grid cell */
        min-width: 0 !important; /* allow shrinking to fit 2 columns */
        box-sizing: border-box;
    }

    /* Make the load-more indicator span both columns */
    #study-selection-page .history-section .history-list .more-items-indicator {
        grid-column: 1 / -1 !important; /* span across both columns */
        width: 100%;
    }
}

/* Other specific styles for elements within this page would be for components like
   .dashboard-content, .actions-grid, .course-card etc., which are in _dashboard.css
   or component CSS files. This file primarily sets up the page-level container. */
/* Study Time Selection Page Styles */

.study-time-page {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
    max-height: 100vh;
    padding: 30px;
    text-align: center;
    background: linear-gradient(135deg, #f9f9f9, #fff); /* Light gradient */
    box-sizing: border-box;
    position: relative; /* For back button positioning */
}

.study-time-container {
    max-width: 700px;
    width: 100%;
    position: relative;
}

.study-time-title {
    font-size: 2.5rem;
    color: var(--brand-primary, #292C6D);
    margin-bottom: 60px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Estilo do botão de voltar (assuming #back-to-study-selection is a general back button styled elsewhere) */
#back-to-study-selection { /* This ID is used in HTML, specific positioning */
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

#study-time-slider {
    width: 100%;
    margin-bottom: 30px;
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    background: linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) var(--slider-percentage, 0%), var(--border-color) var(--slider-percentage, 0%), var(--border-color) 100%);
    border-radius: 6px;
    outline: none;
    transition: background 0.3s ease;
    cursor: pointer;
    --slider-percentage: 0%; /* JS will update this */
}

/* Slider Thumb - Webkit */
#study-time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--accent-primary, var(--accent-primary));
    cursor: pointer;
    border-radius: 50%;
    border: 4px solid var(--bg-primary, #fff); /* Use primary background for border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
#study-time-slider::-webkit-slider-thumb:hover {
     transform: scale(1.1);
}

/* Slider Thumb - Firefox */
#study-time-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--accent-primary, var(--accent-primary));
    cursor: pointer;
    border-radius: 50%;
    border: 4px solid var(--bg-primary, #fff); /* Use primary background for border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
#study-time-slider::-moz-range-thumb:hover {
     transform: scale(1.1);
}

/* This ID was #study-time-display, but it's not in the HTML.
   The HTML uses #study-time-details and inner spans like #study-time-value.
   If #study-time-display was meant for the "Total: X hours" part,
   it's now part of #study-time-details.
#study-time-display {
    color: var(--accent-primary, var(--accent-primary));
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 30px;
    transition: color 0.3s ease, transform 0.3s ease;
} */

/* Novos estilos para o componente detalhado de tempo */
#study-time-details {
    width: 100%;
    margin-bottom: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.time-summary-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.time-summary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-label {
    color: var(--text-secondary, #666);
    font-size: 1.1rem;
}

#study-time-summary .time-label {
    color: var(--brand-primary, #292C6D);
}

#pause-time-summary .time-label {
    color: var(--accent-secondary, #666); /* Assuming --accent-secondary is defined, else #666 */
}

#total-time-summary .time-label {
    color: var(--accent-primary, var(--accent-primary));
}

#study-time-value,
#pause-time-value,
#total-time-value {
    font-size: 1.2rem;
}

/* Esconder os elementos relacionados ao Pomodoro quando não estiver ativo */
.pomodoro-only {
    display: none; /* JS will toggle this or a more specific class */
}

/* Confirm Button (Specific to this page)
   The HTML uses #confirm-study-time-button with class .confirm-button.
   This rule scopes a .confirm-button within .study-time-page.
   If #confirm-study-time-button is the only confirm button here,
   styling it by ID might be more direct.
*/
.study-time-page .confirm-button {
    padding: 18px 35px;
    font-size: 1.2rem;
    background-color: #28a745; /* Green color */
    color: white;
    border: none;
    border-radius: 12px; /* Consider var(--border-radius-md) */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.study-time-page .confirm-button:hover {
    background-color: var(--accent-primary-hover, #bf2156); /* Darker accent */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.study-time-page .confirm-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Responsividade para o componente de tempo */
@media (max-width: 600px) {
    .time-summary-container {
        gap: 15px;
    }
    
    #study-time-value,
    #pause-time-value,
    #total-time-value,
    .time-label {
        font-size: 0.95rem;
    }
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .study-time-page {
        padding: 20px 15px;
        height: auto;
        min-height: 100vh; /* Ensure it takes full viewport height */
        justify-content: flex-start; /* Align content to top for scrolling */
        overflow-y: auto;
    }
    
    .study-time-layout { /* This class is in the HTML structure */
        display: flex;
        flex-direction: column;
        gap: 30px; /* Spacing between main panel and side panels on mobile */
    }
    
    /* .study-time-content was not found in HTML, perhaps refers to .study-time-container or .study-time-layout */
    
    .study-time-main-panel {
        order: 1; /* Default, but explicit for clarity */
        width: 100%;
        max-width: 100%;
        margin-top: 80px; /* As requested for mobile */
    }
    
    .pomodoro-legend-panel {
        order: 2;
        width: 100% !important; /* Ensure full width */
        max-width: 100% !important;
        position: static !important; /* Override absolute positioning */
        transform: none !important;
        margin: 20px 0 !important;
        /* Visibility (.esconde) is controlled by JS */
    }
    
    .pomodoro-settings-panel {
        order: 3;
        width: 100% !important; /* Ensure full width */
        max-width: 100% !important;
        position: static !important; /* Override absolute positioning */
        transform: none !important;
        margin: 20px 0 !important;
        /* Visibility (.esconde) is controlled by JS */
    }
    
    .pomodoro-legend-content,
    .pomodoro-settings-content {
        margin-top: 0; /* Reset any top margin */
        width: 100%; /* Ensure full width of their panel */
        box-shadow: 0 2px 10px rgba(var(--text-primary-rgb, 0,0,0,0).1); /* Consistent shadow */
        border-radius: 10px; /* Consistent radius */
        padding: 20px; /* Consistent padding */
    }
    
    /* .study-time-slider-container was not found in HTML, #study-time-slider is styled directly */
    
    #confirm-study-time-button { /* This is the ID of the confirm button */
        margin-top: 20px;
        width: 100%; /* Full width button on mobile */
    }
    
    /* Copied from above, ensures consistency */
    .time-summary-container {
        flex-direction: row; /* Keep horizontal on mobile if space */
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    #study-time-value,
    #pause-time-value,
    #total-time-value,
    .time-label {
        font-size: 0.95rem;
    }
    
    .study-time-title {
        font-size: 1.5rem; /* Smaller title for mobile */
        margin-bottom: 15px; /* Reduced margin for mobile */
    }
}

/* Responsividade para telas muito pequenas (smartphones) */
@media (max-width: 480px) {
    .study-time-title {
        font-size: 1.3rem;
    }
    
    .time-summary-container {
        gap: 10px;
    }
    
    #study-time-value,
    #pause-time-value,
    #total-time-value,
    .time-label {
        font-size: 0.9rem;
    }
}

/* Dark Mode */
body.dark-mode .study-time-page {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a); /* Dark gradient */
}
body.dark-mode .study-time-title {
    color: #fff;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.05);
}
body.dark-mode #study-time-slider {
    background: linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) var(--slider-percentage, 0%), var(--dm-border-color, #444) var(--slider-percentage, 0%), var(--dm-border-color, #444) 100%);
    /* Ensure --border-color is used for dark mode track if not already globally defined */
}
body.dark-mode #study-time-slider::-webkit-slider-thumb {
    border-color: var(--dm-bg-card, #333); /* Use card background for border in dark mode */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
body.dark-mode #study-time-slider::-moz-range-thumb {
    border-color: var(--dm-bg-card, #333); /* Use card background for border in dark mode */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* For time display elements like #total-time-value, #study-time-value etc. */
body.dark-mode #study-time-details,
body.dark-mode .time-label,
body.dark-mode #study-time-value,
body.dark-mode #pause-time-value,
body.dark-mode #total-time-value {
    color: #eee; /* Light text */
}
body.dark-mode #study-time-summary .time-label {
    color: var(--dm-brand-primary, #9092c7); /* Lighter version of brand primary for dark */
}
body.dark-mode #pause-time-summary .time-label {
    color: var(--dm-text-secondary, #aaa);
}
body.dark-mode #total-time-summary .time-label {
    color: var(--accent-primary, var(--accent-primary)); /* Accent can often remain the same */
}

/* Confirm button dark mode (if needed, currently uses light mode colors.
   If it should adapt, it needs specific dark mode rules here or use CSS vars that change) */
/* body.dark-mode .study-time-page .confirm-button { ... } */
/* Dashboard Page Styles (from style9.css) */

/* Main content container within the page */
.dashboard-content {
    flex-grow: 1;
    width: 100%;
    max-width: 1100px;
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    gap: 25px; /* Spacing between sections */
}

.main-heading {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    color: var(--brand-primary, #292C6D);
    margin-bottom: 10px;
    line-height: 1.2;
}
body.dark-mode .main-heading {
    color: var(--dm-text-heading, var(--dm-text-primary)); /* Use heading or primary text color */
}

/* Search Bar */
.search-container {
    width: 100%;
    max-width: 700px; /* Limit search bar width */
    margin: 0 auto 30px; /* Center and add bottom margin */
    position: relative;
}
.search-input { /* Assuming this is the input within .search-container */
    width: 100%;
    padding: 15px 20px 15px 50px; /* Space for icon */
    font-size: 1.1em;
    font-family: 'Poppins', sans-serif; /* Keep original font */
    border-radius: var(--border-radius-md, 12px);
    border: 1px solid var(--border-color, #CED4DA); /* Light color */
    background-color: var(--bg-primary, #fff); /* Light background */
    color: var(--text-primary, #212529); /* Dark text */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    box-sizing: border-box;
}
body.dark-mode .search-input {
    border-color: var(--dm-border-color, #444);
    background-color: var(--dm-bg-card, #333);
    color: var(--dm-text-primary, #f0f0f0);
}

/* Normalize browser autofill to match theme */
.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary, #212529);
    transition: background-color 9999s ease-in-out 0s;
}
body.dark-mode .search-input:-webkit-autofill,
body.dark-mode .search-input:-webkit-autofill:hover,
body.dark-mode .search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dm-text-primary, #f0f0f0);
    box-shadow: 0 0 0px 1000px var(--dm-bg-card, #333) inset;
    -webkit-box-shadow: 0 0 0px 1000px var(--dm-bg-card, #333) inset;
}

.search-input::placeholder {
    color: var(--text-muted, #6c757d); /* Light placeholder */
    opacity: 0.8;
}
body.dark-mode .search-input::placeholder {
    color: var(--dm-text-secondary, #aaa);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3); /* Accent focus shadow */
}
body.dark-mode .search-input:focus {
    /* Identical to light mode focus, listed for clarity or potential future divergence */
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.3);
}

.search-icon { /* Assuming an icon element inside .search-container */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #6c757d); /* Light gray icon */
    pointer-events: none;
    width: 20px;
    height: 20px;
}
body.dark-mode .search-icon {
    color: var(--dm-text-secondary, #aaa);
}

/* Section Styles */
.actions-section,
.history-section {
    width: 100%;
}

.section-heading { /* Common style for section titles */
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--brand-primary, #292C6D); /* Original theme color */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #CED4DA); /* Light border */
}
body.dark-mode .section-heading {
    color: var(--dm-text-heading, var(--dm-text-primary));
    border-bottom-color: var(--dm-border-color, #444);
}

/* Action Cards Grid */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 25px;
}

.action-card {
    background-color: var(--bg-primary, #fff); /* Light background */
    padding: 30px 25px;
    border-radius: var(--border-radius-md, 12px);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border: 1px solid var(--border-color-lighter, #e9ecef); /* Subtle light border */
    position: relative;
    overflow: hidden;
    color: var(--text-primary, #212529); /* Dark text */
    text-decoration: none; /* Remove link underline */
    box-shadow: 0 4px 8px rgba(var(--text-primary-rgb, 0,0,0,0).05); /* Subtle shadow */
}
body.dark-mode .action-card {
    background-color: var(--dm-bg-card, #333);
    border-color: var(--dm-border-color, #444);
    color: var(--dm-text-primary, #f0f0f0);
    box-shadow: 0 4px 8px rgba(var(--text-primary-rgb, 0,0,0,0).2);
}

.action-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Light hover shadow */
    border-color: var(--accent-primary, var(--accent-primary));
}
body.dark-mode .action-card:hover {
    box-shadow: 0 8px 25px var(--dm-shadow-color, rgba(var(--text-primary-rgb, 0,0,0,0).3));
    border-color: var(--accent-primary, var(--accent-primary));
    background-color: var(--dm-bg-card-hover, #444); /* Slightly lighter dark hover */
}

.action-card .material-symbols-outlined { /* Icon style */
    font-size: 2.2em; /* Larger icons */
    margin-bottom: 15px;
    color: var(--accent-primary, var(--accent-primary));
    transition: color 0.2s ease;
    display: block; /* Ensure icon takes space */
}
.action-card:hover .material-symbols-outlined {
    color: var(--accent-secondary, #3a3e8a); /* Change icon color on hover */
}

.action-title {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--brand-primary, #292C6D); /* Theme color */
    margin-bottom: 5px;
}
body.dark-mode .action-title {
    color: var(--dm-text-heading, var(--dm-text-primary));
}

/* History List Section */
.history-list { /* Container for history items */
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0; /* Reset list padding */
}

/* History Item Styling (assuming .history-dropdown-item-chat is used here) */
.history-dropdown-item-chat {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    align-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse; /* This might be causing issues, check layout needs */
    /* Styles inherited/set previously */
    /* *** ADDED: Initial border and transition *** */
    border-left: 4px solid rgba(var(--accent-primary-rgb, 230, 57, 128), 0.22); /* subtle accent by default */
    transition: background-color 0.2s ease, border-left-color 0.2s ease;
    /* *** Ensure other base styles like padding, cursor etc. are defined *** */
    padding: 18px 20px; /* Example padding, adjust as needed */
    cursor: pointer;
    background-color: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-color-lighter, #e9ecef); /* Existing border? */
    border-radius: var(--border-radius-sm, 8px); /* Example radius */
    margin-bottom: 10px; /* Example margin */
    /* Removed dynamic hover gradient overlay */
}

/* Removed dynamic hover gradient overlay pseudo-element */

/* Dark Mode for base item */
body.dark-mode .history-dropdown-item-chat {
    background-color: var(--dm-bg-card, #333);
    color: var(--dm-text-primary, #f0f0f0);
    border-bottom-color: var(--dm-border-color, #444);
}

.history-dropdown-item-chat:hover {
    background-color: var(--bg-hover-subtle, #f8f9fa); /* Light hover background */
    border-left-color: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.60); /* stronger pink on hover */
    box-shadow: none; /* Ensure no dropdown shadow */
}
/* Removed dynamic hover gradient scaling */

/* Dark mode for hover */
body.dark-mode .history-dropdown-item-chat:hover {
    background-color: var(--dm-bg-card-hover, #444);
    border-left-color: rgba(var(--accent-primary-rgb, 217, 41, 96), 0.60); /* stronger pink on hover */
}

/* Pinned state: stronger pink border on dashboard items */
.history-dropdown-item-chat.pinned-chat {
    border-left-color: var(--accent-primary, var(--accent-primary)) !important;
}
.history-dropdown-item-chat.pinned-chat:hover {
    border-left-color: var(--accent-primary, var(--accent-primary)) !important;
}

/* History Item Content */
.history-item-content {
     flex-grow: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
     flex-wrap: wrap; /* Allow wrapping */
     /* Resetting conflicting styles if any were inherited */
     margin-right: 0;
     overflow: visible;
     white-space: normal;
     text-overflow: clip;
}

 /* Ensure session (start-study) icon stays visible and shows clear hover feedback (landing page items) */
 .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study {
   background: var(--accent-primary);
   color: #fff; /* icon/text */
   transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease-in-out;
 }
 .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study .material-symbols-outlined {
   color: #fff;
 }
 .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study:hover,
 .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study:focus,
 .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study:focus-visible {
   background: var(--accent-primary); /* keep brand color */
   color: #fff;
   box-shadow: 0 0 0 2px rgba(var(--bg-primary-rgb, 255,255,255,0).9), 0 0 0 5px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.28), 0 8px 20px rgba(var(--text-primary-rgb, 0,0,0,0).16);
   filter: brightness(1.18) saturate(1.12);
   transform: translateY(-1px) scale(1.08);
   z-index: 1;
   outline: none;
 }

  .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 217, 41, 96), 0.22), 0 2px 6px rgba(var(--text-primary-rgb, 0,0,0,0).10);
  }

  /* Make the timer icon visibly filled on hover/focus */
  .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study:hover .material-symbols-outlined,
  .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study:focus .material-symbols-outlined,
  .history-dropdown-item-chat .history-item-actions .history-action-btn.start-study:focus-visible .material-symbols-outlined {
    color: #fff;
    font-variation-settings: 'FILL' 1;
  }

/* Desktop: force 2-line layout (title+ellipsis on top, date+buttons below) */
@media (min-width: 1201px) {
  .history-dropdown-item-chat .history-item-content {
    display: flex;
    flex-direction: column; /* two rows: title row then date row */
    align-items: flex-start;
    gap: 6px; /* compact spacing between rows */
    width: 100%;
  }

  /* Title row container (first child inside .history-item-content) */
  .history-dropdown-item-chat .history-item-content > div:first-child {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden; /* allow title truncation */
    padding-right: 40px; /* room for the header ellipsis (position:absolute) */
  }

  /* Ensure the title consumes free space and can ellipsize */
  .history-dropdown-item-chat .history-topic {
    margin-right: 0;
    padding-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
  }

  /* Date row (second child) with actions next to the date (not flush right) */
  .history-dropdown-item-chat .history-detail {
    display: flex;
    align-items: center;
    gap: 10px; /* space between date and buttons */
    white-space: nowrap;
    width: 100%;
  }

  /* Desktop: make actions row fill width; microcourses stays left, session icon goes far right */
  .history-dropdown-item-chat .history-detail .history-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto; /* take remaining row space so start-study can reach the far right */
    min-width: 0;
    margin-left: 0 !important; /* override inline style set by JS */
    margin-right: 0;
    overflow: visible; /* ensure hover shadow isn't clipped */
  }

  /* Push only the session icon to the far right on desktop */
  .history-dropdown-item-chat .history-detail .history-item-actions .history-action-btn.start-study {
    margin-left: auto;
  }
}
/* History Topic/Title */
.history-topic {
    font-weight: 500;
    font-size: 1.1em;
    color: var(--text-primary, #212529); /* Dark text */
    margin-right: auto; /* Push details to the right */
    padding-right: 10px; /* Space before details */
}
body.dark-mode .history-topic {
    color: var(--dm-text-primary, #f0f0f0);
}

/* History Details (Date/Time) */
.history-detail {
    font-size: 0.9em;
    color: var(--text-muted, #6c757d); /* Light gray */
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0; /* Prevent shrinking */
        display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}
body.dark-mode .history-detail {
    color: var(--dm-text-secondary, #aaa);
}

/* History Progress (Optional) */
.history-progress {
     font-size: 0.85em;
     color: var(--accent-primary, var(--accent-primary));
     font-weight: 500;
     margin-left: 8px;
     white-space: nowrap;
     flex-shrink: 0;
}

/* Empty History State */
.empty-history {
     text-align: center;
     padding: 40px 20px;
     color: var(--text-muted, #6c757d); /* Light gray */
     background-color: var(--bg-secondary, #f8f9fa); /* Very light background */
     border-radius: var(--border-radius-sm, 8px);
     border: 1px dashed var(--border-color, #ced4da); /* Light dashed border */
     margin: 15px 0; /* Spacing */
}
body.dark-mode .empty-history {
    color: var(--dm-text-secondary, #aaa);
    background-color: var(--dm-bg-card, #333);
    border-color: var(--dm-border-color, #444);
}
.empty-history p { margin-bottom: 15px; }
.empty-history .material-symbols-outlined { /* Icon */
    font-size: 2em;
    color: var(--text-muted, #6c757d);
    opacity: 0.5;
    margin-bottom: 10px;
    display: block; /* Center icon */
}
body.dark-mode .empty-history .material-symbols-outlined {
    color: var(--dm-text-secondary, #aaa);
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .dashboard-content { 
        padding: 25px 15px; 
        gap: 30px; 
        margin: 0;
    }
    
    .main-heading { 
        font-size: 2.0em; 
        margin-bottom: 15px;
        line-height: 1.2;
    }
    
    .section-heading { 
        font-size: 1.3em; 
        margin-bottom: 20px;
    }
    
    .search-container {
        margin-bottom: 25px;
    }
    
    .search-input { 
        padding: 14px 18px 14px 45px; 
        font-size: 1.05em;
        border-radius: 10px;
    }
    
    .search-icon { 
        left: 14px; 
        width: 19px; 
        height: 19px; 
    }
    
    .actions-grid {
        grid-template-columns: 1fr; /* Single column for better mobile experience */
        gap: 15px;
    }
    
    .action-card { 
        padding: 20px 18px; 
        min-height: 110px;
        border-radius: 10px;
    }

    .action-card .material-symbols-outlined {
        font-size: 2.0em;
        margin-bottom: 0px;
    }
    
.action-title {
font-size: 1.1em;
margin-bottom: 8px;
}
    
/* History item adjustments for mobile */
.history-dropdown-item-chat { 
padding: 15px 12px;
border-radius: 8px;
margin-bottom: 8px;
}
    
.history-item-content {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
    
.history-topic {
font-size: 1.05em;
margin-right: 0;
padding-right: 0;
width: 100%;
}
    
.history-detail {
width: 100%;
font-size: 0.85em;
text-align: left;
}
    
.empty-history {
padding: 30px 15px;
margin: 10px 0;
}
}

@media (max-width: 480px) {
    .dashboard-content { 
        padding: 20px 12px; 
        gap: 25px; 
    }
    
    .main-heading { 
        font-size: 1.8em;
        margin-bottom: 12px;
        margin-top: 35px;
    }
    
    .section-heading { 
        font-size: 1.2em; 
        margin-bottom: 18px;
    }
    
    .search-container {
        margin-bottom: 20px;
    }
    
    .search-input { 
        padding: 12px 15px 12px 40px; 
        font-size: 1em;
        border-radius: 8px;
    }
    
    .search-icon { 
        left: 12px; 
        width: 18px; 
        height: 18px; 
    }
    
    .actions-grid {
        gap: 12px;
    }
    
    .action-card { 
        min-height: 100px; 
        padding: 18px 15px;
        border-radius: 8px;
    }
    
    .action-card .material-symbols-outlined {
        font-size: 1.8em;
        margin-bottom: 0px;
    }
    
    .action-title {
        font-size: 1.05em;
        margin-bottom: 6px;
    }
    
    .history-dropdown-item-chat { 
        padding: 12px 10px;
        margin-bottom: 6px;
    }
    
    .history-topic { 
        font-size: 1em;
    }
    
    .history-detail { 
        font-size: 0.8em;
    }
    
    .empty-history {
        padding: 25px 12px;
    }
    
    .empty-history .material-symbols-outlined {
        font-size: 1.8em;
        margin-bottom: 8px;
    }
}
/* Revisões Page Specific Styles */

/* Main container for the reviews page */
#revisoes-page {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal scrolling */
    
    /* Scrollbar styles are defined in _scrollbar.css */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-subtle);
}

#revisoes-page .review-stats-top-actions .info-btn.help-btn,
#revisoes-page .stats-container .info-btn.help-btn,
#revisoes-page .help-btn-inline.info-btn.help-btn {
    background: var(--accent-primary, #D92960);
    color: var(--text-on-accent, #fff);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#revisoes-page .review-stats-top-actions .info-btn.help-btn:hover,
#revisoes-page .stats-container .info-btn.help-btn:hover,
#revisoes-page .help-btn-inline.info-btn.help-btn:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.25); filter: brightness(1.03); }
#revisoes-page .review-stats-top-actions .info-btn.help-btn .material-symbols-outlined,
#revisoes-page .stats-container .info-btn.help-btn .material-symbols-outlined,
#revisoes-page .help-btn-inline.info-btn.help-btn .material-symbols-outlined { font-size: 20px; }

/* Ensure the dashboard content doesn't interfere with scrolling */
#revisoes-page .dashboard-content {
    flex-grow: 1;
    min-height: 0; /* Allow content to shrink if needed */
    padding-bottom: 30px; /* Extra padding at bottom for better UX */
}

/* Back button positioning */
#revisoes-page .back-button {
    flex-shrink: 0; /* Don't shrink the back button */
    margin-bottom: 20px;
}

/* Review stats summary styling */
.review-overall-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    padding: 24px;
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Top actions container (create + help) base (applies all sizes) */
.review-stats-top-actions {
    display: flex;
    flex-direction: column; /* mobile-first: coluna */
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
}

.review-stats-top-actions .help-btn {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease;
}
.review-stats-top-actions .help-btn:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.review-stats-top-actions .help-btn .material-symbols-outlined { font-size: 20px; }

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    align-items: center;
}

.stats-container .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.stats-container .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stats-container .stat-item .stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 2px;
}

.stats-container .stat-item span:not(.stat-label) {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 4px;
}

/* Stat item color variants */
.stat-new {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.stat-learning {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.stat-review {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: white;
}

.stat-total {
    background: linear-gradient(135deg, #6c757d, #545b62);
    color: white;
}

.stats-container .help-btn {
    grid-column: span 1;
    justify-self: center;
    margin: 0;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-container .help-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stats-container .help-btn .material-symbols-outlined {
    font-size: 20px;
}

#create-deck-button {
    align-self: stretch;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

#create-deck-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Review sections styling */
.review-section {
    margin-bottom: 40px;
}

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

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hide sections when they have no content */
.review-section:has(.actions-grid:empty) {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #revisoes-page {
        height: 100vh; /* Maintain full height on mobile */
    }
    
    #revisoes-page .dashboard-content {
        padding-bottom: 20px;
    }
    
    .review-overall-stats {
        gap: 16px;
        padding: 20px 16px;
        margin-top: 70px;
        border-radius: 12px;
    }
    
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stats-container .stat-item {
        padding: 12px 8px;
        font-size: 0.85rem;
        border-radius: 10px;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .stats-container .stat-item .stat-label {
        font-size: 0.85rem;
        margin-bottom: 0;
        margin-left: 8px;
        flex: 1;
    }
    
    .stats-container .stat-item .stat-label::after {
        content: ":";
    }
    
    .stats-container .stat-item span:not(.stat-label) {
        font-size: 0.85rem;
        margin-top: 0;
        margin-right: 8px;
        font-weight: 700;
        flex: 1;
        text-align: right;
    }
    
    /* Mobile: exibir help inline centralizado abaixo dos stats */
    .stats-container .help-btn-inline { display:flex; grid-column: span 2; justify-content:center; align-items:center; margin-top:4px; }
    .stats-container .help-btn-inline .material-symbols-outlined { font-size:20px; }
    /* Esconder help desktop */
    .review-stats-top-actions .help-btn-desktop { display:none !important; }
    
    #create-deck-button {
        padding: 14px 20px;
        font-size: 0.95rem;
        border-radius: 10px;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .review-section {
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .review-overall-stats {
        padding: 16px 12px;
        gap: 14px;
    }
    
    .stats-container {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .stats-container .stat-item {
        padding: 10px 6px;
        font-size: 0.8rem;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .stats-container .stat-item .stat-label {
        font-size: 0.8rem;
        margin-bottom: 0;
        margin-left: 8px;
        flex: 1;
    }
    
    .stats-container .stat-item .stat-label::after {
        content: ":";
    }
    
    .stats-container .stat-item span:not(.stat-label) {
        font-size: 0.8rem;
        margin-right: 8px;
        font-weight: 700;
        flex: 1;
        text-align: right;
    }
    
    #create-deck-button {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
}

/* Large desktop layout: move stats summary to the right side and stack stats vertically */
@media (min-width: 1286px) {
    #revisoes-page .dashboard-content {
        display: flex;
        flex-direction: row !important; /* garante linha */
        flex-wrap: nowrap;
        align-items: flex-start;
    gap: 48px;
    width: 100%;
    max-width: 2100px; /* ampliar limite */
    margin: 0 auto; /* centralizado */
    padding-left: 140px; /* margens ampliadas */
    /* reserva espaço para painel fixo: largura(240) + gap visual(48) + margem lateral(80) */
    padding-right: calc(80px + 240px + 48px);
    }

    #revisoes-page .deck-tabs-wrapper {
        order: 1;
        flex: 1 1 auto;
        min-width: 0; /* allow flex child to shrink */
        max-width: 1400px; /* mais espaço */
        margin-left: 0;
    }

    #revisoes-page #review-stats-summary {
        order: 2;
        flex: 0 0 240px;
        width: 240px;
        position: fixed; /* fica sempre visível */
        top: 160px; /* abaixo do header */
        right: 80px; /* alinhado ao padding direito */
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 24px 20px 28px;
        z-index: 50;
    }

    /* Reorder: create-deck-button first */
    #revisoes-page #review-stats-summary #create-deck-button {
        width: 100%;
        font-size: 0.9rem; /* menor no desktop grande para o label curto */
        padding: 14px 20px; /* ajuste proporcional */
    }

    #revisoes-page #review-stats-summary .review-stats-top-actions {
        display: flex;
        flex-direction: row; /* horizontal */
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    #revisoes-page #review-stats-summary .review-stats-top-actions .help-btn {
        position: static;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    /* Large layout: stats em linha expansível */
    #revisoes-page #review-stats-summary .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
        gap: 12px;
    }

    #revisoes-page #review-stats-summary .stats-container .stat-item {
        flex-direction: column;
        text-align: center;
        padding: 14px 10px;
        font-size: 0.85rem;
        min-height: 70px;
    }

    #revisoes-page #review-stats-summary .stats-container .stat-item .stat-label { font-size: 0.75rem; margin-bottom: 4px; }
    #revisoes-page #review-stats-summary .stats-container .stat-item span:not(.stat-label) { font-size: 1.05rem; margin-top: 2px; }

    /* Place help button nicely aligned at bottom (or could be at top-right if preferred) */
    #revisoes-page #review-stats-summary .stats-container { margin-top: 4px; }

    /* Short label: show short on large screens, hide full */
    #revisoes-page #review-stats-summary #create-deck-button .short-label { display: inline; }
    #revisoes-page #review-stats-summary #create-deck-button .full-label { display: none; }
}

/* fallback: smaller & medium screens keep full label and hide desktop help */
@media (max-width: 1285px) {
    #revisoes-page #review-stats-summary #create-deck-button .short-label { display: none; }
    #revisoes-page #review-stats-summary #create-deck-button .full-label { display: inline; }
    #revisoes-page #review-stats-summary { display:flex; }
    #revisoes-page #review-stats-summary .stats-container { order:1; }
    #revisoes-page #review-stats-summary .review-stats-top-actions { order:2; margin-top:6px; }
    #revisoes-page #review-stats-summary .review-stats-top-actions .help-btn-desktop { display:none !important; }
    #revisoes-page #review-stats-summary .review-stats-top-actions .help-btn-inline { display:inline-flex; }
    #revisoes-page #review-stats-summary #create-deck-button { order:2; width:100%; }
}

/* Intermediate layout: 761px–1285px -> help alinhado à direita na linha dos stats, create button abaixo */
/* Visibility logic for dual help buttons */
.help-btn-inline { display: inline-flex; }
.help-btn-desktop { display: none; }

@media (min-width: 761px) and (max-width: 1285px) {
    #revisoes-page #review-stats-summary .review-stats-top-actions { margin-top: 12px; }
}

@media (min-width: 1286px) {
    /* Desktop grande: usar help na barra superior, esconder inline */
    .help-btn-inline { display: none !important; }
    .help-btn-desktop { display: inline-flex; }
}
/* src/css/pages/_decks.css */

/* Page header with action button */
.page-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

.page-header-with-action .main-heading {
    margin: 0;
    flex: 1;
}

/* Action button styles */
.action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.action-button.primary {
    background: var(--accent-primary, #007bff);
    color: white;
}

.action-button.primary:hover {
    background: var(--accent-primary-hover, #0056b3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.action-button .material-symbols-outlined {
    font-size: 18px;
}

/* Deck grid styles */
#decks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

/* Deck card styles */
.deck-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 20px;
    background: var(--bg-secondary, #ffffff);
}

.deck-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-primary, #007bff);
}

.deck-card .action-card-icon {
    margin-bottom: 12px;
}

.deck-card .action-card-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--accent-primary, #007bff);
}

.deck-card .action-card-content h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.deck-card .action-card-content p {
    margin: 0 0 12px 0;
    color: var(--text-secondary, #666);
    font-size: 14px;
    line-height: 1.4;
}

/* Deck stats */
.deck-stats {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    font-size: 0.9em;
    color: var(--text-secondary, #666);
}

.deck-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.deck-stats .material-symbols-outlined {
    font-size: 16px;
}

/* Deck info section in modal */
.deck-info {
    background: var(--bg-tertiary, #f8f9fa);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.deck-info p {
    margin: 8px 0;
    font-size: 14px;
}

.deck-info strong {
    color: var(--text-primary, #495057);
}

/* Deck actions list */
.deck-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.deck-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    text-align: left;
    width: 100%;
}

.deck-action-btn .material-symbols-outlined {
    font-size: 18px;
}

.deck-action-btn.study {
    background: var(--accent-primary, #007bff);
    color: white;
}

.deck-action-btn.study:hover {
    background: var(--accent-primary-hover, #0056b3);
}

.deck-action-btn.create {
    background: var(--success-color, #28a745);
    color: white;
}

.deck-action-btn.create:hover {
    background: var(--success-hover, #1e7e34);
}

.deck-action-btn.edit {
    background: var(--warning-color, #ffc107);
    color: var(--text-primary, #212529);
}

.deck-action-btn.edit:hover {
    background: var(--warning-hover, #e0a800);
}

.deck-action-btn.delete {
    background: var(--danger-color, #dc3545);
    color: white;
}

.deck-action-btn.delete:hover {
    background: var(--danger-hover, #c82333);
}

/* Deck options modal layout */
.deck-options-content {
    max-width: 800px;
    width: 90vw;
}

.deck-options-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-top: 20px;
}

.deck-cards-section h5,
.deck-actions-section h5 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #333);
    border-bottom: 2px solid var(--border-color, #ddd);
    padding-bottom: 8px;
}

/* Cards list styles */
.deck-cards-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    background: var(--bg-secondary, #f8f9fa);
}

/* Scrollbar (webkit) for deck cards list - aligns with global pink style */
.deck-cards-list::-webkit-scrollbar {
    width: 8px;
}
.deck-cards-list::-webkit-scrollbar-track {
    background: var(--bg-subtle, #f0f0f0);
    border-radius: 4px;
}
.deck-cards-list::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border-radius: 4px;
    border: 2px solid var(--bg-subtle, #f0f0f0);
}

/* Firefox */
.deck-cards-list {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-subtle, #f0f0f0);
}

/* Dark mode scrollbar adjustments */
[data-theme="dark"] .deck-cards-list::-webkit-scrollbar-track {
    background: var(--bg-card-hover, #2d2d2d);
}
[data-theme="dark"] .deck-cards-list::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary, #D92960);
    border: 2px solid var(--bg-card-hover, #2d2d2d);
}
[data-theme="dark"] .deck-cards-list {
    scrollbar-color: var(--accent-primary, #D92960) var(--bg-card-hover, #2d2d2d);
}

.deck-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #ddd);
    transition: background-color 0.2s ease;
}

.deck-card-item:last-child {
    border-bottom: none;
}

.deck-card-item:hover {
    background: var(--bg-hover, #e9ecef);
}

/* Dark mode hover should be subdued, not light */
body.dark-mode .deck-card-item:hover,
[data-theme="dark"] .deck-card-item:hover {
    background: var(--bg-card-hover, #353535);
}

/* Optional: dark mode background for list container to avoid light contrast bands */
[data-theme="dark"] .deck-cards-list {
    background: var(--bg-tertiary-dark, #1a202c);
    border-color: var(--border-color-dark, #4a5568);
}

.deck-card-content {
    flex: 1;
    min-width: 0;
}

.deck-card-front {
    font-weight: 500;
    color: var(--text-primary, #333);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

.deck-card-status.new {
    background: var(--info-color, #17a2b8);
    color: white;
}

.deck-card-status.learning {
    background: var(--warning-color, #ffc107);
    color: var(--text-primary, #212529);
}

.deck-card-status.review {
    background: var(--success-color, #28a745);
    color: white;
}

.deck-card-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.deck-card-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.deck-card-action-btn.edit {
    background: var(--warning-color, #ffc107);
    color: var(--text-primary, #212529);
}

.deck-card-action-btn.edit:hover {
    background: var(--warning-hover, #e0a800);
    transform: scale(1.1);
}

.deck-card-action-btn.delete {
    background: var(--danger-color, #dc3545);
    color: white;
}

.deck-card-action-btn.delete:hover {
    background: var(--danger-hover, #c82333);
    transform: scale(1.1);
}

/* Deck action buttons in modal */
.deck-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deck-action-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.deck-action-button .material-symbols-outlined {
    font-size: 20px;
}

.deck-action-button.study {
    background: linear-gradient(135deg, var(--accent-primary, #007bff), #0056b3);
    color: white;
}

.deck-action-button.study:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.deck-action-button.create {
    background: linear-gradient(135deg, var(--success-color, #28a745), #1e7e34);
    color: white;
}

.deck-action-button.create:hover {
    background: linear-gradient(135deg, #1e7e34, #155724);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.deck-action-button.edit {
    background: linear-gradient(135deg, var(--warning-color, #ffc107), #e0a800);
    color: var(--text-primary, #212529);
}

.deck-action-button.edit:hover {
    background: linear-gradient(135deg, #e0a800, #d39e00);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.deck-action-button.delete {
    background: linear-gradient(135deg, var(--danger-color, #dc3545), #c82333);
    color: white;
}

.deck-action-button.delete:hover {
    background: linear-gradient(135deg, #c82333, #bd2130);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Form styles for deck and card creation */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-primary, #333);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    font-size: 14px;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #333);
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-primary, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* No content message */
.no-content-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, #666);
}

.no-content-message .material-symbols-outlined {
    font-size: 48px;
    color: var(--text-tertiary, #999);
    margin-bottom: 16px;
}

.no-content-message h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: var(--text-primary, #333);
}

.no-content-message p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.no-content-message.error {
    color: var(--danger-color, #dc3545);
}

.no-content-message.error .material-symbols-outlined {
    color: var(--danger-color, #dc3545);
}

/* Success notification */
.success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success-color, #28a745);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease;
}

/* Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .page-header-with-action {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .page-header-with-action .main-heading {
        text-align: center;
    }
    
    #decks-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .deck-card {
        padding: 16px;
    }
    
    .deck-stats {
        flex-direction: column;
    }
    
    /* Deck options modal mobile layout */
    .deck-options-content {
        width: 95vw;
        max-width: none;
    }
    
    .deck-options-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        /* Inverter ordem no mobile: Ações primeiro, depois Cards */
        display: flex;
        flex-direction: column;
    }
    
    .deck-cards-section {
        order: 2;
    }
    
    .deck-actions-section {
        order: 1;
    }
    
    .deck-cards-list {
        max-height: 250px;
    }
    
    .deck-card-front {
        font-size: 14px;
    }
    
    .deck-card-actions {
        margin-left: 8px;
    }
    
    .deck-card-action-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
        gap: 8px;
    }
    
    .success-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        right: 10px;
    }
}

/* Dark mode support */
[data-theme="dark"] .deck-card {
    background: var(--bg-secondary-dark, #2d3748);
    border-color: var(--border-color-dark, #4a5568);
}

[data-theme="dark"] .deck-card:hover {
    border-color: var(--accent-primary, #007bff);
}

[data-theme="dark"] .deck-info {
    background: var(--bg-tertiary-dark, #1a202c);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
    background: var(--bg-secondary-dark, #2d3748);
    border-color: var(--border-color-dark, #4a5568);
    color: var(--text-primary-dark, #e2e8f0);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group select:focus {
    border-color: var(--accent-primary, #007bff);
}
/* ==========================================================================
   Resolver Page Enhanced Styles V2
   ========================================================================== */

/* Resolver Page Enhanced - Seguindo padrão de cores LearnAI */

.resolver-page-enhanced {
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
    min-height: calc(100vh - 70px);
    padding: 40px 20px; /* Adicionado padding lateral para responsividade */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Estilos existentes para .resolver-page-enhanced, .landing-title, etc., permanecem os mesmos */

.resolver-page-enhanced .landing-container {
    /* EFEITO DE VIDRO E FUNDO */
    background-color: rgba(var(--bg-card-rgb, 255, 255, 255), 0.85); /* Fundo semi-transparente */
    backdrop-filter: blur(12px); /* Efeito de vidro fosco */
    -webkit-backdrop-filter: blur(12px); /* Para compatibilidade com Safari */

    /* PADDING E ARREDONDAMENTO (mantidos) */
    padding: 45px;
    border-radius: var(--border-radius-xl, 24px);

    /* SOMBRA (externa + interna para profundidade) */
    box-shadow: var(--shadow-xl, 0 15px 35px rgba(0,0,0,0.12)), /* Sombra externa */
                var(--shadow-inset-sm, inset 0 1px 2px rgba(0,0,0,0.05)); /* Sombra interna */

    /* DIMENSÕES (mantidas) */
    max-width: 850px;
    width: 95%;

    /* BORDA (sutil, usando cor da marca) */
    border: 1px solid rgba(var(--brand-primary-rgb, 41, 44, 109), 0.15);

    /* LAYOUT E SCROLL (mantidos) */
    box-sizing: border-box;
    max-height: calc(100vh - 180px);
    overflow-y: auto;

    /* TRANSIÇÃO (para suavizar mudanças de tema) */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Mode para Resolver Page */
body.dark-mode .resolver-page-enhanced .landing-container {
    /* EFEITO DE VIDRO E FUNDO (DARK) */
    background-color: rgba(45, 45, 45, 0.75); /* Fundo escuro semi-transparente */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    /* BORDA (DARK) */
    border: 1px solid rgba(255, 255, 255, 0.12);

    /* SOMBRA (DARK) */
    box-shadow: 0 12px 30px rgba(0,0,0,0.3), inset 0 2px 5px rgba(0,0,0,0.3);
}

.resolver-page-enhanced .landing-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Aumentado gap */
    font-size: 2.5rem; /* Aumentado tamanho */
    color: var(--brand-primary);
    margin-bottom: 40px; /* Aumentado margem */
    font-weight: 700;
}

.resolver-page-enhanced .landing-title::before {
    content: "contact_support";
    font-family: 'Material Symbols Outlined';
    font-weight: 300; /* Ícone mais fino */
    font-size: 3rem; /* Ícone maior */
    color: var(--accent-primary);
}

/* ================= Assistente (/assistente) ================= */
#resolver-selection-page {
    /* Permitir que o container inteiro seja a área rolável correta */
    height: calc(100vh - 80px);
    overflow: auto;
    padding-top: 24px;
}

#resolver-selection-page .landing-container {
    max-width: 1100px;
    width: 100%;
    margin-inline: auto;
    padding: 12px 8px;
}

#resolver-selection-page .landing-title {
    margin: 0 0 10px 0;
    font-size: 1.6rem;
}

.assistente-actions .action-card.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.assistente-actions .badge.soon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-primary);
    color: var(--text-on-accent, #fff);
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 4px 8px;
}

/* ================= Memorização Literal (/assistente/memlit) ================= */
#memlit-page {
    height: calc(100vh - 80px);
    overflow: auto;
}

#memlit-page .landing-container {
    max-width: 1000px;
    width: 100%;
    margin-inline: auto;
    padding: 18px 12px;
    box-sizing: border-box;
}

#memlit-page .landing-title {
    margin: 0 0 8px 0;
    font-size: 1.7rem;
}

.memlit-source label {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 10px 0 6px 2px;
}

.memlit-textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-input);
    border: 1px solid var(--border-input);
    border-radius: var(--border-radius-md);
    padding: 12px;
    font-size: 0.98rem;
    box-shadow: var(--shadow-inset-sm);
}

.memlit-modes-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0 12px 0;
}
.memlit-modes-tabs button {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
}
.memlit-modes-tabs button.active {
    background: var(--accent-primary);
    color: var(--text-on-accent, #fff);
    border-color: transparent;
}

.memlit-tab-content { margin-top: 6px; }
.memlit-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    padding: 12px;
}

.memlit-actions { display: flex; gap: 8px; margin-top: 10px; }

.memlit-input { width: 100%; padding: 10px; border: 1px solid var(--border-input); border-radius: var(--border-radius-sm); background: var(--bg-input); color: var(--text-input); }
.memlit-feedback { margin-top: 8px; color: var(--text-secondary); }

/* Dark mode */
body.dark-mode .memlit-textarea { background: var(--bg-input-dark); color: var(--text-input-dark); border-color: var(--border-input-dark); }
body.dark-mode .memlit-modes-tabs button { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
body.dark-mode .memlit-card { background: var(--bg-card-dark, #2d2d2d); border-color: var(--border-color-dark, #444); }

/* Layout inicial + transição para chat */
.memlit-layout { display: grid; grid-template-columns: 1fr; gap: 16px; transition: grid-template-columns 0.35s ease; }
.memlit-left { transition: transform 0.35s ease, opacity 0.35s ease; }
.memlit-right { overflow: hidden; }
.memlit-chat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); height: 100%; min-height: 280px; display:flex; flex-direction: column; }
.memlit-chat-messages { padding: 12px; display: flex; gap: 10px; flex-direction: column; height: 100%; overflow: auto; }
.memlit-msg { padding: 10px 12px; border-radius: 12px; font-size: .95rem; width: fit-content; max-width: 80%; box-shadow: var(--shadow-xs); opacity: 0; transform: translateY(6px); animation: memlitFadeIn .25s ease forwards; }
.memlit-msg.system { background: var(--bg-subtle); color: var(--text-secondary); }
.memlit-msg.ai { background: var(--bg-card); border: 1px solid var(--border-color); }

@keyframes memlitFadeIn {
    to { opacity: 1; transform: none; }
}

.memlit-start { display: flex; justify-content: center; margin-top: 10px; }

.memlit-layout.memlit-started { grid-template-columns: 1.1fr 0.9fr; }
.memlit-layout.memlit-started .memlit-right { display:block; }
.memlit-layout.memlit-started .memlit-left { transform: translateX(-8px); }

/* Partes/frases destacadas */
.memlit-parts { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; max-height: 220px; overflow: auto; }
.memlit-part { padding: 10px 12px; border-radius: 10px; color: var(--text-primary); border: 1px solid var(--border-color); text-align: left; }
.memlit-part:nth-child(5n+1) { background: #fff6f8; }
.memlit-part:nth-child(5n+2) { background: #f6faff; }
.memlit-part:nth-child(5n+3) { background: #f6fff7; }
.memlit-part:nth-child(5n+4) { background: #fffdf6; }
.memlit-part:nth-child(5n+5) { background: #f6f6ff; }
body.dark-mode .memlit-part:nth-child(5n+1) { background: rgba(217,41,96,.12); }
body.dark-mode .memlit-part:nth-child(5n+2) { background: rgba(41,44,109,.12); }
body.dark-mode .memlit-part:nth-child(5n+3) { background: rgba(39,174,96,.12); }
body.dark-mode .memlit-part:nth-child(5n+4) { background: rgba(241,196,15,.12); }
body.dark-mode .memlit-part:nth-child(5n+5) { background: rgba(155,89,182,.12); }

.memlit-part.active { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 217, 41, 96), .2) inset; }

/* Exercício com blanks editáveis */
.memlit-exercise { margin-top: 16px; text-align: left; }
.memlit-blank { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 4px; margin: 0 4px; border-radius: 6px; border: 1px dashed var(--border-input); background: var(--bg-input); color: var(--text-input); font-size: 0.85rem; min-height: 26px; }
.memlit-blank input { width: auto; min-width: 3ch; max-width: 40ch; border: none; outline: none; background: transparent; color: inherit; text-align: center; height: 22px; }
.memlit-blank.loading { position: relative; overflow: hidden; }
.memlit-blank.loading::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 10px, rgba(0,0,0,.1) 10px 20px); animation: memlitStripe 0.8s linear infinite; opacity: .6; }
@keyframes memlitStripe { from { background-position: 0 0; } to { background-position: -40px 0; } }
.memlit-eval { margin-top: 10px; display: flex; gap: 8px; }
.memlit-blank.ok { background: rgba(46, 204, 113, .18); border-color: rgba(46, 204, 113, .6); transition: background .25s ease, border-color .25s ease; }
.memlit-blank.fail { background: rgba(231, 76, 60, .18); border-color: rgba(231, 76, 60, .6); transition: background .25s ease, border-color .25s ease; }

/* Carousel de exercícios */
.memlit-carousel { position: relative; width: 100%; max-width: 100%; overflow: hidden; background: transparent; }
.memlit-viewport { overflow: hidden; width: 100%; }
.memlit-track { display: flex; width: 100%; transition: transform .35s ease; }
.memlit-slide { min-width: 100%; padding: 8px 0; box-sizing: border-box; }
.memlit-slide.memlit-slide-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.memlit-slide-creating { font-weight: 600; color: var(--text-secondary); }
.memlit-arrows { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; gap: 12px; padding: 0 4px; }
.memlit-arrow { pointer-events: all; background: rgba(0,0,0,.04); border: 1px solid var(--border-color); color: var(--text-secondary); width: 22px; height: 22px; border-radius: 50%; display:flex; align-items:center; justify-content:center; cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.memlit-arrow:hover { background: rgba(0,0,0,.08); }
.memlit-arrow.disabled { opacity: .4; cursor: default; }
.memlit-arrows.hidden { display: none; }

/* Opções pós-avaliação */
.memlit-options { margin-top: 10px; display: flex; gap: 8px; }
.memlit-options .secondary-button, .memlit-options .memlit-primary-button, .memlit-options .memlit-primary, .memlit-options .memlit-button { padding: 6px 12px; font-size: 0.9rem; line-height: 1; }
.memlit-primary-button { background: var(--accent-primary); color: var(--text-on-accent, #fff); border: none; border-radius: var(--border-radius-sm); padding: 8px 14px; box-shadow: var(--shadow-xs); }
.memlit-primary-button:hover { filter: brightness(0.95); }
.memlit-primary-button:active { transform: translateY(1px); }

/* Barra persistente de avaliação (dock) */
.memlit-evaldock { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.memlit-evaldock .memlit-eval { margin-top: 0; }
.memlit-evaldock .memlit-primary-button[disabled], .memlit-evaldock .memlit-primary[disabled], .memlit-evaldock .memlit-button[disabled], .memlit-evaldock .secondary-button[disabled] { opacity: .6; cursor: not-allowed; }
body:not(.dark-mode) .memlit-evaldock { background: rgba(0,0,0,.03); }
body.dark-mode .memlit-evaldock { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); }

/* Estado colapsado do carousel após "Bom" */
.memlit-carousel.collapsed .memlit-viewport, .memlit-carousel.collapsed .memlit-arrows { display: none !important; }
.memlit-collapsed-wrap { display: flex; }
.memlit-collapsed { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(39, 174, 96, .15); border: 1px solid rgba(39, 174, 96, .55); color: var(--text-primary); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.memlit-collapsed .memlit-collapsed-text { color: #1e6f43; font-weight: 600; }
.memlit-review-button { background: var(--accent-primary); color: var(--text-on-accent, #fff); border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; box-shadow: var(--shadow-xs); }

/* Encontrar Erro */
.memlit-exercise-errors { display: flex; flex-direction: column; gap: 10px; }
.memlit-errors-note { color: var(--text-secondary); }
.memlit-errors-attempt { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; line-height: 1.7; user-select: text; }
.memlit-err-mark { background: rgba(231, 76, 60, .18); border-bottom: 2px solid rgba(231, 76, 60, .7); border-radius: 3px; padding: 0 2px; }
.memlit-err-mark.ok { background: rgba(46, 204, 113, .18); border-bottom-color: rgba(46, 204, 113, .7); }
.memlit-err-mark.fail { background: rgba(231, 76, 60, .18); border-bottom-color: rgba(231, 76, 60, .7); }
.memlit-errors-attempt.loading { position: relative; overflow: hidden; }
.memlit-errors-attempt.loading::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 10px, rgba(0,0,0,.1) 10px 20px); animation: memlitStripe 0.8s linear infinite; opacity: .6; }

/* Recall (teste digitar frase inteira) */
.memlit-recall { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.memlit-recall-title { font-weight: 600; color: var(--text-primary); }
.memlit-recall-form { display: flex; gap: 8px; align-items: center; }
.memlit-recall-input { flex: 1; min-height: 70px; padding: 10px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); color: var(--text-input); }
.memlit-recall-confirm { background: var(--accent-primary); color: var(--text-on-accent, #fff); border: none; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.memlit-recall.error .memlit-recall-input { border-color: rgba(231, 76, 60, .8); box-shadow: 0 0 0 2px rgba(231, 76, 60, .25); }

/* Auto mode toggle */
.memlit-auto-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.memlit-auto-label { color: var(--text-secondary); font-size: .9rem; }
.memlit-auto-toggle input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border-color); position: relative; outline: none; cursor: pointer; }
.memlit-auto-toggle input:checked { background: var(--accent-primary); }
.memlit-auto-toggle .memlit-auto-slider { position: relative; left: -32px; width: 16px; height: 16px; background: #fff; border-radius: 50%; pointer-events: none; transition: transform .2s ease; box-shadow: var(--shadow-xs); }
.memlit-auto-toggle input:checked + .memlit-auto-slider { transform: translateX(16px); }


@media (max-width: 900px) { .memlit-started .memlit-layout { grid-template-columns: 1fr; } }

.resolver-page-enhanced .question-textbox-styled {
    min-height: 180px;
    border-width: 1px;
    border-color: var(--border-input);
    background-color: var(--bg-input);
    color: var(--text-input);
    font-size: 1.05rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-inset-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.resolver-page-enhanced .question-textbox-styled:focus {
    border-color: var(--accent-primary);
    background-color: var(--bg-input-focus);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.25), var(--shadow-inset-sm);
}

.resolver-page-enhanced .question-textbox-styled.drag-over {
    border-color: var(--accent-primary);
    border-style: dashed;
    border-width: 2px;
    background-color: rgba(var(--accent-primary-rgb), 0.03);
}

.resolver-page-enhanced .question-textbox-styled.drag-over::before {
    color: var(--accent-primary);
    background-color: rgba(var(--bg-card-rgb, 255, 255, 255), 0.9);
    padding: 15px 25px;
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    font-weight: 500;
}

.resolver-page-enhanced .question-image-button {
    width: 40px;
    height: 40px;
    background-color: var(--accent-secondary);
    box-shadow: var(--shadow-xs);
    border-radius: 50%;
    bottom: 12px;
    right: 12px;
}

.resolver-page-enhanced .question-image-button:hover {
    background-color: var(--accent-secondary-hover);
    transform: scale(1.08);
}

.resolver-page-enhanced .question-image-button .material-symbols-outlined {
    font-size: 1.5rem;
}

.resolver-page-enhanced .question-image-preview-container {
    background: var(--bg-subtle);
    border: 1px dashed var(--border-input);
    border-radius: var(--border-radius-md);
    padding: 12px;
    margin-top: 12px;
}

.resolver-page-enhanced .question-image-preview-item {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.resolver-page-enhanced .question-image-preview-item .question-remove-image {
    background-color: rgba(var(--danger-color-rgb), 0.75);
    width: 22px;
    height: 22px;
    font-size: 15px;
}
.resolver-page-enhanced .question-image-preview-item .question-remove-image:hover {
    background-color: rgba(var(--danger-color-rgb), 1);
}

/* Botão Solucionar - Correção de hover e melhoria */
.resolver-page-enhanced #solve-button.confirm-button {
    padding: 16px 35px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-on-accent, white); /* Garante que o texto seja branco */
    background: var(--accent-primary); /* Cor sólida base */
    border: 2px solid transparent; /* Borda para hover */
    border-radius: var(--border-radius-xl, 25px);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.25), 0 0 0 0px rgba(var(--accent-primary-rgb), 0.3); /* Sombra para animação */
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transição mais rápida e suave */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    outline: none; /* Remove outline padrão */
}

.resolver-page-enhanced #solve-button.confirm-button::before {
    content: "send";
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-size: 1.3rem;
    transition: transform 0.2s ease-in-out;
}

.resolver-page-enhanced #solve-button.confirm-button:hover {
    background: var(--accent-primary-darker, #B0224E);
    color: var(--text-on-accent, white); /* Garante que o texto continue branco */
    border-color: var(--accent-primary-hover, var(--accent-primary)); /* Mostra uma borda no hover */
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.35), 0 0 0 4px rgba(var(--accent-primary-rgb), 0.15); /* Sombra maior e anel */
}
.resolver-page-enhanced #solve-button.confirm-button:hover::before {
    transform: translateX(3px); /* Pequeno movimento no ícone */
}

.resolver-page-enhanced #solve-button.confirm-button:active {
    background: var(--accent-primary-darker, #B0224E);
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.2), 0 0 0 2px rgba(var(--accent-primary-rgb), 0.1);
}

/* Dark Mode para Resolver Page - Card específico */
body.dark-mode .resolver-page-enhanced .landing-container {
    background-color: var(--bg-card); /* Usando variável padrão do sistema */
    border: 1px solid var(--border-color); /* Usando variável padrão do sistema */
    box-shadow: 0 12px 30px rgba(0,0,0,0.3); /* Sombra escura */
}

body.dark-mode .resolver-page-enhanced .landing-title {
    color: var(--text-heading-dark);
}
body.dark-mode .resolver-page-enhanced .landing-title::before {
    color: var(--accent-primary);
}

body.dark-mode .resolver-page-enhanced .question-textbox-styled {
    background-color: var(--bg-input-dark);
    border-color: var(--border-input-dark);
    color: var(--text-input-dark);
}
body.dark-mode .resolver-page-enhanced .question-textbox-styled:focus {
    border-color: var(--accent-primary);
    background-color: var(--bg-input-focus-dark);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.35), var(--shadow-inset-dark);
}
body.dark-mode .resolver-page-enhanced .question-image-button {
    background-color: var(--accent-primary);
}
body.dark-mode .resolver-page-enhanced .question-image-button:hover {
    background-color: var(--accent-primary-hover);
}

body.dark-mode .resolver-page-enhanced .question-image-preview-container {
    background: var(--bg-subtle);
    border-color: var(--border-input);
}
body.dark-mode .resolver-page-enhanced .question-image-preview-item .question-remove-image {
    background-color: rgba(var(--danger-color-rgb), 0.75);
}
body.dark-mode .resolver-page-enhanced .question-image-preview-item .question-remove-image:hover {
    background-color: rgba(var(--danger-color-rgb), 1);
}

/* Botão Solucionar Dark Mode - Seguindo padrão LearnAI */
body.dark-mode .resolver-page-enhanced #solve-button.confirm-button {
    background: var(--accent-primary);
    color: var(--text-on-accent, white);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.35);
}
body.dark-mode .resolver-page-enhanced #solve-button.confirm-button::before {
    color: var(--text-on-accent, white);
}

body.dark-mode .resolver-page-enhanced #solve-button.confirm-button:hover {
    background: var(--accent-primary-hover);
    color: var(--text-on-accent, white);
    box-shadow: 0 0 18px 4px rgba(var(--accent-primary-rgb), 0.45), 0 7px 20px rgba(0,0,0,0.35);
}
body.dark-mode .resolver-page-enhanced #solve-button.confirm-button:hover::before {
    color: var(--text-on-accent, white);
}
/* src/css/pages/_resolver-page.css */

.resolver-layout-container {
    width: 100%;
    max-width: 1400px; /* Ou o max-width do seu .container principal */
    margin: 0 auto;
    padding: 20px; /* Ajuste conforme necessário */
    box-sizing: border-box;
}

.resolver-page-enhanced .resolver-layout {
    display: flex;
    gap: 30px; /* Espaçamento entre as colunas */
    width: 100%;
}

.resolver-input-column {
    flex: 3; /* ALTERADO: Proporção para 75% (3 de 4 partes totais) */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Mantido: Centraliza verticalmente o landing-container */
    align-items: center; /* ADICIONADO: Para centralizar horizontalmente o landing-container */
    transition: flex-basis 0.3s ease-out; 
}

.resolver-history-column {
    flex: 1; /* Coluna da direita ocupa menos espaço */
    background-color: var(--bg-card);
    padding: 20px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    max-height: calc(100vh - 180px); /* Ajuste a altura máxima conforme necessário, considerando header/padding */
    overflow-y: auto;
    border: 1px solid var(--border-color);
    transition: flex-basis 0.3s ease-out, max-width 0.3s ease-out; /* ADICIONADO: Transição suave */
}

/* ADICIONADO: Media Query para telas grandes */
@media (min-width: 1200px) { /* Ajuste este breakpoint conforme necessário */
    .resolver-history-column {
        /* Mantém flex:1 para que possa encolher se necessário, mas limita o crescimento */
        max-width: 330px;  /* <<< VALOR REDUZIDO DE 320px PARA 280px (ou outro valor desejado) */ /* Define uma largura máxima para a coluna de histórico. Ajuste este valor! */
    }
    /* .resolver-input-column com flex: 2 irá ocupar o espaço restante automaticamente. */
}



.resolver-history-title {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle-light);
    text-align: center;
}

#resolution-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resolution-history-item {
    background-color: var(--bg-secondary);
    padding: 12px 15px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border: 1px solid var(--border-subtle-light);
    display: flex;
    flex-direction: column; /* Para empilhar título e data */
    gap: 5px; /* Espaço entre título e data */
}

.resolution-history-item:hover {
    background-color: var(--bg-card-hover);
    transform: translateY(-2px);
}

.resolution-history-item:last-child {
    margin-bottom: 0;
}

.resolution-item-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Para garantir que fique em uma linha e use ellipsis */
    display: block; /* Para que text-overflow funcione */
}

.resolution-item-date {
    font-size: 0.8em;
    color: var(--text-secondary);
}

.empty-resolution-history,
.loading-resolutions {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-style: italic;
}

/* Estilos para a página de exibição da resolução específica */
#resolution-display-page .landing-container {
    text-align: left; /* Alinhar conteúdo à esquerda */
    /* ADICIONADO: Para permitir scroll interno no landing-container da página de detalhes */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos no max-height */
    /* max-height considera header e paddings do .resolver-page-enhanced */
    max-height: calc(100vh - 150px); /* Ex: 100vh - 70px (header) - 80px (padding do .resolver-page-enhanced) */
    overflow-y: auto; /* Permite scroll vertical se o conteúdo exceder max-height */
    /* FIM ADICIONADO */
}

#resolution-details-content .resolution-section-title {
    font-size: 1.2rem;
    color: var(--brand-primary);
    margin-top: 25px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
#resolution-details-content .resolution-section-title:first-of-type {
    margin-top: 0;
}

#resolution-question-text-container,
#resolution-solution-text-container {
    /* Estilos base já aplicados por .solution-content-card se você usar essa classe */
    /* Caso contrário, defina padding, background, etc. aqui */
    font-size: 1rem;
    line-height: 1.6;
}
#resolution-question-text-container {
    color: var(--text-secondary); /* Dar um tom diferente para a pergunta */
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--bg-subtle);
    border-radius: var(--border-radius-sm);
}


/* Dark Mode */
body.dark-mode .resolver-history-column {
    background-color: var(--bg-card-dark);
    border-color: var(--border-color-dark);
}
body.dark-mode .resolver-history-title {
    color: var(--text-heading-dark);
    border-bottom-color: var(--border-dark-subtle);
}
body.dark-mode .resolution-history-item {
    background-color: var(--bg-secondary-dark, #222); /* Usar fallback se não definido */
    border-color: var(--border-dark-subtle);
}
body.dark-mode .resolution-history-item:hover {
    background-color: var(--bg-card-hover-dark, #353535);
}
body.dark-mode .resolution-item-title {
    color: var(--text-primary-dark, #f0f0f0);
}
body.dark-mode .resolution-item-date {
    color: var(--text-secondary-dark, #aaa);
}
body.dark-mode .empty-resolution-history,
body.dark-mode .loading-resolutions {
    color: var(--text-secondary-dark);
}

body.dark-mode #resolution-details-content .resolution-section-title {
    color: var(--text-heading-dark);
    border-bottom-color: var(--border-color-dark);
}
body.dark-mode #resolution-question-text-container {
    background-color: var(--bg-subtle-dark, #252525);
    color: var(--text-secondary-dark);
}

/* ========================================================================== */
/*                           RESPONSIVIDADE MOBILE                           */
/* ========================================================================== */

/* Botão dropdown do histórico - apenas mobile */
.history-dropdown-toggle {
    display: none;
    width: 80%;
    padding: 16px 20px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--accent-primary-rgb), 0.3);
    justify-content: space-between;
    align-items: center;
}

.history-dropdown-toggle .material-symbols-outlined {
    transition: transform 0.3s ease;
}

.history-dropdown-toggle.active .material-symbols-outlined {
    transform: rotate(180deg);
}

.history-dropdown-toggle:hover {
    transform: translateY(-2px);
    background: var(--accent-primary-hover);
    box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb), 0.4);
}

.history-dropdown-toggle:active {
    transform: translateY(0);
}

/* Container do dropdown do histórico */
.mobile-history-dropdown {
    display: none;
    background: var(--bg-card);
    border-radius: 16px;
    margin-top: 12px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    transform: translateY(-100%);
    margin-bottom: -300px;
}

.mobile-history-dropdown.open {
    max-height: 300px;
    overflow-y: auto;
    bottom: 60px;
    position: relative  ;
}

.mobile-history-dropdown .resolver-history-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-subtle-light);
    text-align: center;
}

.mobile-history-dropdown #resolution-history-list {
    padding: 12px;
    max-height: 240px;
    overflow-y: auto;
}

.mobile-history-dropdown .resolution-history-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle-light);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.mobile-history-dropdown .resolution-history-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-primary);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.mobile-history-dropdown .resolution-history-item:hover {
    background: var(--bg-card-hover);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-history-dropdown .resolution-history-item:hover::before {
    transform: scaleY(1);
}

.mobile-history-dropdown .resolution-item-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.mobile-history-dropdown .resolution-item-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Dark mode para dropdown */
body.dark-mode .history-dropdown-toggle {
    background: var(--accent-primary);
    box-shadow: 0 4px 15px rgba(var(--accent-primary-rgb), 0.4);
}

body.dark-mode .mobile-history-dropdown {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

body.dark-mode .mobile-history-dropdown .resolver-history-title {
    color: var(--text-heading);
    border-bottom-color: var(--border-color);
}

body.dark-mode .mobile-history-dropdown .resolution-history-item {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .mobile-history-dropdown .resolution-history-item:hover {
    background: var(--bg-card-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .mobile-history-dropdown .resolution-item-title {
    color: var(--text-primary);
}

body.dark-mode .mobile-history-dropdown .resolution-item-date {
    color: var(--text-secondary);
}

/* Tablet e Mobile Grande */
@media (max-width: 868px) {
    .resolver-page-enhanced {
        padding: 0;
        min-height: 100vh;
        background: var(--bg-primary);
    }
    
    .resolver-page-enhanced .resolver-layout {
        flex-direction: column;
        gap: 0;
        min-height: 100vh;
    }
    
    .resolver-input-column {
        flex: 1;
        width: 100%;
        max-width: none;
        padding: 20px 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: calc(100vh - 80px);
        position: relative;
    }
    
    .resolver-history-column {
        display: none; /* Esconder coluna desktop no mobile */
    }
    
    .history-dropdown-toggle {
        display: flex; /* Mostrar botão dropdown no mobile */
        margin-top: 85px;
    }
    
    .mobile-history-dropdown {
        display: block; /* Mostrar dropdown no mobile */
    }
    
    .question-input-container {
        margin-top: 28px;
    }
    
    .resolver-page-enhanced .landing-title {
        display: none !important; /* Ocultar título no mobile */
    }
    
    .resolver-layout-container {
        padding: 0; /* Remover padding no mobile */
    }
    
    .resolver-page-enhanced .landing-container {
        padding: 24px 20px;
        max-width: 100%;
        width: 100%;
        max-height: none;
        background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.95);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        margin-bottom: 0;
        margin-top: 110px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(var(--border-color-rgb, 0, 0, 0), 0.1);
    }
    
    .resolver-page-enhanced .landing-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
        gap: 10px;
        text-align: center;
        background: linear-gradient(135deg, var(--brand-primary), var(--accent-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .resolver-page-enhanced .landing-title::before {
        display: none;
    }
    
    /* Dark mode para mobile */
    body.dark-mode .resolver-page-enhanced .landing-container {
        background: rgba(45, 45, 45, 0.95);
        border-color: var(--border-color);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    body.dark-mode .resolver-page-enhanced .landing-title {
        background: linear-gradient(135deg, var(--text-heading), var(--accent-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Mobile Médio */
@media (max-width: 640px) {
    .resolver-page-enhanced {
        padding: 0;
    }
    
    .resolver-input-column {
        padding: 16px 12px;
        min-height: calc(100vh - 70px);
    }
    
    .resolver-page-enhanced .landing-container {
        padding: 20px 16px;
        border-radius: 18px;
        background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.98);
        backdrop-filter: blur(25px);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    }
    
    .resolver-page-enhanced .landing-title {
        font-size: 1.6rem;
        margin-bottom: 18px;
        font-weight: 700;
    }
    
    .resolver-page-enhanced .question-textbox-styled {
        min-height: 140px;
        font-size: 0.95rem;
        padding: 16px 50px 16px 16px;
        border-radius: 14px;
        border: 2px solid var(--border-input);
        background: var(--bg-input);
        transition: all 0.3s ease;
        line-height: 1.5;
    }
    
    .resolver-page-enhanced .question-textbox-styled:focus {
        border-color: var(--accent-primary);
        background: var(--bg-input-focus);
        box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.15);
        transform: translateY(-1px);
    }
    
    .resolver-page-enhanced .question-image-button {
        width: 42px;
        height: 42px;
        bottom: 10px;
        right: 10px;
        border-radius: 12px;
        background: var(--accent-primary);
        box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .resolver-page-enhanced .question-image-button:hover {
        transform: scale(1.05) translateY(-2px);
        background: var(--accent-primary-hover);
        box-shadow: 0 6px 16px rgba(var(--accent-primary-rgb), 0.4);
    }
    
    .resolver-page-enhanced .question-image-button .material-symbols-outlined {
        font-size: 1.4rem;
        color: white;
    }
    
    .resolver-page-enhanced #solve-button.confirm-button {
        padding: 16px 32px;
        font-size: 1.05rem;
        width: 100%;
        justify-content: center;
        margin-top: 24px;
        border-radius: 16px;
        background: var(--accent-primary);
        border: none;
        color: white;
        font-weight: 600;
        box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb), 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .resolver-page-enhanced #solve-button.confirm-button:hover {
        transform: translateY(-2px);
        background: var(--accent-primary-hover);
        box-shadow: 0 8px 25px rgba(var(--accent-primary-rgb), 0.4);
    }
    
    .resolver-page-enhanced #solve-button.confirm-button:active {
        transform: translateY(0);
    }
    
    .history-dropdown-toggle {
        padding: 14px 18px;
        font-size: 0.95rem;
        border-radius: 14px;
        margin-top: 16px;
        background: var(--accent-primary);
        box-shadow: 0 4px 15px rgba(var(--accent-primary-rgb), 0.3);
    }
    
    .mobile-history-dropdown {
        border-radius: 14px;
        margin-top: 10px;
    }
    
    .mobile-history-dropdown .resolver-history-title {
        font-size: 1rem;
        padding: 14px 18px 10px;
    }
    
    .mobile-history-dropdown .resolution-history-item {
        padding: 12px 14px;
        margin-bottom: 6px;
        border-radius: 10px;
    }
    
    .mobile-history-dropdown .resolution-item-title {
        font-size: 0.9rem;
    }
    
    .mobile-history-dropdown .resolution-item-date {
        font-size: 0.75rem;
    }
    
    /* Dark mode para mobile médio */
    body.dark-mode .resolver-page-enhanced .landing-container {
        background: rgba(45, 45, 45, 0.98);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
    }
    
    body.dark-mode .resolver-page-enhanced .question-textbox-styled {
        background: var(--bg-input);
        border-color: var(--border-input);
        color: var(--text-input);
    }
    
    body.dark-mode .resolver-page-enhanced .question-textbox-styled:focus {
        border-color: var(--accent-primary);
        background: var(--bg-input-focus);
    }
}

/* Mobile Pequeno */
@media (max-width: 480px) {
    .resolver-page-enhanced {
        padding: 0;
    }
    
    .resolver-input-column {
        padding: 12px 10px;
        min-height: calc(100vh - 60px);
    }
    
    .resolver-page-enhanced .landing-container {
        padding: 18px 14px;
        border-radius: 16px;
        background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.98);
        backdrop-filter: blur(30px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    
    .resolver-page-enhanced .landing-title {
        font-size: 1.4rem;
        margin-bottom: 16px;
        font-weight: 700;
    }
    
    .resolver-page-enhanced .question-textbox-styled {
        min-height: 120px;
        font-size: 0.9rem;
        padding: 14px 46px 14px 14px;
        border-radius: 12px;
        border: 2px solid var(--border-input);
        line-height: 1.4;
    }
    
    .resolver-page-enhanced .question-textbox-styled:focus {
        transform: translateY(-1px);
        box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
    }
    
    .resolver-page-enhanced .question-image-button {
        width: 38px;
        height: 38px;
        bottom: 8px;
        right: 8px;
        border-radius: 10px;
        background: var(--accent-primary);
        box-shadow: 0 3px 10px rgba(var(--accent-primary-rgb), 0.3);
    }
    
    .resolver-page-enhanced .question-image-button:hover {
        transform: scale(1.05) translateY(-1px);
        background: var(--accent-primary-hover);
        box-shadow: 0 4px 14px rgba(var(--accent-primary-rgb), 0.4);
    }
    
    .resolver-page-enhanced .question-image-button .material-symbols-outlined {
        font-size: 1.2rem;
        color: white;
    }
    
    .resolver-page-enhanced #solve-button.confirm-button {
        padding: 14px 28px;
        font-size: 1rem;
        width: 100%;
        margin-top: 20px;
        border-radius: 14px;
        background: var(--accent-primary);
        border: none;
        color: white;
        font-weight: 600;
        box-shadow: 0 5px 18px rgba(var(--accent-primary-rgb), 0.3);
    }
    
    .resolver-page-enhanced #solve-button.confirm-button::before {
        font-size: 1.1rem;
    }
    
    .resolver-page-enhanced #solve-button.confirm-button:hover {
        transform: translateY(-2px);
        background: var(--accent-primary-hover);
        box-shadow: 0 7px 22px rgba(var(--accent-primary-rgb), 0.4);
    }
    
    .history-dropdown-toggle {
        padding: 12px 16px;
        font-size: 0.9rem;
        border-radius: 12px;
        margin-top: 85px;
    }
    
    .mobile-history-dropdown {
        border-radius: 12px;
        margin-top: 8px;
    }
    
    .mobile-history-dropdown.show {
        max-height: 250px;
    }
    
    .mobile-history-dropdown .resolver-history-title {
        font-size: 0.95rem;
        padding: 12px 16px 8px;
    }
    
    .mobile-history-dropdown #resolution-history-list {
        padding: 10px;
        max-height: 200px;
    }
    
    .mobile-history-dropdown .resolution-history-item {
        padding: 10px 12px;
        margin-bottom: 5px;
        border-radius: 8px;
    }
    
    .mobile-history-dropdown .resolution-item-title {
        font-size: 0.85rem;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    
    .mobile-history-dropdown .resolution-item-date {
        font-size: 0.7rem;
    }
    
    /* Dark mode para mobile pequeno */
    body.dark-mode .resolver-page-enhanced .landing-container {
        background: rgba(45, 45, 45, 0.98);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
}

/* Mobile Extra Pequeno */
@media (max-width: 360px) {
    .resolver-page-enhanced {
        padding: 0;
    }
    
    .resolver-input-column {
        padding: 10px 8px;
        min-height: calc(100vh - 50px);
    }
    
    .resolver-page-enhanced .landing-container {
        padding: 16px 12px;
        border-radius: 14px;
        background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.98);
        backdrop-filter: blur(30px);
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    }
    
    .resolver-page-enhanced .landing-title {
        font-size: 1.2rem;
        margin-bottom: 14px;
        font-weight: 700;
    }
    
    .resolver-page-enhanced .question-textbox-styled {
        min-height: 110px;
        font-size: 0.85rem;
        padding: 12px 42px 12px 12px;
        border-radius: 10px;
        border: 2px solid var(--border-input);
        line-height: 1.4;
    }
    
    .resolver-page-enhanced .question-textbox-styled:focus {
        transform: translateY(-1px);
        box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.12);
    }
    
    .resolver-page-enhanced .question-image-button {
        width: 36px;
        height: 36px;
        bottom: 6px;
        right: 6px;
        border-radius: 8px;
        background: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3);
    }
    
    .resolver-page-enhanced .question-image-button:hover {
        transform: scale(1.05);
        background: var(--accent-primary-hover);
        box-shadow: 0 3px 12px rgba(var(--accent-primary-rgb), 0.4);
    }
    
    .resolver-page-enhanced .question-image-button .material-symbols-outlined {
        font-size: 1.1rem;
        color: white;
    }
    
    .resolver-page-enhanced #solve-button.confirm-button {
        padding: 12px 24px;
        font-size: 0.95rem;
        width: 100%;
        margin-top: 18px;
        border-radius: 12px;
        background: var(--accent-primary);
        border: none;
        color: white;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(var(--accent-primary-rgb), 0.3);
    }
    
    .resolver-page-enhanced #solve-button.confirm-button::before {
        font-size: 1rem;
    }
    
    .resolver-page-enhanced #solve-button.confirm-button:hover {
        transform: translateY(-1px);
        background: var(--accent-primary-hover);
        box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb), 0.4);
    }
    
    .history-dropdown-toggle {
        padding: 10px 14px;
        font-size: 0.85rem;
        border-radius: 10px;
        margin-top: 85px;
    }
    
    .mobile-history-dropdown {
        border-radius: 10px;
        margin-top: 6px;
    }
    
    .mobile-history-dropdown.show {
        max-height: 220px;
    }
    
    .mobile-history-dropdown .resolver-history-title {
        font-size: 0.9rem;
        padding: 10px 14px 6px;
    }
    
    .mobile-history-dropdown #resolution-history-list {
        padding: 8px;
        max-height: 180px;
    }
    
    .mobile-history-dropdown .resolution-history-item {
        padding: 8px 10px;
        margin-bottom: 4px;
        border-radius: 6px;
    }
    
    .mobile-history-dropdown .resolution-item-title {
        font-size: 0.8rem;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    
    .mobile-history-dropdown .resolution-item-date {
        font-size: 0.65rem;
    }
    
    /* Dark mode para mobile extra pequeno */
    body.dark-mode .resolver-page-enhanced .landing-container {
        background: rgba(45, 45, 45, 0.98);
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    }
}

/* ADICIONADO: Remover título da página de exibição de resolução específica */
#resolution-display-page .landing-title {
    display: none;
}
.thinking-page-enhanced {
    background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 70%, var(--brand-primary-bg-subtle) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 70px);
    padding: 30px;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}

.thinking-page-enhanced::before,
.thinking-page-enhanced::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 600% 600%;
    animation: animatedGradientBackground 25s ease infinite alternate;
    z-index: 0;
}
.thinking-page-enhanced::before {
    background-image: linear-gradient(125deg,
        rgba(var(--brand-primary-rgb), 0.06),
        rgba(var(--accent-primary-rgb), 0.03),
        transparent 40%,
        rgba(var(--accent-secondary-rgb, 0, 123, 255), 0.04),
        rgba(var(--brand-primary-rgb), 0.07)
    );
    opacity: 0.7;
}
.thinking-page-enhanced::after {
    background-image: radial-gradient(circle at top left, rgba(var(--accent-primary-rgb), 0.05), transparent 50%),
                      radial-gradient(circle at bottom right, rgba(var(--brand-primary-rgb), 0.06), transparent 50%);
    animation-direction: alternate-reverse;
    opacity: 0.6;
}

@keyframes animatedGradientBackground {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.thinking-page-enhanced .landing-container {
    position: relative;
    z-index: 1;
    background-color: rgba(var(--bg-card-rgb, 255, 255, 255), 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 50px;
    border-radius: var(--border-radius-xl, 24px);
    box-shadow: var(--shadow-xl, 0 20px 45px rgba(0,0,0,0.15));
    max-width: 550px;
    width: 95%;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.1);
}

.thinking-page-enhanced .landing-title {
    font-size: 2.8rem;
    color: var(--brand-primary);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.thinking-page-enhanced .landing-title::before {
    content: "hourglass_top";
    font-family: 'Material Symbols Outlined';
    font-weight: 300;
    font-size: 3.2rem;
    color: var(--accent-primary);
    margin-right: 15px;
    animation: rotateIconSmooth 2.5s linear infinite;
}

@keyframes rotateIconSmooth {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.05); }
    to   { transform: rotate(360deg) scale(1); }
}

.thinking-page-enhanced .landing-title .dots span {
    opacity: 0;
    animation: thinkingBlink 1.5s infinite;
    display: inline-block;
    transform-origin: bottom;
}
.thinking-page-enhanced .landing-title .dots span:nth-child(1) { animation-delay: 0s; }
.thinking-page-enhanced .landing-title .dots span:nth-child(2) { animation-delay: 0.25s; }
.thinking-page-enhanced .landing-title .dots span:nth-child(3) { animation-delay: 0.5s; }

@keyframes thinkingBlink {
    0%, 100% { opacity: 0.3; transform: translateY(1px) scale(0.95); }
    50% { opacity: 1; transform: translateY(-1px) scale(1.05); }
}

/* Barra de Carregamento Melhorada V4 - Mais Lenta */
.thinking-page-enhanced .loader-bar {
    height: 12px;
    border-radius: 6px;
    background-color: rgba(var(--brand-primary-rgb), 0.15);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
    margin-top: 40px;
    overflow: hidden;
    position: relative;
}

.thinking-page-enhanced .loader-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--bg-primary-rgb, 255,255,255,0).25) 40%,
        rgba(var(--bg-primary-rgb, 255,255,255,0).25) 60%,
        transparent 100%
    );
    animation: scanLine 2.8s infinite ease-in-out; /* Duração aumentada para scanline */
    border-radius: 6px;
    z-index: 2;
}

@keyframes scanLine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

.thinking-page-enhanced .loader-progress {
    width: 100%;
    height: 100%;
    left: 0;
    border-radius: 6px;
    background: linear-gradient(
        270deg,
        rgba(var(--accent-primary-rgb), 0),
        rgba(var(--accent-primary-rgb), 0.05),
        rgba(var(--accent-primary-rgb), 0.6),
        rgba(var(--accent-primary-rgb), 0.05),
        rgba(var(--accent-primary-rgb), 0)
    );
    background-size: 400% 100%;
    animation: waveAnimation 2.5s linear infinite; /* DURAÇÃO AUMENTADA AQUI (de 1.8s para 2.5s) */
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.3),
                0 0 20px rgba(var(--accent-primary-rgb), 0.2);
    position: relative;
    z-index: 1;
}

@keyframes waveAnimation {
    0% { background-position: 100% 0; }
    100% { background-position: -300% 0; }
}


.thinking-page-enhanced .thinking-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 30px;
    animation: thinkingTextFade 3s infinite ease-in-out;
    font-weight: 500;
}

@keyframes thinkingTextFade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Dark Mode para Thinking Page */
body.dark-mode .thinking-page-enhanced {
    background: linear-gradient(160deg, var(--bg-primary-dark) 0%, var(--bg-secondary-dark) 70%, rgba(var(--brand-primary-rgb), 0.05) 100%);
}
body.dark-mode .thinking-page-enhanced::before,
body.dark-mode .thinking-page-enhanced::after {
    animation: animatedGradientBackgroundDark 25s ease infinite alternate;
}
body.dark-mode .thinking-page-enhanced::before {
    background-image: linear-gradient(125deg,
        rgba(var(--brand-primary-rgb), 0.1),
        rgba(var(--accent-primary-rgb), 0.06),
        transparent 40%,
        rgba(var(--accent-secondary-rgb, 77, 171, 247), 0.08),
        rgba(var(--brand-primary-rgb), 0.11)
    );
    opacity: 0.7;
}
body.dark-mode .thinking-page-enhanced::after {
    background-image: radial-gradient(circle at top left, rgba(var(--accent-primary-rgb), 0.08), transparent 50%),
                      radial-gradient(circle at bottom right, rgba(var(--brand-primary-rgb), 0.1), transparent 50%);
    opacity: 0.6;
}
@keyframes animatedGradientBackgroundDark {
    0% { background-position: 0% 100%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 100%; }
}

body.dark-mode .thinking-page-enhanced .landing-container {
    background-color: rgba(var(--bg-card-dark-elevated-rgb, 60, 60, 60), 0.9);
    border: 1px solid var(--border-dark-subtle, rgba(255, 255, 255, 0.12));
    box-shadow: var(--shadow-dark-xl, 0 20px 50px rgba(0,0,0,0.4));
}
body.dark-mode .thinking-page-enhanced .landing-title {
    color: var(--text-heading-dark);
}
body.dark-mode .thinking-page-enhanced .landing-title::before {
    color: var(--accent-primary-lighter-dark, #FF5BAA);
}

/* Barra de Carregamento Dark Mode Melhorada V4 */
body.dark-mode .thinking-page-enhanced .loader-bar {
    background-color: rgba(var(--brand-primary-rgb), 0.3);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Sombra interna um pouco mais forte */
}
body.dark-mode .thinking-page-enhanced .loader-bar::before {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.2), transparent); /* Scanline mais sutil no dark */
}

body.dark-mode .thinking-page-enhanced .loader-progress {
    background: linear-gradient(
        270deg,
        transparent 0%,
        rgba(var(--accent-primary-rgb), 0.15) 15%, /* Onda mais suave no dark */
        var(--accent-primary-hover-dark, #F05599) 50%,
        rgba(var(--accent-primary-rgb), 0.15) 85%,
        transparent 100%
    );
    background-size: 400% 100%;
    animation-name: waveAnimation; /* Mantém a mesma animação de onda (já mais lenta) */
    box-shadow: 0 0 18px rgba(var(--accent-primary-rgb), 0.55),
                0 0 28px rgba(var(--accent-primary-rgb), 0.35);
}
body.dark-mode .thinking-page-enhanced .thinking-subtitle {
    color: var(--text-secondary-dark);
}

/* Responsividade para telas menores */
@media (max-width: 600px) {
    .resolver-page-enhanced .landing-title,
    .thinking-page-enhanced .landing-title {
        font-size: 2rem;
    }
    .resolver-page-enhanced .landing-title::before,
    .thinking-page-enhanced .landing-title::before {
        font-size: 2.5rem;
    }
    .thinking-page-enhanced .landing-container {
        padding: 30px;
    }
    .resolver-page-enhanced #solve-button.confirm-button {
        padding: 14px 30px;
        font-size: 1rem;
        bottom: 30px;
    }
}
/* Schedule Page Styles */

#schedule-page {
    background: linear-gradient(135deg, #f9f9f9, #fff); /* Light gradient */
    padding: 30px; /* Add padding */
    height: calc(100vh - 80px); /* Fixed height based on header */
    display: flex;
    flex-direction: column;
}

.schedule-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal overflow */
    padding-right: 10px; /* Space for scrollbar */
}

.schedule-title {
    font-size: 2.8rem;
    color: var(--brand-primary, #292C6D);
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.schedule-content {
    margin-top: 20px;
}

/* Navigation and Actions Container */
.nav-actions-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

/* Navigation */
.nav-container {
    display: flex;
    align-items: center;
    background-color: var(--color-card-bg, #FFFFFF);
    padding: 0.375rem;
    border-radius: 1.25rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    flex-shrink: 0;
}

.nav-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: transparent;
    color: var(--color-text-secondary, #495057);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.nav-button:hover {
    background-color: var(--color-light-gray, #f0f0f0);
}

.nav-button.active {
    background-color: var(--accent-primary, #D92960);
    color: white;
}

.nav-button .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Main actions */
.main-actions {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 12px; /* Adiciona espaço entre os botões */
}

/* View content */
.view-content {
    display: none;
}

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

/* Card */
.card {
    background-color: var(--color-card-bg, #FFFFFF);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    margin-bottom: 20px;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary, #292C6D);
    margin-bottom: 1.5rem;
}

/* Calendar */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.month-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-primary, #292C6D);
    text-transform: capitalize;
    text-align: center;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    color: var(--color-text-secondary, #495057);
    margin-bottom: 0.5rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    height: 7rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.is-current-month {
    background-color: #f8f9fa;
}

.is-current-month:hover {
    background-color: #e9ecef;
}

.is-other-month {
    background-color: var(--color-card-bg, #FFFFFF);
    color: #ced4da;
}

.day-number {
    align-self: center;
    font-size: 0.875rem;
    font-weight: 600;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: all 0.2s ease-in-out;
}

.is-today .day-number {
    background-color: var(--brand-primary, #292C6D);
    color: white;
}

.is-selected {
    border-color: var(--accent-primary, #D92960);
    background-color: #fde8ef;
}

.is-selected .day-number {
    background-color: var(--accent-primary, #D92960);
    color: white;
}

.day-sessions {
    flex-grow: 1;
    overflow-y: auto;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.day-session-item {
    font-size: 0.75rem;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-session-more {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #495057);
    font-weight: 500;
}

.selected-day-details {
    margin-top: 2rem;
}

#selected-day-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-primary, #292C6D);
    margin-bottom: 1rem;
}

#selected-day-sessions, #list-view-content, #subjects-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Session and Subject Items */
.session-item, .subject-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    padding: 0.75rem;
    border-radius: 0.75rem;
    transition: box-shadow 0.2s;
}

.session-item:hover, .subject-item:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.session-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.session-color-bar {
    width: 0.5rem;
    height: 3rem;
    border-radius: 9999px;
}

.session-name {
    font-weight: 700;
}

.session-time {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #495057);
}

.session-actions, .subject-actions {
    display: flex;
    gap: 0.25rem;
}

.placeholder-text {
    text-align: center;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 0.75rem;
    color: var(--color-text-secondary, #495057);
}

/* List View */
.list-date-group {
    margin-bottom: 1.5rem;
}

.list-date-header {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-secondary, #495057);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-light-gray, #f0f0f0);
}

/* Subjects View */
.subject-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
}

@media (min-width: 640px) {
    .subject-form {
        flex-direction: row;
        align-items: center;
    }
}

#new-subject-name {
    flex-grow: 1;
}

.subject-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-picker {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    background-color: white;
}

.subject-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.subject-color-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
}

.subject-name {
    font-weight: 600;
}

/* Schedule Modal Specific Styles */
.schedule-modal {
    max-width: 800px !important;
    width: 95% !important;
}

.schedule-modal .confirm-modal-icon {
    background: var(--accent-primary, #D92960) !important;
}

.schedule-modal .confirm-modal-icon span {
    color: white !important;
}

.schedule-modal-content {
    text-align: left !important;
    margin-bottom: 30px !important;
}

.schedule-modal .confirm-modal-buttons {
    justify-content: flex-end !important;
    gap: 15px;
}

.schedule-modal .confirm-modal-button.delete {
    background: var(--accent-primary, #D92960) !important;
}

.schedule-modal .confirm-modal-button.delete:hover {
    background: #b92351 !important;
}

/* Dark mode for schedule modal */
body.dark-mode .schedule-modal .confirm-modal-icon {
    background: var(--accent-primary, #D92960) !important;
}

body.dark-mode .schedule-modal .confirm-modal-icon span {
    color: white !important;
}

body.dark-mode .schedule-modal .confirm-modal-button.delete {
    background: var(--accent-primary, #D92960) !important;
    color: white !important;
}

body.dark-mode .schedule-modal .confirm-modal-button.delete:hover {
    background: #b92351 !important;
}

#schedule-form .form-group {
    margin-bottom: 1rem;
}

#schedule-form .form-group label {
    display: block;
    font-weight: 600;
    color: var(--color-text-secondary, #495057);
    margin-bottom: 0.5rem;
}

#schedule-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Responsive layout for schedule modal */
@media (min-width: 768px) {
    .modal-content {
        max-width: 48rem;
    }
    
    #schedule-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    /* Left column: Data, Duração, Horário, Repetir */
    .form-column-left {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Right column: Chat para estudo, Disciplina */
    .form-column-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Override form-grid for desktop to keep date and time together */
    #schedule-form .form-grid {
        grid-column: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* Mobile layout - keep current single column */
@media (max-width: 767px) {
    #schedule-form {
        display: flex;
        flex-direction: column;
    }
    
    .form-column-left,
    .form-column-right {
        display: contents;
    }
}

/* Repeat Controls */
.hidden {
    display: none !important;
}

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

.repeat-controls #repeat-select {
    flex: 1;
}

.repeat-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.repeat-count #repeat-count-input {
    max-width: 80px;
    text-align: center;
}

.repeat-count #repeat-unit-label {
    font-weight: 500;
    color: var(--color-text-secondary, #495057);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--accent-primary, #D92960);
    color: white;
}

.btn-primary:hover {
    background-color: #b92351;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #e9ecef;
    color: var(--color-text-primary, #212529);
}

.btn-secondary:hover {
    background-color: #dee2e6;
}

.btn-icon {
    padding: 0.5rem;
    border-radius: 9999px;
    background: transparent;
    color: var(--color-text-secondary, #495057);
}

.btn-icon:hover {
    background-color: #e9ecef;
}

.session-actions .btn-icon:hover, 
.subject-actions .btn-icon:hover {
    color: var(--accent-primary, #D92960);
    background-color: #fde8ef;
}

/* Input fields */
.input-field {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-light-gray, #f0f0f0);
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

.input-field:focus {
    outline: none;
    border-color: var(--accent-primary, #D92960);
    box-shadow: 0 0 0 2px #fde8ef;
}

/* Back button */
.back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--border-radius-sm, 6px);
    color: var(--color-text-secondary, #495057);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.back-button:hover {
    background-color: var(--accent-primary, #D92960);
    color: white;
    border-color: var(--accent-primary, #D92960);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(217, 41, 96, 0.2);
}

/* Dark Mode Styles */
body.dark-mode #schedule-page {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
}

body.dark-mode .card,
body.dark-mode .nav-container {
    background-color: #333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card-title,
body.dark-mode .schedule-title,
body.dark-mode .month-title,
body.dark-mode #selected-day-title {
    color: #e0e0e0;
}

body.dark-mode .calendar-weekdays,
body.dark-mode .session-time,
body.dark-mode .day-session-more,
body.dark-mode .placeholder-text,
body.dark-mode .list-date-header,
body.dark-mode #schedule-form .form-group label,
body.dark-mode .repeat-count #repeat-unit-label {
    color: #b0b0b0;
}

body.dark-mode .is-current-month {
    background-color: #3a3a3a;
}

body.dark-mode .is-current-month:hover {
    background-color: #444;
}

body.dark-mode .is-other-month {
    background-color: #333;
    color: #666;
}

body.dark-mode .is-selected {
    border-color: var(--accent-primary, #D92960);
    background-color: rgba(217, 41, 96, 0.2);
}

body.dark-mode .session-item,
body.dark-mode .subject-item,
body.dark-mode .subject-form,
body.dark-mode .placeholder-text {
    background-color: #3a3a3a;
}

body.dark-mode .modal-content {
    background-color: #333;
}

body.dark-mode .modal-title {
    color: #e0e0e0;
}

body.dark-mode .modal-body {
    color: #b0b0b0;
}

body.dark-mode .input-field,
body.dark-mode .color-picker {
    background-color: #444;
    border-color: #555;
    color: #e0e0e0;
}

body.dark-mode .input-field:focus {
    border-color: var(--accent-primary, #D92960);
    box-shadow: 0 0 0 2px rgba(217, 41, 96, 0.3);
}

body.dark-mode .btn-secondary {
    background-color: #444;
    color: #e0e0e0;
}

body.dark-mode .btn-secondary:hover {
    background-color: #555;
}

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

body.dark-mode .btn-icon:hover {
    background-color: #444;
}

body.dark-mode .nav-button {
    color: #e0e0e0; /* Texto mais claro para melhor visibilidade */
}

body.dark-mode .nav-button:hover {
    background-color: #444;
    color: #e0e0e0;
}

body.dark-mode .nav-button.active {
    background-color: var(--accent-primary, #D92960);
    color: white;
}

body.dark-mode .back-button {
    background-color: var(--bg-tertiary, #2d3748);
    border-color: var(--border-color-dark, #4a5568);
    color: #b0b0b0;
}

body.dark-mode .back-button:hover {
    background-color: var(--accent-primary, #D92960);
    color: white;
    border-color: var(--accent-primary, #D92960);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    #schedule-page {
        padding: 15px;
        height: calc(100vh - 60px);
    }

    .schedule-container {
        padding-right: 5px;
        overflow-y: auto; /* Allow scroll but hide scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    .schedule-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }

    /* Schedule Modal Mobile Adjustments */
    .schedule-modal {
        max-width: 95vw !important;
        width: 95vw !important;
        padding: 1rem;
        margin: 0 auto;
        /* Usar viewport dinâmico para evitar cortes em iOS/Android */
        height: calc(96dvh - 2rem);
        max-height: calc(96dvh - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* garante conteúdo no topo e espaço para os botões abaixo */
        overflow: hidden; /* o conteúdo interno será rolável */
        border-radius: 12px;
    }

    .schedule-modal .confirm-modal-title {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    .schedule-modal-content {
        margin-bottom: 0.75rem !important;
        padding: 0;
        flex: 1; /* ocupa o espaço disponível acima dos botões */
        overflow-y: auto; /* rolagem suave do formulário */
        -webkit-overflow-scrolling: touch;
        padding-right: 4px; /* espaço para scrollbar sem empurrar layout */
    }

    .schedule-modal .confirm-modal-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-top: auto; /* empurra para o final do modal */
        padding-top: 0.75rem;
        border-top: 1px solid #e0e0e0;
        position: static; /* evita centralização vertical indesejada */
        width: 100%;
        background: transparent; /* sem gradiente; mantém leve */
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .schedule-modal .confirm-modal-button {
        width: 100%;
        padding: 0.875rem;
        font-size: 1rem;
        border-radius: 8px;
    }

    /* Confirm Modal Mobile Adjustments */
    .confirm-modal {
        max-width: 90vw !important;
        width: 90vw !important;
        padding: 1.5rem 1rem;
        margin: 0 auto;
    }

    .confirm-modal .confirm-modal-title {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }

    .confirm-modal .confirm-modal-message {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 1.5rem;
    }

    .confirm-modal .confirm-modal-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .confirm-modal .confirm-modal-button {
        width: 100%;
        padding: 0.875rem;
        font-size: 1rem;
        border-radius: 8px;
    }

    /* Form adjustments for mobile */
    #schedule-form {
        display: flex;
        flex-direction: column;
    gap: 0.9rem; /* diminuir levemente espaçamento no mobile */
    }

    .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .form-group {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        min-height: 44px; /* alvo de toque confortável */
        padding: 0.8rem;
        font-size: 1rem;
        border-radius: 10px;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }

    .chat-selector-container {
        width: 100% !important;
        position: relative; /* base para dropdown interno */
    }

    .selected-chat-display {
        width: 100% !important;
        box-sizing: border-box;
    }

    #repeat-options {
        margin-top: 0.5rem;
    }

    #repeat-options .form-row {
        gap: 0.75rem !important;
    }

    #schedule-form .form-group {
        margin-bottom: 1rem;
    }

    #schedule-form .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    #schedule-form .form-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .input-field {
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 0.5rem;
    }

    /* Repeat controls mobile adjustments */
    .repeat-controls {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .repeat-count {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .repeat-count #repeat-count-input {
        max-width: 100px;
    }

    /* Chat selector mobile adjustments */
    .chat-selector-container {
        width: 100%;
    }

    .chat-search-container #chat-search {
        padding: 0.75rem 40px 0.75rem 50px;
        font-size: 1rem;
    }

    .chat-dropdown {
        max-height: 240px; /* um pouco mais para evitar rolagem excessiva */
        border-radius: 0.5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .selected-chat-display {
        padding: 0.75rem;
        min-height: 50px;
        border-radius: 0.5rem;
        min-height: 48px; /* garantir altura confortável */
    }

    .selected-chat-display .chat-item-title {
        font-size: 0.9rem;
    }

    .selected-chat-display .chat-item-date {
        font-size: 0.8rem;
    }

    /* Hide title on mobile to save space */
    .schedule-title {
        display: none;
    }

    /* Navigation and Actions - Stack vertically on mobile */
    .nav-actions-container {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
        margin-top: 70px;
    }

    /* Navigation buttons - smaller on mobile */
    .nav-container {
        width: 100%;
        justify-content: center;
    }

    .nav-button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .nav-button .material-symbols-outlined {
        font-size: 1.1rem;
    }

    /* Main actions - full width on mobile */
    .main-actions {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .main-actions .btn {
        flex: 1;
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    .main-actions .btn .material-symbols-outlined {
        font-size: 1.1rem;
    }

    /* Calendar adjustments for mobile */
    .calendar-grid {
        gap: 0.25rem;
        overflow: hidden;
    }

    .calendar-day {
        height: 3.5rem;
        padding: 0.2rem;
        min-width: 0;
        overflow: hidden;
    }

    .day-number {
        font-size: 0.8rem;
        width: 1.5rem;
        height: 1.5rem;
    }

    .day-session-item {
        font-size: 0.65rem;
        padding: 1px 3px;
    }

    .day-session-more {
        font-size: 0.65rem;
    }

    /* Calendar header */
    .calendar-header {
        margin-bottom: 1rem;
    }

    .month-title {
        font-size: 1.1rem;
    }

    /* Calendar weekdays */
    .calendar-weekdays {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    /* Selected day details */
    .selected-day-details {
        margin-top: 1.5rem;
    }

    #selected-day-title {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    /* Session and subject items */
    .session-item, .subject-item {
        padding: 0.6rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .session-info {
        width: 100%;
        gap: 0.8rem;
    }

    .session-color-bar {
        width: 0.4rem;
        height: 2.5rem;
    }

    .session-name {
        font-size: 0.9rem;
    }

    .session-time {
        font-size: 0.8rem;
    }

    .session-actions, .subject-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Card adjustments */
    .card {
        padding: 1rem;
        margin-bottom: 15px;
    }

    .card-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    /* Subject form */
    .subject-form {
        gap: 0.8rem;
    }

    .subject-form-actions {
        gap: 0.8rem;
    }

    /* List view adjustments */
    .list-date-group {
        margin-bottom: 1rem;
    }

    .list-date-header {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

    /* Placeholder text */
    .placeholder-text {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Back button adjustments */
    .back-button {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
        margin-bottom: 15px;
        background-color: var(--bg-secondary, #f8f9fa);
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: var(--border-radius-sm, 6px);
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    #schedule-page {
        padding: 10px;
    }

    .nav-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .main-actions .btn {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }

    .calendar-day {
        height: 3rem;
        padding: 0.15rem;
        min-width: 0;
    }

    .day-number {
        font-size: 0.75rem;
        width: 1.3rem;
        height: 1.3rem;
    }

    .day-session-item {
        font-size: 0.6rem;
    }

    .session-item, .subject-item {
        padding: 0.5rem;
    }

    .card {
        padding: 0.8rem;
    }

    .card-title {
        font-size: 1.2rem;
    }

    /* Schedule Modal Extra Small Mobile */
    .modal-content {
        max-width: 98vw;
        width: 98vw;
        padding: 1rem;
        margin: 0.5rem;
        max-height: 95vh;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .modal-header {
        margin-bottom: 1rem;
    }

    .modal-body {
        margin-bottom: 1rem;
    }

    .modal-actions {
        margin-top: 1rem;
    }

    .modal-actions .btn {
        padding: 0.6rem;
        font-size: 0.9rem;
    }

    #schedule-form .form-group label {
        font-size: 0.85rem;
    }

    .input-field {
        padding: 0.6rem;
        font-size: 0.9rem;
    }

    .chat-search-container #chat-search {
        padding: 0.6rem 35px 0.6rem 45px;
        font-size: 0.9rem;
    }

    .chat-search-container .search-icon {
        font-size: 18px;
        right: 10px;
    }

    .selected-chat-display {
        padding: 0.6rem;
        min-height: 45px;
    }

    .selected-chat-display .chat-item-title {
        font-size: 0.85rem;
    }

    .selected-chat-display .chat-item-date {
        font-size: 0.75rem;
    }

    .chat-dropdown {
        max-height: 200px; /* manter confortável em telas muito pequenas */
    }


/* Dark mode tweaks for mobile sticky footer in schedule modal */
@media (max-width: 768px) {
    body.dark-mode .schedule-modal .confirm-modal-buttons {
        border-top-color: #444;
        background: transparent;
    }
}
    .repeat-count #repeat-count-input {
        max-width: 80px;
        font-size: 0.9rem;
    }

    .repeat-count #repeat-unit-label {
        font-size: 0.85rem;
    }
}
/* Help Pages Styles */

/* Main help page container */
#help-page {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Help detail pages containers */
#help-reviews-page,
#help-schedule-page,
#help-chat-page,
#help-timer-page,
#help-resolver-page,
#help-courses-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.help-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: calc(100vh - 80px);
}

.help-header {
    text-align: center;
    margin-bottom: 3rem;
}

.help-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.help-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
}

.help-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.help-section-card {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.help-section-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.help-section-card:hover .help-arrow {
    transform: translateX(5px);
}

.help-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.help-icon .material-symbols-outlined {
    font-size: 2rem;
    color: white;
}

.help-section-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.help-section-card p {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.help-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

/* Help Detail Pages */
.help-detail-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    min-height: calc(100vh - 80px);
}

.help-content {
    margin-top: 70px
}

.help-content h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1rem;
}

.help-section {
    margin-bottom: 2.5rem;
}

.help-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-section h2::before {
    content: '';
    width: 4px;
    height: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.help-section p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.help-section ol,
.help-section ul {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.help-section li {
    margin-bottom: 0.5rem;
}

.help-section strong {
    color: var(--text-primary);
    font-weight: 600;
}

.help-tips {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tip {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.tip .material-symbols-outlined {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 0.1rem;
}

.tip p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.back-button:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.back-button .material-symbols-outlined {
    font-size: 1.2rem;
}

/* Dark mode adjustments */
body.dark-mode .help-section-card {
    background: var(--card-background-dark);
    border-color: var(--border-color-dark);
}

body.dark-mode .help-section-card:hover {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

body.dark-mode .tip {
    background: var(--background-secondary-dark);
}

body.dark-mode .back-button {
    background-color: var(--bg-tertiary, #2d3748);
    border-color: var(--border-color-dark);
    color: var(--text-primary-dark);
}

body.dark-mode .back-button:hover {
    background: var(--primary-color);
    color: white;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .help-container,
    .help-detail-container {
        padding: 1rem;
    }

    .help-header h1 {
        font-size: 2rem;
    }

    .help-sections {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .help-section-card {
        padding: 1.25rem;
    }

    .help-content h1 {
        font-size: 1.8rem;
    }

    .help-section h2 {
        font-size: 1.3rem;
    }

    .help-tips {
        gap: 0.75rem;
    }

    .tip {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .tip .material-symbols-outlined {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .help-container,
    .help-detail-container {
        padding: 0.75rem;
    }

    .help-header {
        margin-bottom: 2rem;
        margin-top: 70px;
    }

    .help-header h1 {
        font-size: 1.75rem;
    }

    .help-section-card {
        padding: 1rem;
    }

    .help-icon {
        width: 50px;
        height: 50px;
    }

    .help-icon .material-symbols-outlined {
        font-size: 1.75rem;
    }
}

/* Styles for the new Help Reviews Page */
.help-content .help-title-icon {
    font-size: 2rem;
    vertical-align: bottom;
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.card-states-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.card-state {
    background: var(--background-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-state:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}


.card-state .material-symbols-outlined {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 50%;
    color: white;
}

.card-state.new .material-symbols-outlined { background-color: #6c757d; }
.card-state.learning .material-symbols-outlined { background-color: #fd7e14; }
.card-state.review .material-symbols-outlined { background-color: #28a745; }
.card-state.relearning .material-symbols-outlined { background-color: #dc3545; }


.card-state h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.card-state p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}


.feedback-buttons-explanation {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-btn-exp {
    padding: 1rem;
    border-radius: 8px;
    border-left: 5px solid;
}
.feedback-btn-exp .btn-example {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    color: white;
}
.feedback-btn-exp p {
    margin: 0;
    font-size: 0.95rem;
}

.feedback-btn-exp.again { border-color: #dc3545; background-color: rgba(220, 53, 69, 0.05); }
.feedback-btn-exp.again .btn-example { background-color: #dc3545; }
.feedback-btn-exp.hard { border-color: #fd7e14; background-color: rgba(253, 126, 20, 0.05); }
.feedback-btn-exp.hard .btn-example { background-color: #fd7e14; }
.feedback-btn-exp.good { border-color: #28a745; background-color: rgba(40, 167, 69, 0.05); }
.feedback-btn-exp.good .btn-example { background-color: #28a745; }
.feedback-btn-exp.easy { border-color: #007bff; background-color: rgba(0, 123, 255, 0.05); }
.feedback-btn-exp.easy .btn-example { background-color: #007bff; }

.timeline {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 1.5rem;
    position: relative;
    border-left: 2px solid var(--border-color);
}

.timeline li {
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.timeline li::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: 0.2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 3px solid var(--card-background);
}

.timeline li .interval-tag {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-secondary);
    background-color: var(--background-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

/* Dark Mode */
body.dark-mode .card-state {
    background-color: var(--background-secondary-dark);
    border-color: var(--border-color-dark);
}
body.dark-mode .card-state:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

body.dark-mode .feedback-btn-exp.again { background-color: rgba(220, 53, 69, 0.15); }
body.dark-mode .feedback-btn-exp.hard { background-color: rgba(253, 126, 20, 0.15); }
body.dark-mode .feedback-btn-exp.good { background-color: rgba(40, 167, 69, 0.15); }
body.dark-mode .feedback-btn-exp.easy { background-color: rgba(0, 123, 255, 0.15); }

body.dark-mode .timeline { border-left-color: var(--border-color-dark); }
body.dark-mode .timeline li::before { border-color: var(--card-background-dark); }
body.dark-mode .timeline li .interval-tag { background-color: var(--background-secondary-dark); }

.onboarding-page {
  position: relative;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.onboarding-hero-bg { position: absolute; inset: 0; pointer-events: none; }

.onboarding-hero-bg::before,
.onboarding-hero-bg::after {
  content: "";
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle at center, rgba(217,41,96,0.18), transparent 60%);
  filter: blur(40px);
  animation: float 12s ease-in-out infinite;
}
.onboarding-hero-bg::before { top: -20vmax; left: -20vmax; }
.onboarding-hero-bg::after { bottom: -25vmax; right: -25vmax; background: radial-gradient(circle at center, rgba(41,44,109,0.18), transparent 60%); animation-delay: -6s; }

@keyframes float { 0%, 100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }

.onboarding-container {
  position: relative;
  z-index: 1;
  width: min(920px, 92vw);
  background: var(--bg-elevated, #fff);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.onboarding-header { text-align: center; margin-bottom: 16px; }
.onboarding-logo { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(45deg, #292C6D, #D92960); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; color: #fff; }
.onboarding-title { margin: 8px 0 6px; font-weight: 700; letter-spacing: -0.5px; }
.onboarding-subtitle { margin: 0; color: var(--text-secondary, #666); }

.onboarding-slides { position: relative; }
.onboarding-slide { display: none; animation: slideIn .35s ease; }
.onboarding-slide.active { display: block; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

.onboarding-step-title { margin: 0 0 6px; text-align: center; }
.onboarding-step-text { margin: 0 0 16px; color: var(--text-secondary, #666); text-align: center; }

.onboarding-field { display: flex; gap: 10px; justify-content: center; }
.onboarding-input { width: min(560px, 92%); padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: var(--bg, #fff); outline: none; transition: box-shadow .2s ease, border-color .2s ease; }
.onboarding-input:focus, .onboarding-textarea:focus { border-color: #D92960; box-shadow: 0 0 0 4px rgba(217,41,96,.12); }
.onboarding-textarea { width: min(720px, 92%); padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: var(--bg, #fff); resize: vertical; min-height: 140px; }

.onboarding-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px auto 0; max-width: 720px; }
.onboarding-chip { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: #fff; cursor: pointer; transition: all .2s ease; }
.onboarding-chip:hover { transform: translateY(-1px); }
.onboarding-chip.selected { background: linear-gradient(45deg, #292C6D, #D92960); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(217,41,96,.22); }

.onboarding-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.onboarding-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: none; cursor: pointer; transition: transform .1s ease, box-shadow .2s ease, opacity .2s ease; }
.onboarding-button.primary { background: linear-gradient(45deg, #292C6D, #D92960); color: #fff; box-shadow: 0 8px 18px rgba(217,41,96,.25); }
.onboarding-button.ghost { background: transparent; color: var(--text-primary, #333); border: 1px solid rgba(0,0,0,.12); }
.onboarding-button:active { transform: translateY(1px); box-shadow: none; }

@media (max-width: 720px) {
  .onboarding-container { padding: 24px 14px; border-radius: 16px; }
}

body.dark-mode .onboarding-container { background: #1f1f1f; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
body.dark-mode .onboarding-input, body.dark-mode .onboarding-textarea { background: #101010; color: #efefef; border-color: rgba(255,255,255,.12); }
body.dark-mode .onboarding-chip { background: #151515; color: #eaeaea; border-color: rgba(255,255,255,.12); }



/* Accessibility Utilities */

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



/* General Utility Styles */

/* Disabled state */
.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed; /* Indicate non-interactive */
}

/* Non-selectable text utility */
.u-noselect {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Remove mobile tap highlight */
.u-notaphighlight {
     outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Apply non-selectable to specific elements from style4.css */
/* Consider applying the .u-noselect class in HTML instead */
.chat-suggestions h3,
.suggestion-title,
.suggestion-desc,
.suggestion-icon .material-symbols-outlined {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* pointer-events: none; /* Be careful with pointer-events */
}

/* Remove tap highlight from specific elements */
.chat-suggestions h3,
.suggestion-btn,
#media-toggle-button,
#send-button {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Ensure buttons remain interactive */
/* .suggestion-btn, #media-toggle-button, #send-button {
    pointer-events: auto; /* Already default for buttons */
/* } */


/* Hidden utility class (from style5.css) */
/* Note: Consider replacing usage with a more standard name like .hidden or .d-none */
.esconde {
    display: none !important; /* Use !important to ensure override */
    /* Or use visibility: hidden !important; if layout space should be preserved */
}


/* Screen-reader-only helper */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Spacing utilities (minimal set used to replace inline styles) */
.mb-20 { margin-bottom: 20px !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* Interaction helpers */
.clickable { cursor: pointer !important; }

/* Body no scroll (used by modals) */
body.no-scroll { overflow: hidden !important; }


/* Regra .active-view removida para evitar conflitos com display específico das páginas */

/* === Additional utilities to replace inline styles === */
/* Spacing */
.m-0 { margin: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mr-5 { margin-right: 5px !important; }
.mr-10 { margin-right: 10px !important; }
.mb-0 { margin-bottom: 0 !important; }

/* Gap helpers */
.gap-10 { gap: 10px !important; }
.gap-12 { gap: 12px !important; }
.gap-8 { gap: 8px !important; }

/* Display & layout */
.inline-flex { display: inline-flex !important; }
.flex { display: flex !important; }
.flex-row { display: flex !important; flex-direction: row !important; }
.flex-column { display: flex !important; flex-direction: column !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.centered-column { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }

/* Sizing */
.min-h-40 { min-height: 40px !important; }
.min-h-320 { min-height: 320px !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-800 { max-width: 800px !important; }
.max-h-60vh { max-height: 60vh !important; }
.overflow-auto { overflow: auto !important; }

/* Typography & color */
.text-center { text-align: center !important; }
.fs-09 { font-size: 0.9em !important; }
.fs-11 { font-size: 1.1em !important; }
.va-text-bottom { vertical-align: text-bottom !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-accent { color: var(--accent-primary) !important; }
.text-brand-primary { color: var(--brand-primary) !important; }
.fw-bold { font-weight: bold !important; }

/* Background helpers */
.bg-light { background-color: #e9ecef !important; }
.bg-muted { background-color: var(--text-secondary) !important; }

/* Other */
.resize-vertical { resize: vertical !important; }

/* Base Styles */

  /* Layout Styles */

  /* Component Styles */ /* ADDED */ /* Novo player de áudio */

  /* DocChat Styles */ /* ADDED: Offline screen component */ /* ADDED: Pomodoro technique component */ /* ADDED: Presets component */ /* ADDED: Quick chat component */ /* Reusable loading overlay */ /* ADDED: Recommendations component */ /* PWA update banner */ /* Alert modal (replaces inline styles in showModal) */ /* Added from style8 */ /* Added from style8 */ /* Added from style9 */ /* Added from style4 */

  /* Page-Specific Styles */ /* Portfolio style for welcome page */ /* Added from style9 */ /* Added for reviews page */ /* Added for decks page */

  /* Utility Styles */

  /* All styles modularized */