/* --- 1. 基础变量与全局重置 --- */
:root {
    --primary: #007aff;
    --primary-hover: #005ecb;
    --primary-light: #eff6ff;
    --success: #10b981;
    --border: #e2e8f0;
    --text-main: #1e293b;
    --text-gray: #64748b;
    --bg-light: #f8fafc;
    --radius-lg: 12px;
    --radius-md: 8px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PC端隐藏侧边栏下载区 */
#result-area-mobile {
    display: none !important;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    outline: 0; 
    -webkit-tap-highlight-color: transparent; 
}

body { 
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; 
    background: #fff; 
    height: 100vh; 
    
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    color: var(--text-main);
    line-height: 1.5;
}

header.tf-h-root { 
    height: 56px; 
    border-bottom: 1px solid var(--border); 
    background: #fff;
    z-index: 100;
}

/* --- 2. 主布局结构 --- */
.layout { 
    display: flex; 
    flex: 1; 
    overflow: hidden; 
    position: relative; 
}

/* 第一栏：编辑器 */
.editor-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-right: 1px solid var(--border);
    min-width: 0;
    position: relative;
    z-index: 1;
}

.toolbar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 16px; 
    min-height: 40px; 
    flex-wrap: wrap; 
    gap: 8px; 
}

.tool-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-tool { 
    background: var(--bg-light); 
    border: 1px solid transparent; 
    padding: 8px 14px; 
    border-radius: var(--radius-md); 
    cursor: pointer; 
    font-size: 0.85rem; 
    transition: var(--transition); 
    min-height: 36px;
}
.btn-tool:hover { background: #f1f5f9; border-color: #cbd5e1; }

.textarea-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

textarea { 
    flex: 1; 
    border: none; 
    font-size: 1.1rem; 
    line-height: 1.7; 
    resize: none; 
    padding: 10px 0; 
}

/* AI标签功能控件 - 桌面端（文本框内部左下方） */
.ai-tagging-controls {
    position: absolute;
    bottom: 40px;
    left: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.character-names-input,
.narrator-name-input {
    width: 200px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    transition: var(--transition);
}

.character-names-input:focus,
.narrator-name-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.ai-tagging-btn {
    width: 100px;
    height: 36px;
    padding: 0 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.ai-tagging-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3);
}

.ai-tagging-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 全屏按钮 - 文本框右上角 */
.fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
    transition: var(--transition);
    opacity: 0.7;
}

