/* ============================================================
   克克的家 · keke.css —— 唯一样式来源（2026-09-25 换皮 v1）
   规矩见 DESIGN_SYSTEM.md：只用 token、只用零件、一个顶栏一个底栏、不裁东西。
   替换掉 home.css 的三层补丁；memory/music/video_call.css 暂经旧 token 别名跟随变色。
   ============================================================ */

/* ---------- 1. Token ---------- */
/* 主题只由两个"种子色"决定：--pink（主色）、--pink-deep（深一档）。
   其余所有浅色、线、底、花纹都在 body 上用 color-mix 从种子混出来 → 换肤 = 全局变色。
   （变量名保留 pink 是历史原因，换成蓝色主题时它就是蓝。） */
:root {
  --pink: #EE9BB2;
  --pink-deep: #D9728F;
  --ink: #4A3F45;
  --ink-soft: #A8979E;
  --usage-low: #B97836;
  --card: #FFFFFF;
  --danger: #E0848F;
  --ok: #8BCB9E;

  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px;
  --r-s: 10px; --r-m: 16px; --r-pill: 999px;
  --fs-xs: 11px; --fs-s: 12px; --fs-m: 14px; --fs-body: 15px; --fs-l: 17px;
  --bw: 1.5px;
  --touch: 44px;
  --lace-mask: radial-gradient(circle at 8px 8px, #000 7.6px, transparent 8px) 0 0 / 16px 8px repeat-x, linear-gradient(#000, #000) 0 8px / 100% calc(100% - 8px) no-repeat;

  --f-body: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-cute: "ZCOOL KuaiLe", "Noto Sans SC", "PingFang SC", sans-serif;
  --f-num: "Fredoka", "Noto Sans SC", -apple-system, sans-serif;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --app-viewport-height: 100dvh;
  --app-viewport-offset-top: 0px;
  --composer-bottom: 8px;
  --composer-stack-height: 70px;
}
/* 皮肤：只换种子色 */
body[data-skin="blue"]  { --pink: #9DB8DC; --pink-deep: #6F93C4; }
body[data-skin="grey"]  { --pink: #C9BBAE; --pink-deep: #9C8B7C; }
body[data-skin="peach"] { --pink: #F4B08E; --pink-deep: #E08A62; }
body[data-skin="lilac"] { --pink: #C8B6E6; --pink-deep: #9E86C9; }
/* 派生色（写在 body 上，才能跟着 body 的皮肤种子变） */
body {
  --pink-soft: color-mix(in srgb, var(--pink) 22%, #fff);
  --stripe:    color-mix(in srgb, var(--pink) 11%, #fff);
  --paper:     color-mix(in srgb, var(--pink) 4%, #fff);
  --line:      color-mix(in srgb, var(--pink) 30%, #fff);
  --line-soft: color-mix(in srgb, var(--pink) 15%, #fff);
  --haze:      color-mix(in srgb, var(--pink) 16%, transparent);
  --tape:      color-mix(in srgb, var(--pink) 45%, transparent);
  --her-bubble: var(--pink-soft);
  --accent-ink: color-mix(in srgb, var(--pink-deep) 22%, #544850);
  --stage:     color-mix(in srgb, var(--pink) 14%, #fff);
  --shadow-card: 0 2px 0 var(--pink-soft);
  --shadow-float: 0 8px 24px color-mix(in srgb, var(--pink-deep) 16%, transparent);
  /* 旧 token 别名：memory/music/video_call.css 与 home.js 行内写法跟着走。新代码不许用。 */
  --bg: var(--paper);
  --accent: var(--pink);
  --accent-soft: var(--pink-soft);
  --accent-deep: var(--pink-deep);
  --his-bubble: var(--card);
  --shadow: var(--shadow-card);
  --touch-target: var(--touch);
  --shell-gap: var(--sp2);
}

/* ---------- 2. 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--f-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--paper); overscroll-behavior: none; -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 2px solid var(--pink-deep); outline-offset: 2px;
}
[hidden] { display: none !important; }
/* 防溢出护栏（铁律 4 的兜底）：长字/链接/代码自己换行，图不撑框，页面不许横着滚 */
#app, #sheet, #sess-drawer, #callscr, #music-screen { overflow-x: clip; }
.bubble, .kk-card, .card, .sess-title, .th-item, .bh-text, .tech-bubble, #hb-intent, .call-live-text, .km-content { overflow-wrap: anywhere; }
img, video, canvas, svg { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble pre { overflow-x: auto; white-space: pre; max-width: 100%; }

/* ---------- 3. 背景（body[data-bg]，画在 #app 上） ---------- */
#app { background: repeating-linear-gradient(90deg, var(--paper) 0 18px, var(--stripe) 18px 36px); }
body[data-bg="stripe-h"] #app { background: repeating-linear-gradient(0deg, var(--paper) 0 16px, var(--stripe) 16px 32px); }
body[data-bg="gingham"] #app {
  background-color: var(--paper);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--pink) 10%, transparent) 50%, transparent 50%), linear-gradient(0deg, color-mix(in srgb, var(--pink) 10%, transparent) 50%, transparent 50%);
  background-size: 28px 28px;
}
body[data-bg="dots"] #app { background: var(--paper) radial-gradient(var(--line) 1.2px, transparent 1.4px) 0 0 / 16px 16px; }
body[data-bg="hearts"] #app {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M12 17s-5-3-6.2-6.1C5 8.6 6.4 6.5 8.6 6.5c1.3 0 2.2.7 3.4 2 1.1-1.3 2-2 3.3-2 2.2 0 3.6 2.1 2.8 4.4C17 14 12 17 12 17z' fill='%23FAE3EA'/%3E%3Cpath d='M34 39s-3-1.8-3.7-3.6c-.5-1.4.3-2.6 1.6-2.6.8 0 1.3.4 2.1 1.2.7-.8 1.2-1.2 2-1.2 1.3 0 2.1 1.2 1.6 2.6C36.9 37.2 34 39 34 39z' fill='%23FBE4EA'/%3E%3C/svg%3E");
}
body[data-bg="grid"] #app {
  background-color: var(--paper);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 20px 20px;
}
body[data-bg="cream"] #app { background: linear-gradient(180deg, var(--paper), var(--pink-soft)); }
/* 柔光：压住花纹，上奶白下粉雾 */
#app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.25) 38%, rgba(255,255,255,.35) 70%, var(--haze) 100%);
}
#app > * { position: relative; z-index: 1; }

/* ---------- 4. 锁屏 ---------- */
#lock {
  position: fixed; inset: 0; z-index: 100;
  background: repeating-linear-gradient(90deg, var(--paper) 0 18px, var(--stripe) 18px 36px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp3);
  padding: calc(var(--sat) + var(--sp5)) var(--sp5) calc(var(--sab) + var(--sp6));
  transition: opacity .6s ease, transform .6s ease;
}
#lock::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 35%, rgba(255,255,255,.9), rgba(255,255,255,.35) 70%, var(--haze)); }
#lock > * { position: relative; }
#lock.unlocking { opacity: 0; transform: translateY(-6%); pointer-events: none; }
#lock .house svg { stroke: var(--pink); }
#lock .clock { font-family: var(--f-num); font-size: 44px; font-weight: 500; color: var(--accent-ink); letter-spacing: 1px; line-height: 1; }
#lock .date { font-size: var(--fs-s); color: var(--ink-soft); letter-spacing: 1px; }
#lk-note {
  max-width: 280px; margin: var(--sp4) 0 var(--sp1); padding: var(--sp3) var(--sp4);
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-card);
  font-size: var(--fs-m); line-height: 1.7; text-align: center;
}
#lk-note::before { content: ""; position: absolute; top: -7px; left: 50%; width: 38px; height: 13px;
  transform: translateX(-50%) rotate(-3deg); background: var(--tape); border-radius: 2px; }
#lk-note:empty { display: none; }
#lk-spacer { flex: 0 1 var(--sp6); }
#lock .pw-row { display: flex; gap: var(--sp2); width: 100%; max-width: 320px; }
#lock input {
  flex: 1; min-width: 0; border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  padding: var(--sp3) var(--sp4); font-size: 16px; background: var(--card); outline: none;
}
#lock button { border: none; border-radius: var(--r-pill); padding: var(--sp3) var(--sp5); background: var(--pink); color: #fff; font-weight: 700; }
#lock .err { color: var(--danger); font-size: var(--fs-m); min-height: 20px; }
#lock.shake .pw-row { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
#lk-hand { display: none; flex-direction: column; align-items: center; gap: var(--sp3); }
#lk-hand.on { display: flex; }
#lk-ring { position: relative; width: 110px; height: 110px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: filter .3s ease; }
#lk-ring > svg { transform: rotate(-90deg); }
#lk-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card);
  border: var(--bw) solid var(--line); box-shadow: 0 0 0 5px rgba(255,255,255,.7), var(--shadow-float); }
#lk-ring .track { fill: transparent; stroke: var(--pink-soft); stroke-width: 5; }
#lk-ring .prog { fill: none; stroke: var(--pink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; }
#lk-ring.holding .prog { transition: stroke-dashoffset 1.2s linear; stroke-dashoffset: 0; }
#lk-ring .palm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.palm .hwrap { position: relative; width: 36px; height: 36px; animation: lubdub 2s ease-in-out infinite; }
#lk-ring.holding .hwrap { animation-duration: .75s; }
.hwrap svg { position: absolute; left: 0; bottom: 0; width: 36px; height: 36px; display: block; }
.hfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden; }
#lk-ring.holding .hfill { transition: height 1.2s linear; height: 100%; }
#lk-ring.held .hfill { height: 100%; }
@keyframes lubdub { 0%,100% { transform: scale(1); } 8% { transform: scale(1.16); } 16% { transform: scale(1); } 24% { transform: scale(1.1); } 34% { transform: scale(1); } }
#lk-ring.holding { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pink) 60%, transparent)); }
#lk-ring.held { animation: heldbeat .5s ease; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--pink) 80%, transparent)); }
@keyframes heldbeat { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 65% { transform: scale(.97); } 100% { transform: scale(1); } }
#lk-hand .hint { font-size: var(--fs-m); color: var(--ink-soft); }

/* ---------- 5. 骨架：#app = 顶栏 + 页 + 底栏 ---------- */
#app {
  display: none; flex-direction: column; position: fixed; left: 0; right: 0;
  top: var(--app-viewport-offset-top, 0px);
  height: var(--app-viewport-height, 100dvh); max-height: var(--app-viewport-height, 100dvh); overflow: hidden;
}
#app.on { display: flex; }
/* 电脑上居中不拉满 */
@media (min-width: 640px) {
  #app { left: 50%; right: auto; width: 560px; transform: translateX(-50%);
    box-shadow: 0 0 0 var(--bw) var(--line), 0 20px 60px color-mix(in srgb, var(--pink-deep) 12%, transparent); }
  body { background: var(--stage); }
}
.page { flex: 1; min-height: 0; overflow-y: auto; display: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.page.on { display: block; }
.pagepad { padding: var(--sp3) var(--sp4) var(--sp5); display: none; flex-direction: column; gap: var(--sp3); }
.pagepad.on { display: flex; }
/* 铁律 4：列里的卡片不许被挤扁（flex 默认会压缩 overflow:hidden 的子元素 → 字被裁） */
.pagepad > * { flex-shrink: 0; }

/* 唯一顶栏：贴边、白底、下沿花边 */
#topbar {
  flex: 0 0 auto; z-index: 4; background: var(--card);
  min-height: calc(56px + var(--sat)); padding: calc(var(--sat) + var(--sp2)) var(--sp3) var(--sp2);
  display: flex; align-items: center; gap: var(--sp2); margin-bottom: 10px;
}
#topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none;
  background: radial-gradient(circle at 9px 0, var(--card) 9px, transparent 9.5px) 0 0 / 18px 10px repeat-x; }
