/* ============================================================
   css/panels/panels-more.css — 更多面板 / 搜索 / 日历 / 背景 / 资料页
   设计系统: 毛玻璃侧滑 · 衬线花字标题 · 多层阴影卡片
   ============================================================ */

/* More Panel (WeChat-style full-screen slide) */
#more-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30,25,20,0.35);
    z-index: 300;
    display: none;
    opacity: 0;
    transition: opacity 0.28s ease;
    /* ★ 去掉 backdrop-filter：body 层确认框(自定义确认)在它上面弹出/关闭时会整层重栅格 → 「整个更多面板消失再重画」闪动（案例库血泪）。改纯暗色遮罩。 */
}
#more-overlay.open {
    display: block;
    opacity: 1;
}
#more-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 480px;
    padding-top: var(--safe-top);
    z-index: 301;
    background: var(--bg-chat);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    isolation: isolate;  /* ★ 替代 will-change:transform，避免子元素合成层提升闪动 */
    box-shadow: none;
}
#more-panel.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
.more-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: var(--header-height);
    padding: 0 6px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.more-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 8px 6px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.more-back-btn:hover { color: var(--accent); background: transparent; }
.more-back-btn:focus-visible { outline: none; }
.more-back-btn:active { transform: scale(0.92); }
.more-title-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.more-title {
    font-family: var(--font-decorative);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    line-height: 1.2;
}
.more-title-sub {
    font-family: var(--font-reading);
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}
.more-menu {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
/* Decorative English subtitle */
.more-menu-subtitle {
    text-align: center;
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--gold);
    opacity: 0.5;
    padding: 12px 0 8px;
    user-select: none;
}
/* Menu cards container */
.more-menu-cards {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 16px;
}
/* Each menu item — a clean card */
.more-menu-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
    text-align: left;
    margin-bottom: 8px;
}
.more-menu-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm), var(--shadow-glow);
    border-color: var(--accent-rose);
}
.more-menu-card:active {
    transform: scale(0.97);
    transition: all 0.06s ease;
}
/* Icon wrapper */
.more-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--accent-light);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.more-menu-card:hover .more-card-icon {
    color: var(--accent);
    background: var(--accent-rose-light);
}
.more-card-icon svg { display: block; }
/* Text body */
.more-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.more-card-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.more-card-hint {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
/* Arrow */
.more-card-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}
.more-menu-card:hover .more-card-arrow {
    transform: translateX(2px);
    color: var(--accent);
}
.more-page {
    position: absolute;
    inset: 0;
    /* ★ iOS 全屏层铁律：.more-page 的 top 是相对 #more-panel 的 padding 盒顶（=屏幕顶）量的，
       而头部栏被 padding-top:var(--safe-top) 推到安全区之下，占 [safe-top, safe-top+header-height]。
       若只用 top:var(--header-height)，有刘海时子页内容从 56px 起，把「返回键+标题」整个盖住、点不到。
       需额外加 safe-top；安卓 --safe-top=0 时 top=header-height，与原来一致，零影响。 */
    top: calc(var(--safe-top, 0px) + var(--header-height));
    background: var(--bg-chat);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 2;
}
.more-page.active { display: flex; }

/* ★ 他的资料编辑页底部输入框键盘避让：键盘弹起时底缘留出缓冲，配合 bindInputKbdGuard 滚到键盘上方 */
#more-page-profile { padding-bottom: calc(28px + var(--kbd-h,0px) + env(safe-area-inset-bottom,0px)); }

/* Search Page */
.search-top-bar {
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.search-main-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    background: var(--surface-solid);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-main-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.search-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 8px;
    background:
        /* 左端遮罩：滚动时露出 */
        linear-gradient(to right, var(--surface) 30%, transparent) left,
        /* 右端遮罩：滚动时露出 */
        linear-gradient(to left, var(--surface) 30%, transparent) right,
        /* 左阴影 */
        linear-gradient(to right, rgba(0,0,0,0.04), transparent 16px) left,
        /* 右阴影 */
        linear-gradient(to left, rgba(0,0,0,0.04), transparent 16px) right;
    background-repeat: no-repeat;
    background-size: 44px 100%;
    /* 遮罩随内容滚动，阴影固定在视口边缘 */
    background-attachment: local, local, scroll, scroll;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-behavior: smooth;
    position: relative;
}
.search-tabs::-webkit-scrollbar { display: none; }
.search-tab {
    flex-shrink: 0;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}
.search-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.search-content { flex: 1; overflow-y: auto; position: relative; }
.search-sub-view { padding: 12px; display: none; }
.search-sub-view.active { display: block; }

