/* ===== 角色相册系统样式 ===== */

/* Layer 容器 */
#layer-photo-album {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #f2f2f2; z-index: 5000;
    transform: translateX(100%); transition: transform .3s ease;
    display: flex; flex-direction: column;
}
#layer-photo-album.show { transform: translateX(0); }

/* 导航栏 — [FIX-弹性保护带] padding-top适配状态栏 */
.pa-nav { display:flex; align-items:center; padding:10px 12px; padding-top: var(--guard-top, env(safe-area-inset-top, 10px)); background:#fff; border-bottom:1px solid #eee; min-height:44px; flex-shrink:0; box-sizing: border-box; }
.pa-nav-back { font-size:20px; color:#333; padding:6px 10px; cursor:pointer; }
.pa-nav-title { flex:1; text-align:center; font-size:17px; font-weight:600; color:#333; }
.pa-nav-action { font-size:14px; color:#576b95; padding:6px 10px; cursor:pointer; }
.pa-nav-help { font-size:18px; color:#999; padding:6px 6px; cursor:pointer; }
.pa-nav-help:active { color:#576b95; }

/* 内容区 */
.pa-content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:20px; }

/* ===== 第1层：联系人列表 ===== */
.pa-contact-list { padding:12px; }
.pa-section-title { font-size:13px; color:#999; padding:8px 4px; font-weight:500; }
.pa-contact-card {
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    background:#fff; border-radius:12px; margin-bottom:8px; cursor:pointer;
    transition: background .15s;
}
.pa-contact-card:active { background:#f5f5f5; }
.pa-contact-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.pa-contact-info { flex:1; min-width:0; }
.pa-contact-name { font-size:16px; font-weight:600; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-contact-stat { font-size:12px; color:#999; margin-top:2px; }
.pa-contact-arrow { color:#ccc; font-size:14px; }
.pa-empty-hint { text-align:center; padding:60px 20px; color:#bbb; font-size:14px; }
.pa-empty-hint i { font-size:48px; display:block; margin-bottom:16px; color:#ddd; }

/* ===== 第2层：相册列表 ===== */
.pa-albums-header {
    display:flex; align-items:center; gap:12px; padding:20px 16px;
    background:#fff; margin:12px; border-radius:12px;
}
.pa-albums-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.pa-albums-name { font-size:18px; font-weight:600; color:#333; }
.pa-albums-count { font-size:12px; color:#999; }

.pa-album-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 12px; }
.pa-album-card {
    background:#fff; border-radius:12px; overflow:hidden; cursor:pointer;
    transition: transform .15s;
}
.pa-album-card:active { transform:scale(0.97); }
.pa-album-cover {
    width:100%; aspect-ratio:1; object-fit:cover; background:#f0f0f0;
    display:flex; align-items:center; justify-content:center; position:relative;
}
.pa-album-cover img { width:100%; height:100%; object-fit:cover; }
.pa-album-cover .pa-cover-placeholder { font-size:40px; color:#ddd; }
.pa-album-badge {
    position:absolute; top:8px; right:8px; font-size:10px; padding:2px 8px;
    border-radius:10px; color:#fff; font-weight:500;
}
.pa-badge-shared { background:linear-gradient(135deg,#667eea,#764ba2); }
.pa-badge-private { background:rgba(0,0,0,0.4); }
.pa-album-info { padding:10px 12px; }
.pa-album-name { font-size:14px; font-weight:600; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-album-meta { font-size:11px; color:#999; margin-top:2px; display:flex; gap:8px; }

.pa-add-album-card {
    background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center;
    min-height:180px; cursor:pointer; border:2px dashed #ddd; transition: border-color .2s;
}
.pa-add-album-card:hover { border-color:#576b95; }
.pa-add-album-inner { text-align:center; color:#999; }
.pa-add-album-inner i { font-size:32px; display:block; margin-bottom:8px; }

/* 分类标签栏 */
.pa-tag-bar { display:flex; gap:8px; padding:12px; overflow-x:auto; flex-shrink:0; }
.pa-tag-bar::-webkit-scrollbar { display:none; }
.pa-tag { padding:6px 14px; border-radius:20px; font-size:13px; background:#fff; color:#666; cursor:pointer; white-space:nowrap; border:1px solid #eee; }
.pa-tag.active { background:#576b95; color:#fff; border-color:#576b95; }

/* ===== 第3层：照片详情 ===== */
.pa-photo-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px; padding:0 12px; }
.pa-photo-item { position:relative; aspect-ratio:1; overflow:hidden; border-radius:4px; cursor:pointer; }
.pa-photo-item img { width:100%; height:100%; object-fit:cover; }
.pa-photo-owner-tag {
    position:absolute; bottom:4px; left:4px; font-size:10px; padding:1px 6px;
    border-radius:8px; color:#fff; background:rgba(0,0,0,0.5);
}
.pa-photo-caption-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:#576b95; }

/* 照片上传区 */
.pa-upload-bar {
    display:flex; gap:10px; padding:12px; background:#fff; border-top:1px solid #eee;
    flex-shrink:0; align-items:center;
}
.pa-upload-btn {
    flex:1; padding:10px; border-radius:10px; border:none; font-size:14px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
}
.pa-upload-btn-user { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.pa-upload-btn-contact { background:linear-gradient(135deg,#f093fb,#f5576c); color:#fff; }

/* 照片预览弹窗 */
.pa-preview-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.92);
    z-index:5100; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.pa-preview-img { max-width:95%; max-height:70vh; object-fit:contain; border-radius:8px; }
.pa-preview-caption { color:#fff; font-size:14px; padding:12px 20px; text-align:center; max-width:90%; }
.pa-preview-owner { color:rgba(255,255,255,0.6); font-size:12px; margin-top:4px; }
.pa-preview-close { position:absolute; top:16px; right:16px; color:#fff; font-size:24px; cursor:pointer; padding:8px; }
.pa-preview-actions { display:flex; gap:20px; margin-top:16px; }
.pa-preview-action { color:rgba(255,255,255,0.8); font-size:13px; cursor:pointer; padding:6px 12px; }
.pa-preview-action:hover { color:#fff; }

/* 创建相册弹窗 */
.pa-modal-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);
    z-index:5200; display:flex; align-items:center; justify-content:center; padding:20px;
}
.pa-modal {
    background:#fff; border-radius:16px; width:100%; max-width:360px; padding:24px 20px;
    max-height:80vh; overflow-y:auto;
}
.pa-modal-title { font-size:18px; font-weight:600; text-align:center; margin-bottom:20px; color:#333; }
.pa-modal-field { margin-bottom:16px; }
.pa-modal-label { font-size:13px; color:#666; margin-bottom:6px; display:block; }
.pa-modal-input {
    width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px;
    font-size:14px; outline:none; box-sizing:border-box;
}
.pa-modal-input:focus { border-color:#576b95; }
.pa-modal-select { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; font-size:14px; background:#fff; }
.pa-modal-tags { display:flex; flex-wrap:wrap; gap:8px; }
.pa-modal-tag {
    padding:6px 14px; border-radius:16px; font-size:13px; border:1px solid #ddd;
    cursor:pointer; background:#fff; color:#666;
}
.pa-modal-tag.selected { background:#576b95; color:#fff; border-color:#576b95; }
.pa-modal-btns { display:flex; gap:10px; margin-top:20px; }
.pa-modal-btn {
    flex:1; padding:12px; border:none; border-radius:10px; font-size:15px; cursor:pointer;
}
.pa-modal-btn-cancel { background:#f2f2f2; color:#666; }
.pa-modal-btn-ok { background:#576b95; color:#fff; }

/* 上传备注弹窗 */
.pa-caption-modal { padding:20px; }
.pa-caption-textarea {
    width:100%; height:80px; border:1px solid #ddd; border-radius:10px;
    padding:10px; font-size:14px; resize:none; outline:none; box-sizing:border-box;
}
.pa-caption-textarea:focus { border-color:#576b95; }

/* 聊天可用标记 */
.pa-chat-toggle { display:flex; align-items:center; gap:8px; padding:8px 0; }
.pa-chat-toggle label { font-size:13px; color:#666; }

/* ===== 联系人搜索框 ===== */
.pa-search-bar { position:relative; margin:4px 4px 10px; }
.pa-search-bar i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#bbb; font-size:13px; }
.pa-search-bar input {
    width:100%; padding:9px 12px 9px 34px; border:1px solid #e5e5e5; border-radius:20px;
    font-size:14px; outline:none; box-sizing:border-box; background:#fff;
}
.pa-search-bar input:focus { border-color:#576b95; }

/* ===== 封面选择网格（编辑相册） ===== */
.pa-cover-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; max-height:180px; overflow-y:auto; }
.pa-cover-pick { aspect-ratio:1; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; position:relative; }
.pa-cover-pick img { width:100%; height:100%; object-fit:cover; display:block; }
.pa-cover-pick.selected { border-color:#576b95; }
.pa-cover-pick.selected::after { content:'\2713'; position:absolute; top:2px; right:4px; color:#576b95; font-weight:700; font-size:13px; text-shadow:0 0 3px #fff; }

/* ===== 照片多选 ===== */
.pa-photo-item.pa-selected img { opacity:0.6; }
.pa-select-mark {
    position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%;
    background:rgba(255,255,255,0.85); border:1px solid #ccc; display:flex; align-items:center; justify-content:center;
    font-size:10px; color:transparent;
}
.pa-select-mark.checked { background:#576b95; border-color:#576b95; color:#fff; }
.pa-select-bar { justify-content:space-between; }

/* ===== 预览左右切换 / 计数 ===== */
.pa-preview-nav {
    position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
    border-radius:50%; background:rgba(255,255,255,0.12); color:#fff; display:flex;
    align-items:center; justify-content:center; font-size:20px; cursor:pointer; z-index:5110;
}
.pa-preview-prev { left:12px; }
.pa-preview-next { right:12px; }
.pa-preview-count { color:rgba(255,255,255,0.85); font-size:13px; margin-top:10px; }