/* ========================================
   contacts.css — 通讯录页 & 档案页样式
   ======================================== */

/* ── 搜索栏 ────────────────────────────── */
.contacts-search-bar {
    background-color: #EDEDED;
    padding: 8px 12px;
}
.contacts-search-inner {
    background-color: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.contacts-search-inner input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    background: transparent;
    color: #000;
}

/* ── 功能入口区 ────────────────────────── */
.contacts-func-section {
    background: #fff;
    margin-bottom: 8px;
}
.contacts-func-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.contacts-func-item:active {
    background: #f5f5f5;
}
.contacts-func-item + .contacts-func-item {
    border-top: 1px solid #f0f0f0;
}
.contacts-func-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}
.contacts-func-label {
    flex: 1;
    font-size: 16px;
    color: #000;
}
.contacts-func-arrow {
    color: #bbb;
    font-size: 20px;
    line-height: 1;
}

/* ── 字母分组标题 ───────────────────────── */
.contacts-section-header {
    background: #f7f7f7;
    padding: 4px 16px;
    font-size: 12px;
    color: #888;
    font-weight: 500;
    line-height: 20px;
}

/* ── 联系人条目 ─────────────────────────── */
.contacts-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.contacts-item:active {
    background: #f0f0f0;
}
.contacts-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 68px;
    right: 0;
    height: 0.5px;
    background: #e0e0e0;
}
.contacts-item:last-child::after {
    display: none;
}
.contacts-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
}
.contacts-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.contacts-item-name {
    font-size: 16px;
    color: #000;
    flex: 1;
}

/* ── 右侧字母索引 ───────────────────────── */
.contacts-letter-index {
    position: fixed;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 200;
    user-select: none;
    -webkit-user-select: none;
}
.contacts-letter-index span {
    font-size: 11px;
    color: #888;
    line-height: 1.6;
    padding: 0 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: block;
}
.contacts-letter-index span.active {
    color: #07c160;
    font-weight: 600;
}

/* 字母弹出提示 */
.contacts-letter-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    z-index: 9999;
    pointer-events: none;
}

/* ── 空状态 ─────────────────────────────── */
.contacts-empty {
    padding: 80px 20px;
    text-align: center;
    color: #bbb;
    font-size: 14px;
}

/* ========================================
   档案页（contact-profile-page）cp- 前缀
   ======================================== */

/* 头部 */
.cp-header {
    background: #fff;
    padding: 20px 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 8px solid #f7f7f7;
}
.cp-avatar {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    font-weight: 500;
}
.cp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cp-avatar-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s;
}
.cp-avatar:active .cp-avatar-mask { opacity: 1; }

.cp-header-info {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}
.cp-nickname {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 6px;
    word-break: break-all;
}
.cp-info-line {
    font-size: 13px;
    color: #888;
    margin-top: 3px;
}

/* Section 卡片 */
.cp-section {
    background: #fff;
}