/* Calendar */
.search-calendar { padding: 12px; }
.cal-month { margin-bottom: 24px; }
.cal-month-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-day-header {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 0;
}
.cal-day {
    font-size: 13px;
    padding: 7px 2px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    color: var(--text-primary);
}
.cal-day:hover { background: var(--accent-light); }
.cal-day.has-msgs { font-weight: 600; }
.cal-day.no-msgs { opacity: 0.3; }
.cal-day.today {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--accent);
}
.cal-jumper {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--divider);
}
.cal-picker-row {
    display: flex; gap: 8px; align-items: center; width: 100%;
}
.cal-custom-select {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit; cursor: pointer;
    background: var(--surface-solid); color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex: 1; min-width: 0;
    box-shadow: var(--shadow-xs);
}
.cal-custom-select:hover { border-color: var(--accent-rose); }
.cal-custom-select:active { transform: scale(0.97); }
.cal-custom-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-custom-select-chevron { flex-shrink: 0; color: var(--text-muted); margin-left: 6px; display: flex; align-items: center; transition: transform 0.2s ease; }
.cal-picker-drop {
    position: fixed; z-index: 2500; max-height: 220px; overflow-y: auto;
    background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-md), var(--shadow-lg);
    animation: calDropIn 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes calDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cal-picker-opt {
    padding: 10px 16px; font-size: 14px; cursor: pointer;
    color: var(--text-primary); font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.cal-picker-opt:last-child { border-bottom: none; }
.cal-picker-opt:hover { background: var(--rose-light); color: var(--accent-rose); }
.cal-picker-opt:active { background: rgba(201,168,168,0.2); }
.cal-picker-opt.active { color: var(--accent-rose); font-weight: 600; background: var(--rose-light); }

/* Search results */
.search-results-list { padding: 0; }
.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s ease;
}
.search-result-item:hover { background: var(--accent-light); }
.sr-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--accent-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.sr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sr-body { flex: 1; min-width: 0; }
.sr-name {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.sr-content {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sr-quote {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sr-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.search-highlight { color: var(--accent); font-weight: 600; }
.sr-locate {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 0 4px 8px;
    align-self: center;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.sr-locate:hover { color: var(--accent-hover); }
/* ★ 2028-09-17：搜索只覆盖「手上这一段」，更早的可能还在服务端 → 如实说明 + 取一次的入口。
   规矩同全站：不用系统默认按钮，自己做一个浅底小圆角块；窄屏（<370px）也要放得下（文字自动换行）。 */
.sr-older-box {
    margin: 14px 0 6px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--accent-light);   /* 主题令牌（浅色/深色都跟着走），不另造变量 */
    border: 1px solid var(--border);
    text-align: center;
}
.sr-older-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.sr-older-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-solid, #fff);
    color: var(--accent);
    font-size: 12.5px;
    letter-spacing: 0.5px;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.sr-older-btn:active { transform: scale(0.97); }
.sr-older-btn:disabled { opacity: 0.6; cursor: default; }

/* Image gallery */
.search-images-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.search-image-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    transition: transform 0.15s ease;
}
.search-image-item:hover { transform: scale(1.03); }
.search-image-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    display: block;
}
.si-locate {
    position: absolute;
    bottom: 4px; right: 4px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.72;   /* 始终可见，手机也能直接点放大镜定位 */
    transition: opacity 0.2s ease, transform 0.15s ease;
    transform: scale(1);
}
.search-image-item:hover .si-locate { opacity: 1; }
.si-locate:active { transform: scale(0.85); }
/* 仅缩略图小提示（本地原图不可用）：不显眼，告诉用户不是显示 bug 而是原图不在了 */
.search-image-thumbnote {
    position: absolute;
    top: 4px; left: 4px;
    max-width: calc(100% - 8px);
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.75;
}
[data-theme-mode="dark"] .search-image-thumbnote { background: rgba(255,255,255,0.28); color: #1a1a1a; }
[data-theme-mode="dark"] .si-locate { background: rgba(255,255,255,0.25); }

/* ★ 2028-09：这份图本机与云端都真没了 → 说人话，并让整格不可点（不再留点不动的死图） */
.search-image-item.search-image-lost {
    pointer-events: none;
    background: var(--bg-secondary);
    border-radius: 4px;
}
.search-image-item.search-image-lost::after {
    content: '原图已不在本机';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px dashed var(--border, rgba(196,168,106,0.3));
    border-radius: 4px;
    box-sizing: border-box;
}

.search-images-date-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 10px 4px 6px;
    grid-column: 1/-1;
}

/* Files */
.search-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s ease;
}
.search-file-item:hover { background: var(--accent-light); }
/* ★ 2028-09：文件图标改成线条 SVG（原来是一对方括号字母），按文件类型各一种 */
.search-file-item .sf-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-rose, var(--rose, #C9A8A8));
}
.search-file-item .sf-icon svg { width: 24px; height: 24px; display: block; }
.search-file-item .sf-info { flex: 1; min-width: 0; }
.search-file-item .sf-name {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-file-item .sf-meta { font-size: 11px; color: var(--text-muted); }

/* Links */
.link-card {
    display: flex;
    gap: 10px;
    padding: 12px;
    margin: 8px 12px;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all 0.2s ease;
}
.link-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.link-card .lc-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--accent-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent);
    overflow: hidden;
}
.link-card .lc-info { flex: 1; min-width: 0; }
.link-card .lc-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.link-card .lc-url {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-decorative);
    font-style: italic;
}

