/* ============================================================
   css/panels/panels-my-home.css — 「我的」私人空间首页（UI 3.0 · V9 生产替换）
   ============================================================
   这一份只负责两件事：
   ① 首页 #sub-home 的空间语言（身份区 + 三个核心入口 + 管理区）；
   ② 「我的」这一层的 Motion System 3.0 生命周期：
      · Home → 收藏 / 百科 / 资料 / 设置 = Example 10（Secondary Sheet）
      · Home → 记忆库                    = Example 03（空间级切换，见 core.css 的 .space-exit/.space-enter）
      · 首页普通按钮                     = Example 03 Soft（按压感）
      · 底部导航 Dock                     = Example 06 R4（core.css 的 .nav-dock-ind）
   颜色一律走当前 Kstar 主题变量，不写死 preview 的色值。
   动画只动 transform / opacity / filter，不出现 transition: all。
   页面高度按安全区自适应，绝不写死高度。
   ============================================================ */

/* ---------- #tab-my 作为「我的」这一层的定位基准 ---------- */
#tab-my { overflow: hidden; }

/* ============================================================
   一、首页：私人空间（Example 10 的底层页面）
   ============================================================ */
/* 身份区后退时的空间关系：底色让出一层（V9 的「纸面」感来自主题变量，不硬拷色值） */
#sub-home {
    position: relative;
    z-index: 1;
    padding: 0;              /* 首页自己的留白在 .myh-scroll 上（16px 边距会把卡片压窄） */
    transform: translateY(0) scale(1);
    transform-origin: 50% 8%;
    filter: brightness(1);
    transition:
        transform 0.50s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.38s ease;
}
/* Example 10：打开第二层空间时，首页只后退一点，不消失 */
#sub-home.is-deep {
    transform: translateY(-9px) scale(0.982);
    filter: brightness(0.97);
}

.myh-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* 竖向留白按 360~430 收着给：这一页要在常见机身上「一眼看到三个入口 + 管理区」，
       宁可靠滚动看全，也不要把第一屏撑成半张空卡 */
    padding: 16px 20px calc(var(--nav-height) + var(--safe-bottom) + 30px + var(--kbd-h, 0px));
    display: flex;
    flex-direction: column;
}

