/* ==========================================================================
   快休 App 界面仿真样式
   配色与字号 1:1 抄自产品源码，不是照着截图描的：
   · 色值  app/src/main/java/local/kuaixiu/ui/Theme.kt（暖暗色 darkColorScheme，全槽位）
   · 字号  Material 3 typography（headlineMedium 28 / titleLarge 22 / titleMedium 16·500 /
           titleSmall 14·500 / bodyMedium 14 / bodySmall 12 / labelMedium 12·500）
   · 卡片内边距 18dp、卡片间距 14dp、页边距 16dp —— 与 HomeScreen 的 PaddingValues(16.dp) /
           spacedBy(14.dp) / Column(Modifier.padding(18.dp)) 对齐
   所有变量与类名锁在 .kxph / kx- 前缀内，避免和站点 tokens.css 的 --space-* 、
   site.css 的 .card / .btn / .chip / .section 串色串样式。
   ========================================================================== */

.kxph {
  --kx-bg: #14100C;            /* background */
  --kx-card: #1F1913;          /* surface / surfaceContainer */
  --kx-card-hi: #292016;       /* surfaceContainerHigh */
  --kx-sv: #2B2117;            /* surfaceVariant */
  --kx-on: #F3E9D8;            /* onBackground / onSurface */
  --kx-on-mut: #B3A385;        /* onSurfaceVariant */
  --kx-primary: #FFB457;
  --kx-on-primary: #241708;
  --kx-secondary: #7FD08A;
  --kx-secondary-c: #4A3A24;   /* secondaryContainer（选中 chip / 导航指示条） */
  --kx-on-secondary-c: #FFE9C8;
  --kx-tertiary: #8FB7FF;
  --kx-error: #E57373;
  --kx-outline: #4A3B2A;
  --kx-outline-v: #2B2117;
  --kx-nav-h: 80px;

  width: 360px;
  background: var(--kx-bg);
  color: var(--kx-on);
  font-family: "MiSans", "HarmonyOS Sans SC", "Source Han Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 34px;
}
.kxph *, .kxph *::before, .kxph *::after { box-sizing: border-box; }
.kxph p, .kxph h1, .kxph h2, .kxph h3, .kxph ul, .kxph figure { margin: 0; padding: 0; font-weight: inherit; }
.kxph ul { list-style: none; }

/* ---------- 手机外壳（落地页与演示页共用） ---------- */
.kxframe {
  width: 392px;
  padding: 11px;
  border-radius: 44px;
  background: linear-gradient(160deg, #2E3248 0%, #12152A 60%, #0E3463 130%);
  box-shadow: var(--shadow-3);
}
.kxframe .kxph { width: 370px; border-radius: 33px; }
.kxph--fixed { height: 760px; }
.kxph--clip .kxph-body { overflow: hidden; }

/* ---------- 状态栏 ---------- */
.kxstat {
  flex: none;
  height: 30px;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--kx-on);
}
.kxstat-ico { display: flex; align-items: center; gap: 5px; }
.kxstat-ico svg { display: block; }

/* ---------- 内容滚动区 ---------- */
.kxph-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
  scrollbar-width: none;
}
.kxph-body::-webkit-scrollbar { display: none; }

/* ---------- 底部导航（M3 NavigationBar） ---------- */
.kxnav {
  flex: none;
  height: var(--kx-nav-h);
  background: var(--kx-card);
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 6px;
}
.kxnav-item {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 76px; height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--kx-on-mut);
  font: inherit;
}
.kxnav-ico {
  width: 60px; height: 30px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--motion-base, 200ms);
}
.kxnav-ico svg { width: 22px; height: 22px; fill: currentColor; }
.kxnav-label { font-size: 12px; font-weight: 500; }
.kxnav-item[aria-selected="true"] { color: var(--kx-on); }
.kxnav-item[aria-selected="true"] .kxnav-ico { background: var(--kx-secondary-c); }
.kxnav-item[aria-selected="true"] .kxnav-ico svg { fill: var(--kx-on); }