/* ===== 位置搜索条目 ===== */
.loc-search-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.04));
    cursor: pointer;
    transition: background 0.15s ease;
}
.loc-search-item:hover { background: var(--hover, rgba(0,0,0,0.02)); }
.loc-search-item:active { background: var(--hover, rgba(0,0,0,0.04)); }
.loc-search-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--rose, #C9B0A8);
    background: rgba(201,176,168,0.1);
    border-radius: 8px;
}
.loc-search-info { flex: 1; min-width: 0; }
/* ★ 2028-09 甲方实锤：这里显示的是**中文地名**（不是经纬度数字了），所以按正文正文字体走，
   与「文件/音乐/链接」那几栏同一套字型字重，整页才是一套 */
.loc-search-coords {
    font-size: 13px; color: var(--text-primary);
    font-weight: 500;
    line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loc-search-time {
    font-size: 10px; color: var(--text-muted, #BFB8AE);
    margin-top: 2px;
}

/* ===== Background Page ===== */
.bg-preview {
    margin: 16px 16px 20px;
    height: 170px;
    background: var(--bg-chat);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        var(--shadow-xs) inset,
        var(--shadow-sm);
    overflow: hidden;
}
.bg-preview-inner {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 14px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* Section header with English accent */
.bg-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 16px 10px;
    gap: 2px;
}
.bg-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.bg-section-en {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
}

/* Preset grid — larger items, nice grid */
.bg-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 16px 20px;
}
.bg-preset-item {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
    position: relative;
}
.bg-preset-item:hover {
    border-color: var(--accent-rose);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm), var(--shadow-glow);
}
.bg-preset-item.selected {
    border-color: var(--accent-rose);
    box-shadow: 0 0 0 3px var(--accent-rose-light), var(--shadow-sm);
}
.bg-preset-item.selected::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 14px;
    border: 1.5px solid var(--accent-rose);
    opacity: 0.35;
    pointer-events: none;
}