.fullscreen-btn:hover {
    opacity: 1;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 全屏模式 */
.textarea-wrapper.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.textarea-wrapper.fullscreen textarea {
    flex: 1;
    min-height: 0; /* 确保flex布局正常工作 */
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative; /* 确保不会遮挡按钮 */
    z-index: 1; /* 低于按钮 */
}

/* 全屏模式下，全屏按钮需要最高的z-index，确保不被任何元素遮挡 */
.textarea-wrapper.fullscreen .fullscreen-btn {
    z-index: 2147483647 !important; /* 使用最大z-index值（32位整数最大值）确保绝对在最上层 */
    position: fixed !important;
    top: 56px !important; /* 继续往下移动，避免与顶部元素重叠 */
    right: 24px !important;
    opacity: 1 !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; /* 更强的阴影，更明显 */
    width: 44px !important; /* 稍微大一点，更容易点击 */
    height: 44px !important;
    font-size: 1.4rem !important;
    pointer-events: auto !important; /* 确保可以点击 */
    cursor: pointer !important;
    /* 确保按钮在所有情况下都可见 */
    transform: translateZ(0) !important; /* 创建新的层叠上下文 */
    will-change: transform !important; /* 优化渲染性能 */
    isolation: isolate !important; /* 创建新的层叠上下文，隔离其他元素 */
}

/* 全屏模式下，AI控件需要调整位置，避免与按钮重叠 */
.textarea-wrapper.fullscreen .ai-tagging-controls {
    position: absolute !important;
    bottom: 60px !important;
    left: 24px !important;
    z-index: 9998 !important;
}

/* 移动端全屏模式优化 */
@media (max-width: 900px) {
    .textarea-wrapper.fullscreen {
        padding: 16px;
    }
    
    .textarea-wrapper.fullscreen textarea {
        padding: 16px;
        font-size: 16px !important; /* 移动端全屏时保持16px字体 */
        flex: 1 !important;
        min-height: 0 !important; /* 确保flex布局正常工作 */
    }
    
    /* 全屏模式下，字符计数器需要调整 */
    .textarea-wrapper.fullscreen + .char-counter {
        display: none; /* 全屏模式下隐藏字符计数器，节省空间 */
    }
    
    /* 全屏模式下，AI控件也需要适配 */
    .textarea-wrapper.fullscreen .ai-tagging-controls {
        position: relative !important; /* 移动端全屏使用相对定位 */
        bottom: auto !important;
        left: auto !important;
        margin-top: 12px;
        margin-bottom: 0;
        width: 100% !important;
        flex-shrink: 0; /* 防止被压缩 */
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        /* 移动端垂直布局 */
        flex-direction: column !important;
        gap: 10px !important;
        z-index: auto !important;
    }
    
    /* 移动端全屏模式下，输入框和按钮样式 */
    .textarea-wrapper.fullscreen .character-names-input,
    .textarea-wrapper.fullscreen .narrator-name-input {
        width: 100% !important;
        flex: 1;
        font-size: 16px !important; /* 16px避免iOS自动缩放 */
        height: 44px !important; /* 触摸友好高度 */
        padding: 0 14px !important;
        min-height: 44px;
    }
    
    .textarea-wrapper.fullscreen .ai-tagging-btn {
        width: 100% !important;
        min-width: 100% !important;
        flex-shrink: 0;
        font-size: 15px !important;
        height: 44px !important;
        padding: 0 16px !important;
        min-height: 44px;
    }
    
    /* 全屏模式下，全屏按钮需要更明显且不被遮挡 */
    .textarea-wrapper.fullscreen .fullscreen-btn {
        width: 48px !important; /* 移动端更大，更容易点击 */
        height: 48px !important;
        font-size: 1.5rem !important;
        top: 48px !important; /* 继续往下移动，避免与顶部元素重叠 */
        right: 16px !important;
        z-index: 2147483647 !important; /* 使用最大z-index值确保绝对在最上层 */
        opacity: 1 !important;
        background: #fff !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; /* 更强的阴影，更明显 */
        pointer-events: auto !important; /* 确保可以点击 */
        cursor: pointer !important;
        transform: translateZ(0) !important; /* 创建新的层叠上下文 */
        isolation: isolate !important; /* 创建新的层叠上下文，隔离其他元素 */
    }
}

/* AI提示信息 */
.ai-message {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s;
    max-width: 90%;
    word-wrap: break-word;
}

/* 全屏模式下，AI提示信息不应该遮挡全屏按钮 */
.textarea-wrapper.fullscreen ~ .ai-message,
body:has(.textarea-wrapper.fullscreen) .ai-message {
    z-index: 999998 !important; /* 低于全屏按钮 */
}

.ai-message-info {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.ai-message-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.ai-message-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.ai-retry-btn {
    margin-left: 12px;
    padding: 4px 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.ai-retry-btn:hover {
    background: var(--primary-hover);
}

/* AI Tooltip */
.ai-tooltip {
    position: fixed;
    background: #1e293b;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 400px;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    white-space: pre-line;
}

/* 全屏模式下，Tooltip不应该遮挡全屏按钮 */
.textarea-wrapper.fullscreen ~ .ai-tooltip,
body:has(.textarea-wrapper.fullscreen) .ai-tooltip {
    z-index: 999998 !important; /* 低于全屏按钮 */
}

.ai-tooltip::before {
    content: '';
    position: absolute;
    border: 6px solid transparent;
    border-top-color: #1e293b;
    bottom: -12px;
    left: 20px;
}

.char-counter { 
    font-size: 0.8rem; 
    color: var(--text-gray); 
    text-align: right; 
    padding-top: 8px; 
}

/* --- 3. 第二栏：主播库 (PC端绝对定位) --- */
.voice-browser {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 420px;
    width: 0;
    opacity: 0;
    border-right: 1px solid var(--border);
    transition: width 0.3s ease, opacity 0.3s;
    display: flex;
    flex-direction: column;
    background: #fff;
    z-index: 1000;
    overflow: hidden;
}

.voice-browser.open { 
    width: 420px; 
    opacity: 1; 
}

.browser-nav { 
    padding: 16px 20px; 
    border-bottom: 1px solid var(--border); 
    flex-shrink: 0; 
}

.nav-row { display: flex; align-items: center; gap: 12px; }
.tier-1 { justify-content: space-between; border-bottom: 1px solid var(--bg-light); margin-bottom: 2px; }
.tier-2 { flex-wrap: wrap; padding: 4px 0; }

.tab-item, .country-tag, .gender-tag, .btn-collapse {
    border: none!important; 
    background: none!important; 
    outline: none!important;
    cursor: pointer; 
    color: var(--text-gray); 
    font-size: 0.85rem; 
    padding: 4px 0;
    border-bottom: 2px solid transparent!important; 
    transition: var(--transition);
}

.tab-item.active, .country-tag.active, .gender-tag.active { 
    color: var(--primary)!important; 
    font-weight: 700; 
    border-bottom-color: var(--primary)!important; 
}

.voice-scroll-area { 
    flex: 1; 
    overflow-y: auto; 
    padding: 12px; 
    background: var(--bg-light); 
}

.voice-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); 
    gap: 12px; 
}

.voice-card { 
    background: #fff; 
    border: 1px solid var(--border); 
    border-radius: var(--radius-lg); 
    padding: 12px; 
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    transition: var(--transition);
}

.voice-card.active { border-color: var(--primary); background: var(--primary-light); }
.v-avatar { width: 40px; height: 40px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-right: 10px; flex-shrink: 0; }
.v-name { font-weight: 700; font-size: 0.85rem; }
.v-desc { font-size: 0.75rem; color: var(--text-gray); }

/* --- 4. 第三栏：设置面板 --- */
.settings-panel { 
    width: 420px; 
    display: flex; 
    flex-direction: column; 
    border-left: 1px solid var(--border); 
    background: #fff; 
    flex-shrink: 0;
    overflow: hidden;
}

.panel-sections-wrapper { 
    flex: 1; 
    overflow-y: auto; 
    padding: 24px; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}

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

.label { font-size: 1rem; font-weight: 600; color: var(--text-main); }

.active-voice-card { 
    display: flex; 
    align-items: center; 
    background: var(--bg-light); 
    padding: 15px; 
    border-radius: var(--radius-lg); 
}

.avatar-circle { width: 48px; height: 48px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 12px; }

.multi-voice-btn {
    margin-left: 20px;
    flex-shrink: 0;
    background: #fff;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.15);
}

.multi-voice-btn:hover {
    background: var(--primary-light);
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.25);
    transform: translateY(-1px);
}

