/* ─── PPT 数字人朗读页 v2 ─── */
:root {
    --primary: #0d5238;
    --primary-light: #1a7a54;
    --primary-lighter: #e8f5e9;
    --primary-dark: #062e1c;
    --accent: #c62828;
    --gold: #c8952e;
    --gold-light: #f9a825;
    --bg: #f0f3f5;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-secondary: #475569;
    --text-light: #94a3b8;
    --border: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow: 0 2px 8px rgba(0,0,0,0.10);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
    --radius: 8px;
    --radius-lg: 12px;
    --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; font-family:var(--font); color:var(--text); background:var(--bg); overflow:hidden; -webkit-font-smoothing:antialiased; }

/* ── Header ── */
.narrator-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 24px; background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.2); z-index:100; position:relative;
}
.narrator-brand { display:flex; align-items:center; gap:10px; cursor:pointer; }
.narrator-logo { font-size:26px; }
.narrator-title { font-size:17px; font-weight:700; letter-spacing:0.5px; }
.narrator-tagline { font-size:11px; opacity:0.7; margin-top:1px; }
.narrator-actions { display:flex; gap:8px; align-items:center; }
.narrator-btn {
    padding:8px 18px; border-radius:6px; border:none; cursor:pointer;
    font-size:14px; font-weight:600; transition:all 0.2s; font-family:var(--font);
}
.narrator-btn-primary { background:#fff; color:var(--primary); }
.narrator-btn-primary:hover { background:#e8f5e9; transform:translateY(-1px); }
.narrator-btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.narrator-btn-ghost { background:transparent; color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.3); }
.narrator-btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,0.1); color:#fff; }

/* ── Main Layout ── */
.narrator-main { display:flex; height:calc(100vh - 52px); overflow:hidden; }

/* ── Upload Phase ── */
.upload-area {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px; background:linear-gradient(180deg,#f0f3f5,#e8f5e9);
}
.upload-zone {
    width:500px; max-width:90%; padding:50px 40px; border:3px dashed var(--border);
    border-radius:20px; text-align:center; cursor:pointer; transition:all 0.3s;
    background:var(--bg-card); box-shadow:var(--shadow);
}
.upload-zone:hover, .upload-zone.dragover {
    border-color:var(--primary-light); background:var(--primary-lighter);
    box-shadow:var(--shadow-md); transform:translateY(-2px);
}
.upload-icon { font-size:64px; margin-bottom:16px; }
.upload-title { font-size:22px; font-weight:700; margin-bottom:8px; color:var(--text); }
.upload-hint { font-size:14px; color:var(--text-secondary); margin-bottom:20px; line-height:1.8; }
.upload-browse {
    display:inline-block; padding:12px 32px; background:var(--primary); color:#fff;
    border:none; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.upload-browse:hover { background:var(--primary-light); box-shadow:0 4px 12px rgba(13,82,56,0.3); }
.upload-progress { margin-top:24px; width:100%; max-width:400px; display:none; }
.progress-bar { height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-light)); transition:width 0.3s; width:0%; }
.progress-text { font-size:13px; color:var(--text-secondary); margin-top:8px; text-align:center; }

