/* ===== 智学研途 · AI 面对面智学空间 样式 ===== */

.live-layout{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}
.live-left{padding:18px;display:flex;flex-direction:column;gap:12px}
.live-avatar-wrap{position:relative;display:grid;place-items:center;background:linear-gradient(180deg,#f2f7ff,#e8effc);border-radius:14px;padding:10px 0}
.live-avatar-wrap canvas{display:block;max-width:100%;height:auto}
/* Live2D 接管后：挂载容器出现，手绘 canvas 隐藏。
   两者互斥，不会出现「两个形象叠在一起」或「切换时闪一下空白」 */
.live-avatar-mount{display:none}
.live-avatar-wrap[data-l2d="1"] .live-avatar-mount{display:block;position:relative;width:100%;height:360px;z-index:1}
.live-avatar-wrap[data-l2d="1"] .live-avatar-mount canvas{display:block;max-width:none}
.live-avatar-wrap[data-l2d="1"] #liveAvatarCanvas{display:none}
/* 状态环：跟着 data-state 变色，位置圈住头部 */
.live-avatar-wrap[data-l2d="1"]::before{
  content:"";position:absolute;left:50%;top:34%;width:216px;height:216px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid #c9d6ec;opacity:.42;pointer-events:none;z-index:0;
  transition:border-color .45s ease,opacity .45s ease;
}
.live-avatar-wrap[data-l2d="1"][data-state="listening"]::before{border-color:#16a578;opacity:.66}
.live-avatar-wrap[data-l2d="1"][data-state="thinking"]::before{border-color:#f59e0b;opacity:.62}
.live-avatar-wrap[data-l2d="1"][data-state="speaking"]::before{border-color:#2563eb;opacity:.72}
.live-status{position:absolute;top:12px;left:12px;font-size:12px;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.live-status[data-state="listening"]{color:#0e7d5f;border-color:#bfe6d8}
.live-status[data-state="thinking"]{color:#8a5f1f;border-color:#f0dcb0}
.live-status[data-state="speaking"]{color:var(--blue);border-color:#c4d9f7}

.live-subtitle{min-height:64px;background:#f7faff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.8;color:#3d4c66}
.live-controls{display:flex;gap:8px;flex-wrap:wrap}
.live-net{font-size:11px;color:var(--muted);min-height:14px}
.live-textrow{display:flex;gap:8px}
.live-textrow input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px}
.live-hint{font-size:11px;color:var(--muted);line-height:1.7;border-top:1px dashed var(--line);padding-top:10px}

.live-right{min-width:0;position:relative}
.live-right-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.live-right-head h3{margin:0;font-size:15px}
.live-right-head span{font-size:11.5px;color:var(--muted)}
.live-right-head h3 .live-progress{font-size:10.5px;font-weight:600;color:#2563eb;background:#eaf2ff;
  border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:2px;white-space:nowrap}
/* 展示区自己滚：左边讲解不动，右边资料跟着讲的内容往下走 */
.live-cards{display:grid;gap:14px;position:relative;
  max-height:calc(100vh - 250px);min-height:240px;overflow-y:auto;
  scroll-behavior:smooth;padding:2px 6px 6px 2px;scrollbar-gutter:stable}

/* 「有新资料」提示：用户手动上翻看旧内容时，不抢他的滚动 */
.live-more{position:absolute;right:16px;bottom:10px;z-index:3;
  border:1px solid #c4d9f7;background:#fff;color:var(--blue);
  font-size:12px;padding:7px 13px;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 18px rgba(37,99,235,.16)}
.live-more:hover{background:#f2f7ff}
.live-empty{border:1.5px dashed var(--line);border-radius:14px;padding:34px 20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.8}
.live-empty-inline{border:1px dashed var(--line);border-radius:10px;padding:14px;color:var(--muted);font-size:12px;line-height:1.8}

/* ---------- 卡片骨架 ---------- */
.live-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;animation:liveIn .28s ease}
/* 讲解讲到哪张，哪张就亮起来；讲过的退成「已讲过」，不抢注意力 */
.live-card.is-current{border-color:#bcd4f6;box-shadow:0 8px 24px rgba(37,99,235,.16)}
.live-card.is-current .live-card-head::before{
  content:"正在讲";flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.02em;
  color:#2563eb;background:#eaf2ff;border-radius:999px;padding:2px 8px}
.live-card.is-past{opacity:.88}
@keyframes liveIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.live-card-head{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid #eef3fa}
.live-card-icon{font-size:15px}
.live-card-title{font-size:13.5px;font-weight:700;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-card-actions{display:flex;gap:2px;flex-shrink:0}
.live-card-actions .text-btn{font-size:11.5px;padding:3px 7px}
.live-card-body{padding:13px 15px;font-size:13px;line-height:1.8;color:#3d4c66}
.live-card-foot{padding:7px 15px;border-top:1px dashed #eef3fa;font-size:11px;color:var(--muted)}

.live-origin{font-size:10px;padding:2px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.live-origin.is-server{background:#e8f6f1;color:#0e7d5f}
.live-origin.is-local{background:#eaf2ff;color:#2563eb}
.live-origin.is-demo{background:#fdf1dd;color:#8a5f1f}

/* ---------- 错题 ---------- */
.live-stem{margin:0 0 10px;font-weight:600;color:var(--ink)}
.live-opts{display:grid;gap:7px;margin-bottom:10px}
.live-opt{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:12.5px}
.live-opt b{flex-shrink:0}
.live-opt.is-answer{border-color:#bfe6d8;background:#f2fbf7}
.live-opt.is-wrong{border-color:#f0c9c9;background:#fff7f7}
.live-opt-tag{font-style:normal;font-size:10px;margin-left:auto;padding:1px 6px;border-radius:4px;background:#e8f6f1;color:#0e7d5f;flex-shrink:0}
.live-opt-tag.is-bad{background:#fdecec;color:#b4453f}
.live-diag{margin:0 0 8px;font-size:12px;color:#8a5f1f}
.live-explain{background:#f7faff;border-radius:10px;padding:10px 12px;font-size:12.5px}
.live-explain.is-missing p{color:var(--muted)}
.live-explain b{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.live-explain p{margin:0}

/* ---------- 图谱 ---------- */
.live-graph{width:100%;height:auto;background:#fbfdff;border-radius:12px;border:1px solid var(--line)}
.live-g-edge{stroke:#c9d6ec;stroke-width:1.4}
.live-g-node text{font-size:10px;fill:#41506b}
.live-g-node circle{stroke:#fff;stroke-width:2;cursor:pointer}
.live-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--muted);align-items:center}
.live-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.live-legend .live-trim{font-style:normal;color:#8a5f1f;margin-left:auto}

/* ---------- 图表 ---------- */
.live-chart{width:100%;height:auto;background:#fbfdff;border-radius:12px;border:1px solid var(--line)}
.live-c-axis{stroke:#c9d6ec;stroke-width:1.5}
.live-c-grid{stroke:#edf2f9;stroke-width:1}
.live-c-line{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round}
.live-c-dot{fill:var(--blue)}
.live-c-val{font-size:10px;fill:#41506b}
.live-c-lab{font-size:10px;fill:#8a97ad}
.live-chart-note{margin-top:6px;font-size:11px;color:var(--muted)}

/* ---------- 画像 / 计划 / 差异 / 报告 ---------- */
.live-prows{display:grid;gap:9px;margin-bottom:10px}
.live-prow{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.live-pbar{height:9px;background:#eef2f9;border-radius:99px;overflow:hidden}
.live-pbar i{display:block;height:100%;border-radius:99px}
.live-pval{font-size:11px;color:var(--muted)}
.live-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;margin-bottom:8px}
.live-chip{background:#f1f5fc;border-radius:99px;padding:2px 10px;font-size:11.5px;color:#41506b}
.live-chip.is-warn{background:#fdf1dd;color:#8a5f1f}
.live-p-src{display:flex;gap:14px;font-size:11px;color:var(--muted);flex-wrap:wrap}

.live-plan-meta{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.live-today{margin-bottom:10px}
.live-today>b{font-size:12px;color:var(--muted);display:block;margin-bottom:5px}
.live-task{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 0;border-bottom:1px dashed #eef3fa}
.live-task-dot{width:8px;height:8px;border-radius:99px;background:var(--blue);flex-shrink:0}
.live-task-dot.is-done{background:var(--green)}
.live-task small{margin-left:auto;color:var(--muted)}
.live-phases{display:grid;gap:7px}
.live-phase{display:grid;grid-template-columns:120px 130px 1fr;gap:8px;font-size:12px;align-items:baseline}
.live-phase b{color:var(--ink)}
.live-phase span{color:var(--muted)}
.live-phase em{font-style:normal;color:#41506b}

.live-diff-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px}
.live-diff-table th{text-align:left;background:#f6f9fe;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--line);font-weight:600}
.live-diff-table td{padding:6px 10px;border-bottom:1px solid #f0f4fa}
.live-diff-table tr.is-changed td{background:#f6faff;color:var(--ink);font-weight:600}
.live-reasons ul,.live-report-sec ul{margin:4px 0 0;padding-left:18px}
.live-reasons li,.live-report-sec li{font-size:12.5px;line-height:1.8}
.live-report-sec{margin-bottom:10px}
.live-report-sec b{font-size:12px;color:var(--muted)}
.live-report-concl{margin:0 0 10px;font-size:13px}
.live-report-sec li small{color:var(--muted)}

/* ---------- 保存建议 ---------- */
.live-save-tip{margin:0 0 9px}
.live-save-list{display:grid;gap:6px;margin-bottom:10px}
.live-save-row{display:flex;gap:8px;align-items:center;font-size:12.5px;cursor:pointer}
.live-save-row input{accent-color:var(--blue)}
.live-save-row small{color:var(--muted);margin-left:6px}
.live-speech-text{margin:0;white-space:pre-wrap}

/* ---------- 资料仓库 ---------- */
.vault-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.vault-filters select,.vault-filters input{border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:12.5px}
.vault-filters input{flex:1;min-width:140px}
.vault-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px dashed var(--line)}
.vault-item-main{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.vault-item-main b{font-size:13px;color:var(--ink)}
.vault-item-main small{font-size:11.5px;color:var(--muted)}
.vault-note{margin-top:12px;font-size:11px;color:var(--muted);line-height:1.7;border-top:1px dashed var(--line);padding-top:10px}
.vault-item-acts{display:flex;gap:6px;flex-shrink:0}
.vault-detail{padding:4px 4px 10px;border-bottom:1px dashed var(--line);background:rgba(37,99,235,.03)}
.vault-detail .live-card-body{padding:10px 6px 2px}
.vault-raw{margin:0;max-height:320px;overflow:auto;font-size:11.5px;line-height:1.6;
  background:#f4f7fc;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px 12px}

@media(max-width:980px){
  .live-layout{grid-template-columns:1fr}
  .live-prow{grid-template-columns:90px 1fr auto}
  .live-phase{grid-template-columns:1fr;gap:2px}
  /* 窄屏整页滚动，别在页里再套一个滚动条 */
  .live-cards{max-height:none;overflow:visible;padding-right:2px}
}

/* ================= S2 语音状态 ================= */

.live-controls button.is-rec {
  background: #fdecec;
  border-color: #e0a3a3;
  color: #b4453f;
  animation: liveRecPulse 1.1s ease-in-out infinite;
}
@keyframes liveRecPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 82, .35); }
  50% { box-shadow: 0 0 0 6px rgba(224, 82, 82, 0); }
}
.live-controls button:disabled { opacity: .5; cursor: not-allowed; }
.live-subtitle.is-user { color: #5b6b85; font-style: normal; }

/* ---------- S3 实时通话 ---------- */
.live-controls button.is-rtc-on {
  background: #eaf2ff;
  border-color: #c4d9f7;
  color: var(--blue);
}
.live-net.is-bad { color: #b4453f; }

/* ---------------------------------------------------------------- 院校匹配卡 */
.clg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.clg-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.clg-row{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fcfdff}
.clg-row:hover{border-color:#c8d8f0}
.clg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clg-rank{width:19px;height:19px;border-radius:6px;background:#eef3fb;color:#5a6b86;
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.clg-name{font-size:13.5px;color:var(--ink)}
.clg-badges{display:inline-flex;gap:4px;flex-wrap:wrap}
.clg-badge{font-style:normal;font-size:10.5px;border-radius:5px;padding:1px 6px;line-height:1.6;white-space:nowrap}
.clg-badge.lv{background:#eef4ff;color:#2f5aa8;border:1px solid #d6e3f8}
.clg-badge.ty{background:#f4f5f7;color:#5b6472;border:1px solid #e6e8ec}
.clg-badge.tier{font-weight:600}
/* 冲刺=橙、稳妥=绿、保底=蓝、未评估=灰。中文习惯里涨红跌绿，但这里不是行情，
   是风险等级，用暖色表示要够一够、冷色表示安全，语义更直 */
.clg-badge.tier.chong{background:#fff4e8;color:#b56a1b;border:1px solid #f6dfc2}
.clg-badge.tier.wen{background:#eaf7ee;color:#2f7a48;border:1px solid #cfe9d7}
.clg-badge.tier.bao{background:#eef2fb;color:#3d5590;border:1px solid #d8e0f2}
.clg-badge.tier.unknown{background:#f4f5f7;color:#7a828e;border:1px solid #e6e8ec}
.clg-score{margin-left:auto;display:inline-flex;align-items:baseline;gap:3px;color:var(--muted)}
.clg-score b{font-size:14px;color:#2f5aa8}
.clg-score small{font-size:10px}
.clg-sub{font-size:11.5px;color:var(--muted);margin:4px 0 0 27px;line-height:1.6}
.clg-reasons{margin:6px 0 0 27px;padding:0;list-style:none;display:grid;gap:2px}
.clg-reasons li{font-size:11.5px;color:#41506b;line-height:1.65;position:relative;padding-left:11px}
.clg-reasons li::before{content:"·";position:absolute;left:2px;color:#9fb0c9}
.clg-reasons li.clg-warn{color:#a4601c}
.clg-acts{display:flex;gap:10px;margin:7px 0 0 27px}
.clg-acts .text-btn{font-size:11px;color:#5a6b86;background:none;border:none;padding:0;cursor:pointer}
.clg-acts .text-btn:hover{color:var(--blue);text-decoration:underline}
.clg-acts .text-btn.is-done{color:#2f7a48;cursor:default;text-decoration:none}
.clg-acts .text-btn:disabled{cursor:default;opacity:.7}
.clg-foot{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px;font-size:11px;color:var(--muted);line-height:1.75}
.clg-foot b{display:block;margin-bottom:3px;color:#5a6b86;font-weight:600}
.clg-foot ul{margin:0;padding-left:15px}
.clg-empty{font-size:12.5px;color:var(--muted);line-height:1.8;margin:0}

/* 「为什么排在这里」：每所院校的判定摊开。四栏分母来自引擎口径，没给就不画条 */
.clg-why{margin:8px 0 0 27px}
.clg-why summary{font-size:11px;color:#8b98ac;cursor:pointer;outline:none;user-select:none}
.clg-why summary:hover{color:#5b6b85}
.clg-bars{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.clg-bar{display:flex;align-items:center;gap:8px;font-size:11px;color:#5a6b86;line-height:1.5}
.clg-bar-name{width:52px;flex:0 0 auto;color:#7b8798}
.clg-bar-track{flex:1 1 auto;min-width:36px;height:5px;border-radius:3px;background:#eef2f8;overflow:hidden}
.clg-bar-track i{display:block;height:100%;border-radius:3px;background:#7ea8dd}
.clg-bar-num{flex:0 0 auto;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.clg-bar-num b{color:#2f5aa8;font-weight:600}
.clg-bar-num small{color:#9aa7ba;font-size:10px}
.clg-why-line{margin:7px 0 0;font-size:11px;color:#5a6b86;line-height:1.7}
.clg-cut{margin:7px 0 0;font-size:11px;color:#a4601c;line-height:1.7;background:#fdf7ee;
  border-radius:6px;padding:6px 8px}
.clg-cut>b{display:block;margin-bottom:2px;font-weight:600}
.clg-cut ul{margin:0;padding-left:14px}
.clg-cut b{font-variant-numeric:tabular-nums}

/* 「数据来源与判定口径」：文字全部由后端下发，这里只管版式 */
.clg-src{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.clg-src summary{font-size:11px;color:#8b98ac;cursor:pointer;outline:none;user-select:none}
.clg-src summary:hover{color:#5b6b85}
.clg-src-body{margin-top:6px;display:grid;gap:4px}
.clg-src-line{margin:0;font-size:11px;color:var(--muted);line-height:1.7}
.clg-src-line b{color:#5a6b86;font-weight:600;margin-right:6px}
.clg-src-note{margin:5px 0 0;font-size:11px;color:#a4601c;line-height:1.7;
  background:#fdf7ee;border-radius:6px;padding:6px 8px}

/* 窄屏：排名号下面的缩进在手机上太贵，全收掉；分项栏让出宽度给进度条 */
@media(max-width:620px){
  .clg-sub,.clg-reasons,.clg-acts,.clg-why{margin-left:0}
  .clg-head{gap:6px}
  .clg-bar-name{width:46px}
  .clg-bar-num{min-width:38px}
}

/* ===== 知识思维导图（横向树） =====
   和 .live-graph（力导向掌握度图）分开：那张图颜色代表掌握度，
   这张图位置代表层级。混用样式会让人误读。 */
.live-mm-toolbar{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.live-mm-btn{font-size:12px;padding:3px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#42536e;line-height:1.6}
.live-mm-btn:hover{border-color:#c4d9f7;color:var(--blue)}
.live-mm-zoom{font-size:12px;color:var(--muted);min-width:42px;text-align:center;font-variant-numeric:tabular-nums}

.live-mm-wrap{
  background:linear-gradient(180deg,#fbfdff,#f6f9ff);
  border:1px solid var(--line);border-radius:12px;
  padding:10px;max-height:400px;overflow:auto;
}
.live-mm{display:block;min-width:100%;height:auto}
.live-mm-edge{fill:none;stroke:#c8d7ee;stroke-width:1.4}
.live-mm-box{stroke:#c9d8ee;stroke-width:1}
.live-mm-node.is-root .live-mm-box{stroke:#1d4ed8}
.live-mm-text{font-size:12.5px;fill:#17233d;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
.live-mm-dot{fill:#8fa8c9}
.live-mm-toggle{fill:#fff;stroke:#9db9de;stroke-width:1}
.live-mm-toggle-t{font-size:10px;fill:#4a6a95}
.live-mm-node{cursor:pointer}
.live-mm-node.is-point{cursor:default}
.live-mm-node:hover .live-mm-box{stroke:var(--blue);stroke-width:1.4}
.live-mm-node:hover .live-mm-text{fill:var(--blue)}

.live-mm-detail{
  margin-top:8px;padding:9px 11px;border-radius:10px;background:#f7faff;
  border:1px solid var(--line);font-size:12px;line-height:1.75;color:var(--muted);
}
.live-mm-detail.is-on{color:#334158;background:#f2f7ff;border-color:#cadcf8}
.live-mm-detail b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:3px}
.live-mm-detail em{font-style:normal;color:var(--muted);font-size:11px;margin-left:6px}
.live-mm-detail p{margin:0;color:#3d4c66}

.live-mm-meta{font-size:11px;color:var(--muted);margin:8px 0 0;line-height:1.7}
.live-mm-note{font-size:11px;color:#8a97a9;margin:3px 0 0;line-height:1.7}

.live-mm-empty{padding:12px 14px;border:1px dashed #d9c9a8;border-radius:10px;background:#fffaf0}
.live-mm-empty-t{margin:0 0 6px;font-size:12.5px;color:#7a5a1d;line-height:1.7}
.live-mm-empty-s{margin:4px 0 0;font-size:12px;color:#8a7a58;line-height:1.7}

@media(max-width:760px){
  .live-mm-wrap{max-height:320px;padding:8px}
  .live-mm-text{font-size:11.5px}
  .live-mm-btn{padding:2px 7px;font-size:11px}
}