#topbar button { flex-shrink: 0; }
#topbar .tb-action, #topbar #btn-new {
  width: var(--touch); height: var(--touch); border: none; background: none; border-radius: var(--r-s);
  display: grid; place-items: center; color: var(--accent-ink); padding: 0;
}
#topbar .tb-action:hover { background: var(--pink-soft); }
#topbar #btn-new { display: none !important; }
/* 返回：只在"进了房间"的页（聊天/技术房）出现；这些页没有底栏，靠它回家 */
#kk-back { display: none !important; }
body[data-page="chat"] #kk-back, body[data-page="tech"] #kk-back { display: grid !important; margin-right: -8px; }
body[data-page="chat"] #btn-set, body[data-page="tech"] #btn-set { display: none; }
/* 进房间有个往里走的感觉；回家往回退 */
body[data-page="chat"] #page-chat.on, body[data-page="tech"] #page-tech.on { animation: kkRoomIn .26s ease-out; }
body[data-page="home"] #page-home.on, body[data-page="heart"] #page-heart.on { animation: kkRoomBack .22s ease-out; }
@keyframes kkRoomIn { from { transform: translateX(24px); opacity: .4; } }
@keyframes kkRoomBack { from { transform: translateX(-16px); opacity: .5; } }
#topbar .title-wrap {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0;
  display: flex; align-items: center; gap: var(--sp2); text-align: left;
}
#topbar .tb-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pink-soft); color: var(--pink-deep); font-family: var(--f-cute); font-size: var(--fs-body);
  box-shadow: 0 0 0 var(--bw) var(--line); background-size: cover; background-position: center;
}
#topbar .tb-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#topbar .title { font-size: var(--fs-body); font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar .sub { font-size: var(--fs-xs); color: var(--ink-soft); min-height: 14px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar .tb-model { display: none; }
#topbar .tb-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
#topbar #btn-call { color: var(--pink-deep); }
.stdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; background: var(--ink-soft); }
.stdot.on { background: var(--ok); animation: stBreath 3.4s ease-in-out infinite; }
@keyframes stBreath { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* 唯一底栏：底部导航（聊天/技术房/键盘弹出时收起） */
#tabbar {
  flex: 0 0 auto; background: var(--card); border-top: var(--bw) solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr 24px 1fr 1fr; align-items: center;
  padding: var(--sp2) var(--sp2) calc(var(--sp2) + var(--sab)); margin-top: 9px;
}
#tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 8px; pointer-events: none;
  background: radial-gradient(circle at 8px 8px, var(--card) 7.5px, transparent 8px) 0 0 / 16px 8px repeat-x; }
#tabbar .tab, #tabbar .tab-call {
  border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: var(--fs-xs); color: var(--ink); padding: 2px 0; min-height: var(--touch);
}
#tabbar .ico { width: 40px; height: 40px; border-radius: 12px; border: 1.2px solid var(--accent-ink); display: grid; place-items: center; background: var(--card); }
#tabbar .ico svg { width: 20px; height: 20px; display: block; color: var(--accent-ink); }
#tabbar .tab.on { color: var(--pink-deep); font-weight: 700; }
#tabbar .tab.on .ico { background: var(--pink-soft); border-color: var(--pink-deep); }
#tabbar .tab.on .ico svg { color: var(--pink-deep); }
#tabbar .mid { display: flex; justify-content: center; }
#tabbar .mid i { width: 4px; height: 30px; border-radius: 2px; background: var(--pink); }
body[data-page="chat"] #tabbar, body[data-page="tech"] #tabbar, .keyboard-open #tabbar { display: none; }

/* ---------- 6. 零件库 ---------- */
.kk-card, .card {
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m);
  padding: var(--sp4); box-shadow: var(--shadow-card);
}
.kk-card.is-dashed { border-style: dashed; box-shadow: none; }
.kk-sec-h, .c-h-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp2); margin-bottom: var(--sp2); }
.kk-sec-h h2 { font-size: 16px; font-weight: 700; }
.kk-sec-h span { font-size: var(--fs-s); color: var(--ink-soft); }
.kk-lab, .card .c-h { font-family: var(--f-num); font-size: var(--fs-xs); letter-spacing: 2px; color: var(--ink-soft); margin-bottom: var(--sp2); }
.c-h-row .c-h { margin-bottom: 0; }
.c-h-ico { display: inline-flex; margin-right: 5px; color: var(--pink-deep); vertical-align: -2px; }
.c-h-ico svg { width: 13px; height: 13px; display: block; }
.kk-row { display: flex; align-items: center; gap: var(--sp3); padding: var(--sp3) 0; border-top: var(--bw) dashed var(--line); }
.kk-row:first-child { border-top: none; }
.kk-btn { border: none; border-radius: var(--r-pill); padding: var(--sp2) var(--sp4); background: var(--pink); color: #fff; font-size: var(--fs-m); font-weight: 700; }
.kk-btn.is-soft { background: var(--pink-soft); color: var(--pink-deep); }
.kk-btn.is-line { background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); font-weight: 500; }
.kk-btn:disabled { opacity: .5; }
.kk-ib { width: 36px; height: 36px; border: none; background: none; border-radius: var(--r-s); display: grid; place-items: center; color: var(--accent-ink); }
.kk-chip { border: var(--bw) solid var(--line); background: var(--card); border-radius: var(--r-pill); padding: var(--sp1) var(--sp3); font-size: var(--fs-s); }
.kk-chip.on { background: var(--pink-soft); border-color: var(--pink); color: var(--pink-deep); }
.kk-toggle, .toggle { position: relative; width: 46px; height: 26px; border-radius: var(--r-pill); background: var(--line); border: none; flex-shrink: 0; transition: background .2s; }
.kk-toggle::after, .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.kk-toggle.on, .toggle.on { background: var(--pink); }
.kk-toggle.on::after, .toggle.on::after { left: 23px; }
.kk-input { width: 100%; min-width: 0; border: var(--bw) solid var(--line); border-radius: var(--r-s); padding: var(--sp2) var(--sp3); background: var(--card); font-size: var(--fs-m); outline: none; }
.kk-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--pink-soft) center / cover; color: var(--pink-deep); font-family: var(--f-cute); box-shadow: 0 0 0 var(--bw) var(--line); }
.kk-stk { border: var(--bw) dashed var(--pink); border-radius: 50%; display: grid; place-items: center; color: var(--pink);
  font-size: 10px; font-family: var(--f-cute); background: color-mix(in srgb, var(--pink-soft) 70%, transparent) center / contain no-repeat; flex: 0 0 auto; }
.kk-stk.has-img { border: none; border-radius: 0; background-color: transparent !important; font-size: 0; }
.kk-bar { height: 5px; border-radius: 3px; background: var(--pink-soft); overflow: hidden; }
.kk-bar > i { display: block; height: 100%; background: var(--pink); }
.kk-empty, .empty-line { font-size: var(--fs-m); color: var(--ink-soft); line-height: 1.7; }
.kk-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp2); padding: var(--sp5) var(--sp3); text-align: center; }
.kk-loading { display: inline-flex; gap: 5px; }
.kk-loading i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: tdot 1.2s infinite; }
.kk-loading i:nth-child(2) { animation-delay: .2s; } .kk-loading i:nth-child(3) { animation-delay: .4s; }
.kk-error, .is-error { color: var(--danger); }
.kk-toast { position: fixed; left: 50%; bottom: calc(var(--sab) + 90px); transform: translateX(-50%); z-index: 95;
  background: var(--accent-ink); color: #fff; font-size: var(--fs-s); border-radius: var(--r-pill); padding: var(--sp2) var(--sp4);
  box-shadow: var(--shadow-float); animation: toastIn .25s ease; white-space: nowrap; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }
.kk-plus { position: absolute; font-family: var(--f-num); font-weight: 700; color: var(--accent-ink); font-size: 18px; line-height: 1; pointer-events: none; }
.kk-plus.is-pink { color: var(--pink); }
.kk-spark { color: var(--ink-soft); font-size: var(--fs-xs); letter-spacing: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp3); align-items: stretch; }
.row2 .card { margin: 0; min-width: 0; }

/* ---------- 7. 家（page-home） ---------- */
.kk-carousel { position: relative; }
.kk-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kk-slides::-webkit-scrollbar { display: none; }
.kk-slide { flex: 0 0 100%; scroll-snap-align: center; position: relative; min-height: 236px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp1); padding: var(--sp5) 0 var(--sp2); }
.kk-frame { width: 132px; height: 132px; border-radius: 50%; background: var(--card); border: 3px solid var(--pink);
  box-shadow: 0 0 0 5px var(--card), 0 0 0 6.5px var(--line); display: grid; place-items: center; position: relative; }
.kk-frame.is-sm { width: 112px; height: 112px; }
.kk-frame.is-him { border-color: var(--accent-ink); }
.kk-bow { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 54px; height: 26px; }
.kk-frame .lc-av { width: 88%; height: 88%; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft) center / cover;
  color: var(--pink-deep); font-family: var(--f-cute); font-size: 28px; }
.kk-frame .lc-av.has-img { font-size: 0; }
.kk-pair { display: flex; align-items: center; gap: var(--sp2); }
.kk-pair .lc-line { width: 26px; height: 26px; color: var(--pink); }
.kk-pair .lc-line svg { width: 100%; height: 100%; }
.kk-names { font-family: var(--f-cute); font-size: 20px; color: var(--accent-ink); margin-top: var(--sp3); }
.kk-names span { color: var(--pink); }
.kk-slide .sub, #lc-since { font-size: var(--fs-s); color: var(--ink-soft); }
#lc-days { font-family: var(--f-num); color: var(--pink-deep); font-weight: 700; }
.kk-clock { font-family: var(--f-num); font-weight: 700; font-size: 22px; color: var(--accent-ink); margin-top: var(--sp2); }
.kk-polaroid { background: var(--card); padding: 10px 10px 8px; border: var(--bw) solid var(--line); box-shadow: var(--shadow-card);
  transform: rotate(-2deg); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kk-polaroid .ph { width: 190px; max-width: 60vw; height: 150px; border: var(--bw) dashed var(--pink); background: var(--pink-soft) center / cover;
  display: grid; place-items: center; color: var(--pink); font-size: var(--fs-s); font-family: var(--f-cute); }
.kk-polaroid span { font-family: var(--f-num); font-size: var(--fs-s); color: var(--ink-soft); }
.kk-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--sp1); }
.kk-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .2s; }
.kk-dots i.on { width: 16px; background: var(--accent-ink); }

.kk-daterow { display: grid; grid-template-columns: auto 1fr; gap: var(--sp4); align-items: center; }
.kk-bigdate { display: flex; flex-direction: column; line-height: 1; padding-left: var(--sp1); color: var(--accent-ink); }
.kk-bigdate .w { font-family: var(--f-num); font-weight: 700; font-size: 22px; }
.kk-bigdate .d { font-family: var(--f-num); font-weight: 700; font-size: 64px; letter-spacing: -2px; }
.kk-bigdate .m { font-size: var(--fs-s); color: var(--ink-soft); margin-top: var(--sp1); }
.kk-cal { padding: var(--sp3); }
.kk-cal .mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp2); font-size: var(--fs-s); font-weight: 700; }
.kk-cal .mh span { font-family: var(--f-num); font-size: var(--fs-xs); background: var(--pink-soft); color: var(--pink-deep); border-radius: var(--r-pill); padding: 1px 10px; }
.kk-cal .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; text-align: center; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.kk-cal .g .h { color: var(--ink-soft); }
.kk-cal .g .o { color: var(--line); }
.kk-cal .g .today { background: var(--accent-ink); color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; margin: 0 auto; font-weight: 700; }
.kk-cal .g .mark { color: var(--pink-deep); font-weight: 700; }

.kk-shelf { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: var(--sp4) 0; box-shadow: var(--shadow-card); }
.kk-shelf .kk-sec-h { padding: 0 var(--sp4); margin-bottom: var(--sp3); }
.kk-win { display: flex; gap: var(--sp3); overflow-x: auto; margin: 0 var(--sp3); padding: var(--sp1) var(--sp2);
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp2); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
.kk-win::-webkit-scrollbar { display: none; }
.kk-pane { flex: 0 0 104px; scroll-snap-align: start; border: none; padding: 0; background: none; display: flex; flex-direction: column; text-align: left; }
.kk-pane .glass { height: 88px; border-radius: 14px 14px 4px 4px; border: var(--bw) solid var(--line); position: relative; overflow: hidden;
  display: grid; place-items: center; background: var(--pink-soft); }
