/* =====================================================================
   小星老师 · AI 英语口语私教   样式表
   风格：小学生糖果卡通风（明亮 / 圆润 / 大按钮 / 高对比）
   ===================================================================== */

:root {
  /* 主色板 */
  --c-sky:      #6EC8FF;
  --c-sky-deep: #2E9BE6;
  --c-pink:     #FF8FC7;
  --c-pink-deep:#F4629F;
  --c-yellow:   #FFD84D;
  --c-yellow-dp:#F5B800;
  --c-green:    #6FDD9C;
  --c-green-dp: #2FBF71;
  --c-purple:   #B08CFF;
  --c-purple-dp:#7C4DFF;
  --c-orange:   #FFA45B;

  --ink:        #33305A;
  --ink-soft:   #6A6790;
  --ink-faint:  #9B99B8;

  --card:       #FFFFFF;
  --card-soft:  #F7F5FF;
  --line:       #EAE6FA;

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 11px;

  --shadow-sm: 0 3px 0 rgba(90,80,160,.10), 0 6px 16px rgba(90,80,160,.08);
  --shadow-md: 0 6px 0 rgba(90,80,160,.10), 0 14px 30px rgba(90,80,160,.13);
  --shadow-lg: 0 10px 0 rgba(90,80,160,.09), 0 22px 44px rgba(90,80,160,.16);

  --font: "Baloo 2", "Nunito", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* hidden 属性必须能压过组件自身的 display（如 .modal-mask 的 grid），
   否则弹窗会在页面加载时就铺满屏幕、拦截所有点击 */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(170deg, #EAF4FF 0%, #F3ECFF 42%, #FFF0F7 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
}

/* ---------- 背景装饰 ---------- */
.bg-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.blob-1 { width: 42vw; height: 42vw; background: #BEE4FF; left: -12vw; top: -14vw; animation: drift 22s ease-in-out infinite; }
.blob-2 { width: 36vw; height: 36vw; background: #FFD3EA; right: -10vw; top: 6vh;  animation: drift 27s ease-in-out infinite reverse; }
.blob-3 { width: 34vw; height: 34vw; background: #E2D6FF; left: 34vw;  bottom: -16vw; animation: drift 31s ease-in-out infinite; }

@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(4vw, 3vh) scale(1.09); }
  66%     { transform: translate(-3vw, -2vh) scale(.95); }
}

.cloud { position: absolute; font-size: 54px; opacity: .55; animation: floatY 9s ease-in-out infinite; }
.c1 { left: 16%; top: 8%;  animation-delay: .2s; }
.c2 { left: 62%; top: 4%;  animation-delay: 2.4s; font-size: 40px; }
.c3 { left: 82%; top: 26%; animation-delay: 4.1s; font-size: 46px; }

.float-emoji { position: absolute; font-size: 30px; opacity: .38; animation: floatY 7s ease-in-out infinite; }

@keyframes floatY {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-16px) rotate(4deg); }
}

/* =====================================================================
   顶部栏
   ===================================================================== */
.topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border-bottom: 3px solid #fff;
  box-shadow: 0 6px 22px rgba(110,140,200,.13);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-logo {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  font-size: 28px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--c-yellow), var(--c-orange));
  box-shadow: 0 5px 0 #E0893E, 0 10px 20px rgba(255,164,91,.42);
  animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-5px) rotate(4deg);} }

.brand-text h1 {
  margin: 0; font-size: 23px; letter-spacing: .5px;
  background: linear-gradient(92deg, var(--c-sky-deep), var(--c-purple-dp) 55%, var(--c-pink-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-text p { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-faint); font-weight: 700; }

.topbar-right { display: flex; align-items: center; gap: 9px; }

.stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 11px;
  background: #fff;
  border: 2.5px solid var(--line);
  border-radius: 999px;
  font-size: 15px; font-weight: 800; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease;
}
.stat-chip.bump { animation: bump .45s ease; }
@keyframes bump { 0%{transform:scale(1);} 40%{transform:scale(1.22);} 100%{transform:scale(1);} }
.chip-icon { font-size: 17px; }

.icon-btn {
  width: 42px; height: 42px;
  border: 2.5px solid var(--line); border-radius: 14px;
  background: #fff; cursor: pointer; font-size: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .14s, box-shadow .14s, background .14s;
}
.icon-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.icon-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(90,80,160,.12); }
.icon-btn.off { opacity: .42; }

/* =====================================================================
   舞台布局
   ===================================================================== */
