/* ============================================================
   css/panels/panels-profile.css — 我的资料（UI 3.0 三区块）
   结构依据：母体 docs/design/KSTAR-PROFILE-V2-edit-preview.html
     我的形象 → 基础资料 → 我的世界（.pf-block / .pf-card / .pf-field 那一族见本文件下半部分）
   设计系统: 暖米纸 · 干燥玫瑰强调 · 衬线为主 · 字段靠细下划线分层 · 零 emoji · 禁系统默认框
   ============================================================ */

/* ===== 标题区 =====
   ★ W1（总策划 §13.2⑤）：旧 Hero（.prof-hero / -en / -zh 那一整块花字大标题）已删除——
     它把「资料」做成了第二个主页的视觉重心，与二级页面「这里是管理区、不是首页」的定位相反。
     现在标题交给统一外壳的 Header（.mysec-head 里的「我的资料」），页面正文直接进入内容。 */

/* ===== 身份带（正文第一块 · 母体 .header）=====
   ★ PA2A：身份带就是正文第一张纸本身（母体是「.header 先出现，再是三个 .section」），
     所以它自己不再套第二层容器，也不许被任何区块标题压在下面
     （旧版自带暖色渐变底 + 大圆角 + 暖阴影，套在纸上就是「卡里套卡」）；
     版式仍照母库 KSTAR-PROFILE-V2-edit-preview 的 .header：圆形头像居中 + 名字 + 一句描述。 */
#sub-profile .prof-identity {
    padding: 20px 16px 18px;
    text-align: center;
}
.pi-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    margin: 0 auto;
    background: var(--gradient-warm), var(--accent-light);
    background-size: cover; background-position: center;
    border: 3px solid var(--surface-solid);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--text-muted);
    overflow: hidden;
}
.pi-name {
    margin-top: 13px;
    font-size: 20px; letter-spacing: 0.06em;
    color: var(--text-primary);
    word-break: break-word;
}
.pi-desc {
    margin-top: 7px;
    font-size: 12.5px; line-height: 1.85;
    color: var(--text-secondary, #98847a);
    word-break: break-word;
}

/* ============================================================
   ★ PA2A（TASK-UI3-PRODADOPT-002-A）：三个区块
   结构依据：母体 docs/design/KSTAR-PROFILE-V2-edit-preview.html
     我的形象 → 基础资料 → 我的世界
   旧的「分节小标题（中文 + 英文花字 + 一条金线）+ 一格一个方框输入」整块退役：
     现在一段 = 一句大白话说明 + 一张纸；纸内字段靠一条细下划线分层，四周不再有方框边界。
   ============================================================ */
/* 正文留白：底部让开底栏 + 安全区 + 键盘高度（写成 id + class，确保压过外壳 .mysec-body
   那条同权重的默认留白，不靠加载顺序赌谁在后） */
#sub-profile .pf-space { padding: 16px 16px calc(var(--nav-height) + var(--safe-bottom) + 28px + var(--kbd-h, 0px)); }

/* 段落标题：小英文（装饰）→ 中文标题 → 一句说明 */
.pf-block { margin-bottom: 26px; }
.pf-block:last-child { margin-bottom: 4px; }
.pf-block-head { padding: 0 2px 10px; }
.pf-block-en {
    display: block;
    font-family: var(--font-decorative); font-style: italic;
    font-size: 10.5px; letter-spacing: 0.18em; color: var(--gold); opacity: 0.8;
    text-transform: uppercase;
}
.pf-block-zh {
    margin: 4px 0 0;
    font-size: 17px; font-weight: 600; letter-spacing: 0.06em;
    color: var(--text-primary);
}
.pf-block-desc {
    margin: 6px 0 0;
    font-size: 12.5px; line-height: 1.8; color: var(--text-muted);
}

/* 一张纸：同一底色 / 同一圆角 / 同一暖阴影（横向内边距负责把下划线收进来） */
.pf-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 2px 16px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-xs);
}

/* 身份带那张纸的留白由 #sub-profile .prof-identity 给（见文件开头那一段），这里不再单列一条。 */

