/* ============================================================
   css/panels/panels-nest-home.css — 小窝游戏化首页 / 全屏子面板 / 通话记录
   ============================================================ */

/* ===== 首页容器 ===== */
#tab-nest { position: relative; background: var(--bg-primary, #F8F4EF); }
#nest-home {
    position: absolute; inset: 0;
    overflow: hidden;
}

/* 背景层 */
.nh-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.nh-bg-default {
    background:
        radial-gradient(ellipse 80% 55% at 50% -5%, rgba(201, 168, 168, 0.35), transparent 60%),
        radial-gradient(ellipse 70% 50% at 90% 105%, rgba(184, 168, 196, 0.28), transparent 55%),
        radial-gradient(ellipse 60% 45% at 8% 100%, rgba(168, 184, 160, 0.22), transparent 55%),
        linear-gradient(175deg, #FCFAF6 0%, #F5EEE7 45%, #EFE4DC 100%);
}
/* 暗角遮罩：保证图标可读性 */
.nh-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(30, 28, 26, 0.16), transparent 22%, transparent 78%, rgba(30, 28, 26, 0.16)),
        linear-gradient(180deg, rgba(30, 28, 26, 0.12), transparent 24%);
}

/* 装饰标题 */
.nh-title-area {
    position: absolute; top: 26px; left: 0; right: 0;
    text-align: center; pointer-events: none;
}
.nh-title-en {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 15px; letter-spacing: 1.5px;
    color: #FCFAF6; opacity: 0.9;
    text-shadow: 0 1px 8px rgba(30, 28, 26, 0.35);
}
.nh-title-zh {
    font-size: 11px; letter-spacing: 6px; margin-top: 4px; padding-left: 6px;
    color: rgba(252, 250, 246, 0.75);
    text-shadow: 0 1px 6px rgba(30, 28, 26, 0.3);
    /* ★ 名字可双击改：只有文字本身接点击（父层是 pointer-events:none，不能让整条都吃点击） */
    display: inline-block; max-width: 62vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: auto; cursor: pointer;
    touch-action: manipulation;   /* 双击不许缩放大整页 */
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.nh-title-zh:active { color: #FCFAF6; }
/* 名字长了收紧字距，别把两边挤到图标上 */
.nh-title-zh.nh-title-long { letter-spacing: 3px; padding-left: 3px; font-size: 12px; }
.nh-title-zh.nh-title-xlong { letter-spacing: 1px; padding-left: 0; font-size: 11.5px; }

/* ===== 小窝名字弹层（双击顶部名字改）=====
   位置：屏幕中间偏上的居中卡片（宝宝要的「弹窗」），底部预留键盘真实高度 `--nh-kbd`
   （由 JS 从 navigator.virtualKeyboard.boundingRect 读，安卓 overlays-content 下
   只有这个 API 报得准，visualViewport 是**不会**变矮的）→ 键盘弹起时卡片自动在
   「键盘上方剩下的那块地方」里居中，输入框和两个按钮永远在键盘上面。 */
.nh-namesheet {
    position: fixed; inset: 0; z-index: var(--z-sheet, 99992);
    max-width: 480px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 20px calc(var(--nh-kbd, 0px) + 24px);
    box-sizing: border-box;
    /* ★ 2026-11-02：这一层**永远不用毛玻璃**（宝宝：「开关键盘时磨砂不磨砂在切换，丑死了」）。
       只用一层均匀的暗色盖住后面：颜色不随键盘变，就永远不会有「切换」。 */
    background: rgba(28, 24, 20, 0.52);
    opacity: 0;
    /* 键盘高度一变，padding-bottom 平滑过渡 → 卡片是被「托」上去的，不是瞬移 */
    transition: opacity 0.22s ease, padding-bottom 0.26s cubic-bezier(.22, .61, .36, 1);
    /* 连点不触发系统「双击放大整页」（这一层里全是点按，没有可缩放的东西） */
    touch-action: manipulation;
}
.nh-namesheet.open { opacity: 1; }
.nh-namesheet-panel {
    width: 100%; max-width: 440px;
    max-height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface-solid, #FCFAF6);
    border-radius: 24px;
    border: 1px solid var(--border, rgba(196, 168, 106, 0.2));
    box-shadow: 0 12px 40px rgba(30, 28, 26, 0.22);
    padding: 14px 18px 12px;
    box-sizing: border-box;
    transform: translateY(14px) scale(0.98);
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}
.nh-namesheet.open .nh-namesheet-panel {
    /* ★ 键盘在场时整体往下放一点（宝宝 2026-11-02：「我是说这个框位置太高了」）。
       底座已经把键盘高度整段让出来了，卡片被顶到「键盘上方那块地方」的正中间，
       看着偏上；这里按键盘高度的 30% 往回收一点，落到接近屏幕正中、又离键盘 30px 以上。
       0.3 < 0.5，所以无论键盘多高都不会压到键盘。 */
    transform: translateY(calc(var(--nh-kbd, 0px) * 0.3)) scale(1);
}
.nh-namesheet-head {
    text-align: center; font-family: 'Playfair Display', 'Songti SC', serif;
    font-size: 15px; letter-spacing: 0.08em; color: var(--text-primary, #2A2420);
}
.nh-namesheet-sub {
    text-align: center; font-size: 11px; letter-spacing: 0.04em;
    color: var(--text-muted, #BFB8AE); margin-top: 4px;
}
.nh-namesheet-field { position: relative; margin: 9px 0 2px; }
.nh-namesheet-input {
    width: 100%; box-sizing: border-box;
    padding: 9px 46px;            /* 左右对称：字才是真正居中（右侧留白给计数） */
    font-family: 'Playfair Display', 'Songti SC', serif;
    font-size: 16px;               /* ★ 16px：iOS 输入框小于 16 会自己放大整页 */
    letter-spacing: 0.06em; text-align: center;
    color: var(--text-primary, #2A2420);
    background: var(--bg-primary, #F8F4EF);
    border: 1px solid var(--border, rgba(196, 168, 106, 0.28));
    border-radius: 16px; outline: none;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nh-namesheet-input::placeholder { color: var(--text-muted, #CFC8BE); }
.nh-namesheet-input:focus {
    border-color: var(--rose, #C9A8A8);
    background: var(--surface-solid, #FCFAF6);
    box-shadow: 0 0 0 3px rgba(201, 168, 168, 0.16);
}
.nh-namesheet-count {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--text-muted, #BFB8AE); letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums; pointer-events: none;
}
/* 超上限：只变红提醒，一个字都不抹掉（她打拼音时最容易被截） */
.nh-namesheet-count.over { color: #C0564E; }
.nh-namesheet-count.over b { color: #C0564E; }
.nh-namesheet-btns { display: flex; gap: 10px; margin-top: 8px; }
.nh-namesheet-btns button {
    flex: 1; padding: 10px 0; border-radius: 14px; border: 1px solid transparent;
    font-family: inherit; font-size: 14px; letter-spacing: 0.06em; cursor: pointer;
    transition: transform 0.16s ease, opacity 0.2s ease, background 0.2s ease;
}
.nh-namesheet-btns button:active { transform: scale(0.97); }
.nh-namesheet-cancel {
    background: var(--bg-primary, #F5EFE7); color: var(--text-secondary, #8A8278);
    border-color: var(--border, rgba(196, 168, 106, 0.18));
}
.nh-namesheet-save {
    background: var(--rose, #C9A8A8); color: #fff;
    box-shadow: 0 3px 14px rgba(201, 168, 168, 0.32);
}
.nh-namesheet-save.is-empty { opacity: 0.5; }
/* 超字数：按钮暗下去、点了会说「删掉几个再存」，不是灰到点不动 */
.nh-namesheet-save.is-over {
    background: #CBB6B4; box-shadow: none; opacity: 0.6;
}
/* 诊断行（主账号自动出现 / 网址带 ?kbdbg 也出现，平时 hidden；截图给技术看用）
   只印一行，所以字号压到 9px 让它能在一行里尽量放全 */
.nh-namesheet-dbg {
    margin-top: 10px; padding: 8px 10px; border-radius: 10px;
    background: rgba(196, 168, 106, 0.1);
    font: 9px/1.5 ui-monospace, Menlo, monospace;
    color: var(--text-secondary, #8A8278); text-align: left;
    white-space: pre-wrap; word-break: break-all; max-height: 30vh; overflow: hidden;
}
/* ★★ 弹层开着的时候，后面那一层**什么都不许动**（2026-11-02 真机实锤）：
   诊断行量的真机数据是「键盘一出来，`#tab-nest` / `#nest-home` 的高度从 735 变成 679」
   （少了 56px，其它层宽高都不变、`visualViewport.scale` 一直 1.00）——而 `.nh-bg` 是
   `background-size: cover`，框一变它就得重新算铺满倍率，看起来就是「背景被放大 / 往下挪」。
   所以弹层开着期间：这一层的高度由 JS 按「打开那一刻量到的真实高度」钉成固定像素（见
   `openNestTitleSheet` 里的 `nhFreezeNestBox`），键盘怎么动后面都不再重排。
   ★ 这里**绝不许动 `.nh-bg` 的 transform**：主题自带 `scale(1.08)` 摆动，一旦在这里把它
   改成 none，收起时会带着 0.45s 过渡动画「缩回去」——宝宝看到的就是「关框时背景下降放大
   然后再恢复」。只钉尺寸，不动变换，就没有任何东西需要动画回去。 */
#tab-nest.nh-sheet-open { overflow: hidden; }
/* 窄屏（<370px）：内边距收紧，别把输入框挤窄 */
@media (max-width: 369px) {
    .nh-namesheet { padding-left: 14px; padding-right: 14px; }
    .nh-namesheet-panel { padding-left: 16px; padding-right: 16px; }
    .nh-namesheet-head { font-size: 16px; }
}
/* iOS standalone（加到主屏）：fixed 铺满层用 100vh 兜住地址栏高度变化（长期规则 #35） */
@media (display-mode: standalone) and (max-width: 767px) {
    .nh-namesheet { bottom: auto; height: 100vh; }
}

/* ===== 边缘浮动图标 ===== */
.nh-icon-col {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 26px;
    z-index: 2;
}
.nh-col-left { left: 14px; }
.nh-col-right { right: 14px; }
.nh-icon {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nh-icon:active { transform: scale(0.94); }
/* 高级功能未解锁的小窝图标（日程 / 外文）：只做「视觉变灰」，
   点击仍然照常弹出「体验已结束 / 暂未开放」（Membership 捕获层管那件事）。
   ⚠ 这里绝不能用 .premium-disabled：它带 pointer-events:none，
   会把整格变成点不动又没提示的死格子（文案就再也弹不出来了）。 */
.nh-icon.nh-premium-locked .nh-icon-circle,
.nh-icon.nh-premium-locked .nh-icon-label { opacity: 0.55; filter: saturate(0.6); }
.nh-icon.nh-premium-locked .nh-icon-circle { box-shadow: none; }
.nh-icon-circle {
    position: relative;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 252, 249, 0.62);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 252, 249, 0.75);
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.08), 0 4px 14px rgba(30, 28, 26, 0.14);
    color: #8A6E6E;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nh-icon:hover .nh-icon-circle {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(30, 28, 26, 0.1), 0 8px 22px rgba(201, 168, 168, 0.35);
}
.nh-icon-circle img { width: 30px; height: 30px; object-fit: contain; }
.nh-icon-circle svg { width: 24px; height: 24px; }
.nh-icon-label {
    font-size: 11px; letter-spacing: 1px;
    color: #FCFAF6;
    text-shadow: 0 1px 5px rgba(30, 28, 26, 0.45);
}
/* 信箱未读角标 */
.nh-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px;
    /* ★ 2026-10 甲方定：角标跟主题色走（--rose）；line-height = height → 数字居中；
       数字用暖褐（与 #pins-badge 同口径，白字在浅色 --rose 上读不清） */
    background: var(--rose, #C9A8A8); color: #3A322B;
    font-size: 10px; line-height: 17px; text-align: center;
    box-shadow: 0 1px 4px rgba(30, 28, 26, 0.25);
}

/* 换背景按钮（右下角低调） */
.nh-bg-btn {
    position: absolute; right: 16px; bottom: 18px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 252, 249, 0.4);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 252, 249, 0.5);
    color: rgba(252, 250, 246, 0.9); cursor: pointer;
}
.nh-bg-btn:active { transform: scale(0.94); }

/* 留声机按钮（与换背景按钮左右并排） */
.nh-bgm-btn {
    position: absolute; right: 58px; bottom: 18px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 252, 249, 0.4);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 252, 249, 0.5);
    color: rgba(252, 250, 246, 0.9); cursor: pointer;
}
.nh-bgm-btn:active { transform: scale(0.94); }

/* ===== 换背景选择框（2028：先给「恢复默认 / 手动上传」，再进选图） =====
   全屏层铁律：fixed 限宽 + 水平居中（电脑端也只占手机屏），底部让出 iOS 安全区。 */
.nh-bgsheet {
    position: fixed; inset: 0; z-index: var(--z-sheet, 99992);
    max-width: 480px; margin: 0 auto;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(30, 26, 22, 0.42);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.22s ease;
}
.nh-bgsheet.open { opacity: 1; }
.nh-bgsheet-panel {
    width: 100%; max-width: 480px;
    background: var(--surface-solid, #FCFAF6);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border, rgba(196, 168, 106, 0.2));
    box-shadow: 0 -6px 28px rgba(30, 28, 26, 0.16);
    padding: 8px 0 calc(10px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    transform: translateY(26px);
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}
.nh-bgsheet.open .nh-bgsheet-panel { transform: translateY(0); }
.nh-bgsheet-grip {
    width: 34px; height: 4px; border-radius: 2px; margin: 2px auto 10px;
    background: var(--border, rgba(196, 168, 106, 0.35));
}
.nh-bgsheet-title {
    text-align: center; font-size: 12px; letter-spacing: 0.16em;
    color: var(--text-muted, #BFB8AE); padding-bottom: 8px;
}
.nh-bgsheet-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 20px; cursor: pointer;
    transition: background 0.15s ease;
}
.nh-bgsheet-row:active { background: var(--accent-light, rgba(201, 168, 168, 0.12)); }
.nh-bgsheet-ic {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light, rgba(201, 168, 168, 0.14));
    color: var(--rose, #C9A8A8);
}
.nh-bgsheet-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nh-bgsheet-main { font-size: 15px; color: var(--text-primary, #1E1C1A); letter-spacing: 0.02em; }
.nh-bgsheet-sub { font-size: 11px; color: var(--text-muted, #BFB8AE); }
.nh-bgsheet-cancel {
    justify-content: center; margin-top: 4px;
    border-top: 1px solid var(--border, rgba(196, 168, 106, 0.14));
}
.nh-bgsheet-cancel .nh-bgsheet-main { color: var(--text-secondary, #8A8278); }
/* 窄屏（<370px）压缩内边距，避免文字挤成两行 */
@media (max-width: 369px) {
    .nh-bgsheet-row { padding: 12px 14px; gap: 10px; }
    .nh-bgsheet-main { font-size: 14px; }
}
/* iOS standalone（加到主屏）：fixed 铺满层用 100vh 兜住地址栏高度变化（长期规则 #35） */
@media (display-mode: standalone) and (max-width: 767px) {
    .nh-bgsheet { bottom: auto; height: 100vh; }
}

/* ===== 全屏子面板（从右滑入，匹配 chat view 动画风格） ===== */
.nest-sub-panel.fullscreen {
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    max-width: 480px; margin: 0 auto;
    z-index: 1500;
    background: var(--bg-primary, #F8F4EF);
    display: block;
    overflow-y: auto; overflow-x: hidden;
    opacity: 1;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    animation: none;  /* 杀死 .active 的 fadeIn */
}
.nest-sub-panel.fullscreen.show {
    transform: translateX(0);
    pointer-events: auto;
}
.nest-sub-panel.fullscreen.sliding-out {
    transform: translateX(100%);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .nest-sub-panel.fullscreen { transition: none; }
}
/* 返回条 — 全主题跟随 #header 配色模式（收矮：padding/大小收紧，紧贴屏幕上方） */
.nest-sub-back {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 8px;
    padding: calc(5px + env(safe-area-inset-top, 0px)) 14px 5px;
    background: var(--surface);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.nsb-btn {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-primary);
}
.nsb-btn:active { background: var(--accent-light, rgba(201, 168, 168, 0.18)); }
.nsb-title {
    font-size: 14px; font-weight: 600; letter-spacing: 1px;
    color: var(--text-primary);
}

/* ===== 通话记录 ===== */
#nest-sub-calls #call-logs-list, #nest-sub-calls #call-log-detail { padding: 14px 16px 40px; }
.call-logs-loading, .call-logs-empty, .cl-no-transcript {
    text-align: center; color: var(--text-muted, #BFB8AE);
    font-size: 13px; padding: 28px 0;
}
.cl-empty-en {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 18px; color: var(--gold, #C4A86A); opacity: 0.6; margin-bottom: 8px;
}
.cl-empty-hint { font-size: 11px; margin-top: 6px; opacity: 0.8; }
/* 按天分组标签 */
.cl-day-label {
    font-family: 'Playfair Display', var(--font-decorative), serif; font-style: italic;
    font-size: 12px; color: var(--gold, #C4A86A);
    margin: 16px 2px 8px; letter-spacing: 1px;
}
.cl-day-label:first-child { margin-top: 2px; }
.call-log-item {
    padding: 12px 14px; margin-bottom: 8px;
    border-radius: 12px; cursor: pointer;
    background: var(--surface, rgba(255, 252, 249, 0.82));
    border: 1px solid rgba(196, 168, 106, 0.18);
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04), 0 2px 8px rgba(30, 28, 26, 0.05);
    transition: transform 0.15s ease;
}
.call-log-item:active { transform: scale(0.985); }
.cl-row { display: flex; align-items: center; gap: 8px; }
.cl-dir { color: var(--sage, #A8B8A0); display: flex; }
.cl-missed .cl-dir, .cl-missed .cl-dur { color: #C97A7A; }
.cl-dur { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #1E1C1A); }
.cl-badge {
    font-size: 10px; padding: 1px 7px; border-radius: 8px;
    background: rgba(184, 168, 196, 0.16); color: #8d7d9c;
}
.cl-badge-rec {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(201, 122, 122, 0.12); color: #b06a6a;
}
.cl-badge-rec i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cl-badge-date {
    background: rgba(196, 168, 106, 0.15); color: #a88a56;
}
/* 照片墙 */
.cl-photo-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 14px; }
.cl-photo-cell {
    aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: rgba(201, 168, 168, 0.1);
}
.cl-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-photo-cell:active { opacity: 0.8; }
/* 场景轨迹时间线 */
.cl-scene-line { padding-left: 8px; margin-bottom: 14px; }
.cl-scene-item { display: flex; gap: 10px; padding: 6px 0; }
.cl-scene-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
    background: var(--gold, #C4A86A);
}
.cl-scene-body { flex: 1; min-width: 0; }
.cl-scene-place { font-size: 13px; color: var(--text-primary); }
.cl-scene-time { font-size: 10.5px; color: var(--text-muted); margin-left: 8px; }
.cl-scene-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* 通话记录右键菜单 */
.call-log-ctxmenu {
    position: fixed; z-index: 1700;
    padding: 6px 0; min-width: 140px;
    background: rgba(255, 252, 249, 0.94);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(196, 168, 106, 0.25);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(30,28,26,0.1), 0 12px 34px rgba(30,28,26,0.18);
    animation: popIn 0.14s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.call-log-ctxmenu button {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 10px 18px;
    border: none; background: transparent;
    font-size: 13px; font-family: inherit; cursor: pointer;
    color: var(--text-primary, #1E1C1A);
    letter-spacing: 0.3px;
}
.call-log-ctxmenu button:active { background: rgba(201, 168, 168, 0.15); color: #C97A7A; }
.cl-badge-rec i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cl-date { margin-left: auto; font-size: 11px; color: var(--text-muted, #BFB8AE); font-variant-numeric: tabular-nums; }
.cl-summary {
    margin-top: 7px; font-size: 12.5px; line-height: 1.55;
    color: var(--text-secondary, #8A8278);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 详情视图 ---- */
.cl-detail-back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--text-secondary, #8A8278);
    cursor: pointer; margin-bottom: 12px; padding: 4px 8px 4px 2px;
}
.cl-detail-back:active { color: var(--rose, #C9A8A8); }
.cl-detail-card {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; margin-bottom: 12px;
    border-radius: 14px;
    background: var(--surface, rgba(255, 252, 249, 0.82));
    border: 1px solid rgba(196, 168, 106, 0.2);
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04), 0 3px 12px rgba(30, 28, 26, 0.06);
}
.cl-detail-avatar {
    width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(201,168,168,0.35), rgba(184,168,196,0.3));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 20px; color: var(--text-secondary, #8A8278);
}
.cl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-detail-name { font-size: 16px; font-weight: 600; color: var(--text-primary, #1E1C1A); letter-spacing: 0.5px; }
.cl-detail-meta { font-size: 11.5px; color: var(--text-muted, #BFB8AE); margin-top: 3px; }
.cl-detail-summary {
    padding: 13px 15px; margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(201, 168, 168, 0.08);
    border: 1px dashed rgba(201, 168, 168, 0.35);
}
.cl-summary-title {
    font-size: 14px; font-weight: 600; color: var(--text-primary, #1E1C1A);
    margin-bottom: 5px; letter-spacing: 0.3px;
}
.cl-summary-body { font-size: 12.5px; line-height: 1.7; color: var(--text-secondary, #8A8278); }
.cl-section-label {
    font-size: 11.5px; color: var(--text-muted, #BFB8AE);
    margin: 14px 2px 8px; letter-spacing: 1px;
}
/* 录音条 */
.cl-rec-item {
    padding: 10px 12px; margin-bottom: 8px;
    border-radius: 12px;
    background: var(--surface, rgba(255, 252, 249, 0.82));
    border: 1px solid rgba(196, 168, 106, 0.18);
}
.cl-rec-row { display: flex; align-items: center; gap: 10px; }
.cl-rec-play {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    border: 1.2px solid var(--rose, #C9A8A8); background: transparent;
    color: var(--rose, #b08585); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cl-rec-play .vp-pause { display: none; }
.cl-rec-play.cl-rec-playing .vp-play { display: none; }
.cl-rec-play.cl-rec-playing .vp-pause { display: block; }
.cl-rec-bar {
    flex: 1; height: 4px; border-radius: 2px;
    background: rgba(201, 168, 168, 0.2); cursor: pointer; position: relative;
}
.cl-rec-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    border-radius: 2px; background: var(--rose, #C9A8A8);
}
.cl-rec-dur { font-size: 11px; color: var(--text-muted, #BFB8AE); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-rec-text-btn {
    padding: 3px 10px; border-radius: 8px; flex-shrink: 0;
    border: 1px solid var(--border, rgba(0,0,0,0.1)); background: transparent;
    font-size: 11px; color: var(--text-secondary, #8A8278);
    cursor: pointer; font-family: inherit;
}
.cl-rec-text-btn:active { background: rgba(201, 168, 168, 0.1); }
.cl-rec-trans {
    margin-top: 9px; padding-top: 9px;
    border-top: 1px dashed rgba(196, 168, 106, 0.3);
    max-height: 180px; overflow-y: auto;
}
/* 逐句记录 */
.cl-detail-lines {
    padding: 4px 2px 10px;
    max-height: none;
}
.cl-line { font-size: 12.5px; line-height: 1.8; color: var(--text-secondary, #8A8278); }
.cl-line b { font-weight: 600; color: var(--text-primary, #1E1C1A); }
.cl-me b { color: var(--sage, #7d9070); }
.cl-ta b { color: var(--rose, #b08585); }
.cl-foreign { font-style: italic; opacity: 0.85; }

/* 窄屏适配 */
@media (max-width: 375px) {
    .nh-icon-circle { width: 46px; height: 46px; }
    .nh-icon-circle img { width: 26px; height: 26px; }
    .nh-icon-col { gap: 20px; }
    .nh-col-left { left: 10px; }
    .nh-col-right { right: 10px; }
}

/* ===== 子面板骨架屏（轻量 shimmer，匹配真实排版） ===== */
.nest-sk { padding: 16px 18px; }
.nest-sk-bar {
    height: 14px; border-radius: 7px; margin-bottom: 12px;
    background: linear-gradient(90deg, #e8e4df 25%, #f2efe9 50%, #e8e4df 75%);
    background-size: 200% 100%;
    animation: nestSkShimmer 1.5s ease-in-out infinite;
}
.nest-sk-bar.w60 { width: 60%; }  .nest-sk-bar.w80 { width: 80%; }
.nest-sk-bar.w40 { width: 40%; }  .nest-sk-bar.w100 { width: 100%; }
.nest-sk-bar.w50 { width: 50%; }  .nest-sk-bar.w30 { width: 30%; }
.nest-sk-bar.h24 { height: 24px; border-radius: 12px; }
.nest-sk-bar.h8  { height: 8px; border-radius: 4px; }
.nest-sk-bar.h32 { height: 32px; border-radius: 16px; }
.nest-sk-bar.h48 { height: 48px; border-radius: 14px; }
.nest-sk-card { background: var(--surface,#fff); border-radius: 16px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border,#e8e4df); }

/* — 家规：居中 hero + 卡片 — */
.nest-sk-rules { padding: 24px 16px 16px; }
.nest-sk-rules-hero { text-align: center; padding-bottom: 20px; }
.nest-sk-rules-hero .nest-sk-bar { margin-left: auto; margin-right: auto; }

/* — 日历 7 列网格 — */
.nest-sk-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; padding: 16px 18px; }
.nest-sk-cal .nest-sk-bar { height: 32px; border-radius: 8px; margin-bottom: 0; }

/* — 3 列方形（衣橱/书架封面） — */
.nest-sk-sq-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px 18px; }
.nest-sk-sq { aspect-ratio: 1; border-radius: 12px; }
.nest-sk-sq-grid .nest-sk-sq { margin-bottom: 0; }

/* — 横排行（歌曲、通话） — */
.nest-sk-row { display: flex; gap: 12px; align-items: center; padding: 10px 18px; }
.nest-sk-row .nest-sk-sq-sm { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
.nest-sk-row .nest-sk-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* — 银行卡形状 — */
.nest-sk-bank { height: 130px; border-radius: 18px; margin: 8px 18px 14px; }

/* — 封面卡（跑团/书架竖版封面） — */
.nest-sk-cover-row { display: flex; gap: 14px; padding: 12px 18px; }
.nest-sk-cover { width: 70px; height: 100px; border-radius: 10px; flex-shrink: 0; }
.nest-sk-cover-info { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }

/* — 圆形（健康周期环） — */
.nest-sk-ring { width: 72px; height: 72px; border-radius: 50%; margin: 8px auto 16px; }

/* — 信封形状 — */
.nest-sk-env { display: flex; gap: 12px; padding: 12px 18px; align-items: flex-start; }
.nest-sk-env .nest-sk-stamp { width: 36px; height: 36px; border-radius: 4px; flex-shrink: 0; }
.nest-sk-env .nest-sk-env-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }

@keyframes nestSkShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nest-sk-bar, .nest-sk-sq, .nest-sk-cover, .nest-sk-sq-sm,
    .nest-sk-stamp, .nest-sk-bank, .nest-sk-ring { animation: none; }
}