/* ============================================================
   css/panels/panels-calls.css — 小窝 · 通话记录（通话手抄本）
   ------------------------------------------------------------
   物件：一本装订的手抄本账册，通一次电话记一行。
     封面（拱花 + 烫金标题 + 卷首语 + 索引格）
     → 分册（月份双线页眉）→ 每天一行小字日期 → 账册栏格（左栏右对齐 + 极淡横线）
     → 卷末「至此」。
   内页（点开一通电话）= 一张独立的请帖式册页，自带返回，独立一层。
   详见 docs/design/KSTAR-视觉语言手册.md 与 docs/design/KSTAR-CALLS-CODEX-2026-10.html
   ============================================================ */

/* 聊天里就地掀开的那页也在这套纸面变量下（#cld-mask 不在 #nest-sub-calls 里面，
   不挂上来整页就没有 --cs-* → 文字/线条/金饰全掉色） */
#nest-sub-calls, #cld-mask {
    /* 纸面跟主题底色走（主题切换会改 --bg-chat / --bg-primary） */
    --cs-paper: var(--bg-chat, #FDF7F2);
    --cs-paper2: var(--bg-primary, #FBF1E9);
    --cs-ink: #3B2C28;
    --cs-ink2: #5C4741;
    --cs-ink3: #7E6559;
    /* —— 金色：只留给"字"（烫金标题、英文小字、时长数字、卷末「至此」），不跟主题变 —— */
    --cs-gold: #B08F55;
    --cs-gold-d: #8A6526;
    --cs-title: #A8813F;
    --cs-title-hi: #F4E4C4;
    --cs-title-sh: rgba(150, 110, 55, .12);
    /* —— 线条 / 圆点 / 波形 / 播放键 / 进度条 / 绢带：一律跟主题强调色 ——
       theme.js 把 --rose / --rose-dark / --rose-light 映射成她当前所选的那套主题色 */
    --cs-accent: var(--rose, #C9A8A8);
    --cs-accent-d: var(--rose-dark, #A88080);
    --cs-wash: var(--rose-light, rgba(201, 168, 168, .12));
    --cs-hair: var(--rose, #C9A8A8);
    --cs-hair-x: var(--rose-light, rgba(201, 168, 168, .12));
    --cs-menu: var(--surface-solid, #FFFDFA);
    --cs-menu-sh: rgba(90, 62, 40, .18);
    --cs-glow: var(--rose-light, rgba(201, 168, 168, .12));
    --cs-e: cubic-bezier(.16, 1, .3, 1);
    /* 中文衬线一律以项目自带的离线宋体打头（Noto Serif SC 随包分发，不联网）；
       绝不能写成 Georgia / Songti SC 打头——那两个在安卓上都没有中文字形，
       会掉进系统无衬线，整页立刻变粗黑的"后台列表" */
    --cs-serif-cn: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', Georgia, serif;
    --cs-hand: 'Long Cang', 'Kaiti SC', KaiTi, 'STKaiti', serif;
}
/* 纸面底色只给侧栏本体；浮层自己控制背景（半透明遮罩 + 纸面浮板） */
#nest-sub-calls { background: var(--cs-paper); }

/* 深色主题：纸面/线条/淡底/菜单都已挂在主题变量上，这里只补墨色与金字的明度
   （暗底上原来那档金太暗，看不清） */
[data-theme-mode="dark"] #nest-sub-calls, [data-theme-mode="dark"] #cld-mask {
    --cs-ink: #E8E0D8;
    --cs-ink2: #C6BDB3;
    --cs-ink3: #9A9088;
    --cs-gold: #C9A96E;
    --cs-gold-d: #E0C48C;
    --cs-title: #E0C48C;
    --cs-title-hi: rgba(0, 0, 0, .5);
    --cs-title-sh: rgba(0, 0, 0, .34);
    --cs-menu-sh: rgba(0, 0, 0, .46);
}

/* 覆盖通用全屏壳：本页自己做滚动容器（内页要铺在它上面） */
#nest-sub-calls.nest-sub-panel.fullscreen {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cs-paper);
    color: var(--cs-ink);
}

/* 纸纹：一次性生成，静态，不挂在滚动容器上做动态混合 */
#nest-sub-calls::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 深色底上 multiply 会越压越糊，换成 screen 提一点点颗粒 */
[data-theme-mode="dark"] #nest-sub-calls::after {
    opacity: .045;
    mix-blend-mode: screen;
}

/* ---- 返回条：换成纸面烫金字，不用通用灰条 ---- */
#nest-sub-calls .nest-sub-back {
    position: relative;
    z-index: 12;
    background: var(--cs-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--cs-hair-x);
    padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 6px;
}
#nest-sub-calls .nsb-btn { color: var(--cs-accent-d); width: 44px; height: 44px; margin-left: -10px; }
#nest-sub-calls .nsb-btn:active { background: var(--cs-wash); }
#nest-sub-calls .nsb-title {
    font-family: var(--cs-serif-cn);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--cs-accent-d);
}