/* ---------- Identity ---------- */
.myh-identity {
    padding: 24px 20px 24px;
    border-radius: 32px;
    background: var(--surface);
    border: 1px solid var(--border-faint);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.myh-identity-label {
    font-family: Georgia, "Songti SC", serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--text-muted);
}
.myh-avatar {
    width: 86px;
    height: 86px;
    margin: 18px auto 14px;
    border-radius: 50%;
    background: var(--accent-gradient);
    border: 4px solid var(--surface-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 26px var(--accent-glow);
}
.myh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.myh-name {
    font-size: 23px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.myh-desc {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ---------- 分区小标题 ---------- */
.myh-section-label {
    margin: 24px 6px 13px;
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

/* ---------- 三个核心私人空间入口 ----------
   不做「三张同尺寸同模板卡」：收藏 / 百科是并列的轻入口，
   记忆库横向占满、层级更高（总策划 §7.3）。 */
.myh-spaces {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.myh-space-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    min-height: 114px;
    padding: 17px 16px;
    text-align: left;
    border: 1px solid var(--border-faint);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.18s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}
.myh-space-btn.is-wide {
    grid-column: span 2;
    min-height: 100px;
    background: linear-gradient(140deg, var(--accent-light), var(--surface) 72%);
}
.myh-space-btn:active {
    transform: scale(0.972);
    box-shadow: var(--shadow-xs);
}
.myh-space-zh {
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.myh-space-line {
    width: 24px;
    height: 1px;
    background: var(--accent);
    opacity: 0.55;
    transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.myh-space-btn:active .myh-space-line { width: 34px; }
.myh-space-tip {
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- 管理区（资料 / 设置）---------- */
.myh-manage {
    margin-top: 22px;
    padding: 6px 22px;
    border-radius: 26px;
    background: var(--surface);
    border: 1px solid var(--border-faint);
    box-shadow: var(--shadow-sm);
}
.myh-manage-row {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-faint);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, opacity 0.24s ease;
}
.myh-manage-row:last-child { border-bottom: none; }
.myh-manage-row:active { transform: scale(0.985); opacity: 0.82; }
.myh-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.4px solid var(--text-muted);
    border-bottom: 1.4px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.myh-manage-row:active .myh-chevron {
    transform: rotate(-45deg) translateX(2px);
}

/* ============================================================
   二、二级层（Secondary Sheet · Example 10）
   ============================================================ */
#tab-my .my-sec {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 28px 28px 0 0;
    background: var(--bg-chat);
    box-shadow: 0 -18px 50px rgba(80, 65, 55, 0.13);
    display: block;                 /* 二级层是整块空间，不参与首页那套 display:flex 纵向布局 */
    transform: translateY(104%);
    opacity: 0.9;
    pointer-events: none;
    overflow-y: auto;
    transition: transform 0.54s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease;
}
#tab-my .my-sec.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* 层内部各模块自己的显示口径（设置的 #settings-sub-views 等）由内联样式控制，
   这里不去动它们：二级层只负责自己这一整块的进场 / 退场 */
/* 退场：不再吃指针（方向与进场相反） */
#tab-my .my-sec.is-closing { pointer-events: none; }

/* 让底层让出的那点空间也能被看到（Example 10 的 scrim） */
#my-sec-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s ease;
}
#my-sec-scrim.is-open { opacity: 0.06; }

/* ============================================================
   二·B 二级页统一外壳（唯一事实定义 · 总策划 §8 / §12.1 · W1）
   ------------------------------------------------------------
   结构固定为五段，收藏 / 百科 / 资料 / 设置四个二级空间共用这一套：
       Safe Top（由 #app 的 padding-top 统一承担，这里绝不重复加）
       → 返回 / 标题 / 可选动作 → 分隔线 → 滚动正文（.mysec-body）→ Safe Bottom
   硬规则：
     ① 标题相对整个 Header 几何居中：三列 1fr auto 1fr，左右动作位对称；
     ② Header 固定、只有 .mysec-body 滚（滚动职责只有一处）；
     ③ 正文底部必须让出底栏 + 底部安全区，正文不许被底栏压住。
   谁都不许为某个二级页再复制一份 Header / 滚动容器。
   ============================================================ */
#tab-my .mysec-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* 滚动的只有正文，Header 不跟着滚 */
    padding: 0;                    /* 外壳自带留白（Header 顶边贴住圆角、正文自己留边），
                                      否则会带上 .sub-tab-panel 的 16px 内边距 → Header 四周多出一圈白边 */
}
.mysec-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.mysec-back {
    justify-self: start;
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: inherit;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.16s ease;
}
.mysec-back:hover { background: rgba(201, 168, 168, 0.12); color: var(--rose, #C9A8A8); }
/* Example 03 Soft：轻按压感 */
.mysec-back:active { transform: scale(0.92); }
.mysec-back svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.mysec-title {
    justify-self: center;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 可选动作位（如设置子页的「保存」）：没有动作时这一列留空，标题照样居中 */
.mysec-action {
    justify-self: end;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.mysec-action:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.mysec-action:active { transform: scale(0.95); }
.mysec-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px calc(var(--nav-height) + var(--safe-bottom) + 28px + var(--kbd-h, 0px));
}

/* ============================================================
   三、首页 → 记忆库（Example 03 空间级切换：我的左移退场，记忆库从右侧展开）
   ------------------------------------------------------------
   位移量刻意用固定像素而不是 translateX(100%)：整块面板被推出一屏宽会在
   根节点上撑出横向滚动条 / 导致「页面被压缩一下」，而 Example 03 也明确
   「位移要轻、层级关系不能被放大」——这里用 38px + 极轻缩放表达空间关系。
   ============================================================ */
.tab-panel.space-exit {
    transform: translateX(-18%) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.tab-panel.space-enter {
    transform: translateX(38px) scale(0.97);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.tab-panel.space-enter.is-arriving {
    transform: translateX(0) scale(1);
    opacity: 1;
}
/* 反向：从记忆库退回「我的」——记忆库向右退出（见下方 #tab-memory 那一组），我的从左侧回到原位。
   两边的**基态都必须显式写死**（transform/opacity 的确定值）：CSS 过渡只在两个确定值之间成立，
   `.space-back` 若撒手回 `transform:none` 就只会在结尾瞬跳，中间态根本不存在。 */
#tab-my.tab-panel {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
#tab-my.tab-panel.space-back {
    transform: translateX(-38px) scale(0.97);
    opacity: 0;
    pointer-events: none;
}
/* ★ 特指度必须对齐：基态是 `#tab-my.tab-panel`（1,1,0），所以退场态也得写成 `#tab-my.tab-panel.space-exit`，
   否则基态（transform:translateX(0) / opacity:1）会整条压过 `.tab-panel.space-exit`（0,2,0）——
   「我的」在正向切换时一动不动、只剩一个指针穿透的副作用（位移/淡出全被吃掉）。 */
#tab-my.tab-panel.space-exit {
    transform: translateX(-18%) scale(0.98);
    opacity: 0;
    pointer-events: none;
}
/* 记忆库这一侧同理：它的基态也要显式写死，正向进场（.space-enter → .is-arriving）才是真过渡。
   ★ 特指度必须对齐：基态是 `#tab-memory.tab-panel`（1,1,0），所以位移态也得写成 `#tab-memory.tab-panel.xxx`，
     否则基态会压过位移态 —— 记忆库在进场 / 退场时一动不动（这正是「反向看起来是瞬切」的真根因之一）。 */
#tab-memory.tab-panel {
    transform: translateX(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
#tab-memory.tab-panel.space-enter {
    transform: translateX(38px) scale(0.97);
    opacity: 0;
}
#tab-memory.tab-panel.space-enter.is-arriving {
    transform: translateX(0) scale(1);
    opacity: 1;
}
#tab-memory.tab-panel.space-return {
    transform: translateX(38px) scale(0.97);
    opacity: 0;
    pointer-events: none;
}
/* 退场过渡只在「记忆库真的还看得见」时才挂上（.is-leaving 由 mySpaceBackFromMemory 在同一帧加），
   避免 display:none 状态下白挂过渡 */
.tab-panel.space-return.is-leaving {
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
/* 反向那一刻，目标面板一就位，源面板的 .active 就被摘掉了（display:none）——
   不给它留场，它就会在动画第一帧凭空消失，用户看到的还是「瞬切」。
   .space-out 只做一件事：这一帧里把退场中的记忆库按原样留在场上（盖在上层，只负责退走）。 */
.tab-panel.space-out {
    display: flex !important;
    z-index: 3;
}
/* ★ 退场面板必须**脱离 flex 列布局**：#tab-contents 是 flex 列容器（core.css），
   每个 .tab-panel 都是 flex:1 —— 退场面板只要还留在流里，就会和刚进场的面板**各分一半高度**，
   甲方实锤的「打开/关闭记忆库时整页先出现在下半屏、再闪到正确全屏位置」就是这个
   （复现页 _shots/space-switch-check.html 实测 394 / 788 = 每边正好一半）。
   inset:0 贴的是 #tab-contents（它自带 position:relative），也就是进水前面板原本占的那一格
   —— 不碰顶栏、不碰底部导航，退场期间画面不会少一块。
   ★ 特指度必须写成 ID：`#tab-my { position: relative }`（core.css，1,0,0）会把上面那条（0,2,0）的
     position 整条压掉 —— 实测「加了 absolute 却还是量出 394、computed position 仍是 relative」就是这个。
     本文件在 .space-exit / .space-return 上已经踩过同一个坑，口径一致。 */
#tab-my.tab-panel.space-out,
#tab-memory.tab-panel.space-out {
    position: absolute;
    inset: 0;
}

/* ============================================================
   四、底部导航 Dock 指示器（Example 06 R4）
   ============================================================ */
#nav-dock-ind {
    position: absolute;
    top: 6px;
    left: 0;
    width: 56px;
    height: 34px;
    border-radius: 24px;
    background: var(--accent-light);
    opacity: 0;
    transform: translateX(0) scale(0.8);
    pointer-events: none;
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease;
}
#nav-dock-ind.is-show { opacity: 1; }

/* ============================================================
   五、窄屏 / 大屏（360~430，含 <370 与 400+）与减少动效
   ============================================================ */
@media (max-width: 374px) {
    .myh-scroll { padding-left: 16px; padding-right: 16px; }
    .myh-identity { padding: 20px 16px 20px; border-radius: 28px; }
    .myh-avatar { width: 76px; height: 76px; margin: 14px auto 12px; }
    .myh-name { font-size: 22px; }
    .myh-space-btn { padding: 18px 15px; border-radius: 25px; }
    .myh-space-zh { font-size: 17px; }
    .myh-manage { padding: 4px 18px; }
}
@media (min-width: 400px) {
    .myh-scroll { padding-left: 24px; padding-right: 24px; }
    .myh-identity { padding: 34px 26px 36px; }
    .myh-space-btn.is-wide { min-height: 116px; }
}

/* 减少动效：取消大位移与装饰动效，功能逻辑一字不改 */
@media (prefers-reduced-motion: reduce) {
    #sub-home,
    #tab-my .my-sec,
    #my-sec-scrim,
    #nav-dock-ind,
    #tab-my.tab-panel,
    #tab-memory.tab-panel,
    .tab-panel.space-exit,
    .tab-panel.space-enter,
    .tab-panel.space-return,
    #tab-my.tab-panel.space-back {
        transition: none;
    }
    /* 二级页外壳：只留按压反馈的位移，不留过渡 */
    .mysec-back,
    .mysec-action { transition: none; }
    #sub-home.is-deep { transform: none; filter: brightness(0.985); }
    #tab-my .my-sec { transform: none; opacity: 0; }
    #tab-my .my-sec.is-open { opacity: 1; }
    .tab-panel.space-exit,
    .tab-panel.space-enter,
    .tab-panel.space-return,
    #tab-my.tab-panel.space-back { transform: none; opacity: 1; pointer-events: auto; }
}