.multi-voice-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
    font-weight: 700;
}

.multi-voice-btn.active:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.5);
}

textarea::placeholder {
    white-space: pre-line; /* 支持换行 */
    line-height: 1.6;
}

/* --- 【核心修复】情感磁贴与播放按钮 --- */
.emotion-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 8px; 
    margin-top: 10px;
}

.emo-tile { 
    background: #fff; 
    border: 1px solid var(--border); 
    border-radius: var(--radius-md); 
    height: 38px; 
    font-size: 0.8rem; 
    line-height: 1; /* 强制行高为1，防止文字下沉 */
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0 6px; 
    white-space: nowrap;
    overflow: hidden;
    transition: var(--transition);
}

.emo-tile.active { 
    border-color: var(--primary); 
    background: var(--primary-light); 
    color: var(--primary); 
    font-weight: 600; 
}

.emo-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9; 
    border: 1px solid var(--border); 
    border-radius: 4px;
    margin-left: 6px; 
    padding: 0 6px; 
    font-size: 0.7rem; 
    height: 24px; /* 固定高度确保在父盒子中垂直居中 */
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}

.emo-play:hover { 
    background: #e2e8f0; 
    border-color: #cbd5e1;
}

.emo-tile.active .emo-play {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* --- 5. 滑块与操作区 --- */
.slider-box { background: #fff; padding: 12px 0; }
.slider-header { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; }
.slider-row { display: flex; align-items: center; gap: 10px; }
.reset-btn { background: #f1f5f9; border: none; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; cursor: pointer; }

input[type=range] { flex: 1; height: 4px; -webkit-appearance: none; background: #cbd5e1; border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--primary); border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

.action-zone { padding: 20px 24px; border-top: 1px solid var(--border); background: #fff; }
.btn-primary-big { width: 100%; padding: 16px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-lg); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: var(--transition); }
.btn-primary-big:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* PC端顶部结果区 */
#result-area-desktop { display: none; align-items: center; gap: 10px; background: #fff; padding: 6px 12px; border-radius: 30px; }
#audio-player-desk { height: 36px; width: 150px; }
.btn-dl-inline { text-decoration: none; background: var(--success); color: #fff; padding: 6px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
#dl-subtitle-btn-desk{border: none;}
/* --- 6. 响应式：中等屏幕 (901px - 1200px) --- */
@media (min-width: 901px) and (max-width: 1200px) {
    .voice-browser, .voice-browser.open { width: 320px !important; right: 360px !important; }
    .settings-panel { width: 360px !important; }
    .voice-grid { grid-template-columns: repeat(2, 1fr) !important; }
    
    .emo-tile { height: 32px !important; font-size: 0.7rem !important; }
    .emo-play { height: 20px !important; margin-left: 4px !important; padding: 0 4px !important; }
}

/* --- 7. 响应式：移动端深度优化 (< 900px) --- */
@media (max-width: 900px) {
    body.drawer-open { position: fixed; width: 100%; height: 100%; display: block !important;  }

    .layout { display: flex; flex-direction: column; min-height:100dvh; overflow-y: auto; }

    /* 编辑器与25vh文本框 */
    .editor-zone { padding: 12px; border-bottom: 1px solid var(--border); border-right: none; flex: none; }
    .tool-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
    .btn-tool { padding: 8px 0; font-size: 0.75rem; flex-direction: column; min-height: 50px; }
    
    textarea { width: 100% !important; height: 25vh !important; border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 16px; flex: none; }

    /* 设置区适配 */
    .settings-panel { width: 100%; border-left: none; }
    .panel-sections-wrapper { padding: 16px; gap: 20px; }
    .emotion-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    .emo-tile { height: 42px !important; font-size: 0.85rem !important; }
    .emo-play { height: 28px !important; padding: 0 8px !important; }

    /* 底部抽屉主播列表 */
    .voice-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: none; opacity: 0; transition: opacity 0.3s; }
    .voice-mask.active { display: block; opacity: 0; }

    .voice-browser {
        position: fixed; left: 0; bottom: 0; top: auto !important; right: auto !important;
        width: 100% !important; height: 75vh !important; 
        background: #fff; z-index: 2001; border-radius: 20px 20px 0 0;
        transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex !important; opacity: 1 !important; box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
    }
    .voice-browser.open { transform: translateY(0) !important; }

    .drawer-handle { width: 40px; height: 5px; background: #ddd; border-radius: 3px; margin: 10px auto 5px; flex-shrink: 0; }
    .browser-nav { padding: 0 16px 12px; }
    .voice-grid { grid-template-columns: repeat(2, 1fr) !important; padding-bottom: 60px; }
    
    /* 移动端下载区 */
    #result-area-mobile {   display: block !important;margin-top: 12px; height:230px;}
    .btn-download-mob { border:none;display: block; width: 100%; text-align: center; background: var(--success); color: #fff; padding: 12px; border-radius: 10px; margin-top: 8px; text-decoration: none; font-weight: 600; }
    
    /* 移动端AI标签功能控件 - 文本框外部左下方 */
    .ai-tagging-controls {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 12px;
        width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 0;
        /* 移动端垂直布局 */
        flex-direction: column !important;
        gap: 10px;
    }
    
    .character-names-input,
    .narrator-name-input {
        width: 100% !important;
        flex: 1;
        /* 移动端字体和高度优化 */
        font-size: 16px !important; /* 16px避免iOS自动缩放 */
        height: 44px !important; /* 触摸友好高度 */
        padding: 0 14px !important; /* 增加内边距 */
        min-height: 44px;
    }
    
    .ai-tagging-btn {
        width: 100% !important; /* 全宽显示 */
        min-width: 100% !important;
        flex-shrink: 0;
        /* 移动端字体和高度优化 */
        font-size: 15px !important;
        height: 44px !important; /* 与输入框一致 */
        padding: 0 16px !important;
        min-height: 44px;
    }
    
    .fullscreen-btn {
        top: 5px;
        right: 5px;
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

/* 展开按钮样式 */
.btn-toggle { background: none !important; border: none !important; color: var(--primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 0; }