/* ===== 册页滚动区 ===== */
.cls-book {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 24px calc(46px + env(safe-area-inset-bottom, 0px));
}

/* ===== 封面：一页书名页（双线小框 + 绢带书签） ===== */
.cls-cover { position: relative; padding: 16px 0 0; text-align: center; }

/* 双线小框：外粗内细，光从框顶落下来一点暖 */
.cls-frame {
    position: relative;
    padding: 24px 16px 20px;
    border: 1px solid var(--cs-hair);
    background: radial-gradient(128% 76% at 50% 0%, var(--cs-glow), rgba(255, 255, 255, 0) 66%);
}
.cls-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--cs-hair-x);
    pointer-events: none;
}
/* 绢带书签：夹在框顶，两根线之间垂下来 */
.cls-ribbon {
    position: absolute;
    top: -1px;
    right: 26px;
    z-index: 2;
    width: 13px;
    height: 34px;
    background: linear-gradient(180deg, var(--cs-accent) 0%, var(--cs-accent-d) 56%, var(--cs-accent-d) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
    box-shadow: 0 2px 5px rgba(142, 79, 69, .16);
    pointer-events: none;
}
/* 框顶正中一枚小菱（书脊扣） */
.cls-frame-mark {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    transform: rotate(45deg);
    background: var(--cs-paper);
    border: 1px solid var(--cs-accent);
    pointer-events: none;
}
.cls-title {
    position: relative;
    margin: 4px 0 0;
    font-family: var(--cs-serif-cn);
    font-size: 27px;
    font-weight: 500;
    letter-spacing: .2em;
    text-indent: .2em;
    color: var(--cs-title);
    text-shadow:
        0 1px 0 var(--cs-title-hi),
        0 2px 4px var(--cs-title-sh);
}
.cls-en {
    margin-top: 8px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--cs-gold-d);
    opacity: .7;
}
.cls-fleuron {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 108px;
    margin: 14px auto 0;
    color: var(--cs-accent);
}
.cls-fleuron::before,
.cls-fleuron::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .42; }
.cls-fleuron i { width: 4px; height: 4px; transform: rotate(45deg); background: currentColor; opacity: .75; }
/* 卷首语：手写体，居中 */
.cls-pre {
    margin-top: 14px;
    font-family: var(--cs-hand);
    font-size: 16.5px;
    line-height: 1.9;
    color: var(--cs-ink2);
    letter-spacing: .04em;
    text-align: center;
    text-indent: 0;
}
.cls-pre span { display: block; }