/* ── Slide Viewer (Left) ── */
.slide-viewer {
    flex:1; display:flex; flex-direction:column; min-width:0;
    background:linear-gradient(180deg,#1a1a2e,#16213e);
    border-right:1px solid rgba(0,0,0,0.1);
}
.slide-viewer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 20px; background:rgba(0,0,0,0.3); color:#fff;
}
.slide-viewer-title { font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.slide-viewer-thumbs { display:flex; gap:6px; align-items:center; }
.thumb-btn {
    width:30px; height:30px; border-radius:4px; border:1px solid rgba(255,255,255,0.2);
    background:transparent; color:rgba(255,255,255,0.6); cursor:pointer; font-size:12px; transition:all 0.2s;
}
.thumb-btn:hover { border-color:#fff; color:#fff; }
.thumb-btn:disabled { opacity:0.3; cursor:not-allowed; }

.slide-canvas {
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:20px; position:relative; overflow:hidden;
}
.slide-img {
    max-width:100%; max-height:100%; border-radius:8px;
    box-shadow:0 8px 32px rgba(0,0,0,0.4); transition:opacity 0.3s, transform 0.3s;
}
.slide-img-loading {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    color:rgba(255,255,255,0.5); font-size:14px;
}

/* Slide thumbnail strip */
.slide-strip {
    display:flex; gap:8px; padding:10px 20px; overflow-x:auto;
    background:rgba(0,0,0,0.4); border-top:1px solid rgba(255,255,255,0.05);
}
.slide-thumb {
    width:80px; height:45px; border-radius:4px; border:2px solid transparent;
    cursor:pointer; overflow:hidden; flex-shrink:0; transition:all 0.2s;
    background:#000; position:relative;
}
.slide-thumb img { width:100%; height:100%; object-fit:cover; }
.slide-thumb:hover { border-color:rgba(255,255,255,0.3); }
.slide-thumb.active { border-color:var(--gold-light); box-shadow:0 0 8px rgba(249,168,37,0.4); }
.slide-thumb.playing { border-color:#4CAF50; }
.slide-thumb-num {
    position:absolute; bottom:0; right:0; background:rgba(0,0,0,0.7);
    color:#fff; font-size:10px; padding:1px 4px; border-radius:3px 0 0 0;
}

/* ── Avatar Panel (Right) ── */
.avatar-panel {
    width:38%; min-width:320px; max-width:500px; display:flex; flex-direction:column;
    background:linear-gradient(180deg,#0a1e14 0%,#0d2e1d 40%,#0a1e14 100%);
    position:relative;
}

/* Avatar image container */
.avatar-img-container {
    flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
    padding:0 10px; margin-top:0.8cm;
}
#avatarImg {
    max-width:100%; max-height:100%; object-fit:contain;
    border-radius:12px;
    box-shadow:0 4px 24px rgba(0,0,0,0.4);
    transition:transform 0.05s ease-out, filter 0.1s;
}
#avatarImg.speaking {
    animation:avatar-breathe 3s ease-in-out infinite;
}
@keyframes avatar-breathe {
    0%,100% { transform:scale(1); }
    50% { transform:scale(1.015); }
}

/* Avatar status badge */
.avatar-badge {
    padding:8px 16px; border-radius:20px; background:rgba(0,0,0,0.5);
    color:rgba(255,255,255,0.8); font-size:13px; backdrop-filter:blur(8px);
    display:flex; align-items:center; gap:6px;
    justify-content:center; margin-top:10px;
}
.avatar-badge-dot { width:8px; height:8px; border-radius:50%; background:#666; transition:all 0.3s; }
.avatar-badge-dot.speaking { background:#4CAF50; animation:pulse-dot 0.8s infinite; }
.avatar-badge-dot.loading { background:var(--gold-light); animation:pulse-dot 0.8s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* Narration subtitle */
.narration-box {
    padding:12px 16px; background:rgba(0,0,0,0.4); border-top:1px solid rgba(255,255,255,0.08);
    height:220px; min-height:160px; max-height:280px; overflow-y:auto;
    /* 右侧滚动条样式 */
    scrollbar-width:thin; scrollbar-color:rgba(76,175,80,0.5) rgba(255,255,255,0.08);
}
.narration-box::-webkit-scrollbar { width:8px; }
.narration-box::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); border-radius:4px; }
.narration-box::-webkit-scrollbar-thumb { background:rgba(76,175,80,0.4); border-radius:4px; }
.narration-box::-webkit-scrollbar-thumb:hover { background:rgba(76,175,80,0.7); }
.narration-label { font-size:11px; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.narration-text {
    font-size:14px; color:rgba(255,255,255,0.9); line-height:1.8; text-align:left;
    word-break:break-word;
}
.narration-text .cursor { display:inline-block; width:2px; height:14px; background:#4CAF50; margin-left:2px; animation:blink 0.8s infinite; vertical-align:middle; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.narration-text .highlight { color:#FFD54F; font-weight:600; }

/* ── Control Bar ── */
.control-bar {
    padding:14px 20px; background:rgba(0,0,0,0.5);
    display:flex; align-items:center; gap:12px;
    border-top:1px solid rgba(255,255,255,0.08);
}
.ctrl-btn {
    width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.1); color:#fff; font-size:16px; transition:all 0.2s;
}
.ctrl-btn:hover { background:rgba(255,255,255,0.25); }
.ctrl-btn:disabled { opacity:0.3; cursor:not-allowed; }
.ctrl-btn-play { width:50px; height:50px; background:var(--primary-light); font-size:20px; }
.ctrl-btn-play:hover { background:#2E7D32; box-shadow:0 4px 12px rgba(46,125,50,0.4); }

.ctrl-progress { flex:1; display:flex; align-items:center; gap:8px; }
.ctrl-progress-bar {
    flex:1; height:6px; background:rgba(255,255,255,0.12); border-radius:3px;
    cursor:pointer; position:relative; overflow:hidden;
}
.ctrl-progress-fill {
    height:100%; background:linear-gradient(90deg,#4CAF50,#81C784);
    border-radius:3px; transition:width 0.3s; width:0%;
}
.ctrl-page-info { font-size:12px; color:rgba(255,255,255,0.5); white-space:nowrap; min-width:45px; text-align:center; }
.ctrl-volume { display:flex; align-items:center; gap:4px; }
.ctrl-volume input[type=range] { width:60px; accent-color:#4CAF50; }

/* ── Hidden states ── */
.slide-viewer, .avatar-panel { display:none; }
.narrator-main.narrating .upload-area { display:none; }
.narrator-main.narrating .slide-viewer { display:flex; }
.narrator-main.narrating .avatar-panel { display:flex; }

/* ── Spinner ── */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Responsive ── */
@media (max-width:900px) {
    .narrator-main.narrating { flex-direction:column; }
    .avatar-panel { width:100%; max-width:none; height:300px; }
    .slide-viewer { flex:1; }
    .narration-box { height:120px; min-height:80px; max-height:150px; }
}
@media (max-width:600px) {
    .narrator-header { padding:8px 12px; }
    .narrator-title { font-size:14px; }
    .narrator-tagline { display:none; }
    .upload-zone { padding:30px 16px; }
    .avatar-panel { height:220px; }
    .control-bar { padding:8px 12px; gap:6px; }
    .ctrl-btn { width:34px; height:34px; font-size:14px; }
    .ctrl-btn-play { width:42px; height:42px; font-size:17px; }
    .ctrl-volume { display:none; }
    .slide-thumb { width:50px; height:28px; }
}