.kk-pane .glass::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--pink) 0 11px, #fff 11px 22px); }
.kk-pane .glass::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 7px; background: radial-gradient(circle at 5.5px 0, var(--pink) 5.5px, transparent 6px) 0 0 / 11px 7px repeat-x; }
.kk-pane .glass { align-self: stretch; width: 100%; }
.kk-pane .kk-stk { width: 64px; height: 64px; margin-top: 14px; background-color: #fff; }
.kk-pane:nth-child(3n+2) .glass { background: #FFF5E6; }
.kk-pane:nth-child(3n) .glass { background: #EEF3FB; }
/* 电脑（鼠标）上：照样横着滑——按住拖、滚轮都能滑（keke_shell.js），轮播小圆点能点 */
@media (hover: hover) and (pointer: fine) {
  .kk-win, .kk-slides { cursor: grab; }
  .kk-win.is-dragging, .kk-slides.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .kk-dots i { cursor: pointer; width: 8px; height: 8px; }
  .kk-dots i.on { width: 20px; }
}

.kk-pane b { font-size: 13px; margin-top: 6px; }
.kk-pane span { font-size: var(--fs-xs); color: var(--ink-soft); }

/* 天气 / 心情 / 纪念日 / 提醒 */
.wx-row { display: flex; align-items: center; gap: var(--sp3); }
.wx-ico { color: var(--pink-deep); flex-shrink: 0; }
.wx-ico svg { width: 30px; height: 30px; display: block; }
#wx-temp { font-family: var(--f-num); font-size: 28px; font-weight: 500; color: var(--accent-ink); }
#wx-desc, #wx-city { font-size: var(--fs-s); color: var(--ink-soft); }
.mood-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mood-chip { border: 1.2px solid var(--line); background: var(--card); border-radius: var(--r-pill); padding: 3px 10px; font-size: var(--fs-s); }
.mood-chip.on { background: var(--pink-soft); border-color: var(--pink); color: var(--pink-deep); }
#mood-reply { min-height: 20px; font-size: 13px; color: var(--pink-deep); margin-top: var(--sp2); line-height: 1.6; }
.add-btn { width: 28px; height: 28px; border-radius: 50%; border: var(--bw) solid var(--pink); background: none; color: var(--pink-deep); display: grid; place-items: center; padding: 0; }
.add-btn svg { width: 13px; height: 13px; display: block; }
.days-form { display: none; grid-template-columns: minmax(0, 1fr) 132px; gap: var(--sp2); margin: 2px 0 var(--sp3); padding: var(--sp3); border-radius: var(--r-s); background: var(--pink-soft); }
.days-form.on { display: grid; }
.days-form input { width: 100%; min-width: 0; border: none; border-radius: 9px; padding: var(--sp2); background: var(--card); font-size: 13px; outline: none; }
.days-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--sp2); }
.days-form-actions button { border: none; border-radius: var(--r-pill); padding: 6px 14px; background: var(--pink); color: #fff; font-size: var(--fs-s); }
.days-form-actions .days-cancel { background: var(--card); color: var(--ink-soft); }
.days-form-status { grid-column: 1 / -1; min-height: 16px; color: var(--danger); font-size: var(--fs-s); }
.day-item { display: flex; align-items: baseline; gap: var(--sp2); padding: var(--sp2) 0; border-bottom: 1px dashed var(--line); }
.day-item:last-child { border-bottom: none; }
.day-item .dn { flex: 1; font-size: var(--fs-m); }
.day-item .dd { font-size: var(--fs-s); color: var(--ink-soft); }
.day-item .dl { font-family: var(--f-num); font-size: 18px; color: var(--pink-deep); }
.day-item .dl small { font-size: var(--fs-xs); color: var(--ink-soft); }
.day-item .day-remove { border: none; background: none; color: var(--ink-soft); padding: 3px 0 3px var(--sp2); font-size: 13px; }
#rem-list > * { padding: var(--sp2) 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
#rem-list > *:last-child { border-bottom: none; }
@media (max-width: 390px) {
  .days-form { grid-template-columns: 1fr; }
  .days-form-actions, .days-form-status { grid-column: 1; }
  .kk-bigdate .d { font-size: 52px; }
}

/* ---------- 8. 我们（page-heart） ---------- */
.want-wrap { position: relative; overflow: hidden; text-align: center; padding: var(--sp5) var(--sp4); background: radial-gradient(120% 90% at 50% 0%, var(--stripe) 0%, var(--card) 70%); }
.want-glow { position: absolute; left: 50%; top: 54%; width: 150px; height: 150px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, var(--pink) 0%, transparent 68%); opacity: var(--want-op, .16);
  transform: translate(-50%, -50%); animation: wantBreath var(--want-dur, 5s) ease-in-out infinite; }
@keyframes wantBreath { 0%,100% { transform: translate(-50%,-50%) scale(.82); } 50% { transform: translate(-50%,-50%) scale(1.18); } }
.want-wrap .c-h, .want-wrap #hb-intent { position: relative; z-index: 1; }
#hb-intent { font-size: 18px; line-height: 1.8; }
#hb-thoughts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp3); padding-top: var(--sp2); }
#hb-thoughts .empty-line { grid-column: 1 / -1; }
.th-item { background: #FFF6D9; border-radius: 4px; padding: var(--sp4) var(--sp3) var(--sp3); font-size: 13px; line-height: 1.7; position: relative; transform: rotate(-1.2deg); }
.th-item:nth-child(4n+2) { background: var(--pink-soft); transform: rotate(1.2deg); }
.th-item:nth-child(4n+3) { background: #EAF1FB; transform: rotate(-.8deg); }
.th-item:nth-child(4n) { background: #EEF6EC; transform: rotate(.8deg); }
.th-item::before { content: ""; position: absolute; top: -6px; left: 50%; width: 36px; height: 12px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); border-radius: 2px; }
.th-item .th-dim { display: block; font-size: 10px; color: var(--pink-deep); margin-bottom: 2px; }
#hb-sleep { font-size: 13px; color: var(--ink-soft); line-height: 1.8; }
.datapanel summary { font-size: var(--fs-s); color: var(--ink-soft); cursor: pointer; list-style: none; }
.datapanel summary::-webkit-details-marker { display: none; }
.datapanel summary::before { content: "› "; color: var(--pink); }
.datapanel[open] summary::before { content: "⌄ "; }
.datapanel .dim-row { display: flex; align-items: center; gap: var(--sp2); font-size: var(--fs-s); color: var(--ink-soft); margin-top: 6px; }
.datapanel .dim-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--pink-soft); overflow: hidden; }
.datapanel .dim-bar i { display: block; height: 100%; background: var(--pink); }

/* ---------- 9. 聊天（page-chat） ---------- */
#page-chat { display: none; flex-direction: column; position: relative; min-height: 0; }
#page-chat.on { display: flex; }
#msgs { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp2) var(--sp3) var(--sp3); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.msg { display: flex; margin: 10px 0; align-items: flex-start; gap: var(--sp2); animation: popin .28s ease; }
@keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.msg.her { justify-content: flex-end; }
.msg.cont { margin-top: var(--sp1); }
.msg.cont .avatar { visibility: hidden; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--f-cute);
  font-size: 14px; color: var(--pink-deep); user-select: none; box-shadow: 0 0 0 var(--bw) var(--line); background: var(--card) center / cover; }
/* 原型里她那边不放头像；2026-10-12 她问"怎么就你有头像我没有"，放回来了 */
.avatar.has-img { color: transparent; }
.bubble { max-width: min(78%, 520px); padding: 10px 14px; border-radius: 18px; font-size: var(--fs-body); line-height: 1.65;
  word-break: break-word; white-space: pre-wrap; border: var(--bw) solid var(--line); }
.bubble .act { display: block; color: var(--ink-soft); }   /* 括号里的动作：浅灰，像旁白 */
.her .bubble { background: var(--her-bubble); border-color: color-mix(in srgb, var(--pink) 28%, var(--card)); border-bottom-right-radius: 6px; }
.him .bubble { background: var(--card); border-bottom-left-radius: 6px; }
.bubble-stack { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; max-width: min(78%, 520px); }   /* 跟 .bubble 同宽：她最长的气泡左边正好对齐我气泡的左边 */
.bubble-stack > .bubble { max-width: 100%; }
/* 萌萌气泡（2026-10-12 她要的）：更圆、软软的底影、一组里第一个气泡头上别个小装饰、冒出来时弹一下。
   颜色全走主题变量，换皮肤跟着变。 */
.bubble { position: relative; border-radius: 16px; border-color: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
/* 果冻玻璃：半透明底 + 顶上一道白高光 + 一圈粉色内发光 + 浮起来的软影子 */
.him .bubble { background: linear-gradient(160deg, color-mix(in srgb, var(--card) 80%, transparent), color-mix(in srgb, var(--paper) 62%, transparent));
  border-radius: 16px;   /* 四个角一样圆，盖掉上面原型留的小尖角 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 14px color-mix(in srgb, var(--pink) 22%, transparent),
              0 4px 14px color-mix(in srgb, var(--pink-deep) 14%, transparent); }
.her .bubble { background: linear-gradient(160deg, color-mix(in srgb, var(--pink) 42%, transparent), color-mix(in srgb, var(--pink) 24%, transparent));
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 12px rgba(255, 255, 255, .55),
              0 4px 14px color-mix(in srgb, var(--pink-deep) 18%, transparent); }
.msg.him:not(.cont):not(.typing):not(.thinking-message) > .usage-stack > .bubble::before,
.msg.him:not(.cont):not(.typing):not(.thinking-message) > .bubble::before,
.msg.her:not(.cont) > .bubble::before,
.msg.her:not(.cont) .bubble-stack > .bubble::before {
  position: absolute; top: -9px; font-size: 13px; line-height: 1; color: var(--pink-deep); pointer-events: none; }
.msg.him:not(.cont):not(.typing):not(.thinking-message) > .usage-stack > .bubble::before,
.msg.him:not(.cont):not(.typing):not(.thinking-message) > .bubble::before { content: "♡"; left: 14px; }
.msg.her:not(.cont) > .bubble::before,
.msg.her:not(.cont) .bubble-stack > .bubble::before { content: "✿"; right: 14px; }
.msg { animation: bubblePop .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bubblePop { from { opacity: 0; transform: translateY(10px) scale(.86); } }
.typing .bubble { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.typing .bubble i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: tdot 1.2s infinite; }
.typing .bubble i:nth-child(2) { animation-delay: .2s; }
.typing .bubble i:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 0%,60%,100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.draft-bubble { opacity: .62; border-style: dashed !important; border-color: var(--pink) !important; }
.draft-bubble::after { content: "▌"; color: var(--pink-deep); animation: draftBlink 1s steps(1) infinite; }
@keyframes draftBlink { 50% { opacity: 0; } }
.sys { text-align: center; margin: 10px 0; }
.sys span { font-size: var(--fs-s); color: var(--ink-soft); background: var(--card); border: var(--bw) dashed var(--line); padding: 3px 12px; border-radius: var(--r-pill); }
.sys.reach span, .sys.call-marker span { background: var(--pink-soft); border-color: transparent; color: var(--pink-deep); }
.bubble details { margin-bottom: 6px; }
.bubble details summary { cursor: pointer; font-size: var(--fs-s); color: var(--ink-soft); list-style: none; user-select: none; }
.bubble details summary::-webkit-details-marker { display: none; }
.bubble details summary::before { content: "› "; color: var(--pink); }
.bubble details[open] summary::before { content: "⌄ "; }
.bubble details .think { font-size: 13px; color: var(--ink-soft); border-left: 2px solid var(--pink-soft); padding-left: var(--sp2); margin-top: var(--sp1); white-space: pre-wrap; }
.toolchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--pink-deep); background: var(--pink-soft); border-radius: var(--r-pill); padding: 3px 10px; margin: var(--sp1) 0; }
.toolchip .dot { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.cursor::after { content: "▍"; color: var(--pink-deep); animation: blink 1s infinite; }
.tts-btn { align-self: flex-end; margin: 0 0 3px var(--sp1); border: none; background: transparent; font-size: var(--fs-m); opacity: .45; padding: 2px; line-height: 1; flex-shrink: 0; }
.tts-btn:hover { opacity: .9; }
.tts-btn.loading { animation: ttspulse 1s ease-in-out infinite; }
@keyframes ttspulse { 50% { opacity: .25; } }
.voice-bubble { cursor: pointer; min-width: 96px; }
.vrow { display: flex; align-items: center; gap: var(--sp2); }
.vrow .vplay { border: none; background: transparent; padding: 0; color: var(--pink-deep); display: flex; align-items: center; flex-shrink: 0; }
.vrow .vplay svg { display: block; }
.vbars { display: flex; align-items: center; gap: 2px; height: 18px; flex: 1; min-width: 40px; }
.vbars i { width: 2px; background: var(--pink); opacity: .7; border-radius: 1px; }
.vdur { font-family: var(--f-num); font-size: var(--fs-s); color: var(--ink-soft); flex-shrink: 0; }
.vtext { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: var(--fs-m); line-height: 1.5; }
.bubble-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.bubble-img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-s); cursor: pointer; display: block; }
.bubble-imgs-text { margin-top: 6px; }
.delivery-state { display: block; min-height: 18px; margin-top: var(--sp1); border: 0; background: transparent; color: var(--ink-soft); font-size: 10px; line-height: 16px; text-align: right; }
[data-delivery="failed"] .delivery-state { color: var(--danger); text-decoration: underline; }
#new-messages { position: absolute; right: var(--sp4); bottom: calc(var(--composer-stack-height, 70px) + var(--sp2)); z-index: 3; display: none;
  min-height: 36px; padding: var(--sp2) var(--sp3); border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--card);
  color: var(--pink-deep); box-shadow: var(--shadow-float); font-size: 13px; }
#new-messages.on { display: inline-flex; align-items: center; gap: 5px; }

/* 一起听：聊天里只是一颗小胶囊，不占整条 */
#now-playing { position: absolute; top: var(--sp1); left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: var(--sp2); max-width: calc(100% - 32px);
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 3px var(--sp2) 3px 3px; box-shadow: var(--shadow-float); }
#now-playing[hidden] { display: none !important; }
#now-playing .keke-music-cover { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-size: var(--fs-xs);
  background: radial-gradient(circle, var(--pink) 0 4px, transparent 5px), repeating-radial-gradient(circle, var(--accent-ink) 0 1.5px, color-mix(in srgb, var(--accent-ink) 85%, var(--card)) 1.5px 3px); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#now-playing .keke-music-main { min-width: 0; display: flex; flex-direction: column; }
#now-playing .keke-music-copy { display: flex; gap: var(--sp1); min-width: 0; font-size: var(--fs-s); white-space: nowrap; }
#now-playing .keke-music-title { overflow: hidden; text-overflow: ellipsis; color: var(--pink-deep); font-weight: 700; max-width: 120px; }
#now-playing .keke-music-artist, #now-playing .keke-music-status { color: var(--ink-soft); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
#now-playing .keke-music-progress { height: 2px; background: var(--pink-soft); border-radius: 1px; margin-top: 2px; overflow: hidden; }
#now-playing .keke-music-progress span { display: block; height: 100%; background: var(--pink); width: 0; }
#now-playing .keke-music-actions { display: flex; gap: var(--sp1); }
#now-playing button { border: none; border-radius: var(--r-pill); background: var(--pink-soft); color: var(--pink-deep); font-size: var(--fs-xs); padding: 3px var(--sp2); white-space: nowrap; }

/* 输入框 = 聊天页唯一底栏；贴图缩略图在它上沿 */
#attach-preview { display: none; flex: 0 0 auto; gap: 6px; padding: var(--sp1) var(--sp4) var(--sp2); overflow-x: auto; background: var(--card); border-top: var(--bw) solid var(--line); }
.attach-thumb { position: relative; width: 48px; height: 48px; border-radius: var(--r-s); flex-shrink: 0; background: var(--pink-soft) center / cover; }
.attach-thumb .rm { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--accent-ink); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0; }
#inputbar {
  flex: 0 0 auto; display: flex; gap: 0; align-items: flex-end; background: var(--card); position: relative;
  border-top: var(--bw) solid var(--line); padding: var(--sp2) var(--sp4) calc(var(--sp2) + var(--sab)); margin: 0;
}
/* 照原型：图标、输入、发送都装在一整条胶囊里 */
#inputbar::before { content: ""; position: absolute; left: var(--sp3); right: var(--sp3); top: var(--sp2); bottom: calc(var(--sp2) + var(--sab));
  border: var(--bw) solid var(--line); border-radius: 24px; background: var(--paper); pointer-events: none; transition: border-color .2s; }