/* 索引格（关键词搜索就长在封面下面，像账册前面的索引页） */
.cls-index { margin: 16px 0 0; }
.cls-index-field {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 2px;
    border-bottom: 1px solid var(--cs-hair-x);
    transition: border-color .22s var(--cs-e);
}
.cls-index-field.is-focus { border-bottom-color: var(--cs-accent); }
.cls-index-field svg { flex: none; color: var(--cs-accent-d); opacity: .65; }
.cls-index-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--cs-ink);
    letter-spacing: .02em;
}
.cls-index-input::placeholder { color: var(--cs-ink3); opacity: .62; font-size: 12.5px; letter-spacing: .05em; }
.cls-index-clear {
    flex: none;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--cs-wash);
    color: var(--cs-accent-d);
    cursor: pointer;
}
.cls-index-clear.on { display: flex; }
.cls-meta {
    margin-top: 13px;
    font-family: var(--cs-serif-cn);
    font-size: 11.5px;
    letter-spacing: .16em;
    color: var(--cs-ink3);
    font-variant-numeric: tabular-nums;
}
.cls-meta em { font-style: normal; color: var(--cs-accent-d); }

/* ===== 索引标签（吸附在纸面上；像账册侧边的分类签，不是一排药丸） ===== */
.cls-tools {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 -24px;
    padding: 4px 24px 0;
    background: linear-gradient(to bottom, var(--cs-paper) 84%, transparent);
}
.cls-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--cs-hair-x);
}
.cls-tabs::-webkit-scrollbar { display: none; }
.cls-tab {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 11px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: .1em;
    color: var(--cs-ink3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .22s var(--cs-e), opacity .22s var(--cs-e);
}
.cls-tab::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -1px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .22s var(--cs-e), transform .28s var(--cs-e);
}
.cls-tab.on { color: var(--cs-accent-d); }
.cls-tab.on::after { opacity: .85; transform: scaleX(1); }
.cls-tab:active { color: var(--cs-accent-d); }
.cls-tab-sep { flex: none; width: 1px; margin: 14px 7px; background: var(--cs-hair-x); }
.cls-tab-flag { font-size: 12px; }
.cls-tab-flag.on { color: var(--cs-accent-d); }
.cls-tab-flag.on::before {
    content: '';
    width: 4px;
    height: 4px;
    flex: none;
    margin-right: 5px;
    transform: rotate(45deg);
    background: currentColor;
    opacity: .9;
}

/* ===== 分册（月份）：居中一行细线夹一个月份，下面一行小字交代年份与总数 ===== */
.cls-month-head { margin: 30px 0 2px; }
.cls-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--cs-accent-d);
}
.cls-month::before,
.cls-month::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--cs-hair); opacity: .5; }
.cls-month-num {
    flex: none;
    font-family: var(--cs-serif-cn);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .26em;
    text-indent: .26em;
    white-space: nowrap;
}
.cls-month-meta {
    margin-top: 8px;
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--cs-ink3);
    opacity: .78;
    font-variant-numeric: tabular-nums;
}

/* ===== 日 ===== */
.cls-day {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 17px 0 3px;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--cs-ink3);
}
.cls-day::before,
.cls-day::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--cs-hair-x); }
.cls-day b { flex: none; font-weight: 400; color: var(--cs-accent-d); letter-spacing: .14em; }

/* ===== 账册栏格：一行一通电话（左栏时刻，右栏事由，极淡横线当格线） ===== */
.cls-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 15px;
    padding: 14px 0 15px;
    border-bottom: 1px solid var(--cs-hair-x);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s var(--cs-e);
}
.cls-row:active { background-color: var(--cs-wash); }
.cls-row-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}
.cls-row-time b {
    display: block;
    font-family: var(--cs-serif-cn);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--cs-ink);
}
.cls-row-time span {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--cs-ink3);
}
.cls-row-main { min-width: 0; }
.cls-row-head { display: flex; align-items: center; gap: 7px; }
.cls-row-dir { flex: none; color: var(--cs-ink3); display: flex; opacity: .82; }
.cls-row-dir.out { color: var(--cs-accent); }
.cls-row-title {
    min-width: 0;
    flex: 1 1 auto;
    font-family: var(--cs-serif-cn);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cs-ink);
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cls-row-sum {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--cs-ink2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 声波：有录音的那一行，右端一小段竖纹（装饰，不承载信息） */
.cls-wave { flex: none; display: flex; align-items: center; gap: 2px; height: 14px; color: var(--cs-accent); opacity: .72; }
.cls-wave i { display: block; width: 1.5px; border-radius: 1px; background: currentColor; }
/* 边注：标签不再是药丸，而是行尾一串小字，中点分隔 */
.cls-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 7px;
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--cs-ink3);
}
.cls-tag { white-space: nowrap; }
.cls-tag + .cls-tag::before { content: '·'; margin: 0 6px; opacity: .55; }
.cls-tag-rec { color: var(--cs-accent-d); }
.cls-tag-rec i { display: none; }
.cls-tag-txt { color: var(--cs-accent-d); }
.cls-row.missed .cls-row-time b,
.cls-row.missed .cls-row-title { color: var(--cs-accent-d); }
.cls-row.missed .cls-row-dir { color: var(--cs-accent); }