/* 行 */
.cp-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-bottom: 0.5px solid #f0f0f0;
}
.cp-row:last-child { border-bottom: none; }
.cp-row:active { background: #f5f5f5; }
.cp-row--disabled {
    cursor: default;
    opacity: 0.45;
}
.cp-row--disabled:active { background: transparent; }

.cp-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    flex-shrink: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-row-icon--friend   { background: #07c160; }
.cp-row-icon--moments  { background: #fa9d3b; }

.cp-row-body {
    flex: 1;
    min-width: 0;
}
.cp-row-label {
    font-size: 16px;
    color: #000;
}
.cp-row-sub {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
    line-height: 1.4;
}
.cp-row-arrow {
    color: #c0c0c0;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 6px;
}

/* 发消息按钮区 */
.cp-actions {
    padding: 24px 16px 16px;
    display: flex;
    gap: 12px;
}
.cp-action-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cp-action-btn:active { background: #f5f5f5; }

/* ========================================
   朋友资料 / 角色卡管理页（char-manage-page）
   ======================================== */

.cm-section {
    background: #fff;
    margin-bottom: 8px;
}
.cm-section-title {
    font-size: 12px;
    color: #888;
    padding: 12px 16px 6px;
}
.cm-row {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 0.5px solid #f0f0f0;
    min-height: 50px;
}
.cm-row:last-child { border-bottom: none; }
.cm-row--disabled { opacity: 0.4; pointer-events: none; }
.cm-row--col {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.cm-label {
    font-size: 15px;
    color: #000;
    width: 72px;
    flex-shrink: 0;
}
.cm-row--col .cm-label {
    width: auto;
    color: #888;
    font-size: 13px;
}
.cm-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #000;
    background: transparent;
    text-align: right;
}
.cm-textarea {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
    background: transparent;
    resize: none;
    line-height: 1.6;
    box-sizing: border-box;
}
.cm-placeholder {
    flex: 1;
    font-size: 14px;
    color: #ccc;
    text-align: right;
}
.cm-row-right {
    flex: 1;
    font-size: 14px;
    color: #aaa;
    text-align: right;
}
.cm-arrow {
    color: #c0c0c0;
    font-size: 20px;
    margin-left: 6px;
}
.cm-add-row {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cm-add-row:active { background: #f5f5f5; }

/* 性格标签组 */
.cm-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 4px;
}
.cm-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.cm-tag--sel {
    border-color: #07c160;
    background: #f0faf4;
    color: #07c160;
    font-weight: 500;
}
.cm-tag--add {
    border-style: dashed;
    color: #07c160;
    border-color: #07c160;
}
.cm-tag-input {
    border: 1px solid #07c160;
    border-radius: 16px;
    padding: 5px 11px;
    font-size: 13px;
    outline: none;
    width: 90px;
}

body.wechat-dark .cm-section { background: #1c1c1e; }
body.wechat-dark .cm-row { border-color: #2c2c2e; }
body.wechat-dark .cm-label { color: #e5e5ea; }
body.wechat-dark .cm-row--col .cm-label { color: #666; }
body.wechat-dark .cm-input,
body.wechat-dark .cm-textarea { color: #e5e5ea; }

/* ========================================
   深色模式
   ======================================== */
body.wechat-dark .contacts-search-bar {
    background: #111;
}
body.wechat-dark .contacts-search-inner {
    background: #2c2c2e;
}
body.wechat-dark .contacts-search-inner input {
    color: #e5e5ea;
}
body.wechat-dark .contacts-func-section,
body.wechat-dark .contacts-item,
body.wechat-dark .cp-header,
body.wechat-dark .cp-section,
body.wechat-dark .cp-actions,
body.wechat-dark .cp-action-btn {
    background: #1c1c1e;
}
body.wechat-dark .cp-header {
    border-bottom-color: #2C2C2E;
}
body.wechat-dark .contacts-func-label,
body.wechat-dark .contacts-item-name,
body.wechat-dark .cp-nickname,
body.wechat-dark .cp-row-label {
    color: #e5e5ea;
}
body.wechat-dark .contacts-section-header {
    background: #111;
    color: #666;
}
body.wechat-dark .contacts-item::after,
body.wechat-dark .contacts-func-item + .contacts-func-item,
body.wechat-dark .cp-row {
    border-color: #2c2c2e;
}
body.wechat-dark .contacts-letter-index span {
    color: #8E8E93;
}
body.wechat-dark .cp-info-line,
body.wechat-dark .cp-row-sub,
body.wechat-dark .cp-row-arrow {
    color: #636366;
}
body.wechat-dark .cp-action-btn {
    border-color: #3a3a3c;
    color: #e5e5ea;
}

/* 档案页/管理页背景 */
body.wechat-dark #contact-profile-page > .content,
body.wechat-dark #char-manage-page > .content,
body.wechat-dark #worldbook-manage-page > .content {
    background: #111111 !important;
}

/* 功能项 hover 态 */
body.wechat-dark .contacts-func-item:active { background: #2A2A2A !important; }
body.wechat-dark .contacts-func-arrow { color: #636366; }

/* 角色管理页（cm-） */
body.wechat-dark .cm-section-title { color: #636366 !important; }
body.wechat-dark .cm-placeholder,
body.wechat-dark .cm-row-right,
body.wechat-dark .cm-arrow { color: #636366 !important; }
body.wechat-dark .cm-add-row:active { background: #2A2A2A !important; }

/* 档案页行 hover */
body.wechat-dark .cp-row:active { background: #2A2A2A !important; }

/* 发布对话框深色模式 */
body.wechat-dark #cm-publish-inner {
    background: #1c1c1e !important;
}
body.wechat-dark #cm-publish-inner div[style*="color:#000"],
body.wechat-dark #cm-publish-inner div[style*="color: #000"] {
    color: #e5e5ea !important;
}
body.wechat-dark #cm-publish-inner div[style*="color:#555"],
body.wechat-dark #cm-publish-inner div[style*="color: #555"] {
    color: #8e8e93 !important;
}
body.wechat-dark #cm-publish-inner div[style*="color:#333"],
body.wechat-dark #cm-publish-inner div[style*="color: #333"] {
    color: #e5e5ea !important;
}
body.wechat-dark #cm-publish-inner span[style*="color:#333"] {
    color: #e5e5ea !important;
}
body.wechat-dark #cm-publish-author {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
    color: #e5e5ea !important;
}
body.wechat-dark #cm-publish-inner button[style*="background:#f5f5f5"] {
    background: #2c2c2e !important;
    color: #e5e5ea !important;
}