.stage {
  position: relative; z-index: 10;
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 22px 20px;
  height: calc(100vh - 79px);
}

.side-panel {
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; padding-right: 4px;
}
.side-panel::-webkit-scrollbar { width: 7px; }
.side-panel::-webkit-scrollbar-thumb { background: #D8D2F0; border-radius: 8px; }

/* ---------- 老师卡片 ---------- */
.teacher-card {
  background: var(--card);
  border: 3px solid #fff;
  border-radius: var(--radius-xl);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-md);
  text-align: center;
  flex: none;
}

.teacher-avatar { position: relative; width: 156px; height: 156px; margin: 0 auto 6px; }
.mascot-svg { width: 100%; height: 100%; display: block; }

.teacher-avatar.talking .mascot-svg { animation: talkBob .5s ease-in-out infinite; }
@keyframes talkBob { 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-3px) rotate(1.4deg);} }

.teacher-avatar.thinking .eyes { animation: lookAround 1.6s ease-in-out infinite; }
@keyframes lookAround {
  0%,100% { transform: translateX(0); }
  35%     { transform: translateX(4px); }
  70%     { transform: translateX(-4px); }
}
.teacher-avatar.happy .mascot-svg { animation: hop .55s ease 2; }
@keyframes hop { 0%,100%{transform:translateY(0);} 45%{transform:translateY(-13px) scale(1.04);} }

.speak-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 4px solid var(--c-sky);
  opacity: 0; pointer-events: none;
}
.teacher-avatar.talking .speak-ring { animation: ring 1.1s ease-out infinite; }
@keyframes ring {
  0%   { transform: scale(.9);  opacity: .75; }
  100% { transform: scale(1.28); opacity: 0; }
}