/* 字段：标签在上、控件在下；分隔靠控件自己那条细下划线（不是一个个方框） */
.pf-field { position: relative; padding: 11px 0 9px; }
.pf-row { display: flex; gap: 18px; }
.pf-row .pf-field { flex: 1; min-width: 0; }
.pf-half { flex: 1; min-width: 0; }
.pf-label {
    display: block;
    font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-muted);
}
.pf-input, .pf-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 0 0 6px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    -webkit-appearance: none;
    appearance: none;
    transition: border-bottom-color 0.24s ease;
}
.pf-input::placeholder, .pf-textarea::placeholder { color: var(--text-muted); opacity: 0.72; }
.pf-input:focus, .pf-textarea:focus { border-bottom-color: var(--rose); }
.pf-textarea { resize: none; min-height: 42px; line-height: 1.7; }
.pf-hint { margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--text-muted); opacity: 0.85; }

/* ===== 自定义 Select（同一个下划线语言，不用系统默认下拉） ===== */
.pf-select {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; box-sizing: border-box;
    margin-top: 5px; padding: 0 0 6px;
    border-bottom: 1px solid var(--border);
    font-size: 15px; font-family: inherit; color: var(--text-primary);
    cursor: pointer;
    transition: border-bottom-color 0.24s ease;
    -webkit-tap-highlight-color: transparent;
}
.pf-select:active { border-bottom-color: var(--rose); }
.pf-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-select-chevron {
    flex-shrink: 0; display: flex; align-items: center;
    margin-left: 8px; color: var(--text-muted);
}
.pf-select-drop {
    position: absolute; z-index: 2000;
    left: 0; right: 0; margin-top: 4px;
    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);
    overflow: hidden;
    animation: pfDropIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes pfDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pf-select-opt {
    padding: 11px 14px; font-size: 14px; cursor: pointer;
    color: var(--text-primary); font-family: inherit;
    border-bottom: 1px solid var(--border-faint);
    transition: background 0.12s ease, color 0.12s ease;
}
.pf-select-opt:last-child { border-bottom: none; }
.pf-select-opt:hover { background: var(--rose-light); color: var(--accent-rose); }
.pf-select-opt:active { background: rgba(201,168,168,0.2); }

/* ===== 注入开关 + 保存 ===== */
.pf-card-toggle { margin-top: 12px; padding: 14px 16px; }
.pf-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pf-toggle-text { min-width: 0; }
.pf-toggle-label {
    display: block;
    font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-primary);
}
.pf-toggle-hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.65; color: var(--text-muted); }
.pf-save-btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 13px;
    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: 1.5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), var(--shadow-sm), var(--shadow-glow);
    /* ★ 原来写 transition: all（会连带把布局属性也做过渡）→ 收成只做位移与阴影 */
    transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
}
.pf-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), var(--shadow-md), var(--shadow-glow);
}
.pf-save-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

/* ===== 头像历史（保留并增强） ===== */
.avatar-history-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 8px 12px;
    background: var(--surface-solid);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    border: 1px solid rgba(0,0,0,0.03);
}
.my-avatar-row {
    margin-top: 0;
    margin-bottom: 14px;
}
/* ★ PA2A：头像预设那一排现在住在「我的形象」那张普通纸里，所以自己不再带第二个容器
   （否则就是卡里套卡）。只对 #sub-profile 生效——同一套 .avatar-history-row 还被
   另一个面板（index.html 里的 #avatar-history-row）用着，那边不归本任务管，不许跟着变。 */