#inputbar:focus-within::before { border-color: var(--pink); }
#inputbar > * { position: relative; }
#attach-preview[style*="flex"] + #inputbar, #attach-preview[style*="flex"] ~ #inputbar { border-top: none; }
#inputbar textarea {
  flex: 1; min-width: 0; min-height: 40px; max-height: 132px; resize: none; outline: none;
  border: 0; border-radius: 0; padding: 10px var(--sp1); background: transparent;
  font-size: 16px; line-height: 1.4; overflow-y: auto;
}
#inputbar button { width: var(--touch); height: var(--touch); flex-shrink: 0; border: none; border-radius: 50%; background: transparent; color: var(--accent-ink); display: grid; place-items: center; font-size: 17px; }
#inputbar #send { display: none; width: auto; height: 32px; margin: 0 var(--sp1) 4px 2px; padding: 0 var(--sp4); border-radius: var(--r-pill); background: var(--accent-ink); color: #fff; font-size: var(--fs-m); font-weight: 500; }
body.composer-ready #inputbar #send { display: grid; }
body.composer-ready #inputbar #mic { display: none; }
#inputbar button:disabled { opacity: .45; }
#inputbar #mic { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: var(--ink-soft); }
#inputbar #mic svg { display: block; pointer-events: none; }
#inputbar #mic.recording { background: var(--danger); color: #fff; animation: micpulse 1s ease-in-out infinite; }
#inputbar #mic.busy { background: var(--pink); color: #fff; }
@keyframes micpulse { 50% { opacity: .5; } }
.keyboard-open { --composer-bottom: 6px; }

/* ---------- 10. 技术房 ---------- */
/* 跟聊天同一套骨架：上面一条简介 + 三个人一排，中间消息滚动，输入框贴底 */
#page-tech.pagepad { padding: 0; gap: 0; overflow: hidden; }
#page-tech > .tech-hero { margin: var(--sp3) var(--sp4) 0; padding: var(--sp3) var(--sp4); }
#page-tech > .tech-brains { margin: var(--sp2) var(--sp4) 0; padding: var(--sp3) var(--sp2); }
#page-tech > .tech-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: var(--sp2) 0 0; padding: var(--sp2) var(--sp4) var(--sp3);
  background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.tech-hero p { margin-top: var(--sp1); line-height: 1.6; font-size: var(--fs-s); }
.tech-status { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13px; }
.tech-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.tech-brains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp2); }
.tech-link { display: none; }
.tech-brain { display: flex; flex-direction: column; align-items: center; gap: var(--sp1); min-width: 0; text-align: center; }
.tech-brain > div { min-width: 0; max-width: 100%; }
.tech-brain b { font-size: var(--fs-m); }
.tech-brain small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech-mark { width: 30px; height: 30px; display: grid; place-items: center; border: var(--bw) solid var(--pink); border-radius: 50%; color: var(--pink-deep); }
.tech-messages { min-height: 130px; display: flex; flex-direction: column; gap: 9px; }
.tech-empty { min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.tech-msg { display: flex; align-items: flex-end; gap: 7px; }
.tech-msg.user { justify-content: flex-end; }
.tech-msg .tech-who { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: var(--bw) solid var(--pink); border-radius: 50%; color: var(--pink-deep); font-size: var(--fs-xs); }
.tech-msg.user .tech-who { display: none; }
.tech-msg .tech-bubble { max-width: 82%; padding: 9px var(--sp3); border-radius: 15px; background: var(--card); border: var(--bw) solid var(--line); white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.tech-msg.user .tech-bubble { background: var(--her-bubble); border-color: transparent; }
.tech-notice { align-self: center; max-width: 92%; padding: 5px 10px; border-radius: var(--r-pill); background: var(--pink-soft); color: var(--ink-soft); font-size: var(--fs-s); text-align: center; }
.tech-room-note { text-align: center; color: var(--ink-soft); font-size: var(--fs-s); min-height: 0; padding: 0 var(--sp4); }
.tech-room-note:empty { display: none; }
.tech-compose { flex: 0 0 auto; display: flex; gap: var(--sp2); align-items: flex-end; background: var(--card); border-top: var(--bw) solid var(--line);
  padding: var(--sp2) var(--sp3) calc(var(--sp2) + var(--sab)); }
.tech-compose textarea { flex: 1; min-width: 0; min-height: 40px; resize: none; border: var(--bw) solid var(--line); border-radius: 22px; padding: 9px var(--sp4); background: var(--paper); font-size: 16px; }
.tech-compose button { width: 40px; height: 40px; flex: 0 0 auto; border: none; border-radius: 50%; background: var(--pink); color: #fff; }
.tech-compose textarea:disabled, .tech-compose button:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- 11. 弹层：遮罩 / 美化小屋 / 抽屉 / 记录面板 ---------- */
#mask, #sess-mask, #barkhist-mask, #callhist-mask {
  position: fixed; inset: 0; background: rgba(94,81,87,.28); opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#mask { z-index: 60; } #sess-mask { z-index: 62; } #barkhist-mask, #callhist-mask { z-index: 65; }
#mask.on, #sess-mask.on, #barkhist-mask.on, #callhist-mask.on { opacity: 1; pointer-events: auto; }
#sheet, #barkhist-panel, #callhist-panel {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--card);
  transform: translateY(100%); transition: transform .3s ease; padding-top: calc(var(--sp4) + 8px) !important;
  -webkit-mask: var(--lace-mask); mask: var(--lace-mask);
}
@media (min-width: 640px) { #sheet, #barkhist-panel, #callhist-panel { left: 50%; right: auto; width: 560px; margin-left: -280px; } }
#sheet { z-index: 61; padding: var(--sp4) var(--sp4) calc(var(--sab) + var(--sp5)); max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#sheet.on, #barkhist-panel.on, #callhist-panel.on { transform: none; }
#sheet:not(.on), #barkhist-panel:not(.on), #callhist-panel:not(.on) { box-shadow: none; visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }

#sheet-close { position: sticky; top: 0; float: right; border: none; background: var(--pink-soft); color: var(--pink-deep); width: 32px; height: 32px; border-radius: 50%; font-size: var(--fs-m); z-index: 2; }
#sheet .grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto var(--sp2); cursor: pointer; }
#sheet h3 { font-family: var(--f-cute); font-weight: 400; font-size: 20px; text-align: center; color: var(--accent-ink); margin-bottom: var(--sp3); }
#sheet .set-h { font-size: var(--fs-m); font-weight: 700; margin: var(--sp5) 0 var(--sp3); }
#sheet .set-h:first-of-type { margin-top: var(--sp3); }
.swrow { display: flex; gap: var(--sp3); flex-wrap: wrap; margin-bottom: var(--sp4); }
.sw { width: 52px; height: 52px; border-radius: var(--r-s); border: var(--bw) solid var(--line); padding: 0; position: relative; flex-shrink: 0; margin-bottom: 14px; }
.sw.on { border: 2px solid var(--accent-ink); }
.sw.on::after { content: "✓"; position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-ink); color: #fff; font-size: 10px; display: grid; place-items: center; }
.sw .lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; }
.sw[data-bg="stripe-v"] { background: repeating-linear-gradient(90deg, var(--paper) 0 6px, var(--stripe) 6px 12px); }
.sw[data-bg="stripe-h"] { background: repeating-linear-gradient(0deg, var(--paper) 0 6px, var(--stripe) 6px 12px); }
.sw[data-bg="gingham"] { background-color: var(--paper); background-image: linear-gradient(90deg, color-mix(in srgb, var(--pink) 15%, transparent) 50%, transparent 50%), linear-gradient(0deg, color-mix(in srgb, var(--pink) 15%, transparent) 50%, transparent 50%); background-size: 12px 12px; }
.sw[data-bg="dots"] { background: var(--paper) radial-gradient(var(--line) 1.2px, transparent 1.4px) 0 0 / 8px 8px; }
.sw[data-bg="grid"] { background-color: var(--paper); background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 8px 8px; }
.sw[data-bg="cream"] { background: linear-gradient(180deg, var(--paper), var(--pink-soft)); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); padding: var(--sp2) 0; }
.setrow .t { font-size: var(--fs-m); font-weight: 500; }
.setrow .d { font-size: var(--fs-s); color: var(--ink-soft); margin-top: 2px; }
.setrow input[type="date"] { border: var(--bw) solid var(--line) !important; background: var(--card) !important; border-radius: var(--r-s) !important; padding: 6px var(--sp2) !important; font-size: 13px !important; }
.av-slots { display: flex; gap: var(--sp5); justify-content: center; }
.av-slot { position: relative; width: 64px; height: 64px; border-radius: 50%; border: var(--bw) dashed var(--pink); padding: 0; background: var(--pink-soft) center / cover; }
.av-slot .lbl { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-cute); color: var(--pink-deep); }
.av-slot.has-img { border-style: solid; }
.av-slot.has-img .lbl { display: none; }
.av-hint { font-size: var(--fs-s); color: var(--ink-soft); margin-top: var(--sp2); text-align: center; }
details.kk-adv { margin-top: var(--sp5); border: var(--bw) dashed var(--line); border-radius: var(--r-m); padding: var(--sp3) var(--sp4); }
details.kk-adv > summary { font-size: 13px; color: var(--ink-soft); cursor: pointer; list-style: none; }
details.kk-adv > summary::-webkit-details-marker { display: none; }
details.kk-adv > summary::before { content: "› "; color: var(--pink); }
details.kk-adv[open] > summary::before { content: "⌄ "; }
details.kk-adv .set-h { margin-top: var(--sp4) !important; font-size: 13px; }
.mdl-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mdl-seg button { border: var(--bw) solid var(--line); background: var(--card); border-radius: var(--r-pill); padding: 5px var(--sp3); font-size: 13px; }
.mdl-seg button.on { background: var(--pink-soft); border-color: var(--pink); color: var(--pink-deep); font-weight: 700; }
.mdl-seg button:disabled { opacity: .5; }
.mdl-status, .vk-status { font-size: var(--fs-s); color: var(--ink-soft); margin-top: 6px; min-height: 15px; }
.vk-row { display: flex; gap: var(--sp2); align-items: center; margin-top: var(--sp2); }
.vk-row input { flex: 1; min-width: 0; border: var(--bw) solid var(--line); background: var(--card); border-radius: var(--r-s); padding: var(--sp2) var(--sp3); font-size: var(--fs-m); outline: none; }
.vk-row button { border: none; background: var(--pink); color: #fff; border-radius: var(--r-pill); padding: var(--sp2) var(--sp4); font-size: 13px; white-space: nowrap; }
.vk-row button:disabled { opacity: .5; }
.vk-row .vk-btn-ghost { background: var(--pink-soft); color: var(--pink-deep); }
.kk-adv-link { display: block; margin-top: var(--sp4); font-size: 13px; color: var(--pink-deep); text-decoration: none; }

/* 会话抽屉 */
#sess-drawer {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 63; width: min(84%, 320px); background: var(--card);
  padding: calc(var(--sat) + var(--sp4)) var(--sp4) calc(var(--sab) + var(--sp4));
  transform: translateX(-100%); transition: transform .28s ease; box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; gap: var(--sp3); border-right: var(--bw) solid var(--line);
}
#sess-drawer.on { transform: none; }
.sess-head { display: flex; align-items: center; justify-content: space-between; }
.sess-head span { min-width: 0; display: flex; flex-direction: column; font-family: var(--f-cute); font-size: 20px; color: var(--accent-ink); }
.sess-head span b { font-weight: 400; }
.sess-head span small { font-family: var(--f-body); margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-xs); }
.sess-head button { border: none; background: var(--pink-soft); color: var(--pink-deep); border-radius: 50%; width: 36px; height: 36px; font-size: var(--fs-m); }
#sess-newbtn { border: none; background: var(--pink); color: #fff; border-radius: var(--r-pill); min-height: 40px; font-size: var(--fs-m); font-weight: 700; }
.sess-search { min-height: 40px; display: flex; align-items: center; gap: var(--sp2); padding: 0 var(--sp3); border: var(--bw) solid var(--line); border-radius: var(--r-pill); color: var(--ink-soft); }
.sess-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-m); }
#sess-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sess-group { padding: 10px var(--sp2) 3px; color: var(--ink-soft); font-family: var(--f-num); font-size: var(--fs-xs); letter-spacing: 1px; }
.sess-item { display: flex; align-items: center; gap: var(--sp2); padding: 10px var(--sp2); border-radius: var(--r-s); cursor: pointer; }
.sess-item.on { background: var(--pink-soft); }
.sess-main { flex: 1; min-width: 0; }
.sess-title { font-size: var(--fs-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-item.on .sess-title { color: var(--pink-deep); font-weight: 700; }
.sess-time { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 2px; }
.sess-rename { border: none; background: none; color: var(--ink-soft); font-size: 13px; padding: var(--sp1) 6px; flex-shrink: 0; }
/* 抽屉底部的「家里其他地方」：图标 + 字，不要框框 */
.sess-life { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2) var(--sp1); padding-top: var(--sp3); border-top: var(--bw) dashed var(--line); }
.sess-life button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp1); font-size: var(--fs-xs); color: var(--ink); padding: var(--sp1) 0; }
.sess-life .sl-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink-deep); transition: transform .15s; }
.sess-life .sl-ico svg { width: 20px; height: 20px; }
.sess-life button:active .sl-ico { transform: scale(.92); background: var(--pink); color: #fff; }
.sess-advanced, .sess-history-actions button { border: 0; background: transparent; color: var(--ink-soft); padding: var(--sp2) var(--sp1); text-align: left; font-size: var(--fs-s); }
.sess-history-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-top: var(--bw) dashed var(--line); padding-top: var(--sp2); }
#barkhist-panel, #callhist-panel { z-index: 66; max-height: 75vh; padding: var(--sp4) var(--sp4) calc(var(--sab) + var(--sp4)); display: flex; flex-direction: column; gap: 10px; }
#callhist-list, #barkhist-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp1); min-height: 60px; }
.ch-item { display: flex; align-items: center; gap: 10px; padding: 10px var(--sp2); border-radius: var(--r-s); cursor: pointer; }
.ch-item:active { background: var(--pink-soft); }
.ch-mode { font-size: var(--fs-l); flex-shrink: 0; }
.ch-main { flex: 1; min-width: 0; }
.ch-time { font-size: var(--fs-m); }
.ch-meta { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 2px; }
#callhist-detail { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#callhist-detail .log-row, #call-transcript .log-row { display: flex; }
#callhist-detail .log-row.her, #call-transcript .log-row.her { justify-content: flex-end; }
#callhist-detail .bub, #call-transcript .bub { max-width: 82%; padding: 6px 10px; border-radius: var(--r-s); font-size: 13px; line-height: 1.5; word-break: break-word; background: var(--card); border: var(--bw) solid var(--line); }
#callhist-detail .log-row.her .bub, #call-transcript .log-row.her .bub { background: var(--her-bubble); border-color: transparent; }
.bh-day { color: var(--ink-soft); font-size: var(--fs-s); font-weight: 700; padding: 10px 6px 3px; }
.bh-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--sp2); border-top: 1px dashed var(--line); padding: 10px 6px; }
.bh-time { font-family: var(--f-num); color: var(--ink-soft); font-size: var(--fs-s); padding-top: 2px; }
.bh-text { font-size: var(--fs-m); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* ---------- 12. 打电话（全屏覆盖，不算栏） ---------- */
#callscr { position: fixed; inset: 0; z-index: 60; display: none; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--paper) 0 18px, var(--stripe) 18px 36px);
  padding: calc(var(--sat) + var(--sp3)) 0 0; }