/* ===== 卷末 ===== */
.cls-colophon {
    margin: 30px 0 0;
    text-align: center;
    font-family: var(--cs-serif-cn);
    font-size: 11.5px;
    letter-spacing: .5em;
    text-indent: .5em;
    color: var(--cs-gold);
    opacity: .7;
}

/* ===== 空页 ===== */
.cls-blank { padding: 34px 10px 40px; text-align: center; }
.cls-blank-arch { width: 96px; height: 42px; margin: 0 auto 14px; color: var(--cs-accent); opacity: .5; }
.cls-blank-en {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: var(--cs-gold-d);
    opacity: .66;
}
.cls-blank-cn { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--cs-ink2); }
.cls-blank-act {
    margin-top: 18px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--cs-hair);
    border-radius: 22px;
    background: transparent;
    color: var(--cs-accent-d);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: .08em;
    cursor: pointer;
}

/* ============================================================
   内页：一通电话 = 一张请帖式册页
   ============================================================ */
.cls-leaf {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--cs-paper);
    transform: translateX(100%);
    transition: transform .32s var(--cs-e);
    will-change: transform;
}
.cls-leaf.on { transform: translateX(0); }
.cls-leaf[hidden] { display: none; }
.cls-leaf-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 6px;
    border-bottom: 1px solid var(--cs-hair-x);
    background: var(--cs-paper);
}
.cls-leaf-bar .cls-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--cs-accent-d);
    cursor: pointer;
}
.cls-leaf-bar .cls-back-btn:active { background: var(--cs-wash); }
.cls-leaf-eyebrow {
    font-family: var(--cs-serif-cn);
    font-size: 12px;
    letter-spacing: .28em;
    color: var(--cs-accent-d);
}
.cls-leaf-acts { margin-left: auto; display: flex; gap: 4px; }
.cls-leaf-acts button {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--cs-accent-d);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
}
.cls-leaf-acts button:active { opacity: .6; }
.cls-leaf-scroll {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 24px calc(46px + env(safe-area-inset-bottom, 0px));
}

/* 请帖式抬头：双线描边 + 居中 */
.cls-plate {
    position: relative;
    margin: 18px 0 24px;
    padding: 24px 18px 22px;
    border: 1px solid var(--cs-hair);
    text-align: center;
}
.cls-plate::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--cs-hair-x);
    pointer-events: none;
}
.cls-plate-who {
    font-family: var(--cs-serif-cn);
    font-size: 19px;
    letter-spacing: .1em;
    color: var(--cs-ink);
}
.cls-plate-who small {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .16em;
    color: var(--cs-accent-d);
}
.cls-plate-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 108px;
    margin: 14px auto 12px;
    color: var(--cs-accent);
}
.cls-plate-rule::before,
.cls-plate-rule::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .4; }
.cls-plate-rule i { width: 4px; height: 4px; transform: rotate(45deg); background: currentColor; opacity: .7; }
.cls-plate-nums { font-variant-numeric: tabular-nums; }
.cls-plate-dur {
    font-family: var(--cs-serif-cn);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--cs-gold-d);
}
.cls-plate-dur small { font-size: 12px; letter-spacing: .12em; color: var(--cs-ink3); text-shadow: none; }
.cls-plate-when { margin-top: 8px; font-size: 11.5px; letter-spacing: .06em; color: var(--cs-ink3); font-variant-numeric: tabular-nums; }
.cls-plate-note {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px dashed var(--cs-hair);
    font-family: var(--cs-hand);
    font-size: 13px;
    line-height: 1.95;
    color: var(--cs-accent-d);
}