/* Upload area — dashed border, clickable */
.bg-upload-area {
    margin: 0 16px 16px;
    padding: 28px 20px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bg-upload-area:hover {
    border-color: var(--accent-rose);
    background: var(--accent-rose-light);
    box-shadow: var(--shadow-sm);
}
.bg-upload-icon {
    color: var(--text-muted);
    transition: color 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-upload-area:hover .bg-upload-icon {
    color: var(--accent-rose);
}
.bg-upload-text {
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    font-weight: 500;
}
.bg-upload-hint {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* Background history grid */
.bg-history-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 16px 16px;
}
.bg-hist-item {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid var(--border);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
}
.bg-hist-item:hover {
    border-color: var(--accent-rose);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.bg-hist-item.active {
    border-color: var(--accent-rose);
    box-shadow: 0 0 0 3px var(--accent-rose-light);
}
.bg-hist-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.bg-hist-item .bg-hist-del-btn {
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.bg-hist-del-btn {
    position: absolute;
    top: 5px; right: 5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    opacity: 0.75;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-xs);
    -webkit-tap-highlight-color: transparent;
}
.bg-hist-item:hover .bg-hist-del-btn {
    opacity: 1;
}
.bg-hist-del-btn:active { transform: scale(0.9); }
.bg-hist-del-btn:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* ===== Custom Color Picker Overlay (内置色盘) ===== */
.bg-cp-overlay {
    position: absolute; inset: 0;
    background: rgba(30,28,26,0.35);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s 0.22s;  /* ★ close 路径 */
    transform: translateZ(0);   /* ★ 预提升合成层 */
    will-change: opacity;       /* ★ 减少手机合成层竞态 */
}
.bg-cp-overlay.open {
    opacity: 1; visibility: visible;
    pointer-events: auto;
    /* ★ open 路径：animation + 覆盖 visibility 延迟为 0，消除「隐形窗口」导致面板迟到跳出/连点无反馈 */
    transition: opacity 0.22s ease, visibility 0s;
    animation: bgCpFadeIn 0.22s ease;
}
@keyframes bgCpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.bg-cp-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 28px 24px 20px;
    width: 300px;
    max-width: 88vw;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.1),
        0 2px 8px rgba(0,0,0,0.05),
        0 0 0 1px rgba(196,168,106,0.12),
        inset 0 1px 0 rgba(255,255,255,0.6);
    text-align: center;
    transform: translateY(10px) scale(0.96);
    transition: transform 0.22s ease;  /* ★ close 路径回退 */
}
/* ★ open 路径用 keyframes（合成层重建时不依赖 transition 起点，避免卡片「突然跳出」） */
.bg-cp-overlay.open .bg-cp-card {
    animation: bgCpCardIn 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes bgCpCardIn {
    from { transform: translateY(10px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.bg-cp-header { margin-bottom: 18px; }
.bg-cp-title {
    display: block;
    font-family: var(--font-decorative);
    font-style: italic;
    font-size: 16px; font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 1.5px;
}
.bg-cp-title-en {
    display: block;
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic; font-size: 10px;
    color: var(--accent-rose); opacity: 0.55;
    letter-spacing: 2px; margin-top: 2px;
}
.bg-cp-preview {
    width: 56px; height: 56px;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.4);
    transition: background-color 0.1s ease;
    border: 2.5px solid #fff;
}
/* 滑块区 */
.bg-cp-sliders { margin-bottom: 14px; }
.bg-cp-slider-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.bg-cp-slider-label {
    font-size: 10px; color: var(--text-muted);
    width: 24px; flex-shrink: 0; text-align: right;
    letter-spacing: 0.5px; opacity: 0.7;
}
/* 色相条 */
.bg-cp-huebar {
    flex: 1; height: 14px; border-radius: 7px;
    background: linear-gradient(to right,
        hsl(0,80%,65%), hsl(30,80%,65%), hsl(60,80%,65%),
        hsl(120,60%,65%), hsl(180,60%,65%), hsl(240,60%,65%),
        hsl(270,60%,65%), hsl(300,60%,65%), hsl(360,80%,65%)
    );
    position: relative; cursor: pointer;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.12),
        0 1px 0 rgba(255,255,255,0.5);
    touch-action: none;
}
/* 饱和度条（横向：灰→当前色相纯色） */
.bg-cp-satbar {
    flex: 1; height: 14px; border-radius: 7px;
    --cp-sat-hue: #C9A8A8;
    background: linear-gradient(to right, #ccc, var(--cp-sat-hue));
    position: relative; cursor: pointer;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.12),
        0 1px 0 rgba(255,255,255,0.5);
    touch-action: none;
}
/* 明度条（横向） */
.bg-cp-lightbar {
    flex: 1; height: 14px; border-radius: 7px;
    --cp-mid: #C9A8A8;
    background: linear-gradient(to right, #1a1a1a, var(--cp-mid), #fff);
    position: relative; cursor: pointer;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.12),
        0 1px 0 rgba(255,255,255,0.5);
    touch-action: none;
}
/* 滑块拖拽把手 */
.bg-cp-bar-marker {
    position: absolute; top: -4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(180,160,150,0.4);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transform: translateX(-11px);
    pointer-events: none;
    transition: left 0.06s linear;
}
/* 十六进制输入 */
.bg-cp-hex-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.bg-cp-hex-input {
    flex: 1; height: 36px;
    border: 1.5px solid rgba(180,160,150,0.25);
    border-radius: 10px;
    background: rgba(201,168,168,0.04);
    padding: 0 12px;
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 15px; letter-spacing: 2px;
    color: var(--accent-rose);
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.bg-cp-hex-input:focus {
    outline: none;
    border-color: var(--accent-rose);
    box-shadow: 0 0 0 3px rgba(201,168,168,0.1);
    background: rgba(201,168,168,0.06);
}
.bg-cp-hex-input::placeholder {
    color: rgba(180,160,150,0.4);
    font-style: italic;
}
/* 按钮 */
.bg-cp-actions { display: flex; gap: 10px; }
.bg-cp-btn {
    flex: 1; padding: 11px 0;
    border-radius: 12px; font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    border: none; font-family: var(--font-body);
}
.bg-cp-btn-cancel {
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border);
}
.bg-cp-btn-cancel:hover { background: rgba(0,0,0,0.02); }
.bg-cp-btn-confirm {
    background: var(--accent-rose); color: #fff;
    box-shadow: 0 2px 8px rgba(201,168,168,0.25);
}
.bg-cp-btn-confirm:hover {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(201,168,168,0.3);
    transform: translateY(-1px);
}
.bg-cp-btn-confirm:active { transform: scale(0.96); }

/* ===== Profile Page (in more menu) ===== */

/* Hero */
.more-prof-hero { text-align:center; padding: 18px 4px 8px; }
.more-prof-hero-en {
    font-family: var(--font-handwriting);
    font-size: 26px; line-height: 1.2; color: var(--accent-rose); opacity: 0.9;
}
.more-prof-hero-zh {
    margin-top: 2px; font-size: 12px; letter-spacing: 2px; color: var(--text-secondary);
}
/* Section titles */
.more-prof-sec {
    display: flex; align-items: baseline; gap: 8px;
    margin: 8px 16px 6px;
}
.more-prof-sec-zh { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--text-primary); }
.more-prof-sec-en {
    font-family: var(--font-decorative); font-style: italic;
    font-size: 10px; letter-spacing: 1.5px; color: var(--gold); opacity: 0.7;
}
.more-prof-sec-line { flex: 1; height: 1px; background: var(--gold); opacity: 0.2; }
/* Signature hint — romantic */
.more-sig-hint {
    font-style: italic; color: var(--accent-rose); opacity: 0.7;
    letter-spacing: 0.3px;
}

/* Decorative centered avatar area */
.more-avatar-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 8px;
    gap: 12px;
}
.more-avatar-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--accent-rose) 0%, var(--gold) 50%, var(--accent-lavender) 100%);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.more-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--surface-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 24px;
    color: var(--accent-rose);
    overflow: hidden;
    border: 2px solid var(--surface-solid);
}
.more-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.more-avatar-actions {
    display: flex;
    gap: 8px;
}
.more-avatar-btn {
    padding: 5px 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface-solid);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
    letter-spacing: 0.3px;
}
.more-avatar-btn:hover {
    color: var(--accent-rose);
    border-color: var(--accent-rose);
    background: var(--accent-rose-light);
    box-shadow: var(--shadow-sm);
}