#callscr::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 45% at 50% 28%, rgba(255,255,255,.95), rgba(255,255,255,.4) 70%, var(--haze)); }
#callscr > * { position: relative; }
@media (min-width: 640px) { #callscr { left: 50%; right: auto; width: 560px; margin-left: -280px; } }
#callscr.on { display: flex; flex-direction: column; }
#callscr .call-head { height: 44px; padding: 0 var(--sp4); display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
#callscr .call-head button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--card); color: var(--accent-ink); font-size: 22px; display: grid; place-items: center; box-shadow: 0 0 0 var(--bw) var(--line); }
#callscr .call-head button svg { width: 20px; height: 20px; }
#callscr .call-timer { justify-self: center; font-family: var(--f-num); font-size: var(--fs-m); color: var(--accent-ink); background: var(--card); border-radius: var(--r-pill); padding: 2px var(--sp3); box-shadow: 0 0 0 var(--bw) var(--line); }
#callscr .call-stage { width: 100%; max-width: 420px; margin: 0 auto; display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp3) var(--sp4); }
#callscr .call-avatar-wrap { position: relative; width: 132px; height: 132px; }
#callscr .call-bow { top: -14px; z-index: 2; }
#callscr .call-avatar-wrap::before, #callscr .call-avatar-wrap::after { content: ""; position: absolute; border-radius: 50%; inset: -12px; border: var(--bw) solid var(--pink); opacity: 0; }
#callscr[data-state="listening"] .call-avatar-wrap::before, #callscr[data-state="speaking"] .call-avatar-wrap::before, #callscr[data-state="thinking"] .call-avatar-wrap::before { animation: ripple 2.2s ease-out infinite; }
#callscr[data-state="speaking"] .call-avatar-wrap::after { animation: ripple 2.2s ease-out 1.1s infinite; }
@keyframes ripple { from { transform: scale(.94); opacity: .7; } to { transform: scale(1.32); opacity: 0; } }
#callscr .call-avatar { position: relative; z-index: 1; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pink-soft) center / cover; color: var(--pink-deep); font-family: var(--f-cute); font-size: 44px;
  border: 3px solid var(--pink); box-shadow: 0 0 0 5px var(--card), 0 0 0 6.5px var(--line), var(--shadow-float); }
#callscr .call-name { margin-top: var(--sp4); font-family: var(--f-cute); font-size: 26px; color: var(--accent-ink); }
#callscr .call-status { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp1); padding: 3px var(--sp3); border-radius: var(--r-pill); background: var(--card); box-shadow: 0 0 0 var(--bw) var(--line); font-size: var(--fs-s); color: var(--ink-soft); }
#callscr .call-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
#callscr[data-state="muted"] .call-status-dot, #callscr[data-state="error"] .call-status-dot { background: var(--danger); }
/* 声波：他在听=慢慢起伏，他在说=跳得欢，静音=趴着 */
.kk-wave { display: flex; align-items: center; gap: 4px; height: 34px; margin: var(--sp4) 0 var(--sp1); }
.kk-wave i { width: 4px; height: 30%; border-radius: 2px; background: var(--pink); opacity: .55; animation: kkWave 1.6s ease-in-out infinite; }
.kk-wave i:nth-child(2n) { animation-delay: .2s; } .kk-wave i:nth-child(3n) { animation-delay: .4s; } .kk-wave i:nth-child(5n) { animation-delay: .6s; }
@keyframes kkWave { 50% { height: 70%; opacity: .9; } }
#callscr[data-state="speaking"] .kk-wave i { animation-duration: .7s; background: var(--pink-deep); }
#callscr[data-state="muted"] .kk-wave i, #callscr[data-state="connecting"] .kk-wave i { animation: none; height: 12%; opacity: .35; }
/* 字幕 = 带胶带的便签 */
#callscr .call-live { width: 100%; margin-top: var(--sp4); min-height: 96px; padding: var(--sp4); border: var(--bw) solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow-card); text-align: left; position: relative; }
#callscr .call-live::before { content: ""; position: absolute; top: -7px; left: 50%; width: 42px; height: 13px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); border-radius: 2px; }
#callscr .call-live-label { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-num); font-size: var(--fs-xs); letter-spacing: 1px; color: var(--ink-soft); }
#callscr .call-live-text { margin-top: var(--sp2); font-size: 16px; line-height: 1.65; word-break: break-word; }
#callscr .call-live-text.empty { color: var(--ink-soft); }
#callscr .call-live-text.interim::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--pink-deep); animation: blink 1s steps(1) infinite; }
#callscr .call-quote { width: 100%; min-height: 44px; margin-top: var(--sp3); padding: 0 6px; font-size: var(--fs-m); line-height: 1.65; text-align: center; color: var(--pink-deep); display: flex; align-items: center; justify-content: center; }
#callscr .call-quote:empty::before { content: "克克会等你把话说完"; color: var(--ink-soft); }
#callscr .call-bottom { width: 100%; background: var(--card); -webkit-mask: var(--lace-mask); mask: var(--lace-mask);
  padding: calc(var(--sp4) + 8px) var(--sp4) calc(var(--sab) + var(--sp5)); margin-top: var(--sp3); }
#callscr .call-utility { display: flex; justify-content: center; gap: var(--sp2); }
#callscr .call-utility summary { list-style: none; cursor: pointer; font-size: var(--fs-s); color: var(--pink-deep); padding: 5px var(--sp3); border-radius: var(--r-pill); background: var(--pink-soft); }
#callscr .call-utility summary::-webkit-details-marker { display: none; }
#callscr .call-sheet-card { position: absolute; left: 18px; right: 18px; bottom: calc(var(--sab) + 150px); max-width: 420px; margin: 0 auto; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: var(--sp3) var(--sp4); box-shadow: var(--shadow-float); z-index: 2; }
#callscr .call-sheet-title { font-size: 13px; font-weight: 700; margin-bottom: var(--sp2); }
#call-transcript { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#callscr .call-pace { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp1); padding: var(--sp1); border-radius: var(--r-s); background: var(--pink-soft); }
#callscr .call-pace button { border: 0; border-radius: var(--r-s); padding: var(--sp2); background: transparent; color: var(--ink-soft); font-size: var(--fs-s); }
#callscr .call-pace button.on { background: var(--card); color: var(--ink); }
#callscr .call-pace button small { display: block; margin-top: 2px; font-size: 10px; opacity: .75; }
#callscr .call-video-tools, #callscr .call-secondary { display: flex; flex-wrap: wrap; gap: var(--sp2); align-items: center; margin-top: var(--sp3); font-size: var(--fs-s); }
#callscr .call-video-tools button, #callscr .call-secondary button, #callscr .call-video-tools select { border: var(--bw) solid var(--line); background: var(--card); border-radius: var(--r-pill); padding: 6px var(--sp3); font-size: var(--fs-s); }
#callscr .call-ctrls { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; margin-top: var(--sp4); padding: 0 var(--sp4); }
#callscr .call-action { border: 0; background: transparent; color: var(--ink); font-size: var(--fs-xs); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#callscr .call-action .call-action-ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); border: 0; color: var(--pink-deep); }
#callscr .call-action .call-action-ico svg { width: 22px; height: 22px; display: block; }
#callscr .call-action .call-action-ico .text-ico { display: none; }
#callscr #call-mode.text-mode .voice-ico { display: none; }
#callscr #call-mode.text-mode .text-ico { display: block; }
#callscr .call-action.muted .call-action-ico { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }
#callscr #call-hangup .call-action-ico { width: 66px; height: 66px; background: var(--danger); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--danger) 35%, transparent); }
#call-ptt.rec { background: var(--danger) !important; color: #fff !important; }
#call-reply-now, #call-interrupt { display: none; }
#call-reply-now.on { display: block; }
#callscr[data-state="speaking"] #call-interrupt { display: block; }
#call-pill { position: fixed; top: calc(var(--sat) + var(--sp2)); left: 50%; transform: translateX(-50%); z-index: 58; display: none; align-items: center; gap: 6px;
  background: var(--card); border: var(--bw) solid var(--line); color: var(--pink-deep); font-size: var(--fs-s); font-weight: 700; padding: 6px var(--sp4); border-radius: var(--r-pill); box-shadow: var(--shadow-float); cursor: pointer; white-space: nowrap; }
