/**
 * 文件路径: /home/ubuntu/talktalk_web/css/notebook-responsive.css
 * 功能用途: 笔记本相关响应式适配（移动端/平板）及暗色主题覆盖
 * 版本: 1.0
 * 说明: 从 notebook.css 拆分
 */

/* 移动端竖屏适配 - 建议提示框 */
@media (max-width: 480px) {
    .chat-suggestion-box {
        max-width: calc(100% - 24px);
        width: auto;
        margin: 6px 12px;
        font-size: 0.8em;
        padding: 6px 10px;
    }
}

/* 移动端适配 - 反馈评价框 */
@media (max-width: 480px) {
    .chat-feedback-evaluation-box {
        max-width: calc(100% - 24px);
        width: auto;
        margin: 6px 12px;
        font-size: 0.8em;
        padding: 6px 10px;
    }
}

/* 移动端适配词汇卡片 */
@media (max-width: 480px) {
    .vocab-suggestion-card {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .notebook-card {
        padding: 12px;
    }
    
    .notebook-card.select-mode {
        padding-left: 32px;
    }
    
    .notebook-toolbar-unified {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .notebook-filters-row {
        width: 100%;
        justify-content: center;
    }
    
    .notebook-filter-group {
        flex: 1;
        min-width: 90px;
        justify-content: center;
    }
    
    .notebook-filter-group select {
        min-width: 60px;
    }
    
    .notebook-actions-row {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   词性颜色定义 - 暗色模式
   ======================================== */

[data-theme="dark"] .vocab-pos.pos-noun {
    background: rgba(3, 169, 244, 0.2);
    color: #81D4FA;
}

[data-theme="dark"] .vocab-pos.pos-verb {
    background: rgba(76, 175, 80, 0.2);
    color: #A5D6A7;
}

[data-theme="dark"] .vocab-pos.pos-adj {
    background: rgba(255, 152, 0, 0.2);
    color: #FFCC80;
}

[data-theme="dark"] .vocab-pos.pos-adv {
    background: rgba(233, 30, 99, 0.2);
    color: #F48FB1;
}

[data-theme="dark"] .vocab-pos.pos-prep {
    background: rgba(156, 39, 176, 0.2);
    color: #CE93D8;
}

[data-theme="dark"] .vocab-pos.pos-other {
    background: rgba(156, 39, 176, 0.2);
    color: #E1BEE7;
}

/* ========================================
   暗色主题适配
   ======================================== */

.dark-theme .skeleton-text,
[data-theme="dark"] .skeleton-text {
    /* 增加对比度：提高不透明度 */
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.15) 25%, 
        rgba(255, 255, 255, 0.25) 50%, 
        rgba(255, 255, 255, 0.15) 75%);
    background-size: 200% 100%;
}

.dark-theme .feedback-section,
[data-theme="dark"] .feedback-section {
    background: rgba(255, 255, 255, 0.12); /* 增加背景对比度 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme .streaming-text,
[data-theme="dark"] .streaming-text {
    color: var(--text-color, #e0e0e0);
}

.dark-theme .typing-cursor,
[data-theme="dark"] .typing-cursor {
    background: var(--primary-color, #66BB6A);
}

/* Enhanced Dark Mode Contrast for Feedback Sections */
[data-theme="dark"] .feedback-vocab-suggestion-section {
    background: rgba(156, 39, 176, 0.25) !important;
    border: 1px solid rgba(156, 39, 176, 0.4);
}

[data-theme="dark"] .feedback-suggested-sentences-section {
    background: rgba(33, 150, 243, 0.25) !important;
    border: 1px solid rgba(33, 150, 243, 0.4);
}

[data-theme="dark"] .feedback-grammar-suggestion-section {
    background: rgba(96, 125, 139, 0.25) !important;
    border: 1px solid rgba(96, 125, 139, 0.4);
}

[data-theme="dark"] .feedback-translation-section {
    background: rgba(103, 58, 183, 0.25) !important;
    border: 1px solid rgba(103, 58, 183, 0.4);
}

[data-theme="dark"] .feedback-error-check-section {
    background: rgba(244, 67, 54, 0.25) !important;
    border: 1px solid rgba(244, 67, 54, 0.4);
}

[data-theme="dark"] .feedback-comment-section {
    background: rgba(255, 152, 0, 0.25) !important;
    border: 1px solid rgba(255, 152, 0, 0.4);
}

/* Ensure text readability in dark mode */
[data-theme="dark"] .vocab-word-main {
    color: #E1BEE7; /* Light Purple */
}

[data-theme="dark"] .vocab-meaning-text,
[data-theme="dark"] .grammar-meaning,
[data-theme="dark"] .suggested-sentence-item,
[data-theme="dark"] .content-feedback-text,
[data-theme="dark"] .ai-original-text {
    color: #ECEFF1;
}

[data-theme="dark"] .vocab-phonetic,
[data-theme="dark"] .vocab-pos,
[data-theme="dark"] .grammar-usage,
[data-theme="dark"] .ai-translation-text {
    color: #B0BEC5;
}

[data-theme="dark"] .vocab-suggestion-card {
    background: rgba(46, 125, 50, 0.2); /* Light Green tint */
    border: 1px solid rgba(129, 199, 132, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .suggested-sentence-item {
    background: rgba(33, 150, 243, 0.2);
    border-left-color: #64B5F6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .sentence-level.level-beginner {
    background: rgba(76, 175, 80, 0.3);
    color: #81C784;
    border-color: rgba(76, 175, 80, 0.5);
}

[data-theme="dark"] .sentence-level.level-intermediate {
    background: rgba(255, 152, 0, 0.3);
    color: #FFB74D;
    border-color: rgba(255, 152, 0, 0.5);
}

[data-theme="dark"] .sentence-level.level-advanced {
    background: rgba(244, 67, 54, 0.3);
    color: #EF5350;
    border-color: rgba(244, 67, 54, 0.5);
}

[data-theme="dark"] .ai-original-text {
    background: rgba(103, 58, 183, 0.15);
    border-left-color: #9575CD;
    color: #ECEFF1; /* Ensure text is light */
}

[data-theme="dark"] .ai-translation-text {
    color: #B0BEC5; /* Ensure translation text is light grey */
}

[data-theme="dark"] .content-feedback-text {
    color: #ECEFF1; /* Ensure feedback text is light */
}

[data-theme="dark"] .grammar-suggestion-block {
    background: rgba(96, 125, 139, 0.15);
    border-left-color: #90A4AE;
}

[data-theme="dark"] .grammar-pattern {
    color: #CFD8DC;
}

/* Dark Mode Header Colors - High Contrast */
[data-theme="dark"] .feedback-translation-section .feedback-section-header {
    color: #B39DDB; /* Deep Purple 200 */
}

[data-theme="dark"] .feedback-error-check-section .feedback-section-header {
    color: #EF9A9A; /* Red 200 */
}

[data-theme="dark"] .feedback-vocab-suggestion-section .feedback-section-header {
    color: #CE93D8; /* Purple 200 */
}

[data-theme="dark"] .feedback-grammar-suggestion-section .feedback-section-header {
    color: #90CAF9; /* Blue 200 */
}

[data-theme="dark"] .feedback-comment-section .feedback-section-header {
    color: #FFCC80; /* Orange 200 */
}

[data-theme="dark"] .feedback-suggested-sentences-section .feedback-section-header {
    color: #81D4FA; /* Light Blue 200 */
}