/* Profile form sections */
.profile-section { padding: 12px 16px 4px; }
.profile-section:last-of-type { padding-bottom: 12px; }
.profile-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
/* Card containers — matching prof-card from panels-profile.css */
.more-prof-card {
    background: var(--surface-solid);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin: 0 8px 2px;
    box-shadow: var(--shadow-xs), var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.03);
    transition: box-shadow 0.2s ease;
}
.more-prof-card .profile-section { padding: 0 0 12px; }
.more-prof-card .profile-section:last-child { padding-bottom: 0; }
.more-prof-card .profile-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.5px; margin-bottom: 6px; }
/* Unified input — matching prof-input from panels-profile.css */
.profile-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--bg-chat);
    color: var(--text-primary);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(30,28,26,0.03);
}
.profile-input:focus {
    outline: none;
    border-color: var(--accent-rose);
    box-shadow: 0 0 0 3px var(--rose-light), var(--shadow-glow), inset 0 1px 2px rgba(30,28,26,0.03);
}
.profile-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
    line-height: 1.6;
    background: var(--bg-chat);
    color: var(--text-primary);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(30,28,26,0.03);
}
.profile-textarea:focus {
    outline: none;
    border-color: var(--accent-rose);
    box-shadow: 0 0 0 3px var(--rose-light), var(--shadow-glow), inset 0 1px 2px rgba(30,28,26,0.03);
}
.profile-save-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 20px 16px 24px;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #D4B8B8, var(--accent-rose));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm), var(--shadow-glow);
    transition: all 0.25s ease;
}
.profile-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}
.profile-save-btn:active { transform: scale(0.97); }

/* ===== 他输出的语言：预设 chips + 自定义输入 ===== */
.more-lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.more-lang-chip {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg-chat);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: all 0.22s ease;
}
.more-lang-chip:hover { border-color: var(--accent-rose); }
.more-lang-chip.selected {
    background: var(--accent-rose);
    border-color: var(--accent-rose);
    color: #fff;
    box-shadow: var(--shadow-sm), var(--shadow-glow);
}
.more-lang-custom-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--bg-chat);
    color: var(--text-primary);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(30,28,26,0.03);
}
.more-lang-custom-input:focus {
    outline: none;
    border-color: var(--accent-rose);
    box-shadow: 0 0 0 3px var(--rose-light), var(--shadow-glow), inset 0 1px 2px rgba(30,28,26,0.03);
}

