:root {
  --red: #b52218;
  --red-strong: #95160f;
  --deep: #6f0e0b;
  --gold: #d6a548;
  --gold-soft: #f2dfae;
  --paper: #fff9ee;
  --paper-deep: #f6edd9;
  --surface: #fffdf8;
  --surface-soft: #fbf5e8;
  --ink: #30241f;
  --muted: #786a62;
  --line: #e5d4b0;
  --line-strong: #d2b875;
  --success: #807022;
  --danger: #a82d24;
  --shadow: 0 18px 48px rgba(78, 35, 18, 0.1);
  --shadow-soft: 0 8px 24px rgba(78, 35, 18, 0.07);
  --radius-lg: 17px;
  --radius-md: 12px;
  --radius-sm: 9px;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(214, 165, 72, 0.1), transparent 28%),
    linear-gradient(90deg, transparent 49.8%, rgba(181, 34, 24, 0.025) 50%, transparent 50.2%),
    var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

button, textarea, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(214, 165, 72, 0.5);
  outline-offset: 2px;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.4fr) minmax(310px, 1fr);
  align-items: center;
  min-height: 76px;
  padding: 9px 24px;
  color: #fff;
  background: linear-gradient(105deg, #5e0c09 0%, var(--deep) 42%, var(--red) 100%);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 7px 24px rgba(76, 11, 8, 0.18);
}

.course-brand, .topbar-actions, .workspace-title, .history-heading,
.stage-heading, .debate-topic-head, .panel-heading, .assistant-head, .source-meta,
.action-row, .stat-head, .report-head, .teacher-toolbar, .evidence-toolbar {
  display: flex;
  align-items: center;
}