#sub-profile .pf-block .avatar-history-row {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.avatar-hist-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    flex-basis: 100%;
    margin-bottom: 4px;
}
.avatar-hist-list {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;
}
.avatar-hist-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    max-width: 56px;
}
.avatar-hist-item {
    position: relative; width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px; cursor: pointer;
    border: 2px solid var(--border);
    box-shadow: var(--shadow-xs);
    /* ★ W1：只过渡位移 / 描边 / 阴影（原为 transition: all） */
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.avatar-hist-item:hover {
    border-color: var(--accent-rose);
    box-shadow: var(--shadow-sm), var(--shadow-glow);
    transform: translateY(-2px);
}
.avatar-hist-item:active { transform: scale(0.94); }
.avatar-hist-item.current {
    border-color: var(--accent-rose);
    box-shadow: 0 0 0 3px var(--accent-rose-light), var(--shadow-sm);
}
.avatar-hist-thumb {
    width: 100%; height: 100%; object-fit: cover;
    overflow: hidden; border-radius: 8px;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.avatar-hist-cur {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -7px; padding: 1px 6px;
    font-size: 8px; color: #fff; background: var(--accent-rose);
    border-radius: 8px; white-space: nowrap; pointer-events: none;
    box-shadow: var(--shadow-xs);
    /* 换头像时「当前」标记是换位上去的 → 给它一点到位的反馈（keyframes 里必须带上 -50% 居中位移） */
    animation: histCurIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes histCurIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.avatar-hist-desc {
    display: block; max-width: 56px; overflow: hidden;
    font-size: 9px; color: var(--text-muted); text-align: center;
    cursor: pointer; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis;
    transition: color 0.15s ease;
}
.avatar-hist-desc:hover { color: var(--accent-rose); }
.avatar-hist-item .avatar-hist-del {
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.avatar-hist-del {
    position: absolute; top: -5px; right: -5px;
    width: 13px; height: 13px; min-width: 13px; min-height: 13px;
    border-radius: 50%;
    background: var(--surface-solid); 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.6; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    box-shadow: var(--shadow-xs);
    -webkit-tap-highlight-color: transparent;
}
.avatar-hist-item:hover .avatar-hist-del { opacity: 1; }
.avatar-hist-del:active { transform: scale(0.9); }
.avatar-hist-del:hover { background: var(--accent-rose); color: #fff; border-color: var(--accent-rose); opacity: 1; }
.avatar-hist-empty {
    font-size: 11px; color: var(--text-muted); font-style: italic;
}
.avatar-hist-add {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    border: 1.5px dashed var(--border); background: transparent;
    color: var(--text-muted); font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    /* ★ W1：只过渡位移 / 描边 / 底色（原为 transition: all） */
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    padding: 0; line-height: 1;
}
.avatar-hist-add:hover {
    border-color: var(--accent-rose); color: var(--accent-rose);
    background: var(--rose-light);
}

/* ============================================================
   头像预设的增 / 删 / 换 = 集合内回流（Motion System 3.0 §8 · Example 11）
   ------------------------------------------------------------
   一个格子动了，旁边的格子要「滑」到新位置（不是整块重画、跳一下）：
     · 已有格子：FLIP —— JS 记下前后位置差，先把格子摆回旧的相对位置（inline，无过渡），
       逼一次重排后再放行 → 由 CSS 这条过渡把它滑回自然位置；
     · 新加进来的：淡入 + 从上方 10px 落下（0.46s）；
     · 被删掉的：淡出 + 上移轻缩（0.30s），走完才从 DOM 收掉。
   只动 transform / opacity；reduced-motion 下全部关掉（瞬间到位）。
   ============================================================ */
.avatar-hist-wrap { transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1); }
.avatar-hist-wrap.is-entering { animation: avatarItemEnter 0.46s cubic-bezier(0.16, 1, 0.3, 1) both; }
.avatar-hist-wrap.is-leaving { animation: avatarItemLeave 0.30s ease both; pointer-events: none; }
@keyframes avatarItemEnter {
    from { opacity: 0; transform: translateY(-10px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes avatarItemLeave {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-10px) scale(0.985); }
}
@media (prefers-reduced-motion: reduce) {
    .avatar-hist-wrap { transition: none; }
    .avatar-hist-wrap.is-entering,
    .avatar-hist-wrap.is-leaving { animation: none; }
    .avatar-hist-cur { animation: none; }
    .pf-save-btn,
    .pf-input,
    .pf-textarea,
    .pf-select,
    .avatar-hist-item,
    .avatar-hist-add,
    .avatar-hist-del { transition: none; }
}