/* ============================================================
   Aura 英语学习助手 —— 焕新治愈系浅色版
   ============================================================ */

:root {
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --border-hover: #CBD5E1;

  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-sub: #334155;

  /* 学习语义高亮色 */
  --indigo-glow: #4F46E5;
  --indigo-soft: #EEF2FF;
  --coral-glow: #E11D48;
  --coral-soft: #FFF1F2;
  --teal-glow: #0D9488;
  --teal-soft: #F0FDFA;
  --emerald-glow: #059669;
  --emerald-soft: #ECFDF5;
  --amber-glow: #D97706;
  --amber-soft: #FFFBEB;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text-main);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.app {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

@media (min-width: 560px) {
  .app {
    min-height: 88vh;
    margin: 32px 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--border);
  }
}

/* 顶部学习彩条已移除 */

.view { flex: 1; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.body { padding: 20px 20px 36px; }

/* 顶部导航 */
.topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; }

.target { font-size: 12px; font-weight: 600; color: #4F46E5; background: var(--indigo-soft); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(79,70,229,0.15); }

.icon-link {
  font-size: 13px; font-weight: 600; color: #4F46E5; background: var(--indigo-soft);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(79,70,229,0.15); font-family: inherit; transition: all 0.2s;
}
.icon-link:hover { background: #E0E7FF; }
.icon-link.plain { background: #F1F5F9; color: var(--text-sub); border-color: var(--border); }
.icon-link.plain:hover { background: #E2E8F0; color: #0F172A; }

.section { margin-top: 24px; }
.label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }

.banner { background: var(--amber-soft); color: #92400E; border: 1px solid rgba(217,119,6,0.2); border-radius: var(--r-md); padding: 12px 15px; font-size: 12.5px; line-height: 1.7; margin-top: 14px; }
.banner b { font-weight: 700; color: #B45309; }
.banner.err { background: #FFF1F2; color: #9F1239; border-color: rgba(225,29,72,0.2); }

/* ---------- 核心：首页大语音按钮交互区 ---------- */
.home { padding: 24px; min-height: 640px; display: flex; flex-direction: column; }
.home-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }

.home-tip { text-align: center; }
.home-tip .t1 { font-size: 22px; font-weight: 700; color: #0F172A; letter-spacing: -0.3px; }
.home-tip .t2 { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.7; }

/* 沉浸式大录音钮（带波纹光环） */
.big-btn {
  position: relative;
  width: 178px; height: 178px; border-radius: 50%; border: 1px solid #C7D2FE; cursor: pointer; font-family: inherit;
  background: linear-gradient(145deg, #FFFFFF 0%, #EEF2FF 100%);
  box-shadow: 0 16px 35px rgba(79, 70, 229, 0.15), inset 0 2px 6px rgba(255, 255, 255, 0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
}
.big-btn:hover { transform: scale(1.04); border-color: #818CF8; box-shadow: 0 20px 40px rgba(79, 70, 229, 0.25); }
.big-btn:active { transform: scale(0.95); }
.big-btn .txt { font-size: 14.5px; font-weight: 600; color: #4F46E5; }

/* 录音时的呼吸波纹动画 */
.big-btn.rec { background: linear-gradient(145deg, #FFF1F2, #FFE4E6); border-color: #FECDD3; animation: none; }
.big-btn.rec .txt { color: #E11D48; }
.big-btn.rec .icon-wrap svg { stroke: #E11D48; }

.big-btn.rec .mic-ripple {
  position: absolute; width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid #E11D48; opacity: 0; animation: ripple 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.big-btn.rec .mic-ripple.delay { animation-delay: 0.8s; }

@keyframes ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}

.home-bottom { display: none; }

/* ---------- 语音转文字后的输入态：干净的一块 ---------- */
#home-input { padding-top: 8px; }
textarea.said {
  width: 100%; border: 1px solid var(--border); background: #FFFFFF; border-radius: var(--r-md);
  padding: 16px 18px; font-size: 15.5px; line-height: 1.8; color: var(--text-main);
  font-family: inherit; resize: none; min-height: 132px; transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
textarea.said::placeholder { color: #A8B3C4; }
textarea.said:focus { outline: none; border-color: #A5B4FC; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08); }
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn { border: none; border-radius: 999px; padding: 13px 26px; font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:active { transform: scale(0.97); }
.btn.primary { flex: 1; background: #4F46E5; color: #fff; }
.btn.primary:hover { background: #4338CA; }
.btn.primary:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); flex: 0 0 auto; }
.btn.ghost:hover { background: #F1F5F9; color: var(--text-sub); }

/* AI 思考加载中卡片 */
.loading { display: flex; justify-content: center; padding: 32px 0; }
.ai-thinking-card { background: #F8FAFC; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.wave-loader { display: flex; gap: 6px; align-items: center; height: 28px; }
.wave-loader span { width: 4px; height: 100%; background: #4F46E5; border-radius: 4px; animation: wave 1.2s ease-in-out infinite; }
.wave-loader span:nth-child(2) { animation-delay: 0.15s; background: #E11D48; }
.wave-loader span:nth-child(3) { animation-delay: 0.3s; background: #0D9488; }
.wave-loader span:nth-child(4) { animation-delay: 0.45s; background: #D97706; }
.wave-loader span:nth-child(5) { animation-delay: 0.6s; background: #059669; }
@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.3); opacity: 0.5; } 20% { transform: scaleY(1); opacity: 1; } }

/* ---------- 今日页：连贯内容流（不用卡片框） ---------- */

/* 区块：极淡分隔线 + 小标题 */
.sec { margin-top: 30px; padding-top: 24px; border-top: 1px solid #EDF1F6; }
.sec.first { margin-top: 20px; padding-top: 0; border-top: none; }
.sec-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #334155; margin-bottom: 14px;
}
.sec-h::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px; background: #4F46E5; flex: 0 0 auto;
}

/* 你说的中文原话：带浅底的块 */
.said-box {
  display: flex; align-items: flex-start; gap: 12px;
  background: #F4F6FB; border-radius: 14px; padding: 15px 16px;
}
.said-cn { flex: 1; font-size: 16px; font-weight: 500; line-height: 1.8; color: #1E293B; }

/* 地道整句 */
.hero { margin-top: 0; }
.sent { font-size: 22px; line-height: 2; font-weight: 600; color: #0F172A; letter-spacing: 0.2px; }
.sent .p1 { background: #EEF2FF; color: #4F46E5; border-radius: 6px; padding: 2px 7px; }
.sent .p2 { background: #FFF1F2; color: #E11D48; border-radius: 6px; padding: 2px 7px; }
.sent .p3 { background: #F0FDFA; color: #0D9488; border-radius: 6px; padding: 2px 7px; }

/* 句尾的喇叭图标（点一下听整句） */
.sent .spk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; margin-left: 9px; vertical-align: middle;
  border-radius: 50%; background: #EEF2FF; color: #4F46E5;
  transition: background .15s, color .15s, transform .15s;
}
.sent .spk svg { width: 16px; height: 16px; }
.sent[data-say]:hover .spk { background: #E0E7FF; }
.sent.speaking .spk { background: #4F46E5; color: #fff; }
.sent[data-say].speaking { outline: none; }
.sent .spk:active { transform: scale(.92); }

.rhythm { margin-top: 12px; font-size: 12px; color: #94A3B8; line-height: 1.7; }

/* 中英配对：紧凑块 */
.pairs { margin-top: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pair { display: flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 8px 13px 9px; border-radius: 11px; }
.pair .cn { font-size: 11.5px; line-height: 1.4; color: #8B93A5; }
.pair .en { font-size: 14px; font-weight: 600; line-height: 1.4; }
.pair.c1 { background: #EEF2FF; } .pair.c1 .en { color: #4F46E5; }
.pair.c2 { background: #FFF1F2; } .pair.c2 .en { color: #E11D48; }
.pair.c3 { background: #F0FDFA; } .pair.c3 .en { color: #0D9488; }

/* 引申句：左侧一条细彩线代替卡片 */
.exts { margin-top: 0; display: flex; flex-direction: column; gap: 18px; }
.ext { padding-left: 15px; border-left: 2px solid #E2E8F0; }
.ext .en { font-size: 15px; font-weight: 600; line-height: 1.55; color: #0F172A; }
.ext .cn { font-size: 12.5px; color: #A8B3C4; margin-top: 5px; line-height: 1.65; }
.ext.c1 { border-left-color: #C7D2FE; } .ext.c1 .en { color: #4F46E5; }
.ext.c2 { border-left-color: #FECDD3; } .ext.c2 .en { color: #E11D48; }
.ext.c3 { border-left-color: #99F6E4; } .ext.c3 .en { color: #0D9488; }

/* 词：轻 chip，无边框 */
.chips { margin-top: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: none; border-radius: 9px; padding: 7px 12px; line-height: 1.35; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-align: left; background: #EEF2FF; color: #4F46E5;
  transition: transform .15s;
}
.chip:active { transform: scale(.96); }
.chip small { display: block; font-size: 10.5px; font-weight: 400; margin-top: 2px; opacity: .7; }
.chip.w2 { background: #FFF1F2; color: #E11D48; }
.chip.w3 { background: #ECFDF5; color: #059669; }
.chip.w0 { background: #F1F5F9; color: #9AA7B8; }

/* 语法：左侧细线，无底色 */
.grammar { margin-top: 0; padding-left: 15px; border-left: 2px solid #FCD34D; }
.grammar .g-title { font-size: 14px; font-weight: 700; color: #B45309; margin-bottom: 9px; line-height: 1.6; }
.grammar .g-body { font-size: 13.5px; color: #78716C; line-height: 1.9; }
.grammar code { font-size: 13px; font-weight: 600; background: #FEF3C7; padding: 1px 7px; border-radius: 6px; color: #B45309; }
.grammar .g-ex { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.footer { margin-top: 28px; }

/* ---------- 记录档案页样式 ---------- */
.search { display: flex; align-items: center; gap: 10px; background: #F8FAFC; border: 1px solid var(--border); border-radius: 999px; padding: 12px 18px; margin-top: 14px; transition: all 0.2s; }
.search:focus-within { border-color: #4F46E5; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.search input { flex: 1; border: none; background: none; font-size: 14px; font-family: inherit; color: var(--text-main); outline: none; }
.search input::placeholder { color: var(--text-muted); }

.day-head { font-size: 12px; color: var(--text-muted); margin: 24px 2px 10px; }
.day-head b { color: var(--text-main); font-weight: 600; font-size: 13.5px; }

/* 记录条目：只有时间 + 中文 */
.rec-item {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid #F1F5F9;
  cursor: pointer; transition: background .15s;
}
.rec-item:last-child { border-bottom: none; }
.rec-item:hover { background: #FAFBFD; }
.rec-time { flex: 0 0 auto; font-size: 12px; color: #A8B3C4; font-variant-numeric: tabular-nums; }
.rec-text {
  flex: 1; min-width: 0; font-size: 15px; line-height: 1.7; color: #1E293B; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.empty { text-align: center; color: var(--text-muted); font-size: 13.5px; padding: 48px 0; line-height: 1.9; }

/* ---------- 可点击发音交互 ---------- */
[data-say] { cursor: pointer; transition: filter 0.15s; }
[data-say]:hover { filter: brightness(0.94); }
.sent[data-say]:hover { filter: brightness(0.97); }
.grammar .g-title [data-say], .grammar .g-body [data-say] { border-radius: 4px; padding: 0 3px; margin: 0 -2px; }
.grammar .g-title [data-say]:hover, .grammar .g-body [data-say]:hover { background: #FEF3C7; }

[data-say].speaking { outline: 2px solid #4F46E5; outline-offset: 2px; }