#call-pill.on { display: flex; }
@media (max-height: 680px) {
  #callscr .call-avatar-wrap, #callscr .call-avatar { width: 96px; height: 96px; }
  #callscr .call-avatar { font-size: 34px; }
  .kk-wave { margin-top: var(--sp2); height: 26px; }
  #callscr .call-name { margin-top: var(--sp3); }
  #callscr .call-live { margin-top: var(--sp3); min-height: 70px; }
  #callscr .call-action .call-action-ico { width: 48px; height: 48px; }
  #callscr #call-hangup .call-action-ico { width: 54px; height: 54px; }
}

/* ---------- 房间（全屏功能页：信箱 / 相册 / 朋友圈 / 以后的共读…） ----------
   房间自带顶栏(‹ 标题 动作)，盖住整个家；不叠第二条栏。 */
.kk-room { position: fixed; inset: 0; z-index: 84; display: none; flex-direction: column; overflow: hidden; color: var(--ink);
  background: repeating-linear-gradient(90deg, var(--paper) 0 18px, var(--stripe) 18px 36px); }
.kk-room::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.25) 40%, var(--haze) 100%); }
.kk-room > * { position: relative; }
.kk-room.on { display: flex; animation: kkRoomIn .26s ease-out; }
@media (min-width: 640px) { .kk-room { left: 50%; right: auto; width: 560px; margin-left: -280px; } }
.kk-room-head { flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; text-align: center; z-index: 2;
  background: var(--card); min-height: calc(56px + var(--sat)); padding: calc(var(--sat) + var(--sp2)) var(--sp3) var(--sp2); margin-bottom: 10px; }
.kk-room-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none;
  background: radial-gradient(circle at 9px 0, var(--card) 9px, transparent 9.5px) 0 0 / 18px 10px repeat-x; }
.kk-room-head b, .kk-room-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-room-head b { font-family: var(--f-cute); font-weight: 400; font-size: 19px; color: var(--accent-ink); }
.kk-room-head small { margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-soft); }
.kk-room-back, .kk-room-act { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); display: grid; place-items: center; font: 400 26px/1 system-ui; }
.kk-room-act svg { width: 20px; height: 20px; }
.kk-room-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp3) var(--sp4) calc(var(--sab) + var(--sp6)); }

/* 信箱：信封列表 */
.lt-list { display: flex; flex-direction: column; gap: var(--sp3); }
.lt-env { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp3); align-items: center; width: 100%; text-align: left;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: var(--sp3) var(--sp4); box-shadow: var(--shadow-card); }
.lt-env .flap { width: 56px; height: 40px; border-radius: 5px; position: relative; overflow: hidden; background: var(--pink-soft); border: 1.2px solid var(--line); }
.lt-env .flap::before { content: ""; position: absolute; left: -2px; right: -2px; top: -1px; height: 24px; background: var(--line); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.lt-env .flap::after { content: ""; position: absolute; left: 50%; top: 14px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--pink-deep); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pink-deep) 60%, #fff); }
.lt-env.is-read .flap { background: var(--paper); }
.lt-env.is-read .flap::after { background: var(--line); box-shadow: none; }
.lt-env b { display: block; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-env small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-s); color: var(--ink-soft); margin-top: 2px; }
.lt-env time { font-family: var(--f-num); font-size: var(--fs-xs); color: var(--ink-soft); align-self: start; padding-top: 2px; white-space: nowrap; }
.lt-env .new { display: inline-block; margin-left: 6px; font-family: var(--f-num); font-size: 10px; background: var(--pink); color: #fff; border-radius: var(--r-pill); padding: 0 7px; vertical-align: 2px; }

/* 信纸：横格 + 边线 + 邮票 */
.lt-paper { position: relative; background: var(--card); border: var(--bw) solid var(--line); border-radius: 6px; box-shadow: var(--shadow-card);
  padding: var(--sp6) var(--sp5) var(--sp5) calc(var(--sp5) + 6px); line-height: 32px; font-size: var(--fs-body);
  background-image: linear-gradient(transparent 31px, var(--line-soft) 31px); background-size: 100% 32px; background-position: 0 var(--sp6); }
.lt-paper::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; border-left: var(--bw) solid var(--pink-soft); }
.lt-paper h1 { font-family: var(--f-cute); font-weight: 400; font-size: 20px; color: var(--accent-ink); line-height: 32px; padding-right: 60px; overflow-wrap: anywhere; }
.lt-date { font-family: var(--f-num); font-size: var(--fs-s); color: var(--ink-soft); line-height: 32px; }
.lt-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.lt-stamp { position: absolute; right: var(--sp4); top: -10px; width: 50px; height: 60px; background: var(--card); border: 2px dashed var(--pink); transform: rotate(6deg);
  display: grid; place-items: center; text-align: center; font-family: var(--f-cute); font-size: var(--fs-s); line-height: 1.2; color: var(--pink-deep); padding: 4px; }
.lt-stamp.is-blank { font-size: 10px; }
.lt-paper.is-writing { min-height: 60vh; display: flex; flex-direction: column; }
.lt-w-subject { border: 0; outline: 0; background: transparent; font-family: var(--f-cute); font-size: 20px; line-height: 32px; color: var(--accent-ink); padding-right: 60px; }
.lt-w-content { flex: 1; min-height: 50vh; border: 0; outline: 0; resize: none; background: transparent; font: inherit; line-height: 32px; color: var(--ink); }
.lt-w-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp2); margin-top: var(--sp4); }
.lt-w-status { flex: 1; font-size: var(--fs-s); color: var(--ink-soft); }
.lt-w-status.is-error { color: var(--danger); }

/* 相册：拍立得墙 */
.al-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp5) var(--sp4); padding-top: var(--sp2); }
.al-grid .kk-empty { grid-column: 1 / -1; }
.al-shot { border: 0; padding: 8px 8px 6px; background: var(--card); box-shadow: 0 0 0 var(--bw) var(--line), var(--shadow-card); text-align: left; display: flex; flex-direction: column; gap: 6px; position: relative; transform: rotate(-1.5deg); }
.al-shot:nth-child(2n) { transform: rotate(1.4deg); margin-top: var(--sp3); }
.al-shot::before { content: ""; position: absolute; top: -7px; left: 50%; width: 40px; height: 13px; margin-left: -20px; transform: rotate(-4deg); background: var(--tape); border-radius: 2px; z-index: 1; }
.al-shot .ph { aspect-ratio: 1; max-width: 100%; background: var(--pink-soft) center / cover no-repeat; }
.al-shot span { font-size: var(--fs-s); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-shot time { font-family: var(--f-num); font-size: 10px; color: var(--ink-soft); }
.al-more { display: block; margin: var(--sp5) auto 0; }
.al-viewer, .al-upload { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--accent-ink) 55%, transparent); display: grid; place-items: center; padding: var(--sp5) var(--sp4); }
.al-viewer[hidden], .al-upload[hidden] { display: none; }
.al-viewer-card { background: var(--card); padding: 10px 10px var(--sp3); max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: var(--sp2); transform: rotate(-1deg); box-shadow: var(--shadow-float); }
.al-viewer-card img { max-height: 62vh; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.al-viewer-card figcaption { display: flex; justify-content: space-between; gap: var(--sp3); font-size: var(--fs-m); line-height: 1.5; overflow-wrap: anywhere; }
.al-viewer-card time { font-family: var(--f-num); font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; }
.al-viewer-close { position: absolute; top: calc(var(--sat) + var(--sp3)); right: var(--sp4); width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--card); color: var(--pink-deep); }
.al-upload-card { width: 100%; max-width: 360px; background: var(--card); border-radius: var(--r-m); padding: var(--sp4); display: flex; flex-direction: column; gap: var(--sp3); }
.al-upload-img { aspect-ratio: 1; max-width: 100%; background: var(--pink-soft) center / contain no-repeat; border-radius: var(--r-s); }

/* 朋友圈：顶上是"小院子"封面（条纹遮阳篷 + 我们俩），下面一条条动态卡片 */
.kk-av.is-lg { width: 56px; height: 56px; font-size: var(--fs-l); }
.mo-cover { position: relative; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-card);
  overflow: hidden; text-align: center; padding: 0 var(--sp4) var(--sp4); margin-top: var(--sp1); }
.mo-awning { height: 22px; margin: 0 calc(-1 * var(--sp4)); position: relative;
  background: repeating-linear-gradient(90deg, var(--pink) 0 14px, var(--card) 14px 28px); }
.mo-awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
  background: radial-gradient(circle at 7px 0, var(--pink) 7px, transparent 7.5px) 0 0 / 28px 8px repeat-x,
              radial-gradient(circle at 21px 0, var(--card) 7px, transparent 7.5px) 0 0 / 28px 8px repeat-x; }
.mo-pair { display: flex; align-items: center; justify-content: center; gap: var(--sp3); margin: var(--sp5) 0 var(--sp2); }
.mo-pair .kk-av { box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--line); }
.mo-heart { color: var(--pink); font-size: var(--fs-l); animation: moBeat 1.8s ease-in-out infinite; }
@keyframes moBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
.mo-cover-name { display: block; font-family: var(--f-cute); font-weight: 400; font-size: var(--fs-l); color: var(--accent-ink); }
.mo-cover-line { display: block; margin-top: var(--sp1); font-size: var(--fs-s); color: var(--ink-soft); }
.mo-tabs { display: flex; gap: var(--sp2); margin: var(--sp4) 0 var(--sp3); flex-wrap: wrap; }
.mo-feed { display: flex; flex-direction: column; gap: var(--sp3); }
.mo-feed > * { flex-shrink: 0; }