/* 册页分区标题 */
.cls-sec {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 24px 0 12px;
    font-family: var(--cs-serif-cn);
    font-size: 12.5px;
    letter-spacing: .22em;
    color: var(--cs-accent-d);
}
.cls-sec::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--cs-hair-x); }
.cls-sec span { flex: none; }
.cls-sec em {
    flex: none;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--cs-ink3);
    opacity: .9;
}

/* 摘要 */
.cls-summary { border-left: 1px solid var(--cs-hair); padding: 2px 0 2px 15px; }
.cls-summary-title {
    font-family: var(--cs-serif-cn);
    font-size: 15px;
    font-weight: 500;
    color: var(--cs-ink);
    line-height: 1.6;
    letter-spacing: .01em;
}
.cls-summary-body { margin-top: 7px; font-size: 13px; line-height: 1.9; color: var(--cs-ink2); }

/* 录音册 */
.cls-rec { padding: 12px 0; border-bottom: 1px solid var(--cs-hair-x); }
.cls-rec:last-child { border-bottom: none; }
.cls-rec-top { display: flex; align-items: center; gap: 11px; }
.cls-rec-play {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cs-hair);
    border-radius: 50%;
    background: var(--cs-wash);
    color: var(--cs-accent-d);
    cursor: pointer;
    transition: transform .18s var(--cs-e), background-color .22s var(--cs-e);
}
.cls-rec-play:active { transform: scale(.94); }
.cls-rec-play.playing { background: var(--cs-wash); border-color: var(--cs-accent); color: var(--cs-accent-d); }
.cls-rec-mid { flex: 1 1 auto; min-width: 0; }
.cls-rec-bar {
    position: relative;
    height: 3px;
    border-radius: 2px;
    background: var(--cs-wash);
    cursor: pointer;
}
.cls-rec-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: -18px 0;
}
.cls-rec-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cs-accent), var(--cs-accent));
    transition: width .16s linear;
}
.cls-rec-time {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-size: 10.5px;
    color: var(--cs-ink3);
    font-variant-numeric: tabular-nums;
}
.cls-rec-acts { flex: none; display: flex; align-items: center; gap: 2px; }
.cls-rec-acts button {
    min-height: 44px;
    padding: 0 9px;
    border: none;
    background: transparent;
    color: var(--cs-accent-d);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
}
.cls-rec-acts button:active { opacity: .6; }
.cls-rec-off { margin-top: 9px; font-size: 11px; line-height: 1.7; color: var(--cs-accent-d); opacity: .9; }
.cls-rec-trans {
    margin-top: 12px;
    padding: 12px 13px;
    background: var(--cs-wash);
    border-left: 2px solid var(--cs-hair-x);
}

/* 对话记录 */
.cls-line { display: flex; gap: 9px; padding: 6px 0; font-size: 13.5px; line-height: 1.85; color: var(--cs-ink); }
.cls-line b { flex: none; font-weight: 500; font-size: 12px; letter-spacing: .02em; }
.cls-line.cl-ta b { color: var(--cs-accent-d); }
.cls-line.cl-me b { color: var(--cs-accent-d); }
.cls-line span { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.cls-foreign {
    display: block;
    margin-top: 1px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--cs-ink3);
}

/* 照片墙（相角贴页） */
.cls-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cls-cell {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--cs-hair);
    background: var(--cs-wash);
    cursor: pointer;
}
.cls-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cls-cell:active { opacity: .82; }

