/* 小岩智能课堂 · 界面样式
 * 布局参考客户提供的对标图：整屏岩石背景 + 聊天流 + 底部三个板块胶囊
 * 想换成真实岩石照片：把照片命名为 bg.jpg 放进本文件夹即可自动启用
 */
:root {
  --ink: #23262a;
  --ink-soft: #5c6268;
  --bubble-bot: rgba(255, 255, 255, 0.94);
  --bubble-user: rgba(38, 42, 48, 0.86);
  --pill: rgba(255, 255, 255, 0.86);
  --accent: #f0a24a;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #9aa0a5;
  overflow: hidden;
}

/* ---------- 背景：优先 bg.jpg，缺省用内置的雾中岩石 ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #9aa0a5;
  background-image:
    url("bg.jpg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d6dade'/%3E%3Cstop offset='0.42' stop-color='%23bcc1c5'/%3E%3Cstop offset='1' stop-color='%238d9297'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cfilter id='b2'%3E%3CfeGaussianBlur stdDeviation='26'/%3E%3C/filter%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='800' height='1600' fill='url(%23f)'/%3E%3Cg filter='url(%23b2)' opacity='0.55'%3E%3Cellipse cx='150' cy='1290' rx='230' ry='150' fill='%237c8287'/%3E%3Cellipse cx='655' cy='1370' rx='270' ry='175' fill='%2383898e'/%3E%3Cellipse cx='400' cy='1520' rx='320' ry='180' fill='%2372787d'/%3E%3C/g%3E%3Cg filter='url(%23b)' opacity='0.8'%3E%3Cellipse cx='95' cy='1035' rx='120' ry='62' fill='%23878d92'/%3E%3Cellipse cx='300' cy='1085' rx='150' ry='70' fill='%23949a9f'/%3E%3Cellipse cx='545' cy='1060' rx='135' ry='64' fill='%2382888d'/%3E%3Cellipse cx='720' cy='1120' rx='110' ry='58' fill='%238f959a'/%3E%3Cellipse cx='185' cy='1205' rx='165' ry='76' fill='%237f858a'/%3E%3Cellipse cx='460' cy='1235' rx='185' ry='82' fill='%238a9095'/%3E%3Cellipse cx='660' cy='1265' rx='145' ry='68' fill='%2381878c'/%3E%3Cellipse cx='60' cy='1400' rx='160' ry='80' fill='%23757b80'/%3E%3Cellipse cx='285' cy='1440' rx='200' ry='90' fill='%2380878c'/%3E%3Cellipse cx='540' cy='1465' rx='180' ry='86' fill='%23797f84'/%3E%3Cellipse cx='745' cy='1500' rx='140' ry='80' fill='%23848a8f'/%3E%3C/g%3E%3Crect width='800' height='1600' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.bg-layer::after {           /* 顶部一层薄雾，让文字更好读 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 34%, rgba(20,22,25,.30) 100%);
}

/* ---------- 整体框架 ---------- */
.app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px 8px;
  -webkit-overflow-scrolling: touch;
}

.messages { display: flex; flex-direction: column; gap: 16px; min-height: 100%; justify-content: flex-end; }

/* ---------- 消息 ---------- */
.msg-row { display: flex; gap: 9px; align-items: flex-start; max-width: 92%; }
.msg-row.bot { align-self: flex-start; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }

.avatar {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px;
  background: rgba(255,255,255,.9);
  color: #4a4f55;
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
}
.msg-row.user .avatar { background: #4f7cf0; color: #fff; font-size: 15px; }

.msg-body { min-width: 0; }
.name { font-size: 11.5px; color: rgba(35,38,42,.72); margin: 0 0 4px 3px; text-shadow: 0 1px 2px rgba(255,255,255,.6); }
.msg-row.user .name { text-align: right; margin: 0 3px 4px 0; }

.bubble {
  padding: 10px 13px;
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 3px 10px rgba(0,0,0,.13);
}
.msg-row.bot .bubble { background: var(--bubble-bot); border-top-left-radius: 5px; }
.msg-row.user .bubble { background: var(--bubble-user); color: #fff; border-top-right-radius: 5px; }

.bubble .src { display: block; margin-top: 6px; font-size: 10.5px; color: rgba(35,38,42,.45); }
.msg-row.user .bubble .src { color: rgba(255,255,255,.6); }

/* 正在输入 */
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa0a6; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* ---------- 板块卡片（在对话里展开的交互内容） ---------- */
.card { margin-top: 8px; }
.card-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: #2f3438; }
.dim { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dashed rgba(0,0,0,.09); font-size: 13.5px; line-height: 1.6; }
.dim:last-child { border-bottom: none; }
.dim b { flex: 0 0 68px; color: #b5762a; font-weight: 700; }

.field { margin-bottom: 9px; }
.field > label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; color: #3a3f44; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  padding: 6px 11px; border-radius: 999px; border: 1.4px solid rgba(0,0,0,.16);
  background: #fff; font-size: 12.5px; cursor: pointer; color: var(--ink);
}
.chips button.on { background: var(--accent); border-color: #d98a2b; color: #fff; font-weight: 700; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; }
.card-actions .primary { flex: 1; padding: 10px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.card-actions .ghost { padding: 0 16px; border: 1px solid rgba(0,0,0,.18); border-radius: 10px; background: #fff; color: var(--ink-soft); cursor: pointer; }

/* ---------- 底部输入 + 板块 ---------- */
.composer { position: relative; z-index: 1; flex: 0 0 auto; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
.input-row {
  display: flex; gap: 8px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 5px 5px 5px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
#chat-input { flex: 1; border: none; outline: none; background: none; font-size: 15px; color: var(--ink); }
#chat-input::placeholder { color: #a2a8ae; }
#btn-send { border: none; border-radius: 999px; padding: 9px 20px; font-size: 14.5px; font-weight: 700; color: #fff; background: var(--accent); cursor: pointer; }
#btn-send:active { background: #d98a2b; }

.modules { display: flex; gap: 8px; margin-top: 10px; justify-content: center; }
.module {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 6px;
  border: none; border-radius: 999px;
  background: var(--pill);
  color: #2c3136;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  backdrop-filter: blur(6px);
  transition: transform .12s ease, background .2s ease;
}
.module:active { transform: scale(.97); }
.module.active { background: var(--accent); color: #fff; }
.module .mi { font-size: 15px; }

@media (max-width: 420px) {
  .module { font-size: 12.5px; padding: 10px 4px; }
  .msg-row { max-width: 96%; }
}