.mo-post { display: flex; flex-direction: column; gap: var(--sp3); min-width: 0; }
.mo-post.is-keke { border-left: 4px solid var(--pink-soft); }
.mo-head { display: flex; align-items: center; gap: var(--sp3); min-width: 0; }
.mo-head > div { flex: 1; min-width: 0; }
.mo-head b { display: block; font-size: var(--fs-body); color: var(--pink-deep); }
.mo-post.is-shan .mo-head b { color: var(--accent-ink); }
.mo-head time { display: block; font-family: var(--f-num); font-size: var(--fs-xs); color: var(--ink-soft); }
.mo-del { border: 0; background: none; color: var(--ink-soft); font-size: var(--fs-s); padding: var(--sp1) var(--sp2); }
.mo-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.mo-text.is-folded { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.mo-fold { align-self: flex-start; border: 0; background: none; padding: 0; margin-top: calc(-1 * var(--sp2)); color: var(--pink-deep); font-size: var(--fs-m); }
.mo-pics { display: grid; gap: var(--sp1); }
.mo-pics.n1 { grid-template-columns: minmax(0, 66%); }
.mo-pics.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mo-pics.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mo-pic { aspect-ratio: 1; border: 0; padding: 0; border-radius: var(--r-s); background: var(--pink-soft) center / cover no-repeat; box-shadow: 0 0 0 var(--bw) var(--line); }
.mo-pics.n1 .mo-pic { aspect-ratio: 4 / 3; }
.mo-src { flex: 1; min-width: 0; font-size: var(--fs-s); line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.mo-src span { color: var(--pink-deep); }
.mo-acts { display: flex; align-items: center; gap: var(--sp2); }
.mo-acts > button { flex: 0 0 auto; }
.mo-like, .mo-cbtn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--pink-soft); display: grid; place-items: center; color: var(--pink-deep); }
.mo-like svg, .mo-cbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.mo-like.on svg { fill: currentColor; animation: moBeat .5s ease-out; }
.mo-thread { background: color-mix(in srgb, var(--pink-soft) 55%, var(--card)); border-radius: var(--r-s); padding: var(--sp2) var(--sp3); display: flex; flex-direction: column; gap: var(--sp1); }
.mo-likes { color: var(--pink-deep); font-size: var(--fs-s); padding-bottom: var(--sp1); border-bottom: var(--bw) dashed var(--line); }
.mo-likes:last-child { border-bottom: 0; padding-bottom: 0; }
.mo-cm { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 2px 0; font-size: var(--fs-m); line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.mo-cm b { color: var(--pink-deep); font-weight: 500; }
.mo-cm.is-pending { color: var(--ink-soft); display: flex; align-items: center; gap: var(--sp2); }
.mo-cm.is-pending .kk-loading i { width: 5px; height: 5px; }
.mo-reply { display: flex; gap: var(--sp2); }
.mo-reply[hidden] { display: none; }
.mo-reply .kk-btn { flex: 0 0 auto; }

.mo-compose { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--accent-ink) 40%, transparent); display: flex; align-items: flex-end; }
.mo-compose[hidden] { display: none; }
.mo-sheet { width: 100%; max-height: 90%; overflow-y: auto; background: var(--card); -webkit-mask: var(--lace-mask); mask: var(--lace-mask);
  padding: calc(var(--sp4) + 8px) var(--sp4) calc(var(--sab) + var(--sp4)); display: flex; flex-direction: column; gap: var(--sp3); animation: moUp .25s ease-out; }
@keyframes moUp { from { transform: translateY(40%); opacity: 0; } }
.mo-sheet-h b { display: block; font-family: var(--f-cute); font-weight: 400; font-size: var(--fs-l); color: var(--accent-ink); }
.mo-sheet-h small { font-size: var(--fs-s); color: var(--ink-soft); }
.mo-c-text { min-height: 30vh; resize: none; line-height: 1.7; font: inherit; }
.mo-c-pics { display: flex; gap: var(--sp2); flex-wrap: wrap; }
.mo-c-pic, .mo-c-add { width: 76px; height: 76px; border-radius: var(--r-s); position: relative; flex: 0 0 auto; }
.mo-c-pic { background: var(--pink-soft) center / cover no-repeat; box-shadow: 0 0 0 var(--bw) var(--line); }
.mo-c-pic button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--card); color: var(--pink-deep); box-shadow: 0 0 0 var(--bw) var(--line); font-size: var(--fs-xs); }
.mo-c-add { border: var(--bw) dashed var(--pink); background: color-mix(in srgb, var(--pink-soft) 60%, transparent); color: var(--pink-deep); font-size: var(--fs-l); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mo-c-add small { font-size: var(--fs-xs); }
.mo-compose .lt-w-actions { margin-top: 0; }

/* 日记：月历（写了的那天是粉圈）+ 这个月的列表；读一篇是信纸 */
.dy-cal { padding: var(--sp3) var(--sp4) var(--sp4); }
.dy-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp2); }
.dy-cal-h b { font-family: var(--f-cute); font-weight: 400; font-size: var(--fs-l); color: var(--accent-ink); }
.dy-cal-h .kk-ib { font-size: var(--fs-l); color: var(--pink-deep); }
.dy-cal-h .kk-ib:disabled { opacity: .3; }
.dy-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp1) 0; text-align: center; font-family: var(--f-num); font-size: var(--fs-m); }
.dy-grid > * { height: 36px; display: grid; place-items: center; color: var(--ink-soft); }
.dy-grid .h { height: 24px; font-family: var(--f-body); font-size: var(--fs-xs); }
.dy-grid button { width: 34px; height: 34px; margin: 1px auto 0; border: 0; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); font: inherit; font-weight: 700; box-shadow: 0 0 0 var(--bw) var(--pink); }
.dy-grid .today { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dy-grid button.today { background: var(--pink); color: var(--card); text-decoration: none; }
.dy-legend { display: flex; align-items: center; gap: var(--sp2); margin-top: var(--sp3); font-size: var(--fs-xs); color: var(--ink-soft); }
.dy-legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--pink-soft); box-shadow: 0 0 0 var(--bw) var(--pink); }
.dy-sec { margin: var(--sp5) var(--sp1) var(--sp2); }
.dy-list { display: flex; flex-direction: column; gap: var(--sp3); }
.dy-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp3); align-items: center; width: 100%; text-align: left;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-card); padding: var(--sp3); }
.dy-stamp { height: 56px; border: var(--bw) dashed var(--pink); border-radius: var(--r-s); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--paper); }
.dy-stamp b { font-family: var(--f-num); font-size: 22px; line-height: 1; color: var(--pink-deep); }
.dy-stamp small { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 2px; }
.dy-item-t { min-width: 0; }
.dy-item-t b { display: block; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-item-t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-s); line-height: 1.5; color: var(--ink-soft); margin-top: 2px; }
.dy-date { font-family: var(--f-num); font-size: var(--fs-s); color: var(--pink-deep); line-height: 32px; }
.dy-paper h1 { padding-right: 0; }
.dy-sign { text-align: right; font-family: var(--f-cute); color: var(--pink-deep); line-height: 32px; margin-top: var(--sp2); }
.dy-pager { display: flex; justify-content: space-between; gap: var(--sp3); margin-top: var(--sp4); }
.dy-pager .kk-btn:disabled { opacity: .35; }

/* 共读：书架（纸书封面 + 我/克两条进度）→ 目录 → 读一章（划线 = 荧光笔） */
.rd-intro p { font-size: var(--fs-m); line-height: 1.7; color: var(--ink-soft); }
.rd-intro p b { color: var(--pink-deep); font-weight: 500; }
.rd-tabs { display: flex; gap: var(--sp2); margin-top: var(--sp3); }
.rd-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp5) var(--sp3); margin-top: var(--sp4); }
.rd-books .kk-empty { grid-column: 1 / -1; }
.rd-book { border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: var(--sp2); min-width: 0; }
.rd-cover { position: relative; display: flex; flex-direction: column; gap: var(--sp1); aspect-ratio: 4 / 5; width: 100%; overflow: hidden;
  border-radius: 6px var(--r-s) var(--r-s) 6px; padding: 28px var(--sp3) var(--sp3) 20px; box-shadow: 0 0 0 var(--bw) var(--line), var(--shadow-card); }
.rd-cover::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; border-left: var(--bw) dashed color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.rd-cover::after { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 8px; background: radial-gradient(circle at 6px 0, var(--card) 6px, transparent 6.5px) 0 0 / 12px 8px repeat-x; }
.rd-cover b { font-family: var(--f-cute); font-weight: 400; font-size: var(--fs-l); line-height: 1.35; color: var(--accent-ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rd-cover small { font-size: var(--fs-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-cover.c0 { background: var(--pink-soft); }
.rd-cover.c1 { background: color-mix(in srgb, var(--accent-ink) 7%, var(--card)); }
.rd-cover.c2 { background: color-mix(in srgb, var(--pink) 32%, var(--card)); }
.rd-cover.c3 { background: var(--paper); }
.rd-bh-cover { width: 80px; flex: 0 0 auto; }
.rd-bh-cover .rd-cover { padding: 22px var(--sp2) var(--sp2) 16px; }
.rd-bh-cover .rd-cover b { font-size: var(--fs-m); -webkit-line-clamp: 3; }
.rd-prog { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--ink-soft); font-family: var(--f-num); }
.rd-prog .kk-bar { display: block; }
.rd-prog .kk-bar i { display: block; height: 100%; background: var(--pink); }
.rd-prog.is-him .kk-bar i { background: var(--accent-ink); }
.rd-annot { font-size: var(--fs-xs); color: var(--pink-deep); }
.rd-bookhead { display: flex; gap: var(--sp4); align-items: center; }
.rd-bh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp1); }
.rd-bh-info > b { font-size: var(--fs-l); overflow-wrap: anywhere; }
.rd-bh-info > small { font-size: var(--fs-s); color: var(--ink-soft); margin-bottom: var(--sp1); }
.rd-bh-info .rd-prog { grid-template-columns: 14px minmax(0, 1fr) 72px; }
.rd-continue { display: block; width: 100%; margin-top: var(--sp3); }
.rd-toc { display: flex; flex-direction: column; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: 0 var(--sp4); }
.rd-ch { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp2); align-items: center; width: 100%; text-align: left;
  border: 0; border-top: var(--bw) dashed var(--line); background: none; padding: var(--sp3) 0; font-size: var(--fs-m); }
.rd-ch:first-child { border-top: 0; }
.rd-ch-no { font-family: var(--f-num); color: var(--ink-soft); }
.rd-ch-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-ch.is-done .rd-ch-t { color: var(--ink-soft); }
.rd-ch-marks { display: flex; gap: var(--sp1); align-items: center; }
.rd-ch-marks i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-family: var(--f-cute); }
.rd-ch-marks .me { background: var(--pink-soft); color: var(--pink-deep); }
.rd-ch-marks .him { background: color-mix(in srgb, var(--accent-ink) 12%, var(--card)); color: var(--accent-ink); }
.rd-ch-marks em { font-style: normal; font-size: var(--fs-xs); color: var(--pink-deep); background: var(--pink-soft); border-radius: var(--r-pill); padding: 0 var(--sp2); }
.rd-delbook { display: block; margin: var(--sp6) auto 0; border: 0; background: none; color: var(--ink-soft); font-size: var(--fs-s); text-decoration: underline; text-underline-offset: 3px; }
.rd-reader { background: var(--card); padding-left: var(--sp5); padding-right: var(--sp5); }
.rd-ch-h { text-align: center; padding: var(--sp4) 0 var(--sp5); }
.rd-ch-h small { font-family: var(--f-num); font-size: var(--fs-s); color: var(--pink-deep); letter-spacing: 2px; }
.rd-ch-h h1 { font-family: var(--f-cute); font-weight: 400; font-size: 22px; color: var(--accent-ink); margin-top: var(--sp1); overflow-wrap: anywhere; }
.rd-text { font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.rd-text p { text-indent: 2em; margin-bottom: var(--sp3); }
.rd-hl { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--pink) 45%, transparent) 55%); color: inherit; padding: 0 1px; cursor: pointer; }
.rd-hl.is-keke { background: none; text-decoration: underline wavy color-mix(in srgb, var(--accent-ink) 55%, transparent); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.rd-hl.has-reply::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--pink-deep); vertical-align: super; }
.rd-ch-end { display: flex; align-items: center; justify-content: center; gap: var(--sp2); flex-wrap: wrap; text-align: center; margin: var(--sp6) 0 var(--sp4);
  padding: var(--sp3) var(--sp4); border: var(--bw) dashed var(--line); border-radius: var(--r-m); font-size: var(--fs-s); color: var(--ink-soft); }
.rd-bar, .rd-selbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); background: var(--card);
  border-top: var(--bw) solid var(--line); padding: var(--sp2) var(--sp4) calc(var(--sab) + var(--sp2)); z-index: 2; }
.rd-bar[hidden], .rd-selbar[hidden] { display: none; }
.rd-bar span { font-family: var(--f-num); font-size: var(--fs-s); color: var(--ink-soft); }
.rd-bar .kk-btn:disabled { opacity: .35; }
.rd-selbar { justify-content: center; }
.rd-quote { border-left: 3px solid var(--pink); background: var(--pink-soft); border-radius: 0 var(--r-s) var(--r-s) 0; padding: var(--sp2) var(--sp3);
  font-size: var(--fs-m); line-height: 1.7; overflow-wrap: anywhere; max-height: 30vh; overflow-y: auto; }
.rd-thread { display: flex; flex-direction: column; gap: var(--sp2); }
.rd-thread[hidden] { display: none; }
.rd-t { font-size: var(--fs-m); line-height: 1.6; overflow-wrap: anywhere; }
.rd-t b { display: inline-block; margin-right: var(--sp2); font-weight: 500; color: var(--accent-ink); }
.rd-t.is-keke b { color: var(--pink-deep); }
.rd-t.is-pending { color: var(--ink-soft); display: flex; align-items: center; gap: var(--sp1); }
.rd-note-text { min-height: 18vh; }
.rd-note-del { border: 0; background: none; color: var(--danger); font-size: var(--fs-s); padding: 0; }
.rd-up-cover { width: 120px; margin: 0 auto; }
.rd-up-cover .rd-cover b { font-size: var(--fs-body); }
.rd-up-hint { font-size: var(--fs-s); color: var(--ink-soft); line-height: 1.5; }

