/* chataxi 产品站的品牌层：只补充 assets/site/site.css 没有的应用专属版式。
   颜色令牌与 Hermit 官网共用，深色主题跟随 site.css 的同一套开关。 */
:root {
  --app:#fdd71f; --app-ink:#20211b; --app-soft:#fff7d1; --app-line:#e9d97f; --app-deep:#a8870a;
}
:root[data-theme="dark"] { --app-soft:#39320c; --app-line:#6b5f1c; --app-deep:#f0d551; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --app-soft:#39320c; --app-line:#6b5f1c; --app-deep:#f0d551; }
}

.accent { color:var(--app-deep); }
.app-button { background:var(--app); color:var(--app-ink); }
.app-icon { background:var(--app-soft); color:var(--app-ink); }
.big-icon.app-icon i { color:var(--app-ink); }

/* 首屏：左边讲清楚，右边用界面示意证明“真的是一桌人”。 */
.app-hero { display:grid; grid-template-columns:1.02fr 1fr; align-items:center; gap:var(--space-7); padding:var(--section-space) 0; }
.app-hero .lead { max-width:640px; }
.app-hero .fine { margin-top:20px; }
.app-meta { display:flex; align-items:center; gap:14px; margin-top:var(--space-5); color:var(--muted); font-size:var(--text-label); }
.app-meta img { width:56px; height:56px; border-radius:16px; }

.cast { position:relative; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.cast-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:20px; font-size:12px; font-weight:700; color:var(--muted); }
.dot-row { display:flex; gap:6px; }
.dot-row i { width:9px; height:9px; border-radius:50%; background:var(--app); opacity:.55; }
.dot-row i:first-child { opacity:1; }
.bubble-line { display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.bubble-line.right { flex-direction:row-reverse; }
.avatar { position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; flex:none; background:var(--soft); color:var(--muted); font-size:13px; font-weight:700; }
.avatar.alt { background:var(--blue-bg); color:var(--blue); }
.avatar.ring { box-shadow:0 0 0 2px var(--app); }
.bubble { max-width:78%; padding:12px 14px; border-radius:16px; border-bottom-left-radius:5px; background:var(--app-soft); }
.bubble.mine { background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:16px; border-bottom-right-radius:5px; }
.bubble strong { display:block; font-size:11px; color:var(--app-deep); margin-bottom:4px; }
.bubble p { margin:0; font-size:13px; line-height:1.7; color:var(--ink); }
.voice { display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:10px; color:var(--muted); }
.voice i { color:var(--app-deep); }
.wave { display:inline-flex; align-items:center; gap:2px; height:14px; }
.wave b { display:block; width:2px; height:14px; border-radius:2px; background:var(--app-deep); opacity:.75; transform-origin:center; animation:pulse 1.1s var(--ease) infinite; }
.wave b:nth-child(2) { animation-delay:.1s; } .wave b:nth-child(3) { animation-delay:.2s; }
.wave b:nth-child(4) { animation-delay:.3s; } .wave b:nth-child(5) { animation-delay:.4s; }
@keyframes pulse { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
.cast-compose { display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.at-chip { padding:6px 10px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:11px; font-weight:600; }
.at-chip.on { background:var(--app); color:var(--app-ink); }
.wand { margin-left:auto; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--app-soft); color:var(--app-deep); font-size:13px; }
.cast .art-caption { margin-top:16px; }

/* 对比表：手机端横向滚动，不做成图片，读屏也能读。 */
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.compare { width:100%; min-width:660px; border-collapse:collapse; font-size:14px; }
.compare caption { text-align:left; }
.compare th,.compare td { padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.compare tbody th { font-weight:600; color:var(--ink); font-size:13px; }
.compare thead th { font-size:12px; letter-spacing:.03em; text-transform:none; color:var(--muted); background:var(--soft); position:sticky; top:0; }
.compare thead th.is-ours { color:var(--app-ink); background:var(--app); }
.compare td { color:var(--muted); }
.compare td.is-ours { color:var(--ink); background:var(--app-soft); }
.compare tbody tr:last-child th,.compare tbody tr:last-child td { border-bottom:0; }

/* 语音流水线区：左侧说明，右侧建议组合。 */
.app-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--section-space) 0; }
.app-band .split { align-items:start; }
.app-band .mini-steps { margin-top:var(--space-5); }
.recipe-card { padding:var(--card-space); }
.recipe-row { display:grid; grid-template-columns:86px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.recipe-row:last-of-type { border-bottom:0; }
.recipe-tag { align-self:start; padding:5px 9px; border-radius:9px; background:var(--app-soft); color:var(--app-deep); font-size:11px; font-weight:700; text-align:center; }
.recipe-row strong { display:block; font-size:15px; margin-bottom:6px; }
.recipe-row p { margin:0; font-size:13px; line-height:1.75; }
.recipe-card .fine { margin-top:var(--space-4); }

.grid-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:var(--space-4); }
.card.slim { padding:var(--space-5); }
.card.slim h3 { font-size:16px; display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.card.slim h3 i { color:var(--app-deep); font-size:14px; }
.card.slim p { font-size:13px; line-height:1.75; }

.provider-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--space-4); }
.provider-grid article { padding:var(--space-5); border:1px solid var(--line); border-top:3px solid var(--app); border-radius:18px; background:var(--surface); }
.provider-grid h3 { font-size:15px; margin-bottom:10px; }
.provider-grid p { margin:0; font-size:13px; line-height:1.75; }

.install-card { padding:var(--card-space); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.install-head { display:flex; align-items:center; gap:15px; margin-bottom:26px; }
.install-head img { width:62px; height:62px; border-radius:18px; }
.install-head h2 { font-size:27px; margin:0 0 4px; }
.install-head p { margin:0; font-size:13px; }
.install-card .qr-install { align-items:center; }
.install-card .button-row { margin-top:var(--space-5); }

.sibling-card { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:var(--space-6); padding:var(--card-space); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.sibling-card img { width:132px; height:132px; border-radius:32px; justify-self:end; }
.sibling-card h2 { font-size:27px; }
.sibling-card .button-row { margin-top:var(--space-4); }

@media(max-width:1000px) {
  .app-hero { grid-template-columns:1fr; gap:var(--space-6); }
  .cast { max-width:520px; }
  .recipe-row { grid-template-columns:76px minmax(0,1fr); }
}
@media(max-width:760px) {
  .app-band { padding:var(--space-7) 0; }
  .app-band .split { grid-template-columns:1fr; gap:var(--space-5); }
  .sibling-card { grid-template-columns:1fr; gap:var(--space-5); }
  .sibling-card img { justify-self:start; width:104px; height:104px; border-radius:26px; }
  .bubble { max-width:84%; }
}
@media(prefers-reduced-motion:reduce) { .wave b { animation:none; transform:none; } }