/* ===== Date History Overlay (日历 → 独立聊天历史浮层) ===== */
.date-history-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30,25,20,0.4);
    z-index: 400;
    display: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.date-history-overlay.open { display: block; }
.date-history-panel {
    position: fixed;
    top: 0; right: 0;
    width: 100%;
    max-width: 480px;
    height: 100%;
    padding-top: var(--safe-top);
    z-index: 401;
    background:
        radial-gradient(ellipse 90% 38% at 50% -6%, rgba(201,168,168,0.10), transparent 60%),
        radial-gradient(ellipse 60% 30% at 100% 104%, rgba(184,168,196,0.07), transparent 60%),
        var(--bg-chat);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: none;
}
.date-history-panel.open { transform: translateX(0); box-shadow: var(--shadow-lg); }

.dh-header {
    display: grid;
    grid-template-columns: 60px 1fr 44px;
    align-items: center;
    height: var(--header-height);
    padding: 0 6px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.dh-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 8px 6px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.dh-back-btn:hover { color: var(--accent); background: var(--accent-light); }
.dh-title-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.dh-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}
.dh-title-sub {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

.dh-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 8px;
    -webkit-overflow-scrolling: touch;
}
.dh-messages .msg { animation: none; }  /* no entrance animation for history */
.dh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 8px;
}
.dh-empty-icon {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    font-size: 40px;
    opacity: 0.3;
    color: var(--accent-rose);
}
.dh-empty-text { font-size: 13px; letter-spacing: 0.5px; }

.dh-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.dh-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    background: var(--surface-solid);
    color: var(--text-primary);
    resize: none;
    outline: none;
    line-height: 1.4;
    max-height: 100px;
    transition: border-color 0.2s ease;
}
.dh-input:focus { border-color: var(--accent-rose); }
.dh-send-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    background: var(--accent-rose);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
}
.dh-send-btn:hover { background: var(--rose-hover); }
.dh-send-btn:active { transform: scale(0.95); }

/* ===== DH Multi-Select ===== */
.dh-messages.dh-multi-mode .msg { cursor: pointer; }
.dh-messages.dh-multi-mode .msg:hover { background: rgba(201,168,168,0.06); }
.dh-messages.dh-multi-mode .msg.selected { background: rgba(201,168,168,0.1); box-shadow: inset 0 0 0 1px var(--accent-rose); }
.dh-messages .msg-checkbox { display: none; }
.dh-messages.dh-multi-mode .msg-checkbox {
    display: block;
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
    accent-color: var(--accent-rose);
}

/* Mini Multi-Bar */
.dh-multi-bar {
    display: none;
    align-items: center; justify-content: space-between;
    padding: 8px 14px; gap: 10px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}
.dh-multi-bar.show { display: flex; }
.dh-multi-cancel {
    padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--surface-solid); color: var(--text-secondary);
    font-size: 12px; font-family: inherit; cursor: pointer;
    transition: all 0.15s ease;
}
.dh-multi-cancel:hover { color: var(--accent-rose); border-color: var(--accent-rose); }
.dh-multi-count { font-size: 12px; color: var(--text-secondary); letter-spacing: 0.3px; }
.dh-multi-actions { display: flex; gap: 8px; }
.dh-multi-fav {
    padding: 6px 16px; border: none; border-radius: var(--radius-full);
    background: var(--accent-rose); color: #fff;
    font-size: 12px; font-family: inherit; cursor: pointer;
    letter-spacing: 0.5px; transition: all 0.15s ease;
    box-shadow: var(--shadow-xs);
}
.dh-multi-fav:hover { background: var(--rose-hover); }
.dh-multi-fav:active { transform: scale(0.95); }

/* Context menu in dh (reuses .msg-ctx-menu base class, positioned within dh-messages) */
.dh-messages .msg-ctx-menu {
    position: fixed; z-index: 500; /* high enough above dh-panel z=401 */
}