.teacher-name {
  font-size: 17px; font-weight: 900; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-green-dp);
  box-shadow: 0 0 0 3px rgba(47,191,113,.22);
  animation: pulseDot 1.7s ease-in-out infinite;
}
.status-dot.offline { background: #C9C6DC; box-shadow: 0 0 0 3px rgba(200,200,220,.25); animation: none; }
@keyframes pulseDot { 0%,100%{opacity:1;} 50%{opacity:.42;} }

.teacher-bubble {
  margin-top: 9px;
  background: linear-gradient(160deg, #F3F9FF, #FFF2F9);
  border: 2.5px dashed #D9E8FF;
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  min-height: 62px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}

.mood-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.mood-btn {
  padding: 10px 6px;
  font-family: var(--font); font-size: 12.5px; font-weight: 800;
  color: var(--ink-soft);
  background: #F6F4FF;
  border: 2.5px solid #EDE9FF;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .16s ease;
}
.mood-btn:hover { transform: translateY(-2px); background: #EFEBFF; }
.mood-btn.active {
  color: #fff;
  background: linear-gradient(140deg, var(--c-purple), var(--c-purple-dp));
  border-color: #fff;
  box-shadow: 0 4px 0 #5E35C9, 0 9px 18px rgba(124,77,255,.35);
}

/* ---------- 进度卡片 ---------- */
.progress-card {
  background: var(--card);
  border: 3px solid #fff;
  border-radius: var(--radius-lg);
  padding: 14px 15px 15px;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; font-weight: 900; color: var(--ink); margin-bottom: 9px;
}
.progress-track {
  height: 15px; background: #F0EDFB; border-radius: 999px; overflow: hidden;
  border: 2px solid #fff; box-shadow: inset 0 2px 5px rgba(90,80,160,.09);
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c-green), var(--c-sky), var(--c-purple));
  border-radius: 999px;
  transition: width .55s cubic-bezier(.34,1.56,.64,1);
  background-size: 220% 100%;
  animation: shine 2.6s linear infinite;
}
@keyframes shine { 0%{background-position:0% 0;} 100%{background-position:220% 0;} }

.badge-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.badge {
  width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center; font-size: 19px;
  background: #F4F2FC; border: 2.5px solid #EDEAF8;
  filter: grayscale(1); opacity: .45;
  cursor: help; transition: all .25s ease;
}
.badge.unlocked {
  filter: none; opacity: 1;
  background: linear-gradient(140deg, #FFF6D6, #FFE7A8);
  border-color: #fff;
  box-shadow: 0 4px 0 #E9B93C, 0 8px 16px rgba(245,184,0,.3);
  animation: pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { 0%{transform:scale(.5) rotate(-18deg);} 70%{transform:scale(1.16) rotate(6deg);} 100%{transform:scale(1) rotate(0);} }

/* ---------- 场景卡片 ---------- */
.scene-card {
  background: var(--card);
  border: 3px solid #fff;
  border-radius: var(--radius-lg);
  padding: 14px 15px;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.scene-title { font-size: 13.5px; font-weight: 900; color: var(--ink); margin-bottom: 10px; }
.scene-list { display: flex; flex-wrap: wrap; gap: 7px; }
.scene-chip {
  padding: 7px 12px; font-family: var(--font); font-size: 12.5px; font-weight: 800;
  color: var(--ink-soft); background: #F6F4FF;
  border: 2.5px solid #EDE9FF; border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
.scene-chip:hover { transform: translateY(-2px) scale(1.04); background: #EFEBFF; color: var(--c-purple-dp); }

.btn-ghost {
  flex: none;
  padding: 12px; font-family: var(--font); font-size: 13.5px; font-weight: 800;
  color: var(--ink-soft); background: rgba(255,255,255,.8);
  border: 2.5px dashed #D6D0EC; border-radius: var(--radius-md);
  cursor: pointer; transition: all .16s;
}
.btn-ghost:hover { background: #fff; color: var(--c-pink-deep); border-color: var(--c-pink); }

/* =====================================================================
   主面板
   ===================================================================== */
.main-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  border: 3px solid #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.mode-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  background: linear-gradient(100deg, #E9F5FF, #F2ECFF 52%, #FFEDF6);
  border-bottom: 3px solid #fff;
  flex: none;
}
.mode-emoji { font-size: 27px; animation: bob 3.4s ease-in-out infinite; }
.mode-banner strong { display: block; font-size: 15.5px; color: var(--ink); }
.mode-banner small { font-size: 12px; color: var(--ink-faint); font-weight: 700; }

.chat-scroll { flex: 1; overflow-y: auto; padding: 18px 22px; min-height: 0; scroll-behavior: smooth; }
.chat-scroll::-webkit-scrollbar { width: 9px; }
.chat-scroll::-webkit-scrollbar-thumb { background: #D8D2F0; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.chat-inner { display: flex; flex-direction: column; gap: 15px; max-width: 880px; margin: 0 auto; }

/* ---------- 消息气泡 ---------- */
.msg { display: flex; gap: 11px; align-items: flex-end; animation: msgIn .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes msgIn { from { opacity:0; transform: translateY(14px) scale(.96); } to { opacity:1; transform: none; } }

.msg-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 15px;
  display: grid; place-items: center; font-size: 24px;
  box-shadow: var(--shadow-sm); border: 2.5px solid #fff;
}
.msg.ai .msg-avatar { background: linear-gradient(140deg, #FFE9A8, #FFC46B); }
.msg.me .msg-avatar { background: linear-gradient(140deg, #BDE6FF, #8FC9FF); }

.bubble {
  max-width: min(620px, 78%);
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 15.5px; line-height: 1.62;
  position: relative;
  box-shadow: var(--shadow-sm);
  word-break: break-word;
}
.msg.ai .bubble {
  background: #fff; border: 2.5px solid #FFF0D2;
  border-bottom-left-radius: 6px; color: var(--ink);
}
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble {
  background: linear-gradient(140deg, #E4F3FF, #D6EAFF);
  border: 2.5px solid #fff;
  border-bottom-right-radius: 6px; color: var(--ink);
}

.bubble .en { font-weight: 800; color: var(--c-sky-deep); }
.bubble .zh { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-faint); font-weight: 700; }

.bubble-tools { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.tool-btn {
  font-family: var(--font); font-size: 11.5px; font-weight: 800;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 2px solid #E9E4FA; background: #F8F6FF; color: var(--ink-soft);
  transition: all .15s;
}
.tool-btn:hover { background: #EFEBFF; color: var(--c-purple-dp); transform: translateY(-1px); }
.tool-btn:active { transform: translateY(1px); }
.tool-btn.playing { background: var(--c-sky); color: #fff; border-color: #fff; }

.typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.typing i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-purple); opacity: .5;
  animation: typing 1.15s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .17s; }
.typing i:nth-child(3) { animation-delay: .34s; }
@keyframes typing { 0%,100%{transform:translateY(0); opacity:.4;} 50%{transform:translateY(-6px); opacity:1;} }

.system-note {
  align-self: center; font-size: 12.5px; font-weight: 700; color: var(--ink-faint);
  background: rgba(255,255,255,.85); border: 2px dashed #E4DFF5;
  padding: 6px 15px; border-radius: 999px; text-align: center;
}

/* ---------- 纠错结果卡片 ---------- */
.fix-card {
  background: #fff; border: 3px solid #FFEEC9;
  border-radius: var(--radius-lg); padding: 14px 16px;
  box-shadow: var(--shadow-sm); max-width: 640px;
  border-bottom-left-radius: 6px;
}
.fix-row { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
.fix-row:last-child { margin-bottom: 0; }
.fix-tag {
  flex: none; font-size: 11px; font-weight: 900; padding: 4px 9px;
  border-radius: 8px; letter-spacing: .5px; margin-top: 3px;
}
.fix-tag.bad  { background: #FFE5E5; color: #D64545; }
.fix-tag.good { background: #E1F8EA; color: #23945A; }
.fix-tag.tip  { background: #E8F1FF; color: #2E6FD6; }
.fix-text { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.fix-text s { color: #D64545; text-decoration-thickness: 2px; }
.fix-text b { color: #23945A; }

.score-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 900; padding: 6px 14px;
  border-radius: 999px; background: linear-gradient(140deg,#FFE9A8,#FFC46B);
  color: #8A5A00; box-shadow: 0 3px 0 #E9B93C; margin-bottom: 11px;
}

/* ---------- 填空 / 翻译 卡片 ---------- */
.quiz-area { flex: none; padding: 0 22px 6px; }
.quiz-card {
  background: linear-gradient(160deg, #FFFDF4, #FFF6FF);
  border: 3px solid #fff;
  border-radius: var(--radius-xl);
  padding: 17px 20px;
  box-shadow: var(--shadow-md);
}
.quiz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.quiz-label { font-size: 12.5px; font-weight: 900; color: var(--ink-faint); letter-spacing: .6px; }
.quiz-progress { font-size: 12.5px; font-weight: 900; color: var(--c-purple-dp); }

.quiz-sentence { font-size: 20px; line-height: 2; font-weight: 800; color: var(--ink); margin: 6px 0 4px; }
.blk {
  display: inline-block; min-width: 118px; padding: 3px 12px; margin: 0 4px;
  border-bottom: 3.5px solid var(--c-purple);
  color: var(--c-purple-dp); text-align: center; cursor: pointer;
  background: rgba(176,140,255,.09); border-radius: 8px 8px 0 0;
  transition: all .18s;
}
.blk:hover { background: rgba(176,140,255,.2); }
.blk.filled { border-color: var(--c-green-dp); color: var(--c-green-dp); background: rgba(111,221,156,.16); }
.blk.right  { border-color: var(--c-green-dp); color: #fff; background: var(--c-green-dp); }
.blk.wrong  { border-color: #E45B5B; color: #fff; background: #E45B5B; animation: shake .42s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }

.quiz-hint { font-size: 13.5px; color: var(--ink-faint); font-weight: 700; margin-top: 6px; }
.word-bank { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.word-chip {
  font-family: var(--font); font-size: 15px; font-weight: 800;
  padding: 9px 18px; border-radius: 14px; cursor: pointer;
  background: #fff; color: var(--ink);
  border: 2.5px solid #E9E4FA;
  box-shadow: 0 3px 0 #DCD6F2;
  transition: all .14s;
}
.word-chip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 #DCD6F2; }
.word-chip:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #DCD6F2; }
.word-chip:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }
.word-chip.used { opacity: .28; text-decoration: line-through; }

.quiz-actions { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }

/* ---------- 按钮 ---------- */
.btn-primary {
  font-family: var(--font); font-size: 14.5px; font-weight: 900;
  padding: 12px 26px; border-radius: 15px; cursor: pointer;
  color: #fff; border: 2.5px solid #fff;
  background: linear-gradient(140deg, var(--c-sky), var(--c-sky-deep));
  box-shadow: 0 5px 0 #1C7FC0, 0 10px 20px rgba(46,155,230,.32);
  transition: all .15s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #1C7FC0, 0 14px 26px rgba(46,155,230,.38); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 #1C7FC0; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary.green { background: linear-gradient(140deg, var(--c-green), var(--c-green-dp)); box-shadow: 0 5px 0 #1E9A58, 0 10px 20px rgba(47,191,113,.3); }
.btn-primary.green:active { box-shadow: 0 1px 0 #1E9A58; }
.btn-primary.pink { background: linear-gradient(140deg, var(--c-pink), var(--c-pink-deep)); box-shadow: 0 5px 0 #C74680, 0 10px 20px rgba(244,98,159,.3); }
.btn-primary.pink:active { box-shadow: 0 1px 0 #C74680; }
.btn-primary.orange { background: linear-gradient(140deg, #FFC46B, var(--c-orange)); box-shadow: 0 5px 0 #D97A33, 0 10px 20px rgba(255,164,91,.3); }
.btn-primary.orange:active { box-shadow: 0 1px 0 #D97A33; }
.btn-primary.wide { width: 100%; }

.btn-sm {
  font-family: var(--font); font-size: 13px; font-weight: 800;
  padding: 9px 17px; border-radius: 13px; cursor: pointer;
  color: var(--ink-soft); background: #fff;
  border: 2.5px solid #E9E4FA; box-shadow: 0 3px 0 #DCD6F2;
  transition: all .14s;
}
.btn-sm:hover { transform: translateY(-2px); color: var(--c-purple-dp); }
.btn-sm:active { transform: translateY(2px); box-shadow: 0 1px 0 #DCD6F2; }

/* ---------- 纠错输入区 ---------- */
.correct-area { flex: none; padding: 0 22px 8px; display: flex; gap: 10px; align-items: stretch; }
#correctInput {
  flex: 1; min-height: 76px; max-height: 140px; resize: vertical;
  font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1.6;
  padding: 12px 15px; color: var(--ink);
  border: 3px solid #EDE9FF; border-radius: var(--radius-md);
  background: #fff; box-shadow: inset 0 3px 9px rgba(90,80,160,.06);
  outline: none; transition: border-color .18s;
}
#correctInput:focus { border-color: var(--c-purple); }
#correctInput::placeholder { color: #B9B6D2; font-weight: 600; }

/* ---------- 输入栏 ---------- */
.composer {
  flex: none;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 20px;
  background: rgba(255,255,255,.9);
  border-top: 3px solid #fff;
}
.composer.hidden { display: none; }

.mic-btn {
  position: relative; width: 58px; height: 58px; flex: none;
  border-radius: 20px; cursor: pointer; border: 3px solid #fff;
  background: linear-gradient(140deg, var(--c-pink), var(--c-pink-deep));
  box-shadow: 0 5px 0 #C74680, 0 10px 22px rgba(244,98,159,.36);
  display: grid; place-items: center; font-size: 25px;
  transition: all .15s;
}
.mic-btn:hover { transform: translateY(-2px); }
.mic-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #C74680; }
.mic-btn.recording {
  background: linear-gradient(140deg, #FF7A7A, #E23535);
  box-shadow: 0 5px 0 #B91F1F, 0 0 0 0 rgba(226,53,53,.5);
  animation: recPulse 1.3s ease-out infinite;
}
@keyframes recPulse {
  0%   { box-shadow: 0 5px 0 #B91F1F, 0 0 0 0 rgba(226,53,53,.55); }
  100% { box-shadow: 0 5px 0 #B91F1F, 0 0 0 22px rgba(226,53,53,0); }
}
.mic-btn:disabled { opacity: .4; cursor: not-allowed; animation: none; }
.mic-pulse { display: none; }
.mic-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

.input-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
  background: #fff; border: 3px solid #EDE9FF; border-radius: var(--radius-md);
  box-shadow: inset 0 3px 9px rgba(90,80,160,.05);
  transition: border-color .18s;
}
.input-wrap:focus-within { border-color: var(--c-sky); }
#inputText {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 15.5px; font-weight: 700; color: var(--ink);
  padding: 15px 8px 15px 17px;
}
#inputText::placeholder { color: #B9B6D2; font-weight: 600; font-size: 14.5px; }
.mini-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; padding: 9px 14px; border-radius: 12px;
  transition: background .15s, transform .15s;
}
.mini-btn:hover { background: #F3F0FF; transform: scale(1.12); }

.send-btn {
  width: 58px; height: 58px; flex: none;
  border-radius: 20px; cursor: pointer; border: 3px solid #fff;
  background: linear-gradient(140deg, var(--c-sky), var(--c-sky-deep));
  color: #fff; font-size: 22px;
  box-shadow: 0 5px 0 #1C7FC0, 0 10px 22px rgba(46,155,230,.34);
  display: grid; place-items: center;
  transition: all .15s;
}
.send-btn:hover { transform: translateY(-2px); }
.send-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #1C7FC0; }
.send-btn:disabled { opacity: .42; cursor: not-allowed; }

/* ---------- 提示行 ---------- */
.hint-row {
  flex: none; display: flex; gap: 8px; overflow-x: auto;
  padding: 0 20px 12px;
  background: rgba(255,255,255,.9);
}
.hint-row::-webkit-scrollbar { height: 0; }
.hint-chip {
  flex: none; font-family: var(--font); font-size: 12.5px; font-weight: 800;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  color: var(--ink-soft); background: #F6F4FF;
  border: 2px solid #EDE9FF; white-space: nowrap;
  transition: all .15s;
}
.hint-chip:hover { transform: translateY(-2px); background: #EFEBFF; color: var(--c-purple-dp); border-color: #DDD4FF; }

/* =====================================================================
   Toast
   ===================================================================== */
.toast-wrap {
  position: fixed; top: 88px; left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: 9px; align-items: center;
  pointer-events: none;
}
.toast {
  padding: 11px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 800; color: var(--ink);
  background: #fff; border: 3px solid #fff;
  box-shadow: var(--shadow-lg);
  animation: toastIn .34s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; gap: 9px;
}
.toast.ok   { background: linear-gradient(140deg,#E4FBEC,#CDF4DC); color: #1B7A49; }
.toast.bad  { background: linear-gradient(140deg,#FFE9E9,#FFD5D5); color: #B83232; }
.toast.info { background: linear-gradient(140deg,#E9F3FF,#D8E9FF); color: #22589E; }
.toast.out  { animation: toastOut .3s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform: translateY(-18px) scale(.9); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform: translateY(-14px) scale(.94); } }

/* =====================================================================
   Modal
   ===================================================================== */
.modal-mask {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(60,50,100,.42);
  backdrop-filter: blur(6px);
  padding: 20px;
  animation: fadeIn .22s ease;
}
/* 打开时才启用 grid 布局（配合 [hidden] 保证关闭时彻底不占位） */
.modal-mask:not([hidden]) { display: grid; place-items: center; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal {
  width: min(620px, 100%); max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: var(--radius-xl);
  padding: 26px; box-shadow: var(--shadow-lg);
  animation: modalIn .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn { from{opacity:0; transform:scale(.9) translateY(22px);} to{opacity:1; transform:none;} }
.modal h2 { margin: 0 0 18px; font-size: 22px; color: var(--ink); }
.help-grid { display: grid; gap: 12px; margin-bottom: 20px; }
.help-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: #FAF9FF; border: 2.5px solid #F0EDFB;
  border-radius: var(--radius-md); padding: 12px 14px;
}
.help-item > span { font-size: 24px; flex: none; }
.help-item strong { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 3px; }
.help-item p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); font-weight: 600; }

/* =====================================================================
   彩带
   ===================================================================== */
.confetti { position: fixed; inset: 0; z-index: 950; pointer-events: none; }

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width: 1180px) {
  .stage { grid-template-columns: 290px minmax(0, 1fr); gap: 14px; padding: 14px 15px 16px; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .stage {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 79px);
    padding: 12px 12px 18px;
  }
  .side-panel { overflow: visible; }
  .teacher-card { display: grid; grid-template-columns: 122px 1fr; gap: 12px; text-align: left; align-items: center; }
  .teacher-avatar { width: 122px; height: 122px; margin: 0; }
  .teacher-name { justify-content: flex-start; }
  .teacher-bubble { grid-column: 2; margin-top: 4px; min-height: 0; padding: 9px 11px; font-size: 12.5px; }
  .mood-row { grid-column: 1 / -1; margin-top: 6px; }
  .main-panel { height: auto; min-height: 520px; }
  .chat-scroll { max-height: 52vh; }
  .topbar { padding: 10px 13px; flex-wrap: wrap; gap: 9px; }
  .brand-text h1 { font-size: 19px; }
  .brand-text p { display: none; }
  .stat-chip { padding: 5px 11px 5px 9px; font-size: 13.5px; }
  .icon-btn { width: 38px; height: 38px; font-size: 16px; }
  .float-emoji, .cloud { display: none; }
}

@media (max-width: 560px) {
  .brand-logo { width: 44px; height: 44px; font-size: 23px; border-radius: 15px; }
  .stat-chip[title="已学单词/句子数"] { display: none; }
  .bubble { max-width: 86%; font-size: 14.5px; }
  .quiz-sentence { font-size: 17px; }
  .blk { min-width: 92px; }
  .composer { padding: 10px 12px; gap: 9px; }
  .mic-btn, .send-btn { width: 52px; height: 52px; border-radius: 17px; font-size: 21px; }
  #inputText { font-size: 14.5px; padding: 13px 6px 13px 14px; }
}