/* 额度：保温开关 + 命中率圆环 + 24 轮柱子 */
.qt-body { display: flex; flex-direction: column; gap: var(--sp3); }
.qt-body > * { flex-shrink: 0; }
.qt-warm { display: flex; flex-direction: column; gap: var(--sp3); }
.qt-warm-top { display: flex; gap: var(--sp3); align-items: flex-start; }
.qt-warm-top > div { flex: 1; min-width: 0; }
.qt-warm-top b { font-size: var(--fs-body); }
.qt-warm-top p { margin-top: 2px; font-size: var(--fs-s); line-height: 1.6; color: var(--ink-soft); }
.qt-warm-top p b { font-size: inherit; color: var(--pink-deep); font-weight: 500; }
.qt-steps { font-size: var(--fs-m); line-height: 2.2; }
.qt-steps select { border: var(--bw) solid var(--line); border-radius: var(--r-s); padding: 2px var(--sp2); font-family: var(--f-num); font-size: var(--fs-m); color: var(--accent-ink); background: var(--card); }
.qt-state { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--ink-soft); }
.qt-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.qt-state.is-warming i { background: var(--ok); }
.qt-state.is-idle i { background: var(--pink); }
.qt-cost { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
.qt-hit { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp4); align-items: center; }
.qt-ring { width: 104px; aspect-ratio: 1; border-radius: 50%; position: relative; display: grid; place-items: center;
  background: conic-gradient(var(--pink) calc(var(--v) * 1%), var(--pink-soft) 0); }
.qt-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--card); }
.qt-ring > div { position: relative; text-align: center; line-height: 1.1; }
.qt-ring b { display: block; font-family: var(--f-num); font-weight: 500; font-size: 24px; color: var(--accent-ink); }
.qt-ring small { font-size: var(--fs-xs); color: var(--ink-soft); }
.qt-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp2); }
.qt-kv div { background: var(--pink-soft); border-radius: var(--r-s); padding: 6px 10px; min-width: 0; }
.qt-kv b { display: block; font-family: var(--f-num); font-weight: 500; font-size: var(--fs-l); color: var(--accent-ink); }
.qt-kv small { font-size: var(--fs-xs); color: var(--ink-soft); }
.qt-say { margin-top: var(--sp3); font-size: var(--fs-m); line-height: 1.6; }
.qt-say:empty { display: none; }
.qt-turns { display: flex; align-items: flex-end; gap: 3px; height: 80px; margin-top: var(--sp2); }
.qt-turns i { flex: 1; min-width: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--pink) 70%, var(--card)), var(--pink)); }
.qt-turns i.cold { background: var(--line); }
.qt-turns .kk-empty { width: 100%; }
.qt-legend { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 6px; }
.qt-help b { font-size: var(--fs-m); }
.qt-help p { margin-top: var(--sp1); font-size: var(--fs-s); line-height: 1.7; color: var(--ink-soft); }

/* 一起听：还没放歌时的空状态（小黑胶 + 几首我们听过的） */
.mu-idle { display: none; flex-direction: column; align-items: center; gap: var(--sp2); text-align: center; padding: var(--sp5) var(--sp4); margin: var(--sp5) auto auto; }
#music-results:empty ~ #music-player-panel[hidden] + .mu-idle { display: flex; }
.mu-vinyl { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--sp2);
  background: repeating-radial-gradient(circle, var(--accent-ink) 0 2px, color-mix(in srgb, var(--accent-ink) 85%, var(--card)) 2px 4px);
  box-shadow: 0 0 0 6px var(--card), 0 0 0 7.5px var(--line), var(--shadow-float); animation: muSpin 14s linear infinite; }
.mu-vinyl i { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, var(--card) 0 4px, var(--pink) 5px 100%); }
@keyframes muSpin { to { transform: rotate(360deg); } }
.mu-idle b { font-family: var(--f-cute); font-weight: 400; font-size: var(--fs-l); color: var(--accent-ink); }
.mu-idle small { font-size: var(--fs-s); color: var(--ink-soft); }
.mu-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp2); margin-top: var(--sp2); }

/* ---------- 贴纸 ---------- */
.kk-stk.is-optional:not(.has-img) { display: none; }
.kk-corner { position: absolute; right: var(--sp2); top: var(--sp2); width: 60px; height: 60px; }
.kk-dock-stk { position: absolute; right: 2px; top: -54px; width: 72px; height: 72px; background-color: var(--paper); z-index: 2; }
.kk-lock-stk { width: 84px; height: 84px; }
.kk-couple2 { position: absolute; left: var(--sp3); bottom: 0; width: 84px; height: 66px; pointer-events: none; }
.kk-date-stk { width: 76px; height: 64px; margin-top: var(--sp2); pointer-events: none; }
.kk-shelf-stk { display: inline-block; vertical-align: middle; width: 46px; height: 36px; margin-left: 6px; pointer-events: none; }
#inputbar > .kk-input-stk { position: absolute; right: 8px; top: -30px; width: 56px; height: 44px; z-index: 2; pointer-events: none; }
.kk-stk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp3) var(--sp2); }
.kk-stk-grid button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp1); font-size: var(--fs-xs); color: var(--ink-soft); }
.kk-stk-grid .kk-stk { width: 52px; height: 52px; }
.kk-poke { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  padding: calc(var(--sat) + var(--sp2)) var(--sp4) calc(var(--sab) + var(--sp4)); user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 20% 15%, #fff 0 2px, transparent 3px) 0 0 / 46px 46px, radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--pink) 35%, transparent) 0 2px, transparent 3px) 0 0 / 58px 58px, linear-gradient(180deg, #FFF7F9, var(--pink-soft)); }
.kk-poke[hidden] { display: none; }
.kk-poke .hd { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; }
.kk-poke .hd .x { border: 0; background: var(--card); box-shadow: var(--shadow-card); border-radius: 50%; width: 38px; height: 38px; font-size: 26px; line-height: 1; color: var(--accent-ink); }
.kk-poke .hd h3 { text-align: center; font-family: var(--f-cute); font-size: 20px; color: var(--accent-ink); font-weight: 400; }
.kk-poke .pill { padding: 6px 12px; border-radius: var(--r-pill); background: var(--card); border: var(--bw) solid var(--line); font-size: var(--fs-s); color: var(--ink-soft); }
.kk-poke .pill b { color: var(--pink-deep); font-family: var(--f-num); font-size: 16px; }
.kk-poke .meter { width: 100%; margin-top: var(--sp4); padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--card) 85%, transparent); border: var(--bw) solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-xs); color: var(--ink-soft); }
.kk-poke .bar { height: 8px; border-radius: 4px; background: var(--pink-soft); overflow: hidden; }
.kk-poke .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--pink), var(--pink-deep)); transition: width .18s ease; }
.kk-poke .lv { font-style: normal; color: var(--pink-deep); min-width: 4.5em; text-align: right; }
.kk-poke .stage { position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kk-poke .say { position: relative; max-width: 80%; padding: 10px 18px; border-radius: 20px; background: var(--card); border: var(--bw) solid var(--line); box-shadow: var(--shadow-card); font-family: var(--f-cute); font-size: 18px; color: var(--accent-ink); margin-bottom: 18px; }
.kk-poke .say::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: var(--card); border-right: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); transform: translateX(-50%) rotate(45deg); }
.kk-poke .say.pop { animation: kkSay .25s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes kkSay { from { transform: scale(.8); } to { transform: scale(1); } }
.kk-poke .ring { position: absolute; top: 50%; left: 50%; width: 78vw; max-width: 340px; aspect-ratio: 1; transform: translate(-50%, -40%); border-radius: 50%; background: radial-gradient(circle, #fff 0 45%, transparent 70%); border: 2px dashed color-mix(in srgb, var(--pink) 45%, transparent); pointer-events: none; animation: kkSpin 24s linear infinite; }
@keyframes kkSpin { to { transform: translate(-50%, -40%) rotate(360deg); } }
.kk-poke .crab { position: relative; width: 68vw; max-width: 300px; aspect-ratio: 1.25; border: 0; background: transparent center / contain no-repeat; touch-action: manipulation; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 8px 10px rgba(120, 60, 70, .15)); }
.kk-poke[data-lv="3"] .crab { animation: kkShake .3s linear infinite; }
@keyframes kkShake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.kk-poke .crab.hit { animation: kkPoke .22s ease-out; }
@keyframes kkPoke { 0% { transform: scale(1); } 35% { transform: scale(.86, .78) rotate(-4deg); } 70% { transform: scale(1.06, 1.02) rotate(2deg); } 100% { transform: scale(1); } }
.kk-poke .combo { height: 34px; margin-top: 10px; font-family: var(--f-num); font-weight: 700; font-size: 28px; color: var(--pink-deep); }
.kk-poke .combo.pop { animation: kkSay .2s ease-out; }
.kk-poke .rip { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--pink); pointer-events: none; animation: kkRip .5s ease-out forwards; }
@keyframes kkRip { to { transform: scale(5); opacity: 0; } }
.kk-poke .fx { position: absolute; font-style: normal; font-size: 24px; pointer-events: none; transform: translate(-50%, -50%); animation: kkPokeFx .75s ease-out forwards; }
@keyframes kkPokeFx { to { transform: translate(calc(-50% + var(--dx)), -260%) rotate(var(--rot)) scale(1.3); opacity: 0; } }
.kk-poke .tip { font-size: var(--fs-xs); color: var(--ink-soft); padding-top: var(--sp2); }
.kk-stk-lib { position: fixed; inset: 0; z-index: 9000; background: rgba(40, 30, 40, .35); display: flex; align-items: flex-end; }
.kk-stk-lib[hidden] { display: none; }
.kk-stk-lib .sheet { width: 100%; max-height: 72vh; display: flex; flex-direction: column; background: var(--card); border-radius: 20px 20px 0 0; padding: var(--sp3) var(--sp3) calc(var(--sp3) + var(--sab)); }
.kk-stk-lib .hd { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--sp1) var(--sp2); }
.kk-stk-lib .hd .x { border: 0; background: none; font-size: 22px; color: var(--ink-soft); width: 36px; height: 36px; }
.kk-stk-lib .lib { overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp2); }
.kk-stk-lib .lib button { aspect-ratio: 1; border: var(--bw) solid var(--line); border-radius: 12px; background: var(--paper) center / 82% no-repeat; }
.kk-stk-lib .ft { display: flex; gap: var(--sp2); padding-top: var(--sp3); }
.kk-stk-lib .ft button { flex: 1; height: 40px; border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--accent-ink); font-size: var(--fs-m); }

/* ---------- 13. 杂项 ---------- */
.stub { margin: var(--sp6) var(--sp5); padding: 28px; text-align: center; background: var(--card); border-radius: var(--r-m); color: var(--ink-soft); font-size: var(--fs-m); line-height: 2; }
@media (max-width: 340px) {
  #topbar { padding-left: var(--sp2); padding-right: var(--sp2); gap: var(--sp1); }
  #topbar .tb-action { width: 40px; height: 40px; }
  #inputbar button { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 每轮真实缓存和费用，位于回复外，不进入正文。 */
.usage-stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(78%, 520px); }
.usage-stack > .bubble { max-width: 100%; }
.turn-usage { display: block; margin: 5px 2px 0; font-size: 11px; line-height: 1.5; color: var(--ink-soft); font-family: var(--f-num); }
.turn-usage.is-low { color: var(--usage-low); }
.qt-today .qt-kv { width: 100%; }

/* 气泡里的语音链接 → 小语音条 */
.inline-voice { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; vertical-align: middle; }
.inline-voice .vplay { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.inline-voice .vbars { display: inline-flex; align-items: center; gap: 2px; }
.inline-voice .vbars i { display: block; width: 3px; border-radius: 2px; background: var(--pink-deep); opacity: .7; }
.inline-voice .vdur { font-size: var(--fs-xs); color: var(--ink-soft); }

/* iPhone 聚焦字号 <16px 的输入框会自动放大页面：触屏上输入框统一 16px；顺手关掉双击放大（2026-10-19 杉杉：点朋友圈会自动放大） */
html { touch-action: manipulation; }
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }

/* 首页额度小条 2026-10-24 */
.kk-quota .q-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.kk-quota .q-lab { flex: none; width: 44px; font-size: 13px; color: var(--ink); }
.kk-quota .q-bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.kk-quota .q-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pink); transition: width .4s ease; }
.kk-quota .q-bar i.hi { background: var(--pink-deep); }
.kk-quota .q-txt { flex: none; width: 150px; text-align: right; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kk-quota .q-note { margin-top: 8px; font-size: 11px; color: var(--ink-soft); }