/* 场景轨迹 */
.cls-scene { display: flex; gap: 10px; padding: 7px 0; }
.cls-scene-dot { flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--cs-accent); opacity: .7; }
.cls-scene-body { flex: 1 1 auto; min-width: 0; }
.cls-scene-place { font-size: 13.5px; color: var(--cs-ink); }
.cls-scene-place i { font-style: normal; font-size: 10.5px; color: var(--cs-ink3); margin-left: 8px; font-variant-numeric: tabular-nums; }
.cls-scene-desc { margin-top: 2px; font-size: 12px; line-height: 1.7; color: var(--cs-ink3); }

.cls-quiet { padding: 14px 0; font-size: 12.5px; line-height: 1.8; color: var(--cs-ink3); }

/* 长按 / 右键菜单 */
.cls-ctxmenu {
    position: fixed;
    z-index: 2600;
    min-width: 172px;
    padding: 5px;
    border: 1px solid var(--cs-hair);
    border-radius: 14px;
    background: var(--cs-menu);
    box-shadow: 0 10px 30px var(--cs-menu-sh);
    animation: clsMenuIn .18s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes clsMenuIn {
    from { opacity: 0; transform: scale(.94) translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.cls-ctxmenu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--cs-accent-d);
    font-family: inherit;
    font-size: 13.5px;
    letter-spacing: .04em;
    text-align: left;
    cursor: pointer;
}
.cls-ctxmenu button:active { background: var(--cs-wash); }

/* 入场（一次性，只有动画期间透明；animationend 立刻摘类） */
@keyframes clsRise {
    from { opacity: 0; transform: translate3d(0, 9px, 0); }
    to { opacity: 1; transform: none; }
}
.cls-in { animation: clsRise .42s var(--cs-e) both; }

/* 收行（从列表移除时局部收起，不整块重画） */
.cls-row.out { opacity: 0; transform: scale(.97); transition: opacity .22s var(--cs-e), transform .22s var(--cs-e); }

@media (max-width: 369px) {
    .cls-book, .cls-leaf-scroll { padding-left: 18px; padding-right: 18px; }
    .cls-tools { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
    .cls-frame { padding: 20px 12px 16px; }
    .cls-title { font-size: 24px; letter-spacing: .16em; text-indent: .16em; }
    .cls-pre { font-size: 15.5px; }
    .cls-row { grid-template-columns: 42px minmax(0, 1fr); column-gap: 11px; }
}
@media (min-width: 431px) {
    .cls-book, .cls-leaf-scroll { padding-left: 30px; padding-right: 30px; }
    .cls-tools { margin: 0 -30px; padding-left: 30px; padding-right: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    #nest-sub-calls, #nest-sub-calls *,
    #nest-sub-calls *::before, #nest-sub-calls *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .cls-leaf { transform: none; }
}

/* ============================================================
   聊天里就地掀开「这一通」（第二条入口 · 不进小窝、不换页）
   同一个 .cls-leaf 内容，只是从底部浮上来，浮在当前聊天上面
   ============================================================ */
.cld-mask {
    position: absolute;
    inset: 0;
    /* 必须压过 #header / #bottom-nav(100)、连接提示(120)、聊天渲染层(80)——否则底栏会盖住浮板下沿 */
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(20, 17, 15, 0.42);
    opacity: 0;
    transition: opacity .3s ease;
}
.cld-mask.on { opacity: 1; }
.cld-mask .cld-sheet {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    /* 用 % 不用 vh：#app 是 fixed top/bottom:0，iOS 地址栏收起时 vh 会算错把浮板顶出屏外 */
    height: 84%;
    display: flex;
    flex-direction: column;
    background: var(--cs-paper);
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -12px 40px rgba(20, 17, 15, 0.28);
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.cld-mask.on .cld-sheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .cld-mask, .cld-mask .cld-sheet { transition-duration: .01ms; }
}