/* ---------- 卡片 ---------- */
.kxcard {
  background: var(--kx-card);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.kxcard--gap8 { gap: 8px; }
.kxcard--gap10 { gap: 10px; }
.kxcard--gap12 { gap: 12px; }

/* 字阶（M3 typography） */
.kx-huge { font-size: 28px; line-height: 1.25; color: var(--kx-primary); }
.kx-t { font-size: 16px; font-weight: 500; }
.kx-ts { font-size: 14px; font-weight: 500; }
.kx-mut { color: var(--kx-on-mut); }
.kx-s { font-size: 12px; color: var(--kx-on-mut); line-height: 1.5; }
.kx-ok { color: var(--kx-secondary); }
.kx-err { color: var(--kx-error); }
.kx-tert { color: var(--kx-tertiary); }
.kx-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-row--nowrap { flex-wrap: nowrap; }
.kx-grow { flex: 1 1 auto; min-width: 0; }
.kx-div { height: 1px; background: var(--kx-outline-v); margin: 2px 0; }

/* ---------- 按钮 ---------- */
.kxbtn, .kxbtn-o {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 22px;
  border-radius: 20px; border: 0;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.kxbtn { background: var(--kx-primary); color: var(--kx-on-primary); }
.kxbtn-o { background: transparent; color: var(--kx-primary); border: 1px solid var(--kx-outline); }
.kxtxt {
  appearance: none; font: inherit; cursor: pointer;
  background: none; border: 0; padding: 0 10px; min-height: 36px;
  color: var(--kx-primary); font-size: 14px; font-weight: 500;
}
.kxbtn[disabled] { opacity: .38; cursor: default; }

/* ---------- 选择芯片（FilterChip） ---------- */
.kxchip {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--kx-outline);
  background: transparent; color: var(--kx-on);
  font-size: 14px; white-space: nowrap;
}
.kxchip.on {
  background: var(--kx-secondary-c); border-color: transparent; color: var(--kx-on-secondary-c);
}
.kxchip.on::before {
  content: ""; width: 11px; height: 6px; margin-bottom: 2px;
  border: 2px solid currentColor; border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.kxchip--w { flex: 1 1 0; justify-content: center; }

/* ---------- 输入框（OutlinedTextField） ---------- */
.kxfield {
  position: relative;
  border: 1px solid var(--kx-outline);
  border-radius: 4px;
  padding: 14px 12px 8px;
  min-height: 56px;
  display: flex; align-items: center; gap: 8px;
  background: transparent;
}
.kxfield > span.lbl {
  position: absolute; top: -1px; left: 8px;
  padding: 0 4px; background: var(--kx-card);
  font-size: 11px; color: var(--kx-on-mut);
  transform: translateY(-50%);
  white-space: nowrap;
}
.kxfield > span.val { font-size: 16px; color: var(--kx-on); flex: 1 1 auto; min-width: 0; }
.kxfield > span.ph { color: var(--kx-on-mut); }
.kxfield svg { width: 18px; height: 18px; fill: var(--kx-on-mut); flex: none; }

/* ---------- 开关（M3 Switch） ---------- */
.kxsw {
  width: 52px; height: 32px; border-radius: 16px; flex: none;
  border: 2px solid var(--kx-on-mut); background: var(--kx-sv);
  position: relative;
}
.kxsw::after {
  content: ""; position: absolute; left: 6px; top: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--kx-on-mut); transform: translateY(-50%);
}
.kxsw.on { background: var(--kx-primary); border-color: var(--kx-primary); }
.kxsw.on::after { left: 26px; width: 24px; height: 24px; background: var(--kx-on-primary); }

/* ---------- 习惯点阵 ---------- */
.kxdots { display: flex; flex-wrap: wrap; gap: 4px; }
.kxdot { width: 11px; height: 11px; border-radius: 50%; background: var(--kx-sv); }
.kxdot.done { background: var(--kx-primary); }
.kxdot.miss { background: rgba(229, 115, 115, .35); }
.kxdot.today { background: rgba(255, 180, 87, .25); box-shadow: inset 0 0 0 1.5px var(--kx-primary); }

/* ---------- 聊天 ---------- */
.kxbub {
  max-width: 84%; padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.55;
}
.kxbub.me { align-self: flex-end; background: var(--kx-card-hi); border-bottom-right-radius: 4px; }
.kxbub.ai { align-self: flex-start; background: var(--kx-sv); border-bottom-left-radius: 4px; }
.kxact {
  background: rgba(255, 180, 87, .15);
  border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.kxchips { display: flex; flex-wrap: wrap; gap: 8px; }
.kxinput {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--kx-outline-v);
  background: var(--kx-bg);
}
.kxinput .kxfield { flex: 1 1 auto; min-height: 46px; }

/* ---------- 页签显隐（?tab= 深链 + 点击切换） ---------- */
.kxpane { display: none; flex-direction: column; gap: 14px; }
.kxpane.on { display: flex; }


/* 演示页说明列 */
.kxnote { display: flex; flex-direction: column; gap: var(--space-4); }
.kxnote .card { padding: var(--space-5); }.kxnote h4 {
  margin: 0 0 var(--space-2); font-family: var(--font-display);
  font-size: var(--text-body); font-weight: 600; color: var(--color-text-primary);
}
.kxnote ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.kxnote li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--text-caption); line-height: var(--lh-body-s); color: var(--color-text-secondary);
}
.kxnote li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-400);
}
.kxnote code {
  font-family: var(--font-mono); font-size: .75rem;
  background: var(--color-neutral-100); padding: 1px 5px; border-radius: var(--radius-xs);
  color: var(--color-text-body);
}
.kxstage { display: flex; justify-content: center; }

/* 窄屏：手机本体按整机等比缩小（392 框宽 × zoom 要小于容器可用宽 = 100vw - 40），不裁内容（360 设计宽 + 11 边框 = 382，容器可用宽 = 100vw - 40） */
@media (max-width: 420px) { .kxframe { zoom: .86; } }
@media (max-width: 380px) { .kxframe { zoom: .80; } }
@media (max-width: 340px) { .kxframe { zoom: .70; } }

/* 演示页两列：手机列固定宽，说明列吃剩余。写成类而不是内联样式，内联会盖掉站点 ≤640 的单列规则 */
.kxdemo { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
@media (max-width: 1000px) { .kxdemo { grid-template-columns: 1fr; gap: var(--space-8); } }