/* ===== 操作指南 ===== */
.guide-content {
    padding: 8px 16px 24px;
    display: flex;
    flex-direction: column;
}
.guide-section {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.guide-section:last-child { border-bottom: none; }
.guide-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.guide-section-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(201,168,168,0.1);
    color: var(--accent-rose);
}
.guide-section-title {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.guide-section-en {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic; font-size: 9px;
    color: var(--text-muted); letter-spacing: 1.5px;
    margin-top: 1px;
}
.guide-section-body {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.7; padding-left: 42px;
}
.guide-section-body b {
    color: var(--text-primary); font-weight: 600;
}

/* ===== 操作指南 · 顶部引路（去「我的 → 百科全书」，2028） ===== */
.guide-go-help {
    margin: 2px 0 14px; padding: 13px 15px; border-radius: 12px; cursor: pointer;
    background: linear-gradient(140deg, rgba(201,168,168,0.16), rgba(196,168,106,0.12));
    border: 1px solid rgba(196,168,106,0.28);
    box-shadow: var(--shadow-xs), var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 0.22s cubic-bezier(0.22,0.61,0.36,1);
}
.guide-go-help:active { transform: scale(0.985); }
.guide-go-help b { display: block; font-size: 13px; font-weight: 400; color: var(--text-primary); margin-bottom: 5px; letter-spacing: 0.03em; }
.guide-go-help i { font-style: normal; font-size: 11.5px; line-height: 1.7; color: var(--text-secondary); }

/* ===== 操作指南 · 四大块分组头（2026 重写） ===== */
.guide-group { margin-top: 22px; }
.guide-group:first-child { margin-top: 4px; }
.guide-group-head {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(201,168,168,0.1), rgba(196,168,106,0.08));
    border: 1px solid rgba(196,168,106,0.22);
}
.guide-group-icon {
    width: 26px; height: 26px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.55);
    color: var(--accent-rose);
}
.guide-group-titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.guide-group-title {
    font-size: 15px; font-weight: 600; letter-spacing: 0.5px;
    color: var(--text-primary);
}
.guide-group-en {
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic; font-size: 10px;
    color: var(--text-muted); letter-spacing: 1.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 背景分区提示 */
.bg-section-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 0 16px 12px;
    letter-spacing: 0.5px;
    font-family: 'Playfair Display', var(--font-decorative);
    font-style: italic;
    opacity: 0.7;
}

/* 预设格子入场动画（仅首次构建播一次，避免每次 display 切换重播闪动） */
.bg-preset-item {
    animation: bgPresetIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.bg-presets-done .bg-preset-item {
    animation: none;
}
@keyframes bgPresetIn {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== 背景上传加载遮罩 ===== */
.bg-loading-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 350;
    background: rgba(30,25,20,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
}
.bg-loading-overlay.open { display: flex; }
.bg-loading-box {
    width: 140px;
    height: 140px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 8px 32px rgba(30,25,20,0.12);
    animation: bgLoadingIn 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes bgLoadingIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
.bg-loading-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-rose);
}
.bg-loading-text {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}
.bg-loading-dots {
    display: flex; gap: 5px; align-items: center;
}
.bg-loading-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-rose);
    opacity: 0.5;
    animation: bgDotBounce 1.4s infinite;
}
.bg-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.bg-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bgDotBounce {
    0%,80%,100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1); opacity: 0.8; }
}

/* Dark mode for guide + bg loading */
[data-theme-mode="dark"] .guide-section { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme-mode="dark"] .guide-section-icon { background: rgba(201,168,168,0.12); }
[data-theme-mode="dark"] .bg-loading-box {
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 32px rgba(0,0,0,0.4);
}

/* ===== Calendar Skeleton Loading ===== */
.cal-skeleton { padding: 12px; }
.cal-skeleton-header {
    height: 40px;
    background: linear-gradient(90deg, rgba(201,168,168,0.08) 0%, rgba(201,168,168,0.15) 50%, rgba(201,168,168,0.08) 100%);
    background-size: 200% 100%;
    animation: calSkeletonShimmer 1.8s infinite;
    border-radius: 8px;
    margin-bottom: 16px;
}
.cal-skeleton-month { margin-bottom: 20px; }
.cal-skeleton-month-title {
    height: 16px; width: 100px;
    background: rgba(201,168,168,0.1);
    border-radius: 4px;
    margin-bottom: 10px;
}
.cal-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.cal-skeleton-day {
    aspect-ratio: 1;
    background: rgba(201,168,168,0.06);
    border-radius: 4px;
    animation: calSkeletonPulse 2s infinite;
}
@keyframes calSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes calSkeletonPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.7; }
}

