/* =====================================================================
 * 「记忆管理」独立 App 样式（memory-manage.css）
 * ---------------------------------------------------------------------
 * 结构/逻辑见 memory-manage.js；缓存见 memory-manage-cache.js。
 * 层级：z-index 6200 —— 特意低于向量记忆全局面板（.vmg-mask 6300），
 *   使「向量记忆」入口打开的面板能直接盖在本层之上、关闭后回到本层；
 *   同时高于普通页面与常规弹窗，可完整覆盖主屏。
 * 主题：默认浅色玻璃；暗色模式与不支持 backdrop-filter 的内核均有兜底。
 * 命名：统一 mm- 前缀，独立文件，不与其它模块共用样式。
 * ===================================================================== */

.mm-root {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 6200;
    display: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(188, 198, 223, 0.5), transparent 42%),
        radial-gradient(circle at 84% 20%, rgba(208, 221, 227, 0.44), transparent 40%),
        linear-gradient(180deg, #f3f4fa 0%, #e9ecf4 100%);
}

.mm-root.is-open {
    display: flex;
    flex-direction: column;
}

.mm-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- 顶栏 ---------- */
.mm-head {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 9px 12px;
    padding-top: max(9px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 8px;
    background: rgba(246, 248, 252, 0.9);
    border-bottom: 1px solid rgba(116, 128, 152, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mm-head h2 {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: #1b2437;
}

.mm-back {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #4d5a73;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px rgba(83, 96, 124, 0.1);
    cursor: pointer;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.mm-back:active {
    transform: scale(0.95);
}

/* ---------- 内容区 ---------- */
.mm-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 14px;
    padding-bottom: max(24px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mm-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.mm-entry-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- 入口卡片 ---------- */
.mm-entry {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(112, 128, 165, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #2a3a55;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, opacity 0.12s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}

.mm-entry:active {
    transform: scale(0.98);
    opacity: 0.92;
}

.mm-entry__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5878b6;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.4) 0%, rgba(233, 231, 245, 0.4) 100%);
    border: 1px solid rgba(88, 120, 182, 0.16);
}

.mm-entry__icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.mm-entry__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mm-entry__main strong {
    font-size: 15px;
    font-weight: 700;
    color: #22314d;
}

.mm-entry__main small {
    font-size: 12px;
    color: rgba(70, 85, 111, 0.66);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-entry__main em {
    font-style: normal;
    font-size: 11px;
    color: rgba(88, 120, 182, 0.78);
}

.mm-entry__chevron {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: rgba(70, 85, 111, 0.4);
}

/* ---------- 向量空间 · Char 名单头像 ---------- */
.mm-entry__avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #5878b6;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.4) 0%, rgba(233, 231, 245, 0.4) 100%);
    border: 1px solid rgba(88, 120, 182, 0.16);
}

.mm-entry__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 空态（如：向量空间暂无 Char） ---------- */
.mm-empty {
    margin: 40px 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(70, 85, 111, 0.66);
}

/* ---------- 暗色模式 ---------- */
html[data-appearance="dark"] .mm-root {
    background:
        radial-gradient(circle at 18% 12%, rgba(52, 58, 78, 0.55), transparent 44%),
        linear-gradient(180deg, #101116 0%, #16171d 100%);
}

html[data-appearance="dark"] .mm-head {
    background: rgba(24, 25, 31, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark"] .mm-head h2 {
    color: rgba(245, 245, 250, 0.92);
}

html[data-appearance="dark"] .mm-back {
    background: rgba(44, 46, 54, 0.86);
    color: rgba(225, 230, 244, 0.86);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
}

html[data-appearance="dark"] .mm-entry {
    background: rgba(38, 38, 42, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    color: rgba(245, 245, 250, 0.92);
}

html[data-appearance="dark"] .mm-entry__icon {
    color: rgba(190, 205, 245, 0.95);
    background: rgba(52, 58, 78, 0.5);
    border-color: rgba(190, 205, 245, 0.18);
}

html[data-appearance="dark"] .mm-entry__main strong {
    color: rgba(245, 245, 250, 0.94);
}

html[data-appearance="dark"] .mm-entry__main small {
    color: rgba(235, 235, 245, 0.55);
}

html[data-appearance="dark"] .mm-entry__main em {
    color: rgba(190, 205, 245, 0.7);
}

html[data-appearance="dark"] .mm-entry__chevron {
    color: rgba(235, 235, 245, 0.36);
}

html[data-appearance="dark"] .mm-entry__avatar {
    color: rgba(190, 205, 245, 0.95);
    background: rgba(52, 58, 78, 0.5);
    border-color: rgba(190, 205, 245, 0.18);
}

html[data-appearance="dark"] .mm-empty {
    color: rgba(235, 235, 245, 0.52);
}

/* ---------- 兼容兜底：不支持 backdrop-filter ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mm-head {
        background: rgba(246, 248, 252, 0.97);
    }
    .mm-entry {
        background: rgba(255, 255, 255, 0.95);
    }
    html[data-appearance="dark"] .mm-head {
        background: rgba(24, 25, 31, 0.97);
    }
    html[data-appearance="dark"] .mm-entry {
        background: rgba(44, 44, 50, 0.97);
    }
}

/* =====================================================================
 * 「旅行日记」独立面板（ctj- 前缀）
 * ---------------------------------------------------------------------
 * 逻辑在 friend-phone-wechat.js（window.CharTravelJournalPanel），入口在
 * 「记忆管理」App。z-index 6250：高于记忆管理层(6200)、低于向量记忆(6300)，
 * 打开后盖在记忆管理之上、关闭后自然回到记忆管理。
 * 月历与日志正文复用 style-friend-phone.css 的 friend-phone-wechat-travel-*
 * 全局样式，此处只提供面板骨架（顶栏 / 好友列表 / 容器）。
 * ===================================================================== */

.ctj-root {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 6250;
    display: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(188, 210, 223, 0.5), transparent 42%),
        radial-gradient(circle at 84% 20%, rgba(208, 227, 218, 0.44), transparent 40%),
        linear-gradient(180deg, #f3f6fa 0%, #e9eef4 100%);
}

.ctj-root.is-open {
    display: flex;
    flex-direction: column;
}

.ctj-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ctj-head {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 9px 12px;
    padding-top: max(9px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 8px;
    background: rgba(246, 249, 252, 0.9);
    border-bottom: 1px solid rgba(116, 136, 152, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ctj-head h2 {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: #1b2b37;
}

.ctj-back,
.ctj-refresh {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #4d6273;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px rgba(83, 108, 124, 0.1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctj-back {
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
}

.ctj-refresh svg {
    width: 20px;
    height: 20px;
    display: block;
}

.ctj-back:active,
.ctj-refresh:active {
    transform: scale(0.95);
}

.ctj-refresh:disabled {
    opacity: 0.45;
    cursor: default;
}

.ctj-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 14px;
    padding-bottom: max(24px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ctj-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.ctj-intro {
    margin: 2px 4px 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(70, 100, 111, 0.72);
}

.ctj-empty {
    margin: 40px 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(70, 100, 111, 0.66);
}

/* ---------- 好友选择列表 ---------- */
.ctj-friend-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ctj-friend {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(112, 145, 165, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #2a3f55;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, opacity 0.12s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}

.ctj-friend:active {
    transform: scale(0.98);
    opacity: 0.92;
}

.ctj-friend__avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #58a0b6;
    background: linear-gradient(135deg, rgba(188, 214, 223, 0.5) 0%, rgba(231, 240, 245, 0.5) 100%);
    border: 1px solid rgba(88, 150, 182, 0.16);
}

.ctj-friend__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ctj-friend__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ctj-friend__main strong {
    font-size: 15px;
    font-weight: 700;
    color: #223c4d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctj-friend__main small {
    font-size: 12px;
    color: rgba(70, 100, 111, 0.66);
}

.ctj-friend__chevron {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: rgba(70, 100, 111, 0.4);
}

/* ---------- 月历 / 日志容器微调 ---------- */
.ctj-travel-page {
    padding: 0;
}

.ctj-diary-page {
    padding: 0;
}

/* ---------- 暗色模式 ---------- */
html[data-appearance="dark"] .ctj-root {
    background:
        radial-gradient(circle at 18% 12%, rgba(52, 70, 78, 0.55), transparent 44%),
        linear-gradient(180deg, #101316 0%, #16191d 100%);
}

html[data-appearance="dark"] .ctj-head {
    background: rgba(24, 28, 31, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark"] .ctj-head h2 {
    color: rgba(245, 248, 250, 0.92);
}

html[data-appearance="dark"] .ctj-back,
html[data-appearance="dark"] .ctj-refresh {
    background: rgba(44, 50, 54, 0.86);
    color: rgba(225, 238, 244, 0.86);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
}

html[data-appearance="dark"] .ctj-intro,
html[data-appearance="dark"] .ctj-empty {
    color: rgba(235, 242, 245, 0.52);
}

html[data-appearance="dark"] .ctj-friend {
    background: rgba(38, 41, 42, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    color: rgba(245, 248, 250, 0.92);
}

html[data-appearance="dark"] .ctj-friend__avatar {
    color: rgba(190, 230, 245, 0.95);
    background: rgba(52, 70, 78, 0.5);
    border-color: rgba(190, 230, 245, 0.18);
}

html[data-appearance="dark"] .ctj-friend__main strong {
    color: rgba(245, 248, 250, 0.94);
}

html[data-appearance="dark"] .ctj-friend__main small {
    color: rgba(235, 242, 245, 0.55);
}

html[data-appearance="dark"] .ctj-friend__chevron {
    color: rgba(235, 242, 245, 0.36);
}

/* ---------- 兼容兜底：不支持 backdrop-filter ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ctj-head {
        background: rgba(246, 249, 252, 0.97);
    }
    .ctj-friend {
        background: rgba(255, 255, 255, 0.95);
    }
    html[data-appearance="dark"] .ctj-head {
        background: rgba(24, 28, 31, 0.97);
    }
    html[data-appearance="dark"] .ctj-friend {
        background: rgba(44, 48, 50, 0.97);
    }
}

/* ==========================================================================
   记忆管理及其全部子功能界面：滚动条隐形（保留滚动能力）
   覆盖范围：
   - .mm-body                                记忆管理主面板
   - .ctj-body / 旅行日记正文与日志页        旅行日记独立面板
   - .wechat-memory-*                        记忆日记（原记忆空间）列表页/日历页/好友勾选器/日记弹窗
   - .game-handbook-*                        游戏手札列表与手札详情
   - .vmg-body / .vmg-confirm                向量记忆面板（JS 注入样式已含 scrollbar-width:none，
                                             此处补齐 ::-webkit-scrollbar 兜底）
   ========================================================================== */
.mm-body,
.ctj-body,
.ctj-body .friend-phone-wechat-travel-diary-body,
.wechat-memory-library-body,
.wechat-memory-space-body,
.wechat-memory-friend-selector-body,
.wechat-memory-diary-content,
.game-handbook-body,
.game-handbook-note-detail,
.vmg-body,
.vmg-confirm {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mm-body::-webkit-scrollbar,
.ctj-body::-webkit-scrollbar,
.ctj-body .friend-phone-wechat-travel-diary-body::-webkit-scrollbar,
.wechat-memory-library-body::-webkit-scrollbar,
.wechat-memory-space-body::-webkit-scrollbar,
.wechat-memory-friend-selector-body::-webkit-scrollbar,
.wechat-memory-diary-content::-webkit-scrollbar,
.game-handbook-body::-webkit-scrollbar,
.game-handbook-note-detail::-webkit-scrollbar,
.vmg-body::-webkit-scrollbar,
.vmg-confirm::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}