.course-brand { gap: 12px; }
.brand-seal {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  place-items: center;
  border: 1px solid rgba(255, 235, 190, 0.82);
  border-radius: 10px;
  color: #77201b;
  background: linear-gradient(145deg, #f8e6b5, var(--gold));
  box-shadow: inset 0 0 0 3px rgba(255, 253, 248, 0.26);
  font: 800 22px STKaiti, KaiTi, serif;
}
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font: 800 21px STKaiti, KaiTi, serif; letter-spacing: 0.14em; }
.brand-copy small { margin-top: 2px; color: #f4dca1; font-size: 11px; letter-spacing: 0.08em; }
.course-title { text-align: center; }
.course-title span, .course-title strong { display: block; }
.course-title span { color: #f3d99b; font-size: 11px; letter-spacing: 0.06em; }
.course-title strong { margin-top: 3px; font: 700 20px STKaiti, KaiTi, serif; letter-spacing: 0.08em; }
.topbar-actions { justify-content: flex-end; gap: 12px; }
.knowledge-status {
  padding: 7px 10px;
  border: 1px solid rgba(255, 231, 174, 0.42);
  border-radius: 999px;
  color: #f7e8bf;
  background: rgba(76, 8, 5, 0.24);
  font-size: 11px;
  white-space: nowrap;
}
.knowledge-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #f0c65f;
  box-shadow: 0 0 0 4px rgba(240, 198, 95, 0.12);
}
.profile-switcher { position: relative; }
.profile-trigger {
  display: grid;
  grid-template-columns: 36px minmax(62px, auto) 15px;
  align-items: center;
  gap: 9px;
  min-width: 145px;
  padding: 5px 8px 5px 6px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 12px;
  color: #fff;
  background: rgba(80, 8, 7, .2);
  text-align: left;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.profile-trigger:hover,
.profile-trigger[aria-expanded="true"] {
  border-color: rgba(255, 227, 157, .74);
  background: rgba(80, 8, 7, .42);
  box-shadow: 0 7px 18px rgba(51, 5, 4, .16);
}
.profile-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #e7bf5c;
  border-radius: 10px;
  color: var(--deep);
  background: linear-gradient(145deg, #fff1bb, #e7bd55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.profile-avatar svg { width: 20px; height: 20px; }
.profile-copy small,
.profile-copy strong,
.option-copy strong,
.option-copy small { display: block; }
.profile-copy small { color: #f0d99d; font-size: 8px; line-height: 1; }
.profile-copy strong { margin-top: 3px; color: #fff; font-size: 12px; line-height: 1.1; }
.profile-chevron { width: 15px; height: 15px; color: #f3d58c; transition: transform .18s ease; }
.profile-trigger[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }
.profile-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 80;
  width: 224px;
  padding: 7px;
  border: 1px solid #d9b861;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 16px 38px rgba(71, 16, 10, .24);
}
.profile-menu[hidden] { display: none; }
.profile-menu::before {
  position: absolute;
  top: -6px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #d9b861;
  border-left: 1px solid #d9b861;
  background: #fffdf8;
  content: "";
  transform: rotate(45deg);
}
.profile-option {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px 1fr 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 9px;
  color: #49332d;
  background: transparent;
  text-align: left;
}
.profile-option + .profile-option { margin-top: 3px; }
.profile-option:hover { background: #fff2cf; }
.profile-option.active { background: #f7e4ae; }
.option-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: #f9dc8d;
  background: var(--deep);
  font: 700 15px STKaiti, KaiTi, serif;
}
.option-copy strong { color: var(--deep); font-size: 12px; }
.option-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.option-check { visibility: hidden; color: var(--red); font-size: 15px; font-weight: 800; text-align: center; }
.profile-option.active .option-check { visibility: visible; }

.app-shell {
  display: grid;
  grid-template-columns: clamp(270px, 17vw, 310px) minmax(620px, 1fr) clamp(290px, 18vw, 330px);
  gap: 12px;
  min-height: calc(100vh - 76px);
  padding: 12px;
}

.left-sidebar, .right-sidebar, .workspace-panel, .context-banner {
  border: 1px solid var(--line);
  background: var(--surface);
}

.left-sidebar, .right-sidebar {
  position: sticky;
  top: 88px;
  height: calc(100vh - 100px);
  min-height: 0;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  scrollbar-width: thin;
  scrollbar-color: #d5bd83 transparent;
}

.left-sidebar { display: flex; flex-direction: column; padding: 15px 13px; }
.profile-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 5px 18px; border-bottom: 1px solid var(--line); }
.agent-avatar {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 2px solid #e7c879;
  border-radius: 16px;
  color: #ffe5a4;
  background: linear-gradient(145deg, var(--deep), #a72a20);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.07), 0 8px 18px rgba(105, 22, 14, .14);
}
.agent-avatar span { font: 800 17px STKaiti, KaiTi, serif; }
.profile-card h1 { margin: 0 0 2px; color: var(--deep); font: 800 18px STKaiti, KaiTi, serif; }
.profile-card p { margin: 0; color: var(--muted); font-size: 10px; }

.nav-section { padding-top: 16px; }
.section-label { margin: 0 7px 9px; color: #88786e; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.speech-database-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #e5cc91;
  border-radius: 11px;
  color: var(--ink);
  background: #fffaf0;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.speech-database-link:hover,
.speech-database-link:focus-visible {
  border-color: #c89235;
  outline: 0;
  background: #fff3d8;
  box-shadow: 0 7px 16px rgba(119, 72, 12, .08);
  transform: translateY(-1px);
}
.speech-database-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: #fff2c7;
  background: var(--deep);
  font: 800 11px STKaiti, KaiTi, serif;
}
.speech-database-link strong,
.speech-database-link small { display: block; }
.speech-database-link strong { color: var(--deep); font-size: 12px; line-height: 1.4; }
.speech-database-link small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.speech-database-arrow { color: #a16d16; font-size: 15px; font-weight: 800; }
.feature-nav { display: grid; gap: 6px; }
.feature-button {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.module-button { width: 100%; font: inherit; }
.feature-button:hover { border-color: #eadab8; background: #fff8e9; transform: translateX(2px); }
.feature-button.active { border-color: #dfc078; background: linear-gradient(90deg, #f8e8bd, #fff9ed); }
.feature-button.active::before { position: absolute; inset: 9px auto 9px 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--red); content: ""; }
.feature-icon, .header-icon, .stage-heading-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #e1cb95;
  border-radius: 10px;
  color: var(--red);
  background: #fff9ec;
}
.feature-button.active .feature-icon { color: #fff3cc; border-color: var(--red); background: var(--red); }
.single-agent { cursor: default; }
.single-agent:hover { border-color: #dfc078; background: linear-gradient(90deg, #f8e8bd, #fff9ed); transform: none; }
.feature-button strong, .feature-button small { display: block; }
.feature-button strong { color: #3a2a23; font-size: 13px; }
.feature-button small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.history-section { display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.new-session-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--red);
  border-radius: 10px;
  color: #fff;
  background: var(--red);
  box-shadow: 0 8px 18px rgba(181, 34, 24, .16);
  font-weight: 800;
}
.new-session-button:hover { background: var(--red-strong); }
.history-heading { justify-content: space-between; margin: 15px 5px 8px; font-size: 11px; }
.history-heading button { padding: 2px 4px; border: 0; color: var(--red); background: transparent; font-size: 10px; }
.history-list { display: grid; gap: 6px; overflow-y: auto; }
.history-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #fbf7ed;
}
.history-item.active { border-color: #ddc17c; background: #fff3d7; }
.history-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #fff2cf; background: var(--deep); font: 800 11px Georgia, serif; }
.history-copy { min-width: 0; }
.history-copy strong, .history-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-copy strong { font-size: 11px; }
.history-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.history-open, .history-delete { border: 0; background: transparent; }
.history-open { position: absolute; inset: 0; opacity: 0; }
.history-delete { position: relative; z-index: 2; padding: 4px; color: #9c8170; }
.history-delete svg { width: 14px; height: 14px; }
.history-empty { padding: 15px 8px; border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; font-size: 11px; }

.main-workspace { display: flex; height: calc(100vh - 100px); min-width: 0; min-height: 0; flex-direction: column; gap: 9px; }
.workspace-header { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 4px; }
.workspace-title { gap: 10px; }
.workspace-title h2 { margin: 0; color: var(--deep); font: 800 22px STKaiti, KaiTi, serif; }
.record-button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 37px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--deep);
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
}
.record-button:hover { background: #fff4d9; }
.record-button[hidden] { display: none; }

.context-banner {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.context-number { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #fff2c8; background: var(--deep); font: 800 12px Georgia, serif; box-shadow: 0 0 0 4px #f7e7bc; }
.context-banner h3 { margin: 0; color: var(--ink); font: 800 clamp(16px, 1.4vw, 20px) STKaiti, KaiTi, serif; }
.context-tag { padding: 6px 9px; border: 1px solid #dfc581; border-radius: 999px; color: #77550f; background: #fff4d3; font-size: 9px; font-weight: 800; }

.debate-brief {
  display: grid;
  grid-template-columns: minmax(210px, .9fr) minmax(210px, 1fr) 34px minmax(210px, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #fffaf0, #fffdf8);
  box-shadow: var(--shadow-soft);
}
.debate-brief-topic,
.debate-side { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.debate-brief-topic { padding: 3px 8px; }
.debate-brief-topic span,
.debate-side span { display: block; margin-bottom: 4px; font-size: 9px; font-weight: 800; }
.debate-brief-topic span { color: var(--red); letter-spacing: .12em; }
.debate-brief-topic strong { color: var(--deep); font: 800 16px STKaiti, KaiTi, serif; }
.debate-side { padding: 8px 12px; border-radius: 10px; }
.debate-side span { color: #8c745f; }
.debate-side strong { color: var(--ink); font-size: 11px; line-height: 1.5; }
.debate-side-student { border: 1px solid #e2c678; background: #fff2cf; }
.debate-side-agent { border: 1px solid #d7b0a8; background: #fff5f1; }
.debate-side-agent span,
.debate-side-agent strong { color: var(--deep); }
.debate-versus { display: grid; width: 30px; height: 30px; align-self: center; place-items: center; border-radius: 50%; color: #fff2ca; background: var(--deep); font: 800 10px Georgia, serif; }

.workspace-panel {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
  scrollbar-color: #d4ba78 transparent;
}
.panel-body { min-height: 100%; padding: 18px; background: var(--surface-soft); }
.debate-flow { display: grid; gap: 14px; }

.debate-topic-card, .content-card, .message-card, .diagnosis-card, .evidence-card,
.report-card, .teacher-card, .literature-card, .chat-card, .graph-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(80, 40, 20, .045);
}
.debate-topic-card { overflow: hidden; }
.debate-topic-head { justify-content: space-between; gap: 16px; padding: 11px 15px; color: #fff3cf; background: linear-gradient(100deg, var(--deep), #982017); }
.debate-topic-head span { font-size: 10px; letter-spacing: .09em; }
.debate-topic-head b { padding: 4px 8px; border: 1px solid rgba(255,232,171,.44); border-radius: 999px; color: #f7d986; font-size: 9px; }
.debate-question { padding: 15px 17px; border-bottom: 1px solid var(--line); }
.debate-question h3 { margin: 0; color: var(--deep); font: 800 19px STKaiti, KaiTi, serif; }
.debate-question p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.stance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.stance { position: relative; padding: 14px 17px 15px 51px; }
.stance + .stance { border-left: 1px solid var(--line); }
.stance i { position: absolute; top: 15px; left: 16px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font: normal 800 11px STKaiti, KaiTi, serif; }
.stance.negative i { color: #714f0d; background: var(--gold-soft); }
.stance small, .stance strong { display: block; }
.stance small { color: var(--muted); font-size: 9px; }
.stance strong { margin-top: 4px; color: #3e2d24; font-size: 11px; line-height: 1.55; }

.message-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 14px; }
.message-card.student { grid-template-columns: minmax(0, 1fr) 42px; margin-left: 9%; border-color: #e1c680; background: #fff8e8; }
.message-card.student .message-content { grid-column: 1; grid-row: 1; }
.message-card.student .message-avatar { grid-column: 2; grid-row: 1; color: var(--deep); background: #f2d992; }
.message-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: #ffe6aa; background: var(--deep); font: 800 12px STKaiti, KaiTi, serif; }
.message-content { min-width: 0; }
.assistant-head { justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.assistant-head strong { color: var(--deep); font-size: 12px; }
.assistant-head span { color: var(--muted); font-size: 9px; }
.message-content p { margin: 0; color: #4d3c32; font-size: 12px; line-height: 1.8; }
.message-content p + p { margin-top: 8px; }
.message-list { margin: 8px 0 0; padding-left: 20px; color: #4d3c32; font-size: 11px; line-height: 1.75; }

.composer-card { padding: 14px; border: 1px solid #ddc27f; border-radius: 13px; background: #fffdf8; box-shadow: 0 8px 22px rgba(86, 42, 18, .07); }
.composer-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.composer-label strong { color: var(--deep); font-size: 12px; }
.composer-label span { color: var(--muted); font-size: 9px; }
.composer-shell { position: relative; }
.composer-shell textarea, .chat-composer textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid #dbc99f;
  border-radius: 10px;
  color: var(--ink);
  background: #fffefb;
  line-height: 1.7;
}
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.support-actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* 学生端采用普通 AI 对话流，阶段内容由消息呈现，不再使用诊断面板卡片。 */
.student-chat-panel {
  display: flex;
  min-height: 100%;
  padding: 0;
  flex-direction: column;
  background: #fcf8ef;
}
.chat-dialogue {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 17px;
  padding: 22px 22px 28px;
}
.chat-message {
  display: flex;
  max-width: 84%;
  align-items: flex-start;
  gap: 10px;
}
.chat-message.user-message {
  align-self: flex-end;
  justify-content: flex-end;
}
.chat-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 9px;
  color: #ffe6aa;
  background: var(--deep);
  font: 800 11px STKaiti, KaiTi, serif;
}
.chat-avatar.user-avatar {
  color: var(--deep);
  border: 1px solid #d4ad55;
  background: linear-gradient(145deg, #f8e8bd, #dfb75f);
  box-shadow: 0 4px 10px rgba(111, 14, 11, .1);
}
.chat-avatar.user-avatar svg { width: 20px; height: 20px; stroke-width: 2; }
.chat-message-body { min-width: 0; }
.chat-bubble {
  padding: 12px 14px;
  border: 1px solid #dfcfad;
  border-radius: 4px 13px 13px 13px;
  color: #46372f;
  background: #fff;
  box-shadow: 0 4px 12px rgba(80, 40, 20, .04);
}
.user-bubble {
  border-color: #e0c275;
  border-radius: 13px 4px 13px 13px;
  background: #fff4d8;
}
.chat-bubble p { margin: 0; font-size: 12px; line-height: 1.75; }
.chat-bubble p + p { margin-top: 8px; }
.stream-line, .stream-output { font: inherit; }
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -.14em;
  border-radius: 2px;
  background: var(--red);
  animation: typing-cursor-blink .72s steps(1) infinite;
}
body.ai-streaming .compact-composer { opacity: .78; }
.chat-send-button:disabled { cursor: wait; opacity: .58; transform: none; }
.compact-composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: end;
  gap: 10px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 -7px 20px rgba(76, 42, 20, .05);
  backdrop-filter: blur(8px);
}
.compact-composer .chat-input {
  width: 100%;
  min-height: 96px;
  max-height: 180px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid #d8c7a5;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  line-height: 1.55;
}
.compact-composer .chat-input:focus {
  border-color: #c89d43;
  box-shadow: 0 0 0 3px rgba(214, 165, 72, .14);
}
.chat-send-button {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--red);
  border-radius: 11px;
  color: #fff;
  background: var(--red);
  box-shadow: 0 7px 16px rgba(181, 34, 24, .16);
}
.chat-send-button:hover { background: var(--red-strong); transform: translateY(-1px); }
.chat-send-button svg { width: 23px; height: 23px; }
.evidence-list {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.evidence-row > div > span, .evidence-row strong, .evidence-row small { display: block; }
.evidence-row > div > span { color: var(--red); font-size: 9px; font-weight: 800; }
.evidence-row strong { margin-top: 3px; color: var(--deep); font-size: 11px; }
.evidence-row p { margin-top: 3px; font-size: 10px; }
.evidence-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.evidence-row button {
  padding: 6px 9px;
  border: 1px solid #d5b25c;
  border-radius: 7px;
  color: #684605;
  background: #fff3cb;
  font-size: 9px;
  font-weight: 800;
}
.evidence-row button:disabled { color: #786d54; background: #eee6d3; }
.soft-button, .primary-button, .gold-button, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 37px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
}
.soft-button { border: 1px solid var(--line-strong); color: var(--deep); background: #fffaf0; }
.soft-button:hover { background: #fff1cf; }
.primary-button { border: 1px solid var(--red); color: #fff; background: var(--red); box-shadow: 0 7px 16px rgba(181,34,24,.15); }
.primary-button:hover { background: var(--red-strong); transform: translateY(-1px); }
.gold-button { border: 1px solid #bf8c28; color: #5d4008; background: var(--gold); }
.danger-button { border: 1px solid #d99d94; color: #9a231b; background: #fff4f1; }
.soft-button svg, .primary-button svg, .gold-button svg { width: 15px; height: 15px; }

.panel-heading { justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.panel-heading h3, .panel-heading p { margin: 0; }
.panel-heading h3 { color: var(--deep); font: 800 18px STKaiti, KaiTi, serif; }
.panel-heading p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.panel-heading .tag { padding: 5px 8px; border: 1px solid #e0c682; border-radius: 999px; color: #75520b; background: #fff3d3; font-size: 9px; font-weight: 800; }
.content-card { padding: 15px; }

.diagnosis-grid, .metric-grid, .evidence-grid, .literature-grid, .report-grid, .teacher-grid, .prepare-grid {
  display: grid;
  gap: 11px;
}
.diagnosis-grid { grid-template-columns: repeat(3, 1fr); }
.diagnosis-card { position: relative; padding: 14px; border-top: 4px solid var(--gold); }
.diagnosis-card.risk { border-top-color: var(--red); }
.diagnosis-card small { color: var(--muted); font-size: 9px; }
.diagnosis-card h4 { margin: 6px 0; color: var(--deep); font-size: 12px; }
.diagnosis-card p { margin: 0; color: #5f4f46; font-size: 10px; line-height: 1.65; }
.diagnosis-card b { position: absolute; top: 11px; right: 12px; color: var(--red); font: 800 18px Georgia, serif; }
.question-list { display: grid; gap: 8px; counter-reset: question; }
.question-card { position: relative; padding: 12px 13px 12px 47px; border: 1px solid var(--line); border-radius: 10px; background: #fffaf0; color: #49372e; font-size: 11px; line-height: 1.65; }
.question-card::before { counter-increment: question; content: counter(question); position: absolute; top: 12px; left: 13px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff0c8; background: var(--deep); font: 800 10px Georgia, serif; }

.evidence-grid { grid-template-columns: repeat(3, 1fr); }
.evidence-card { position: relative; padding: 14px; overflow: hidden; }
.evidence-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gold); content: ""; }
.evidence-card.used { border-color: #c8a650; background: #fff6da; }
.source-meta { justify-content: space-between; gap: 8px; }
.source-type { padding: 4px 7px; border-radius: 999px; color: #fff; background: var(--red); font-size: 8px; font-weight: 800; }
.source-meta time { color: var(--muted); font-size: 8px; }
.evidence-card h4 { margin: 10px 0 7px; color: var(--deep); font-size: 12px; }
.evidence-card p { margin: 0; color: #5a4a41; font-size: 10px; line-height: 1.7; }
.evidence-toolbar { justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.evidence-toolbar span { color: var(--muted); font-size: 8px; }
.evidence-toolbar button { padding: 5px 8px; border: 1px solid #d7b665; border-radius: 7px; color: #6b4705; background: #fff4ce; font-size: 9px; font-weight: 800; }
.evidence-toolbar button:disabled { color: #776948; background: #eee4ca; }

.report-card { padding: 16px; }
.report-card.highlight { color: #fff5d7; border-color: var(--deep); background: linear-gradient(120deg, var(--deep), #962119); }
.report-head { justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.report-head h3 { margin: 0; font: 800 19px STKaiti, KaiTi, serif; }
.report-head span { padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 8px; opacity: .8; }
.report-card p { margin: 0; font-size: 11px; line-height: 1.75; }
.report-grid { grid-template-columns: 1fr 1fr; }
.comparison-column { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.comparison-column small { color: var(--red); font-size: 9px; font-weight: 800; }
.comparison-column h4 { margin: 7px 0; color: var(--deep); font-size: 12px; }
.comparison-column p { margin: 0; color: #5d4c43; font-size: 10px; line-height: 1.7; }
.conclusion-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.conclusion-list li { position: relative; padding: 9px 10px 9px 34px; border: 1px solid var(--line); border-radius: 9px; background: #fffaf0; font-size: 10px; line-height: 1.55; }
.conclusion-list li::before { position: absolute; top: 9px; left: 10px; content: "✓"; color: var(--red); font-weight: 900; }

.metric-grid { grid-template-columns: repeat(4, 1fr); }
.metric { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.metric small, .metric strong { display: block; }
.metric small { color: var(--muted); font-size: 9px; }
.metric strong { margin-top: 6px; color: var(--deep); font: 800 23px Georgia, serif; }
.metric em { color: var(--muted); font-size: 8px; font-style: normal; }
.analysis-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 12px; }
.bar-list { display: grid; gap: 12px; }
.stat-head { justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #55443a; font-size: 10px; }
.bar-track { height: 9px; overflow: hidden; border-radius: 99px; background: #eee2c9; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold)); }
.insight-list { display: grid; gap: 8px; }
.insight-item { padding: 11px; border-left: 4px solid var(--gold); background: #fff8e7; }
.insight-item strong { display: block; color: var(--deep); font-size: 10px; }
.insight-item p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

.prepare-grid { grid-template-columns: repeat(3, 1fr); }
.prepare-card { min-height: 185px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.prepare-card > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: #fff0c5; background: var(--deep); }
.prepare-card h3 { margin: 12px 0 6px; color: var(--deep); font: 800 16px STKaiti, KaiTi, serif; }
.prepare-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.prepare-card button { margin-top: 13px; }
.graph-card { padding: 17px; }
.knowledge-graph { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 36px; min-height: 245px; align-items: center; padding: 12px 10px; }
.graph-node { position: relative; z-index: 2; padding: 12px 10px; border: 1px solid #d7b65f; border-radius: 10px; color: #4f3917; text-align: center; background: #fff4d0; font-size: 10px; font-weight: 800; }
.graph-node.core { grid-column: 2; color: #fff3cb; border-color: var(--deep); background: var(--deep); }
.graph-node.center { grid-column: 2; color: #fff; border-color: var(--red); background: var(--red); }
.graph-line { position: absolute; z-index: 1; height: 1px; background: #d5b96f; transform-origin: left center; }
.graph-line.one { top: 31%; left: 31%; width: 38%; transform: rotate(0deg); }
.graph-line.two { top: 52%; left: 23%; width: 54%; }
.graph-line.three { top: 72%; left: 31%; width: 38%; }

.chat-layout { display: grid; grid-template-rows: minmax(320px, 1fr) auto; min-height: 100%; }
.chat-stream { display: grid; align-content: start; gap: 12px; padding: 18px; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.prompt-chips button { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: #6d4e13; background: #fff6dc; font-size: 9px; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 13px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-composer textarea { min-height: 58px; resize: none; }
.chat-composer button { min-width: 84px; }

.literature-grid { grid-template-columns: repeat(2, 1fr); }
.literature-card { padding: 15px; }
.literature-card .source-type { display: inline-block; }
.literature-card h3 { margin: 10px 0 7px; color: var(--deep); font-size: 13px; }
.literature-card p { margin: 0; color: #5c4b42; font-size: 10px; line-height: 1.7; }
.literature-card footer { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }

.teacher-grid { grid-template-columns: 1.2fr .8fr; }
.teacher-card { padding: 15px; }
.teacher-toolbar { justify-content: space-between; gap: 10px; }
.teacher-stage-list { display: grid; gap: 8px; margin-top: 12px; }
.teacher-stage-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 58px; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fffaf0; }
.teacher-stage-row strong { color: var(--deep); font-size: 10px; }
.teacher-stage-row span { color: var(--muted); font-size: 9px; }
.teacher-stage-row b { color: var(--red); text-align: right; font-size: 10px; }
.quote-list { display: grid; gap: 8px; }
.quote-item { padding: 10px; border-left: 4px solid var(--gold); background: #fff7e2; }
.quote-item strong { display: block; color: var(--deep); font-size: 10px; }
.quote-item p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }

.right-sidebar { display: flex; flex-direction: column; padding: 16px 13px; }
.stage-heading { gap: 10px; padding: 0 4px 15px; border-bottom: 1px solid var(--line); }
.stage-heading h2 { display: block; margin: 0; }
.stage-heading h2 { color: var(--deep); font: 800 18px STKaiti, KaiTi, serif; }
.stage-list { position: relative; display: grid; gap: 7px; margin-top: 12px; }
.stage-list::before { position: absolute; top: 37px; bottom: 37px; left: 31px; width: 1px; background: #d8c49b; content: ""; }
.stage-button {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  text-align: left;
  background: transparent;
}
.stage-button:hover:not(:disabled) { background: #fff7e7; }
.stage-button.active { color: var(--deep); border-color: #dabc73; background: linear-gradient(90deg, #f8e8bd, #fffaf1); }
.stage-button.completed:not(.active) { color: #665111; }
.stage-button.locked { opacity: .43; }
.stage-icon { position: relative; z-index: 2; display: grid; width: 35px; height: 35px; margin-left: 4px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: #775f42; background: var(--surface); font: 800 9px Georgia, serif; }
.stage-button.active .stage-icon { color: #fff0c1; border-color: var(--deep); background: var(--deep); box-shadow: 0 0 0 4px #f7e5b6; }
.stage-button.completed:not(.active) .stage-icon { color: #fff6d9; border-color: var(--gold); background: #a9812c; }
.stage-button small, .stage-button strong, .stage-button em { display: block; }
.stage-button small { font-size: 9px; }
.stage-button strong { margin: 3px 0; color: inherit; font: 800 15px STKaiti, KaiTi, serif; }
.stage-button em { font-size: 9px; font-style: normal; }

.digital-human-card {
  position: relative;
  flex: 1;
  min-height: 300px;
  max-height: 480px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #ddc47f;
  border-radius: 14px;
  background: linear-gradient(180deg, #f4ead5, #ead7ae);
  box-shadow: 0 10px 26px rgba(89, 39, 18, .09);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.digital-human-card.speaking {
  border-color: #bd3a2e;
  box-shadow: 0 12px 32px rgba(150, 27, 20, .18);
}
body.digital-human-focused .right-sidebar { z-index: 40; }
.digital-human-card.speaking.focused {
  position: fixed;
  top: clamp(88px, 9vh, 112px);
  right: clamp(18px, 3vw, 72px);
  bottom: 18px;
  z-index: 60;
  width: clamp(620px, 46vw, 1040px);
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  border-width: 2px;
  transform: none;
  transform-origin: right center;
  pointer-events: none;
  box-shadow: 0 30px 90px rgba(43, 11, 7, .4);
  animation: digital-human-focus-in .3s cubic-bezier(.2, .75, .25, 1) both;
}
.digital-human-focus-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: none;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 238, 199, .78);
  border-radius: 999px;
  color: #fff6da;
  background: rgba(92, 12, 8, .86);
  box-shadow: 0 6px 18px rgba(53, 12, 8, .18);
  font-size: 11px;
  backdrop-filter: blur(7px);
  pointer-events: auto;
}
.digital-human-focus-toggle:hover { background: rgba(130, 19, 13, .94); }
.digital-human-focus-toggle span { font-size: 15px; line-height: 1; }
.digital-human-focus-toggle b { font-weight: 800; }
.digital-human-card.speaking .digital-human-focus-toggle { display: flex; }
.digital-human-card video {
  position: absolute;
  inset: 0 0 56px;
  width: 100%;
  height: calc(100% - 56px);
  object-fit: contain;
  object-position: center bottom;
  background: #efe1c5;
}
.digital-human-card video[hidden] { display: none; }
.digital-human-state {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 2;
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 237, 198, .54);
  border-radius: 999px;
  color: #fff5da;
  background: rgba(91, 11, 8, .82);
  box-shadow: 0 6px 18px rgba(60, 13, 8, .18);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  backdrop-filter: blur(8px);
}
.digital-human-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(240, 198, 95, .18);
}
.digital-human-card.speaking .digital-human-state i { animation: digital-human-pulse 1s ease-in-out infinite; }
@keyframes digital-human-pulse {
  50% { opacity: .42; transform: scale(.78); }
}
@keyframes digital-human-focus-in {
  from { opacity: .35; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 340px; padding: 11px 15px; border: 1px solid #e6c873; border-radius: 10px; color: #fff3ce; background: var(--deep); box-shadow: var(--shadow); font-size: 11px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.modal-shell { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 22px; background: rgba(42, 15, 10, .52); backdrop-filter: blur(3px); }
.modal-shell[hidden] { display: none; }
.dialog { width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 22px; border: 1px solid #d7b463; border-top: 5px solid var(--red); border-radius: 15px; background: var(--surface); box-shadow: 0 24px 70px rgba(47,15,9,.28); }
.dialog h2 { margin: 0; color: var(--deep); font: 800 23px STKaiti, KaiTi, serif; }
.dialog p { color: #5b4a40; font-size: 11px; line-height: 1.75; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.record-summary { display: grid; gap: 8px; margin-top: 14px; }
.record-summary div { display: flex; justify-content: space-between; gap: 15px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff8e8; }
.record-summary span { color: var(--muted); font-size: 9px; }
.record-summary strong { color: var(--deep); font-size: 10px; text-align: right; }
.evaluation-dialog { width: min(760px, 100%); padding: 0; overflow: hidden; }
.evaluation-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 25px 28px 22px;
  color: #fff8e5;
  background: linear-gradient(125deg, #74100b, #a91d15);
}
.evaluation-dialog-header h2 { margin-top: 6px; color: #fff8e5; font-size: clamp(23px, 2vw, 30px); }
.evaluation-eyebrow { color: #f1cb6b; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.evaluation-close-button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 240, 204, .62);
  border-radius: 50%;
  color: #fff8e5;
  background: rgba(77, 9, 6, .35);
  font-size: 26px;
  line-height: 1;
}
.evaluation-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 28px;
  border-bottom: 1px solid #ead7a9;
  color: #806d5e;
  background: #fff8e8;
  font-size: 12px;
}
.evaluation-status { color: #8b5a12; font-weight: 800; }
.evaluation-status.complete { color: #8a160f; }
.evaluation-content { display: grid; gap: 14px; padding: 24px 28px 4px; }
.evaluation-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 15px;
  padding: 18px;
  border: 1px solid #e0c47c;
  border-radius: 13px;
  background: #fffaf0;
}
.evaluation-item.improvements { background: #fff5e4; }
.evaluation-item-index {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff8df;
  background: #8a160f;
  font: 800 12px Georgia, serif;
}
.evaluation-item h3 { margin: 1px 0 7px; color: #81140e; font-size: 16px; }
.evaluation-item p { margin: 0; color: #49372d; font-size: 14px; line-height: 1.85; }
.evaluation-dialog .dialog-actions { padding: 4px 28px 24px; }
.evaluation-done-button { min-width: 118px; }

body.teacher-mode .feature-nav, body.teacher-mode .history-section, body.teacher-mode .right-sidebar { opacity: .62; }
body.teacher-mode .feature-nav, body.teacher-mode .history-section { pointer-events: none; }

@media (min-width: 1600px) {
  .topbar { min-height: 82px; padding: 11px 28px; }
  .brand-seal { width: 50px; height: 50px; flex-basis: 50px; font-size: 25px; }
  .brand-copy strong { font-size: clamp(23px, 1.25vw, 27px); }
  .brand-copy small,
  .course-title span,
  .knowledge-status { font-size: clamp(12px, .68vw, 14px); }
  .course-title strong { font-size: clamp(23px, 1.25vw, 27px); }
  .profile-trigger { grid-template-columns: 42px minmax(72px, auto) 17px; min-width: 168px; padding: 6px 10px 6px 7px; }
  .profile-avatar { width: 42px; height: 42px; }
  .profile-avatar svg { width: 23px; height: 23px; }
  .profile-copy small { font-size: 10px; }
  .profile-copy strong { font-size: 14px; }
  .profile-menu { width: 250px; }
  .option-copy strong { font-size: 14px; }
  .option-copy small { font-size: 11px; }

  .app-shell {
    grid-template-columns: clamp(300px, 17vw, 420px) minmax(760px, 1fr) clamp(320px, 18vw, 440px);
    gap: 16px;
    min-height: calc(100vh - 82px);
    padding: 16px;
  }
  .left-sidebar, .right-sidebar { top: 98px; height: calc(100vh - 114px); }
  .left-sidebar { padding: 18px 16px; }
  .right-sidebar { padding: 19px 16px; }
  .main-workspace { height: calc(100vh - 114px); gap: 12px; }
  .workspace-header { min-height: 58px; }

  .profile-card p { font-size: clamp(12px, .66vw, 14px); }
  .profile-card h1 { font-size: clamp(21px, 1.08vw, 24px); }
  .section-label,
  .history-heading,
  .history-heading button,
  .history-copy strong,
  .history-empty { font-size: clamp(12px, .68vw, 14px); }
  .feature-button { min-height: 70px; }
  .feature-button strong { font-size: clamp(15px, .78vw, 17px); }
  .feature-button small,
  .history-copy small { font-size: clamp(11px, .6vw, 13px); }
  .new-session-button { min-height: 48px; font-size: 15px; }

  .workspace-title h2 { font-size: clamp(25px, 1.35vw, 30px); }
  .record-button { min-height: 42px; padding-inline: 15px; font-size: 13px; }
  .context-banner { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 15px; padding: 15px 18px; }
  .context-number { width: 45px; height: 45px; font-size: 14px; }
  .context-banner h3 { font-size: clamp(20px, 1.15vw, 26px); }
  .context-tag { padding: 7px 11px; font-size: 11px; }
  .debate-brief { grid-template-columns: minmax(240px, .9fr) minmax(240px, 1fr) 40px minmax(240px, 1fr); gap: 13px; padding: 12px 15px; }
  .debate-brief-topic span,
  .debate-side span { font-size: 11px; }
  .debate-brief-topic strong { font-size: clamp(18px, .94vw, 21px); }
  .debate-side strong { font-size: clamp(12px, .66vw, 14px); }
  .debate-versus { width: 34px; height: 34px; font-size: 11px; }

  .chat-dialogue { gap: 22px; padding: 22px 24px 28px; }
  .chat-message { max-width: 82%; gap: 14px; }
  .chat-avatar { width: 42px; height: 42px; flex-basis: 42px; font-size: 13px; }
  .chat-avatar.user-avatar svg { width: 23px; height: 23px; }
  .chat-bubble { padding: 15px 18px; }
  .chat-bubble p { font-size: clamp(15px, .45vw, 18px); line-height: 1.82; }
  .compact-composer { grid-template-columns: minmax(0, 1fr) 64px; gap: 13px; padding: 18px 22px; }
  .compact-composer .chat-input { min-height: 108px; padding: 16px 18px; font-size: clamp(16px, .44vw, 18px); line-height: 1.65; }
  .chat-send-button { width: 64px; height: 64px; }
  .chat-send-button svg { width: 26px; height: 26px; }

  .panel-heading h3 { font-size: clamp(21px, 1.1vw, 25px); }
  .panel-heading p,
  .diagnosis-card p,
  .evidence-card p,
  .comparison-column p,
  .prepare-card p,
  .literature-card p,
  .teacher-stage-row span { font-size: clamp(12px, .66vw, 14px); }
  .panel-heading .tag,
  .diagnosis-card small,
  .source-type,
  .source-meta time,
  .evidence-toolbar span,
  .comparison-column small,
  .metric small,
  .metric em { font-size: 11px; }
  .diagnosis-card h4,
  .evidence-card h4,
  .comparison-column h4,
  .teacher-stage-row strong,
  .teacher-stage-row b { font-size: clamp(14px, .72vw, 16px); }
  .question-card,
  .report-card p,
  .conclusion-list li { font-size: clamp(13px, .7vw, 15px); }
  .soft-button, .primary-button, .gold-button, .danger-button { min-height: 42px; padding-inline: 16px; font-size: 13px; }

  .stage-heading h2 { font-size: clamp(22px, 1.12vw, 26px); }
  .stage-list { gap: 9px; margin-top: 15px; }
  .stage-button { grid-template-columns: 52px minmax(0, 1fr); min-height: 88px; padding: 11px; }
  .stage-icon { width: 40px; height: 40px; font-size: 11px; }
  .stage-button small,
  .stage-button em { font-size: clamp(11px, .6vw, 13px); }
  .stage-button strong { font-size: clamp(18px, .94vw, 21px); }
  .digital-human-card { min-height: 340px; }
  .digital-human-state { min-height: 39px; font-size: 12px; }
}

@media (max-width: 1240px) {
  .topbar { grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.2fr) auto; padding-inline: 16px; }
  .knowledge-status { display: none; }
  .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .right-sidebar { position: relative; top: 0; grid-column: 1 / -1; height: auto; }
  .stage-list { grid-template-columns: repeat(4, minmax(170px, 1fr)); overflow-x: auto; }
  .stage-list::before { display: none; }
  .debate-brief { grid-template-columns: minmax(210px, .8fr) minmax(240px, 1fr) 34px minmax(240px, 1fr); }
  .digital-human-card { width: min(100%, 360px); min-height: 420px; flex: none; align-self: center; }
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .course-title { display: none; }
  .app-shell { grid-template-columns: 1fr; padding: 9px; }
  .left-sidebar { position: relative; top: 0; height: auto; }
  .profile-card { grid-template-columns: 45px 1fr; padding-bottom: 12px; }
  .agent-avatar { width: 44px; height: 44px; }
  .feature-nav { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .feature-button { min-width: 192px; }
  .history-section { display: none; }
  .main-workspace { height: auto; min-height: 720px; }
  .workspace-panel { min-height: 620px; }
  .right-sidebar { grid-column: auto; }
  .digital-human-card { min-height: 380px; }
  .digital-human-card.speaking.focused {
    inset: 84px 14px 18px;
    width: auto;
    height: auto;
    min-height: 0;
    transform: none;
  }
  .diagnosis-grid, .prepare-grid, .evidence-grid { grid-template-columns: 1fr; }
  .analysis-layout, .teacher-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .topbar { min-height: 66px; padding: 8px 10px; }
  .brand-seal { width: 39px; height: 39px; flex-basis: 39px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { display: none; }
  .profile-trigger { grid-template-columns: 32px minmax(53px, auto) 13px; gap: 6px; min-width: 113px; padding: 4px 7px 4px 5px; }
  .profile-avatar { width: 32px; height: 32px; }
  .profile-avatar svg { width: 18px; height: 18px; }
  .profile-copy small { display: none; }
  .profile-copy strong { margin-top: 0; font-size: 11px; }
  .profile-menu { width: 210px; }
  .app-shell { padding: 7px; }
  .workspace-header { min-height: 45px; }
  .record-button { padding-inline: 9px; font-size: 0; }
  .record-button svg { width: 18px; height: 18px; }
  .context-banner { grid-template-columns: 38px 1fr; padding: 11px; }
  .context-number { width: 34px; height: 34px; }
  .context-tag { display: none; }
  .debate-brief { grid-template-columns: 1fr; }
  .debate-versus { width: 28px; height: 28px; justify-self: center; }
  .panel-body { padding: 10px; }
  .stance-grid, .report-grid, .literature-grid { grid-template-columns: 1fr; }
  .stance + .stance { border-top: 1px solid var(--line); border-left: 0; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .composer-footer .primary-button { width: 100%; }
  .message-card.student { margin-left: 0; }
  .chat-dialogue { padding: 15px 11px 20px; }
  .chat-message { max-width: 96%; }
  .chat-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .compact-composer { grid-template-columns: minmax(0, 1fr) 52px; padding: 12px; }
  .compact-composer .chat-input { min-height: 82px; }
  .chat-send-button { width: 52px; height: 52px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .stage-list { grid-template-columns: repeat(4, 155px); }
  .chat-composer { grid-template-columns: 1fr; }
  .chat-composer button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@keyframes typing-cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

/* 逐字稿驱动的语音研讨交互 */
.scripted-chat-panel { height: 100%; min-height: 0; }
.scripted-chat-panel .chat-dialogue {
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  scroll-behavior: auto;
}
.scripted-chat-panel .chat-message-body { max-width: min(100%, 980px); }
.scripted-chat-panel .chat-message.user-message {
  width: min(720px, 92%);
  max-width: 92%;
  gap: 10px;
}
.scripted-chat-panel .user-message .chat-message-body {
  width: min(660px, calc(100% - 52px));
  margin-left: auto;
}
.talk-panel {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background: #fcf8ef;
}
body.talk-mode .app-shell { grid-template-columns: clamp(270px, 17vw, 360px) minmax(620px, 1fr); }
body.talk-mode .context-banner,
body.talk-mode .debate-brief,
body.talk-mode .right-sidebar { display: none; }
.talk-topic-figure {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #dfc47e;
  background: linear-gradient(180deg, #fffaf0, #fbf1dc);
}
.talk-topic-figure img {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(91, 17, 12, .16);
}
.talk-dialogue { min-height: 0; overflow-y: auto; }
.talk-message { max-width: 84%; }
.talk-composer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 5;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, .98);
  box-shadow: 0 -7px 20px rgba(76, 42, 20, .055);
  backdrop-filter: blur(8px);
}
.talk-composer { position: relative; padding: 14px 18px; }
.talk-input {
  width: 100%;
  min-height: 106px;
  max-height: 190px;
  resize: vertical;
  padding: 14px 118px 52px 16px;
  border: 1px solid #dfc47e;
  border-radius: 13px;
  outline: 0;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  line-height: 1.65;
}
.talk-input::placeholder { color: #9a938e; }
.talk-input:focus { border-color: #c52b21; box-shadow: 0 0 0 3px rgba(197, 43, 33, .1); }
.talk-composer-actions {
  position: absolute;
  right: 31px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.talk-composer-actions .composer-icon-button { width: 42px; height: 42px; }
.talk-voice-status {
  position: absolute;
  bottom: 28px;
  left: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9b1d15;
  font-size: 12px;
}
.talk-voice-status[hidden] { display: none; }
.talk-voice-status .voice-wave-bars { width: 30px; height: 20px; flex: 0 0 30px; gap: 2px; color: #bd2018; }
.talk-voice-status .voice-wave-bars i { width: 3px; animation: voice-wave .65s ease-in-out infinite alternate; animation-delay: calc(var(--bar) * -65ms); }
.talk-voice-status.ready { color: #725823; }
.talk-voice-status.ready > i { width: 7px; height: 7px; border-radius: 50%; background: #b78a29; }
.talk-stream-output { white-space: pre-line; }
.talk-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 46px;
  padding: 10px 14px;
  border: 1px solid #dfcfad;
  border-radius: 4px 13px 13px 13px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
}
.talk-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: thinking-dot .9s ease-in-out infinite; }
.talk-thinking i:nth-of-type(2) { animation-delay: .15s; }
.talk-thinking i:nth-of-type(3) { animation-delay: .3s; }
.scripted-chat-panel .assistant-head,
.student-head { display: flex; align-items: center; }
.student-head { justify-content: flex-end; padding-right: 2px; }
.xin-avatar { background: linear-gradient(145deg, #8b130e, #65100c); }
.student-voice-message {
  display: flex;
  width: min(520px, 100%);
  min-width: 0;
  align-items: flex-end;
  flex-direction: column;
  gap: 9px;
}
.student-voice-strip {
  display: flex;
  width: 265px;
  min-height: 58px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid #dcae49;
  border-radius: 24px 5px 5px 24px;
  color: #7c190f;
  background: linear-gradient(90deg, #ffedbb, #f8dda0);
  box-shadow: 0 4px 12px rgba(95, 51, 19, .05);
}
.student-voice-strip .voice-wave-bars {
  height: 30px;
  flex: 0 0 58px;
  justify-content: center;
  gap: 3px;
  color: #bd2018;
}
.student-voice-strip .voice-wave-bars i { width: 4px; opacity: 1; }
.student-voice-strip strong { margin-left: auto; color: #715f4f; font-size: 14px; font-weight: 500; text-align: right; }
.student-voice-play {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #bd2018;
}
.student-voice-play svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.voice-transcript {
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid #e2c57e;
  border-radius: 18px 5px 5px 18px;
  color: #4b3a30;
  background: #fff7df;
  font-size: clamp(15px, .86vw, 18px);
  line-height: 1.82;
  text-align: left;
}
.voice-transcript p { margin: 0; font: inherit; line-height: inherit; }
.voice-transcript p + p { margin-top: 8px; }
.voice-wave-bars {
  display: inline-flex;
  height: 27px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.voice-wave-bars i {
  display: block;
  width: 3px;
  height: var(--wave-height, 14px);
  border-radius: 99px;
  background: currentColor;
  opacity: .72;
  transform-origin: center;
}
.assistant-audio {
  display: flex;
  width: 360px;
  min-width: 360px;
  max-width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 6px 10px 6px 7px;
  border: 1px solid #dfc681;
  border-radius: 11px;
  color: #8b2419;
  background: #fff9eb;
}
.assistant-audio .voice-wave-bars {
  height: 30px;
  flex: 0 0 62px;
  justify-content: center;
  gap: 3px;
  padding-inline: 2px;
  color: #bd2018;
}
.assistant-audio .voice-wave-bars i {
  width: 4px;
  height: var(--wave-height, 14px);
  opacity: .72;
  transition: transform .18s ease, opacity .18s ease;
}
.assistant-audio.playing .voice-wave-bars i,
.recording-live .voice-wave-bars i { animation: voice-wave .62s ease-in-out infinite alternate; animation-delay: calc(var(--bar) * -55ms); }
.assistant-audio.playing .voice-wave-bars i { opacity: 1; }
.audio-playback-button {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff4cf;
  background: var(--red);
}
.audio-playback-button:hover { background: var(--red-strong); }
.audio-playback-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.audio-playback-button svg path[d^="m8"] { fill: currentColor; stroke: none; }
.audio-status { min-width: 60px; font-size: 11px; font-weight: 800; }
.assistant-audio time { color: #7f6c5c; font-size: 10px; font-variant-numeric: tabular-nums; }
.thinking-bubble {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #dfcfad;
  border-radius: 4px 13px 13px 13px;
  color: var(--deep);
  background: #fff;
}
.thinking-bubble strong { font-size: 13px; }
.thinking-bubble span { display: flex; gap: 5px; }
.thinking-bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: thinking-dot .9s ease-in-out infinite; }
.thinking-bubble i:nth-child(2) { animation-delay: .15s; }
.thinking-bubble i:nth-child(3) { animation-delay: .3s; }
.summary-bubble p { white-space: pre-line; }
.summary-bubble p strong { color: var(--deep); }
.voice-composer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 5;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, .98);
  box-shadow: 0 -7px 20px rgba(76, 42, 20, .055);
  backdrop-filter: blur(8px);
}
.voice-composer {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 22px;
}
.voice-composer-copy strong,
.voice-composer-copy span { display: block; }
.voice-composer-copy strong { color: var(--deep); font: 800 clamp(17px, 1vw, 21px) STKaiti, KaiTi, serif; }
.voice-composer-copy span { margin-top: 7px; color: var(--muted); font-size: clamp(11px, .65vw, 14px); }
.record-toggle-button {
  display: inline-flex;
  min-width: 176px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--red);
  border-radius: 13px;
  color: #fff8df;
  background: linear-gradient(135deg, #c4291e, #94140f);
  box-shadow: 0 8px 18px rgba(156, 24, 17, .17);
  font-size: 14px;
  font-weight: 800;
}
.record-toggle-button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(156, 24, 17, .22); }
.record-toggle-button:disabled { cursor: wait; opacity: .55; transform: none; }
.record-toggle-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.record-toggle-button.stop { background: #79110d; }
.stop-record-icon { width: 14px; height: 14px; border-radius: 3px; background: currentColor; }
.recording-live { display: flex; flex: 1; align-items: center; gap: 13px; color: #9b1d15; }
.recording-live > div strong,
.recording-live > div span { display: block; }
.recording-live > div strong { font-size: 14px; }
.recording-live > div span { margin-top: 4px; color: #735f51; font-size: 12px; font-variant-numeric: tabular-nums; }
.recording-live .voice-wave-bars { max-width: 360px; color: #a81e17; }
.voice-status-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #c8231a; box-shadow: 0 0 0 7px rgba(200, 35, 26, .11); animation: recording-pulse 1s ease-in-out infinite; }
.stage-finished-composer {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 22px;
  color: #69521b;
}
.stage-finished-composer > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff9e5; background: #aa832a; font-weight: 900; }
.stage-finished-composer strong { color: var(--deep); font-size: 14px; }
.stage-finished-composer p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.stage-thread-divider {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 3px 0 5px;
}
.stage-thread-divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 136, 37, .58));
}
.stage-thread-divider-line:last-child { background: linear-gradient(90deg, rgba(184, 136, 37, .58), transparent); }
.stage-thread-divider-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(620px, 70vw);
  padding: 9px 16px;
  border: 1px solid #e4c36d;
  border-radius: 999px;
  background: #fff7df;
  box-shadow: 0 5px 14px rgba(128, 83, 18, .06);
}
.stage-thread-divider-check {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 50%;
  color: #fff9e5;
  background: #aa832a;
  font-weight: 900;
}
.stage-thread-divider-copy > span:last-child { display: grid; gap: 2px; }
.stage-thread-divider-copy strong { color: var(--deep); font-size: 13px; }
.stage-thread-divider-copy small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.hybrid-composer {
  position: relative;
  padding: 14px 18px;
  background: #fffdf8;
}
.student-text-input {
  width: 100%;
  min-height: 126px;
  max-height: 210px;
  resize: vertical;
  padding: 16px 18px 65px;
  border: 1px solid #dfc47e;
  border-radius: 15px;
  outline: 0;
  color: #42332b;
  background: #fff;
  font-size: clamp(15px, .86vw, 18px);
  line-height: 1.72;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.student-text-input::placeholder { color: #9a938e; }
.student-text-input:focus { border-color: #c52b21; box-shadow: 0 0 0 3px rgba(197, 43, 33, .1); }
.student-text-input:disabled { color: #4f4037; opacity: 1; background: #fffdf9; }
.hybrid-composer-footer {
  position: absolute;
  right: 32px;
  bottom: 25px;
  left: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}
.hybrid-composer-footer > * { pointer-events: auto; }
.hybrid-composer-actions { display: flex; align-items: center; gap: 10px; }
.composer-icon-button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #d8ae4e;
  border-radius: 50%;
  color: #b7221a;
  background: #fffaf0;
  box-shadow: 0 5px 13px rgba(90, 42, 18, .06);
}
.composer-icon-button:hover:not(:disabled) { transform: translateY(-1px); background: #fff3d7; }
.composer-icon-button.send { color: #fff; border-color: #bd2018; background: #bd2018; }
.composer-icon-button.send:hover:not(:disabled) { background: #9f1711; }
.composer-icon-button.recording { color: #fff; border-color: #ba2118; background: #ba2118; }
.composer-icon-button:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.composer-icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.composer-icon-button.send svg path:first-child { fill: none; }
.composer-recording-status,
.composer-round-tip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #865d1c;
  background: #fff0c9;
  font-size: 12px;
}
.composer-recording-status .voice-wave-bars { width: 23px; height: 18px; flex: 0 0 23px; gap: 2px; color: #c32920; }
.composer-recording-status .voice-wave-bars i { width: 3px; animation: voice-wave .7s ease-in-out infinite alternate; animation-delay: calc(var(--bar) * -70ms); }
.composer-recording-status time { font-variant-numeric: tabular-nums; }
.composer-recording-status.ready { color: #725823; background: #f9edcb; }
.composer-recording-status.ready i { width: 7px; height: 7px; border-radius: 50%; background: #b78a29; }
.composer-round-tip { color: #8a7b70; background: transparent; }

@keyframes voice-wave { to { transform: scaleY(.38); opacity: .45; } }
@keyframes thinking-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-4px); opacity: 1; } }
@keyframes recording-pulse { 50% { opacity: .6; transform: scale(.85); } }

@media (min-width: 1800px) {
  .scripted-chat-panel .chat-dialogue { gap: 24px; padding: 26px 30px 34px; }
  .student-voice-message { width: min(680px, 100%); min-width: 0; }
  .assistant-head strong { font-size: clamp(14px, .74vw, 17px); }
  .assistant-audio { min-height: 48px; }
  .voice-composer { min-height: 118px; padding: 20px 27px; }
}

@media (max-width: 900px) {
  body.talk-mode .app-shell { grid-template-columns: 1fr; }
  .student-voice-message { width: min(520px, 100%); min-width: 0; }
  .voice-composer { align-items: stretch; flex-direction: column; gap: 13px; }
  .record-toggle-button { width: 100%; }
  .student-voice-message { width: min(520px, 100%); }
}

@media (max-width: 620px) {
  .student-voice-message { min-width: 0; width: 100%; }
  .student-voice-strip { min-height: 48px; }
  .voice-transcript { padding: 11px 13px 13px; font-size: 14px; }
  .voice-composer { min-height: 120px; padding: 14px 12px; }
  .recording-live { align-items: flex-start; flex-wrap: wrap; }
  .recording-live .voice-wave-bars { flex-basis: 100%; max-width: none; }
  .assistant-audio { width: 100%; min-width: 0; }
  .talk-topic-figure { padding: 8px; }
  .talk-topic-figure img { max-height: 180px; border-radius: 9px; }
  .talk-input { min-height: 116px; padding-right: 16px; }
  .talk-composer-actions { right: 22px; bottom: 20px; }
  .talk-voice-status { bottom: 24px; left: 24px; }
  .hybrid-composer { padding: 10px; }
  .student-text-input { min-height: 138px; padding: 13px 13px 67px; }
  .hybrid-composer-footer { right: 22px; bottom: 20px; left: 22px; }
  .composer-icon-button { width: 44px; height: 44px; }
}