/* ===== Search Empty State ===== */
.search-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    animation: searchEmptyFadeIn 0.4s ease both;
}
@keyframes searchEmptyFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.search-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(201,168,168,0.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-rose);
    opacity: 0.6;
    background: rgba(201,168,168,0.04);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.search-empty-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: var(--accent-rose);
    margin-bottom: 8px;
    letter-spacing: 1px;
    opacity: 0.8;
}
.search-empty-desc {
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* ★ 分类列表项通用：内容预览 / 发送者 / 子信息行 */
.svo-preview, .scl-preview, .sg-preview, .sm-preview, .sf-preview, .lc-preview,
.loc-search-content {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.svo-transcript {
    font-size: 10px;
    color: var(--accent-rose);
    margin-top: 2px;
    font-style: italic;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scl-sub, .sg-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.loc-search-sender {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 2px;
}
.lc-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    opacity: 0.7;
}

/* ===== Music Search Items ===== */
.search-music-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.search-music-item:hover { background: var(--accent-light); }
.search-music-item:active { background: rgba(201,168,168,0.08); transform: scale(0.98); }
.sm-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(145deg, rgba(201,168,168,0.2), rgba(201,168,168,0.35));
    color: var(--accent-rose);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.sm-info { flex: 1; min-width: 0; }
.sm-title { font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-artist { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sm-type {
    font-size: 10px; color: var(--accent-rose);
    padding: 2px 8px; border: 1px solid var(--accent-rose);
    border-radius: 10px; flex-shrink: 0; opacity: 0.65;
    letter-spacing: 0.3px;
}
.sm-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; min-width: 50px; text-align: right; }

/* ===== Transaction Search Items ===== */
.search-tx-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.search-tx-item:hover { background: var(--accent-light); }
.search-tx-item:active { background: rgba(201,168,168,0.08); transform: scale(0.98); }
.stx-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(145deg, rgba(192,57,43,0.15), rgba(231,76,60,0.25));
    color: #c0392b;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.stx-info { flex: 1; min-width: 0; }
.stx-label { font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.stx-amount { font-size: 15px; font-weight: 600; color: var(--accent-rose); flex-shrink: 0; }

/* ===== Voice Search Items ===== */
.search-voice-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.search-voice-item:hover { background: var(--accent-light); }
.search-voice-item:active { background: rgba(201,168,168,0.08); transform: scale(0.98); }
.svo-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(145deg, rgba(201,168,168,0.12), rgba(201,168,168,0.22));
    color: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.svo-info { flex: 1; min-width: 0; }
.svo-label { font-size: 14px; color: var(--text-primary); }
.svo-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.svo-dur { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* ===== Call Search Items ===== */
.search-call-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.search-call-item:hover { background: var(--accent-light); }
.search-call-item:active { background: rgba(201,168,168,0.08); transform: scale(0.98); }
.scl-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(145deg, rgba(100,180,140,0.12), rgba(100,180,140,0.22));
    color: #5a9;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.scl-info { flex: 1; min-width: 0; }
.scl-label { font-size: 14px; color: var(--text-primary); }
.scl-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.scl-dur { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* ===== Game Search Items ===== */
.search-game-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.search-game-item:hover { background: var(--accent-light); }
.search-game-item:active { background: rgba(201,168,168,0.08); transform: scale(0.98); }
.sg-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(145deg, rgba(180,150,200,0.12), rgba(180,150,200,0.22));
    color: #a6c;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.sg-info { flex: 1; min-width: 0; }
.sg-label { font-size: 14px; color: var(--text-primary); }
.sg-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ===== Category Load More Sentinel ===== */
.cat-load-more-sentinel {
    text-align: center; padding: 14px 16px; cursor: pointer;
    font-size: 12px; color: var(--accent);
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic; letter-spacing: 1px;
    transition: opacity 0.2s ease;
    user-select: none;
}
.cat-load-more-sentinel:hover { opacity: 0.65; }
.cat-load-more-sentinel:active { transform: scale(0.96); }

/* ===== Context Mode Sentinels (invisible, IO-triggered — styles cleaned up) ===== */

/* Dark mode for new components */
[data-theme-mode="dark"] .search-empty-title { color: rgba(201,168,168,0.5); }
[data-theme-mode="dark"] .search-empty-desc { color: rgba(255,255,255,0.2); }
[data-theme-mode="dark"] .search-empty-icon { border-color: rgba(201,168,168,0.15); color: rgba(201,168,168,0.4); background: rgba(255,255,255,0.02); }
[data-theme-mode="dark"] .sm-icon { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset; }
[data-theme-mode="dark"] .stx-icon { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset; }
[data-theme-mode="dark"] .svo-icon { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset; }
[data-theme-mode="dark"] .scl-icon { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset; }
[data-theme-mode="dark"] .sg-icon { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset; }
[data-theme-mode="dark"] .cal-skeleton-header,
[data-theme-mode="dark"] .cal-skeleton-month-title,
[data-theme-mode="dark"] .cal-skeleton-day { background: rgba(255,255,255,0.04); }