/* ============================================================
   chat.css · 聊天 + 居民册 + 聊天底部导航 + 我 tab
   ------------------------------------------------------------
   含：聊天列表 / 聊天详情 / 消息长按菜单 / 居民册 /
       我 tab（头像 / 立绘 / 住所 / 社会关系）/ 联络剧情弹窗
   ============================================================ */

/* ===== 聊天 ===== */
.chat-page {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 4px;
    position: relative;
}
.chat-page.active {
    display: flex;
}
.chat-header {
    display: flex;
    align-items: center;
    padding: 6px 0 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 5;
}
.chat-back {
    font-size: 48px !important;
    line-height: 1;
    cursor: pointer;
    padding-right: 6px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}
.chat-back:hover {
    color: var(--primary);
}
.chat-header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
.chat-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
    position: relative;
}
.chat-tab-content {
    display: none;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.chat-tab-content.active {
    display: flex;
}

/* 动态 tab：朋友圈占位 */
.moments-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-dim);
}
.moments-placeholder-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
}
.moments-placeholder-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-chat-skin="kk"] #page-chat .moments-placeholder {
    color: #5B6B76;
}
html[data-chat-skin="kk"] #page-chat .moments-placeholder-title {
    color: #1A1A1A;
}
html[data-chat-skin="kk"] #page-chat .moments-placeholder-icon {
    color: #B08A00;
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}
.moments-placeholder-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.moments-placeholder-desc {
    font-size: 13px;
    line-height: 1.6;
    max-width: 260px;
}

/* ----- 聊天详情视图 ----- */
.chat-detail-view {
    display: none;
    flex-direction: column;
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 20;
    padding: var(--statusbar-h) 4px 0;
}
/* 详情页打开时，藏掉底下的聊天列表层 */
#page-chat:has(> .chat-detail-view.active) > .chat-header,
#page-chat:has(> .chat-detail-view.active) > .chat-content,
#page-chat:has(> .chat-detail-view.active) > .chat-nav {
    display: none;
}
.chat-detail-view.active {
    display: flex;
}
.chat-detail-header {
    display: flex;
    align-items: center;
    padding: 8px 0 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 12px;
}
.chat-detail-back {
    font-size: 24px;
    cursor: pointer;
    color: var(--text);
    padding: 0 4px;
    transition: color 0.2s;
}
.chat-detail-back:hover {
    color: var(--primary);
}
.chat-detail-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: var(--text);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
.chat-detail-name-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.chat-detail-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-detail-typing {
    font-size: 13px;
    color: var(--primary);
    font-style: italic;
    flex-shrink: 0;
}
.chat-input-area input:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    cursor: not-allowed;
}
.chat-input-area .chat-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.chat-detail-settings {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-dim);
    padding: 0 4px;
    line-height: 1;
    transition: transform .2s, color .2s;
}
.chat-detail-settings:hover {
    transform: rotate(10deg);
    color: var(--primary);
}

.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}
.chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}
.chat-message.assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(212, 106, 147, 0.22);
    color: var(--text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.chat-message.failed {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    font-style: italic;
}
.chat-message.user {
    align-self: flex-end;
    background: #D46A93;
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow:
        0 4px 16px rgba(212, 106, 147, 0.4),
        0 0 8px rgba(201, 166, 107, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
/* 时间分隔 */
.chat-time-divider {
    align-self: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    padding: 6px 12px;
    user-select: none;
    -webkit-user-select: none;
    letter-spacing: 0.3px;
}
/* 联络消息（居中胶囊） */
.chat-message.contact-msg {
    align-self: center;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid rgba(212, 106, 147, 0.2);
    max-width: 80%;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    transition: all .2s;
}
.chat-message.contact-msg:hover {
    background: rgba(212, 106, 147, 0.12);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(212, 106, 147, 0.45);
}
/* 好友胶囊：已添加 X 为联系人 */
.chat-message.friend-msg {
    align-self: center;
    background: rgba(212, 106, 147, 0.10);
    color: var(--text-dim);
    font-size: 12px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(212, 106, 147, 0.22);
    max-width: 80%;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
html[data-mode="day"] .chat-message.friend-msg {
    background: rgba(178, 58, 102, .07) !important;
    color: var(--day-dim) !important;
    border-color: rgba(178, 58, 102, .22) !important;
}

/* 消息长按菜单 */
.msg-menu {
    position: absolute;
    border-radius: 12px;
    z-index: 30;
    padding: 8px 0;
    min-width: 120px;
    display: none;
}
/* 默认外观：零权重，任何地方写 .msg-menu 都能覆盖它 */
:where(.msg-menu, .group-msg-menu) {
    background: rgba(30, 20, 45, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(212, 106, 147, 0.22);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.6),
        0 0 16px rgba(212, 106, 147, 0.1);
}
.msg-menu.show {
    display: block;
}
.msg-menu-item {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
    transition: background .15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.msg-menu-item:hover {
    background: rgba(212, 106, 147, 0.15);
}
.msg-menu-item.danger {
    color: #fca5a5;
}

.chat-input-area {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 14px;
    border-top: 1px solid var(--border);
    background: transparent;
}
.chat-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 24px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.chat-input-area input::placeholder {
    color: var(--text-dim);
}
.chat-input-area input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 106, 147, 0.18);
}
.chat-input-area .chat-btn {
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 50%;
    color: var(--primary);
    transition: background .2s, transform .15s;
    line-height: 1;
}
.chat-input-area .chat-btn:hover {
    background: rgba(212, 106, 147, .15);
}
.chat-input-area .chat-btn:active {
    background: rgba(212, 106, 147, .28);
    transform: scale(0.94);
}

/* 聊天列表项 / 居民册项 */
.chat-item,
.character-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    cursor: pointer;
    background: transparent;
    transition: background .15s;
    user-select: none;
    -webkit-user-select: none;
    border-bottom: 1px solid var(--border);
}
.chat-item:last-child,
.character-item:last-child {
    border-bottom: none;
}
.chat-item:hover,
.character-item:hover {
    background: rgba(212, 106, 147, 0.09);
}
.chat-item.pinned {
    background: rgba(212, 106, 147, 0.11);
}
.chat-item.pinned .chat-name::after {
    content: ' · 置顶';
    font-size: 11px;
    font-weight: 400;
    color: var(--primary);
}
.chat-item .chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--text);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
.chat-item .chat-info {
    flex: 1;
    min-width: 0;
}
.chat-item .chat-name {
    font-weight: 600;
    color: var(--text);
    font-size: 15px;
}
.chat-item .chat-msg {
    font-size: 13px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-item .chat-time {
    font-size: 12px;
    color: var(--text-dim);
    flex-shrink: 0;
}

/* 未读徽章 */
.chat-item .chat-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.chat-unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #C9A66B;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 8px rgba(201, 166, 107, 0.6);
    box-sizing: border-box;
}
/* ----- 居民册 ----- */
.character-actions {
    display: flex;
    gap: 10px;
    padding: 8px 0 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

/* 联系人页：横条“添加新朋友” */
.contact-add-row {
    padding: 8px 0 12px;
}
.contact-add-btn {
    width: 100%;
    flex: 1;
    padding: 10px 0;
    font-size: 14px;
}

/* 聊天列表右上角：和返回按钮同高的加号 */
.chat-header-add {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.chat-header-add:hover {
    background: rgba(212, 106, 147, 0.15);
    border-color: var(--primary);
}
.character-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.character-btn:hover {
    background: rgba(212, 106, 147, 0.15);
    border-color: var(--primary);
}
.character-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--text);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
.character-info {
    flex: 1;
    min-width: 0;
}
.character-name {
    font-weight: 600;
    color: var(--text);
    font-size: 15px;
}
.character-desc {
    font-size: 13px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 聊天底部导航 */
.chat-nav {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 8px 0 12px;
    padding: 6px;
    background: rgba(30, 20, 45, 0.55);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 99rem;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    min-height: 0;
    z-index: 5;
    position: relative;
}
.chat-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 11px;
    padding: 8px 6px;
    border-radius: 99rem;
    transition: all .22s cubic-bezier(.34, 1.56, .64, 1);
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
}
.chat-nav-item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}
.chat-nav-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(212, 106, 147, 0.4), rgba(201, 166, 107, 0.4));
    box-shadow:
        0 0 14px rgba(212, 106, 147, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.chat-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: filter .22s;
}
.chat-nav-item.active svg {
    filter: drop-shadow(0 0 6px rgba(212, 106, 147, 0.85));
}

/* ============================================================
   我 tab
   ============================================================ */

.me-profile {
    display: flex;
    flex-direction: column;
    padding: 8px 0 16px;
}
.me-avatar-row {
    display: flex;
    justify-content: center;
    padding: 12px 0 16px;
}
.me-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: 0.2s;
    box-shadow: 0 0 20px rgba(212, 106, 147, 0.2);
}
.me-avatar:hover {
    border-color: var(--primary);
    box-shadow: 0 0 28px rgba(212, 106, 147, 0.45);
}
.me-field {
    margin-bottom: 14px;
}
.me-field label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.me-field input,
.me-field textarea,
.me-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.me-field textarea {
    resize: vertical;
}
.me-field input:focus,
.me-field textarea:focus,
.me-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 106, 147, 0.18);
}
.me-field select option {
    background: #1a0e2e;
    color: #fff;
}
.me-section-title {
    font-size: 13px;
    color: var(--primary);
    padding: 12px 0 6px;
    font-weight: 500;
}

.me-standee-btn {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: none;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
}

.me-standee-btn:hover {
    background: rgba(212, 106, 147, 0.08);
    border-color: var(--primary);
    border-style: solid;
}

/* ===== 联络剧情 ===== */
.contact-story {
    font-size: 14px;
    color: var(--text);
    line-height: 1.8;
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    white-space: pre-wrap;
    margin: 10px 0;
    text-align: left;
}
/* ===== 添加聊天弹窗 · tab ===== */
.add-chat-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.add-chat-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    transition: all .2s;
}
.add-chat-tab.active {
    color: var(--primary);
    background: rgba(212, 106, 147, 0.1);
    box-shadow: inset 0 -2px 0 var(--primary);
}
.add-chat-tab:hover {
    color: var(--text);
}
.add-chat-tab-content {
    display: none;
}
.add-chat-tab-content.active {
    display: block;
}

/* ===== 群头像选择 ===== */
.group-avatar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.group-avatar-preview {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 106, 147, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--text);
    flex-shrink: 0;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: border-color .2s, box-shadow .2s;
}
.group-avatar-preview:hover {
    border-color: var(--primary);
    box-shadow: 0 0 14px rgba(212, 106, 147, 0.4);
}

/* ===== 群成员多选 ===== */
.group-member-select-list .character-select-item {
    position: relative;
    cursor: pointer;
    transition: all .15s;
}
.group-member-select-list .character-select-item.selected {
    background: rgba(212, 106, 147, 0.15);
    border-color: rgba(212, 106, 147, 0.5);
}
.group-member-select-list .character-select-item.selected::before {
    background: #D46A93;
    border-color: transparent;
}
.group-member-select-list .character-select-item.selected::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-80%) rotate(45deg);
    pointer-events: none;
}

/* ===== 群聊列表项（在会话列表里） ===== */
.chat-item.group-chat .chat-avatar {
    background: linear-gradient(135deg, rgba(212, 106, 147, 0.25), rgba(201, 166, 107, 0.25));
    border: 1px solid rgba(201, 166, 107, 0.4);
}
.chat-item.group-chat .chat-name::before {
    content: '群 · ';
    font-size: 12px;
    color: var(--primary);
    font-weight: 400;
}
/* ===== 群聊详情 ===== */
.group-chat-detail-view .chat-detail-header {
    /* 复用私聊 header 布局 */
}

/* 消息项 */
.group-chat-messages .group-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.group-chat-messages .group-msg.user {
    flex-direction: row-reverse;
}
.group-chat-messages .group-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--text);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: box-shadow .2s, border-color .2s;
}
.group-chat-messages .group-msg-avatar:hover {
    box-shadow: 0 0 10px rgba(212, 106, 147, 0.5);
    border-color: var(--primary);
}
.group-chat-messages .group-msg-body {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.group-chat-messages .group-msg.user .group-msg-body {
    align-items: flex-end;
}
.group-chat-messages .group-msg-name {
    font-size: 11px;
    color: var(--text-dim);
    padding: 0 4px;
}
.group-chat-messages .group-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(212, 106, 147, 0.22);
    color: var(--text);
    border-top-left-radius: 4px;
}
.group-chat-messages .group-msg.user .group-msg-bubble {
    background: #D46A93;
    color: #fff;
    border: none;
    border-top-left-radius: 16px;
    border-top-right-radius: 4px;
    box-shadow:
        0 4px 16px rgba(212, 106, 147, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
/* ===== 聊天页：隐藏滚动条 ===== */
.chat-content,
.chat-messages {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-content::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ============================================================
   聊天皮肤（美化里切换，html[data-chat-skin]）
   kk    = KakaoTalk 经典：蓝灰底 / 黄气泡 / 全幅列表
   xx = xx 深色：黑底 / 蓝气泡 / 灰气泡
   只作用于聊天页；选择器统一带 #page-chat，压过主题里的同名规则。
   ============================================================ */

/* ---------- KakaoTalk 经典 ---------- */
html[data-chat-skin="kk"] #page-chat {
    background: #B2C7D9 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-header {
    background: #B2C7D9 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    padding: 6px 16px 10px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-header-title {
    color: #1A1A1A !important;
    text-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-back {
    color: #2B3A45 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-content {
    background: transparent !important;
    padding: 4px 0 0 !important;
}
html[data-chat-skin="kk"] #page-chat .character-actions {
    justify-content: flex-end;
    border-bottom: 0 !important;
    padding: 6px 16px 8px !important;
}
html[data-chat-skin="kk"] #page-chat .character-btn {
    flex: 0 0 auto;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    background: #FEE500 !important;
    color: #3C1E1E !important;
    border: 0 !important;
    font-size: 13px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-item,
html[data-chat-skin="kk"] #page-chat .character-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
    border-radius: 0 !important;
    padding: 11px 16px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-item:hover,
html[data-chat-skin="kk"] #page-chat .character-item:hover {
    background: rgba(255, 255, 255, .28) !important;
}
html[data-chat-skin="kk"] #page-chat .chat-item.pinned {
    background: rgba(255, 255, 255, .32) !important;
}
html[data-chat-skin="kk"] #page-chat .chat-name,
html[data-chat-skin="kk"] #page-chat .character-name {
    color: #111111 !important;
    text-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-msg,
html[data-chat-skin="kk"] #page-chat .character-desc {
    color: #4E6474 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-time {
    color: #5E7381 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-item.pinned .chat-name::after {
    color: #9A7B00 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-unread-badge {
    background: #FEE500 !important;
    color: #3C1E1E !important;
    border: 0 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-item .chat-avatar,
html[data-chat-skin="kk"] #page-chat .character-avatar,
html[data-chat-skin="kk"] #page-chat .me-avatar {
    background-color: #FFFFFF !important;
    color: #3C1E1E !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) !important;
}

/* 我 tab */
html[data-chat-skin="kk"] #page-chat .me-field label,
html[data-chat-skin="kk"] #page-chat .me-field > label {
    color: #3E5566 !important;
}
html[data-chat-skin="kk"] #page-chat .me-section-title {
    color: #3C1E1E !important;
}
html[data-chat-skin="kk"] #page-chat .me-field input,
html[data-chat-skin="kk"] #page-chat .me-field textarea,
html[data-chat-skin="kk"] #page-chat .me-field select {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
}
html[data-chat-skin="kk"] #page-chat .me-field input::placeholder,
html[data-chat-skin="kk"] #page-chat .me-field textarea::placeholder {
    color: #8FA0AC !important;
}
html[data-chat-skin="kk"] #page-chat .me-standee-btn {
    background: #FFFFFF !important;
    color: #3C1E1E !important;
    border: 1px dashed rgba(0, 0, 0, .22) !important;
}

/* 会话页 */
html[data-chat-skin="kk"] #page-chat .chat-detail-view {
    background: #B2C7D9 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-detail-header {
    background: #B2C7D9 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    padding: 8px 16px 10px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-detail-name {
    color: #111111 !important;
    text-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-detail-back,
html[data-chat-skin="kk"] #page-chat .chat-detail-settings {
    color: #2B3A45 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-messages {
    background: transparent !important;
}
html[data-chat-skin="kk"] #page-chat .chat-message {
    background: #FFFFFF !important;
    color: #111111 !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-message.user {
    background: #FEE500 !important;
    color: #3C1E1E !important;
}
html[data-chat-skin="kk"] #page-chat .chat-time-divider {
    color: #5E7381 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area {
    background: #FFFFFF !important;
    border-top: 1px solid #E6E6E6 !important;
    padding: 10px 12px 16px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area input {
    background: #F5F5F5 !important;
    color: #111111 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area input:focus {
    border-color: #D6D6D6 !important;
    box-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area input::placeholder {
    color: #9A9AA0 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area .chat-btn,
html[data-chat-skin="kk"] #page-chat .chat-plus-btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #3C1E1E !important;
}

/* 底部导航：白底、通栏 */
html[data-chat-skin="kk"] #page-chat .chat-nav {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid #E8E8E8 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4px 8px 12px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-nav-item {
    color: #7C8B96 !important;
    border-radius: 12px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active {
    color: #3C1E1E !important;
    background: rgba(254, 229, 0, .65) !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active svg {
    filter: none !important;
}

/* 浅色页上状态栏转深色 */
html[data-chat-skin="kk"] body:has(#page-chat.active) .phone-statusbar,
html[data-chat-skin="kk"] body:has(#page-chat.active) .phone-statusbar .psb-signal,
html[data-chat-skin="kk"] body:has(#page-chat.active) .phone-statusbar .psb-wifi,
html[data-chat-skin="kk"] body:has(#page-chat.active) .phone-statusbar .psb-battery {
    color: #2B3A45 !important;
}
html[data-chat-skin="kk"] body:has(#page-chat.active) .phone-statusbar-close {
    border-color: rgba(43, 58, 69, .5) !important;
}
html[data-chat-skin="kk"] body:has(#page-chat.active) .phone-statusbar-close span {
    background: #2B3A45 !important;
}

/* ---------- xx 深色 ---------- */
html[data-chat-skin="xx"] #page-chat {
    background: #000000 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-header {
    background: #000000 !important;
    border-bottom: 1px solid #1C1C1E !important;
    padding: 6px 16px 10px !important;
}
html[data-chat-skin="xx"] #page-chat .chat-header-title {
    color: #FFFFFF !important;
    text-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-back {
    color: #0A84FF !important;
}
html[data-chat-skin="xx"] #page-chat .chat-content {
    background: transparent !important;
    padding: 4px 0 0 !important;
}
html[data-chat-skin="xx"] #page-chat .character-actions {
    justify-content: flex-end;
    border-bottom: 0 !important;
    padding: 6px 16px 8px !important;
}
html[data-chat-skin="xx"] #page-chat .character-btn {
    flex: 0 0 auto;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    background: #0A84FF !important;
    color: #FFFFFF !important;
    border: 0 !important;
    font-size: 13px !important;
}
html[data-chat-skin="xx"] #page-chat .chat-item,
html[data-chat-skin="xx"] #page-chat .character-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #1C1C1E !important;
    border-radius: 0 !important;
    padding: 11px 16px !important;
}
html[data-chat-skin="xx"] #page-chat .chat-item:hover,
html[data-chat-skin="xx"] #page-chat .character-item:hover {
    background: #0E0E10 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-item.pinned {
    background: #0E0E10 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-name,
html[data-chat-skin="xx"] #page-chat .character-name {
    color: #FFFFFF !important;
    text-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-msg,
html[data-chat-skin="xx"] #page-chat .character-desc {
    color: #8E8E93 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-time {
    color: #8E8E93 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-item.pinned .chat-name::after {
    color: #0A84FF !important;
}
html[data-chat-skin="xx"] #page-chat .chat-unread-badge {
    background: #0A84FF !important;
    color: #FFFFFF !important;
    border: 0 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-item .chat-avatar,
html[data-chat-skin="xx"] #page-chat .character-avatar,
html[data-chat-skin="xx"] #page-chat .me-avatar {
    background-color: #2C2C2E !important;
    color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-chat-skin="xx"] #page-chat .me-field label,
html[data-chat-skin="xx"] #page-chat .me-field > label {
    color: #8E8E93 !important;
}
html[data-chat-skin="xx"] #page-chat .me-section-title {
    color: #FFFFFF !important;
}
html[data-chat-skin="xx"] #page-chat .me-field input,
html[data-chat-skin="xx"] #page-chat .me-field textarea,
html[data-chat-skin="xx"] #page-chat .me-field select {
    background: #1C1C1E !important;
    color: #FFFFFF !important;
    border: 1px solid #2C2C2E !important;
}
html[data-chat-skin="xx"] #page-chat .me-field input::placeholder,
html[data-chat-skin="xx"] #page-chat .me-field textarea::placeholder {
    color: #636366 !important;
}
html[data-chat-skin="xx"] #page-chat .me-standee-btn {
    background: #1C1C1E !important;
    color: #0A84FF !important;
    border: 1px solid #2C2C2E !important;
}

html[data-chat-skin="xx"] #page-chat .chat-detail-view {
    background: #000000 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-detail-header {
    background: #000000 !important;
    border-bottom: 1px solid #1C1C1E !important;
    padding: 8px 16px 10px !important;
}
html[data-chat-skin="xx"] #page-chat .chat-detail-name {
    color: #FFFFFF !important;
    text-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-detail-back,
html[data-chat-skin="xx"] #page-chat .chat-detail-settings {
    color: #0A84FF !important;
}
html[data-chat-skin="xx"] #page-chat .chat-messages {
    background: transparent !important;
}
html[data-chat-skin="xx"] #page-chat .chat-message {
    background: #26262A !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-message.user {
    background: #0A84FF !important;
    color: #FFFFFF !important;
}
html[data-chat-skin="xx"] #page-chat .chat-time-divider {
    color: #8E8E93 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-input-area {
    background: #1C1C1E !important;
    border-top: 1px solid #1C1C1E !important;
    padding: 10px 12px 16px !important;
}
html[data-chat-skin="xx"] #page-chat .chat-input-area input {
    background: #2C2C2E !important;
    color: #FFFFFF !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-input-area input:focus {
    border-color: #3A3A3C !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-input-area input::placeholder {
    color: #8E8E93 !important;
}
html[data-chat-skin="xx"] #page-chat .chat-input-area .chat-btn,
html[data-chat-skin="xx"] #page-chat .chat-plus-btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0A84FF !important;
}
html[data-chat-skin="xx"] #page-chat .chat-nav {
    background: #0A0A0C !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid #1C1C1E !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4px 8px 12px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-nav-item {
    color: #8E8E93 !important;
    border-radius: 12px !important;
}
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active {
    color: #0A84FF !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active svg {
    filter: none !important;
}
html[data-chat-skin="xx"] body:has(#page-chat.active) .phone-statusbar {
    color: rgba(255, 255, 255, .86) !important;
}

/* 我 tab：整块文字颜色兜底（防止 label 结构变化导致白字压浅底） */
html[data-chat-skin="kk"] #page-chat .me-profile {
    color: #2B3A45 !important;
}
html[data-chat-skin="kk"] #page-chat .me-profile label,
html[data-chat-skin="kk"] #page-chat .me-profile .me-section-title,
html[data-chat-skin="kk"] #page-chat .me-profile .me-standee-btn {
    color: #2B3A45 !important;
}
html[data-chat-skin="xx"] #page-chat .me-profile {
    color: #EDEDEF !important;
}
html[data-chat-skin="xx"] #page-chat .me-profile label,
html[data-chat-skin="xx"] #page-chat .me-profile .me-section-title {
    color: #EDEDEF !important;
}
html[data-chat-skin="kk"] #page-chat .me-profile,
html[data-chat-skin="xx"] #page-chat .me-profile {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
html[data-chat-skin="kk"] #page-chat .me-avatar-row,
html[data-chat-skin="xx"] #page-chat .me-avatar-row {
    display: flex;
    justify-content: center;
}

/* ---------- 容器贴边修正 ---------- */
/* 会话页原来左右各留 4px，输入栏因此离边；改成通栏，内部元素自己留 16px */
html[data-chat-skin="kk"] #page-chat .chat-detail-view,
html[data-chat-skin="xx"] #page-chat .chat-detail-view {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-detail-header,
html[data-chat-skin="xx"] #page-chat .chat-detail-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-messages,
html[data-chat-skin="xx"] #page-chat .chat-messages {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area,
html[data-chat-skin="xx"] #page-chat .chat-input-area {
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
}
/* 底部那条黑边：聊天页打开时去掉 .phone-pages 的 4px 内边距 */
body:has(#page-chat.active) .phone-pages {
    padding-bottom: 0 !important;
}
body:has(#page-chat.active) .chat-page,
body:has(#page-chat.active) #page-chat {
    min-height: 100% !important;
}
/* 输入栏底部补一点内边距，避免贴到屏幕边 */
html[data-chat-skin="kk"] #page-chat .chat-input-area,
html[data-chat-skin="xx"] #page-chat .chat-input-area {
    padding-bottom: 18px !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area input,html[data-chat-skin="xx"] #page-chat .chat-input-area input { box-shadow: none !important; }

/* ===== 会话设置 · 记忆设置入口 ===== */
.chat-menu-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(212, 106, 147, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.chat-menu-entry:hover {
    background: rgba(212, 106, 147, 0.10);
    border-color: rgba(212, 106, 147, 0.45);
}
.chat-menu-entry-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #D46A93;
}
.chat-menu-entry-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-menu-entry-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.chat-menu-entry-desc {
    font-size: 12px;
    color: var(--text-dim);
}
.chat-menu-entry-arrow {
    font-size: 20px;
    color: var(--text-dim);
    flex: none;
}

/* 其他页面的“‹ 返回”统一只留箭头，箭头放大一倍 */
.api-back,
.news-back,
.worldbook-back,
.map-edit-back {
    font-size: 48px !important;
    line-height: 1 !important;
    padding-right: 8px !important;
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   聊天头部 / 底部导航 精修
   - 返回、标题、加号 同一条水平中线，头部固定 52px，分割线贴底
   - 加号去掉外圈，只留一个中等大小的 ＋
   - 选中态不做背景块，图标与文字同色，并给图标填色
   ============================================================ */

html[data-chat-skin="kk"] #page-chat .chat-header,
html[data-chat-skin="xx"] #page-chat .chat-header {
    height: 52px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}
html[data-chat-skin="xx"] #page-chat .chat-header {
    border-bottom-color: #1C1C1E !important;
}

html[data-chat-skin="kk"] #page-chat .chat-back,
html[data-chat-skin="xx"] #page-chat .chat-back {
    font-size: 30px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 52px !important;
    padding: 0 8px 0 0 !important;
}

html[data-chat-skin="kk"] #page-chat .chat-header-title,
html[data-chat-skin="xx"] #page-chat .chat-header-title {
    font-size: 17px !important;
    line-height: 52px !important;
    margin: 0 !important;
}

/* 加号：无外圈、中等大小、与中线齐平 */
html[data-chat-skin="kk"] #page-chat .chat-header-add,
html[data-chat-skin="xx"] #page-chat .chat-header-add {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html[data-chat-skin="kk"] #page-chat .chat-header-add { color: #2B3A45 !important; }
html[data-chat-skin="xx"] #page-chat .chat-header-add { color: #0A84FF !important; }
html[data-chat-skin="kk"] #page-chat .chat-header-add:active,
html[data-chat-skin="xx"] #page-chat .chat-header-add:active {
    background: transparent !important;
}

/* 底部导航：选中只换色，不做背景块 */
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active,
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active {
    color: #3C1E1E !important;
}
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active {
    color: #0A84FF !important;
}
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active svg,
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active svg {
    stroke: currentColor !important;
    fill: currentColor !important;
    filter: none !important;
}
/* 联系人和朋友圈的外圈保持描边，只填里面的头/身体/星 */
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active svg circle[r="10"],
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active svg circle[r="9"],
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active svg circle[r="10"],
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active svg circle[r="9"] {
    fill: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active span,
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active span {
    color: currentColor !important;
}

/* 联系人页「添加新朋友」：改成普通列表行，不要整条黄块 */
html[data-chat-skin="kk"] #page-chat .contact-add-row,
html[data-chat-skin="xx"] #page-chat .contact-add-row {
    padding: 0 16px !important;
    border-bottom: 0 !important;
}
html[data-chat-skin="kk"] #page-chat .contact-add-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 13px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
    border-radius: 0 !important;
    color: #2B3A45 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
html[data-chat-skin="xx"] #page-chat .contact-add-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 13px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #1C1C1E !important;
    border-radius: 0 !important;
    color: #0A84FF !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
/* 选中项：强制不透明 + 同色（防止别的规则用 opacity 淡化） */
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active,
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active span,
html[data-chat-skin="kk"] #page-chat .chat-nav-item.active svg {
    color: #3C1E1E !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #3C1E1E;
}
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active,
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active span,
html[data-chat-skin="xx"] #page-chat .chat-nav-item.active svg {
    color: #0A84FF !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #0A84FF;
}

/* 加号：整体放大 1/3，中心不变；只在聊天列表出现 */
html[data-chat-skin="kk"] #page-chat:has(#chatTabList:not(.active)) .chat-header-add,
html[data-chat-skin="xx"] #page-chat:has(#chatTabList:not(.active)) .chat-header-add {
    display: none !important;
}
html[data-chat-skin="kk"] #page-chat .chat-header-add,
html[data-chat-skin="xx"] #page-chat .chat-header-add {
    font-size: 34px !important;
    line-height: 34px !important;
    overflow: visible !important;
}

/* 添加新朋友：居中圆角长条，填充与页面同色，只留描边 */
html[data-chat-skin="kk"] #page-chat .contact-add-row,
html[data-chat-skin="xx"] #page-chat .contact-add-row {
    padding: 0 !important;
    border-bottom: 0 !important;
}
html[data-chat-skin="kk"] #page-chat .contact-add-btn {
    width: calc(100% - 32px) !important;
    margin: 10px 16px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    background: #B2C7D9 !important;
    border: 1px solid rgba(0, 0, 0, .14) !important;
    border-radius: 999px !important;
    color: #2B3A45 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .contact-add-btn {
    width: calc(100% - 32px) !important;
    margin: 10px 16px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    background: #000000 !important;
    border: 1px solid #2C2C2E !important;
    border-radius: 999px !important;
    color: #0A84FF !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

/* 会话页左下角加号：和列表右上角一样大 */
html[data-chat-skin="kk"] #page-chat .chat-plus-btn,
html[data-chat-skin="xx"] #page-chat .chat-plus-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 34px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   会话输入栏 / 聊天头像
   ============================================================ */

/* 输入栏：所有控件同高、同一条中线 */
.chat-input-area {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.chat-input-area > div {
    display: flex;
    align-items: center;
}
.chat-input-pill {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    padding: 0 4px 0 14px;
    background: rgba(255, 255, 255, .06);
}
.chat-input-pill input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 14px;
}
.chat-input-pill input::placeholder { color: inherit; opacity: .55; }
.chat-input-trigger {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.chat-input-trigger svg {
    width: 19px;
    height: 19px;
}
.chat-input-area .chat-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Kakao：胶囊浅灰底，图标深色 */
html[data-chat-skin="kk"] #page-chat .chat-input-pill {
    background: #F5F5F5 !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-pill input {
    color: #111111 !important;
    background: transparent !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-trigger {
    color: #3C1E1E !important;
}
html[data-chat-skin="kk"] #page-chat .chat-input-area .chat-btn {
    color: #3C1E1E !important;
}

/* xx：深灰胶囊，蓝色图标 */
html[data-chat-skin="xx"] #page-chat .chat-input-pill {
    background: #2C2C2E !important;
}
html[data-chat-skin="xx"] #page-chat .chat-input-pill input {
    color: #FFFFFF !important;
    background: transparent !important;
}
html[data-chat-skin="xx"] #page-chat .chat-input-trigger,
html[data-chat-skin="xx"] #page-chat .chat-input-area .chat-btn {
    color: #0A84FF !important;
}

/* 默认聊天头像：通用小人剪影（自己画的，不涉及任何素材版权） */
.chat-detail-avatar.avatar-default {
    background-color: #E9EFF4 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A8A99'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") !important;
    background-size: 62% !important;
    background-position: center 46% !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
}
html[data-chat-skin="xx"] .chat-detail-avatar.avatar-default {
    background-color: #2C2C2E !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") !important;
}

/* 会话菜单里的聊天头像编辑区 */
.chat-avatar-editor {
    margin: 4px 0 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.chat-avatar-editor-title {
    font-size: 14px;
    color: var(--text);
}
.chat-avatar-editor-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin: 3px 0 9px;
    line-height: 1.5;
}
.chat-avatar-url {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
}
.chat-avatar-actions {
    display: flex;
    gap: 8px;
    margin-top: 9px;
}
.chat-avatar-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.chat-avatar-btn.ghost { opacity: .65; }

/* ============================================================
   输入框聚焦环 / 聊天列表默认头像 / 备注
   ============================================================ */

/* 输入时不要里轮廓线：聚焦状态也保持无边框 */
html[data-chat-skin="kk"] #page-chat .chat-input-area input:focus,
html[data-chat-skin="xx"] #page-chat .chat-input-area input:focus,
html[data-chat-skin="kk"] #page-chat .chat-input-pill input:focus,
html[data-chat-skin="xx"] #page-chat .chat-input-pill input:focus,
#page-chat .chat-input-pill input:focus {
    border: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 聊天列表：没有聊天头像时用默认小人 */
.chat-item .chat-avatar.avatar-default {
    background-color: #E9EFF4 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A8A99'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") !important;
    background-size: 62% !important;
    background-position: center 46% !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] .chat-item .chat-avatar.avatar-default {
    background-color: #2C2C2E !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") !important;
}

/* 备注输入 */
.chat-remark-input {
    margin-top: 9px !important;
}
.chat-remark-save {
    width: 100%;
    margin-top: 8px;
}

/* 去掉选中项上方那条短横 */
html #page-chat .chat-nav-item.active::before { display: none !important; }


/* ===== 群聊在皮肤下的配色 ===== */
html[data-chat-skin="kk"] #page-chat .chat-item.group-chat .chat-avatar {
    background-color: #FEE500 !important;
    border: 0 !important;
    color: #3C1E1E !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) !important;
}
html[data-chat-skin="kk"] #page-chat .chat-item.group-chat .chat-name::before {
    color: #9A7B00 !important;
}
html[data-chat-skin="kk"] #page-chat .group-chat-messages .group-msg-bubble {
    background: #FFFFFF !important;
    color: #111111 !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
}
html[data-chat-skin="kk"] #page-chat .group-chat-messages .group-msg.user .group-msg-bubble {
    background: #FEE500 !important;
    color: #3C1E1E !important;
    box-shadow: none !important;
}
html[data-chat-skin="kk"] #page-chat .group-chat-messages .group-msg-name {
    color: #4E6474 !important;
}
html[data-chat-skin="kk"] #page-chat .group-chat-messages .group-msg-avatar {
    background-color: #FFFFFF !important;
    color: #3C1E1E !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) !important;
}

html[data-chat-skin="xx"] #page-chat .chat-item.group-chat .chat-avatar {
    background-color: #2C2C2E !important;
    border: 0 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .chat-item.group-chat .chat-name::before {
    color: #8E8E93 !important;
}
html[data-chat-skin="xx"] #page-chat .group-chat-messages .group-msg-bubble {
    background: #26262A !important;
    color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .group-chat-messages .group-msg.user .group-msg-bubble {
    background: #0A84FF !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
html[data-chat-skin="xx"] #page-chat .group-chat-messages .group-msg-name {
    color: #8E8E93 !important;
}
html[data-chat-skin="xx"] #page-chat .group-chat-messages .group-msg-avatar {
    background-color: #2C2C2E !important;
    color: #FFFFFF !important;
    border: 0 !important;
}


/* 群聊文字头像：不要继承主题渐变，只跟聊天皮肤 */
.chat-item.group-chat .chat-avatar.group-avatar-text {
    background-image: none !important;
}

/* 会话列表 / 会话里的默认小人（没有聊天头像时用，不拿角色头像顶） */
.chat-avatar.avatar-default {
    background-color: #E9EFF4 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A8A99'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") !important;
    background-size: 62% !important;
    background-position: center 46% !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
}
html[data-chat-skin="xx"] .chat-avatar.avatar-default { background-color: #2C2C2E !important; }
/* 头像用真 <img> 渲染（铺满容器、裁成圆），避免被皮肤的 background 规则盖掉 */
.av-img {
    overflow: hidden;
    padding: 0 !important;
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.av-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ===== 会话里的胶囊提示（已添加联系人 / 联络记录）缩一号 ===== */
#page-chat .chat-message.friend-msg,
#page-chat .chat-message.contact-msg {
    font-size: 9px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    gap: 3px !important;
}
/* ===== 气泡译文：默认不显示，点一下气泡展开 ===== */
.chat-trans {
    display: none;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, .22);
    font-size: 13px;
    line-height: 1.5;
    opacity: .82;
}
.chat-message.show-trans .chat-trans { display: block; }
.chat-message.has-trans { cursor: pointer; }
.chat-message.has-trans::after {
    content: '译';
    position: absolute;
    right: -2px;
    top: -6px;
    font-size: 9px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 4px;
    background: rgba(212, 106, 147, .85);
    color: #fff;
    opacity: .55;
}
.chat-message { position: relative; }
html[data-chat-skin="kk"] .chat-message.assistant .chat-trans,
html[data-chat-skin="xx"] .chat-message.assistant .chat-trans {
    border-top-color: rgba(0, 0, 0, .12) !important;
}
html[data-chat-skin="kk"] .chat-message.user .chat-trans,
html[data-chat-skin="xx"] .chat-message.user .chat-trans {
    border-top-color: rgba(0, 0, 0, .16) !important;
}
/* ===== 语音条 ===== */
.chat-message.voice-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 18px;
    max-width: 76%;
}
.chat-message.voice-msg.assistant { align-self: flex-start; }
.chat-message.voice-msg.user { align-self: flex-end; }
.vm-play {
    font-size: 12px;
    cursor: pointer;
    opacity: .8;
    flex: none;
}
.vm-bar {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}
.vm-bar i {
    display: block;
    width: 2px;
    background: currentColor;
    opacity: .55;
    border-radius: 1px;
}
.vm-bar i:nth-child(1) { height: 6px; }
.vm-bar i:nth-child(2) { height: 12px; }
.vm-bar i:nth-child(3) { height: 9px; }
.vm-bar i:nth-child(4) { height: 13px; }
.vm-sec { font-size: 11px; opacity: .7; }

/* ===== 转账 ===== */
.chat-message.transfer-msg {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 62%;
    border: 1px solid rgba(212, 106, 147, .38);
    background: rgba(212, 106, 147, .10);
}
.chat-message.transfer-msg.assistant { align-self: flex-start; }
.chat-message.transfer-msg.user { align-self: flex-end; }
.tm-head { font-size: 11px; opacity: .7; letter-spacing: .08em; }
.tm-amount { font-size: 20px; font-weight: 600; margin-top: 2px; }
.tm-note { font-size: 12px; opacity: .72; margin-top: 2px; }

/* 日间：这两类气泡也跟着亮起来 */
html[data-mode="day"] .chat-message.voice-msg,
html[data-mode="day"] .chat-message.transfer-msg {
    background: #FFFFFF !important;
    color: var(--day-ink) !important;
    border-color: var(--day-line) !important;
}
html[data-mode="day"] .chat-message.user.transfer-msg {
    background: #FDF1F6 !important;
    border-color: rgba(178, 58, 102, .3) !important;
}
/* ===== 转账弹窗 ===== */
.sm-quick { display: flex; gap: 8px; margin: 8px 0 4px; }
.sm-quick button {
    flex: 1;
    padding: 6px 0;
    border-radius: 10px;
    border: 1px dashed rgba(212, 106, 147, .45);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.sm-cards { display: flex; gap: 8px; margin: 6px 0 4px; }
.sm-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.sm-card.active { border-color: var(--primary); background: rgba(212, 106, 147, .10); }
.sm-card-name { font-size: 13px; }
.sm-card-bal { font-size: 16px; font-weight: 600; }
html[data-mode="day"] .sm-card { border-color: var(--day-line) !important; }
html[data-mode="day"] .sm-card.active { border-color: var(--day-accent) !important; background: rgba(178, 58, 102, .07) !important; }
html[data-mode="day"] .sm-quick button { border-color: var(--day-line) !important; }
/* 语音条：点一下展开原文 */
.chat-message.voice-msg { flex-direction: column; align-items: stretch; }
.chat-message.voice-msg .vm-row { display: flex; align-items: center; gap: 8px; }
.chat-message.voice-msg .vm-text {
    display: none;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, .18);
    font-size: 13px;
    line-height: 1.5;
    opacity: .85;
    white-space: pre-wrap;
}
.chat-message.voice-msg.show-voice-text .vm-text { display: block; }
html[data-mode="day"] .chat-message.voice-msg .vm-text { border-top-color: var(--day-line); }
/* 转账卡（按设计稿）：名字 + 金额 + 备注 + 状态，不要删除线 */
.chat-message.transfer-msg {
    width: 68%;
    max-width: 68%;
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(212, 106, 147, .40);
    background: linear-gradient(180deg, rgba(212, 106, 147, .14), rgba(212, 106, 147, .06));
}
.tm-head { display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: .72; letter-spacing: .06em; }
.tm-ico { width: 14px; height: 14px; border-radius: 4px; background: var(--primary); opacity: .85; }
.tm-amount { font-size: 24px; font-weight: 600; margin-top: 6px; }
.tm-note { font-size: 12px; opacity: .72; margin-top: 2px; }
.tm-foot {
    font-size: 11px; opacity: .62; margin-top: 10px;
    padding-top: 8px; border-top: 1px solid rgba(246, 240, 244, .10);
}
html[data-mode="day"] .chat-message.transfer-msg {
    background: #FFFFFF !important;
    border-color: var(--day-line) !important;
    color: var(--day-ink) !important;
}
html[data-mode="day"] .tm-foot { border-top-color: var(--day-line) !important; }
html[data-mode="day"] .tm-ico { background: var(--day-accent) !important; }
/* 转账待领取：底部状态 + 两个按钮 */
.tm-foot { display: flex; align-items: center; justify-content: space-between; }
.tm-acts { display: flex; gap: 6px; }
.tm-btn {
    font-size: 11px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(212, 106, 147, .5);
    background: transparent; color: var(--primary); font-family: inherit; cursor: pointer;
}
.tm-btn.solid { background: var(--primary); color: #fff; border-color: transparent; }
html[data-mode="day"] .tm-btn { color: var(--day-accent) !important; border-color: rgba(178, 58, 102, .45) !important; }
html[data-mode="day"] .tm-btn.solid { background: var(--day-accent) !important; color: #fff !important; }
/* ===== 外卖 App ===== */
.tk-shop { border-bottom: 1px solid rgba(255,255,255,.08); padding: 12px 4px; }
.tk-shop-name { font-size: 15px; font-weight: 500; }
.tk-shop-meta { font-size: 11px; opacity: .6; margin-top: 2px; }
.tk-dishes { margin-top: 8px; }
.tk-dish { display: flex; justify-content: space-between; font-size: 12px; opacity: .85; padding: 3px 0; }
html[data-mode="day"] .tk-shop { border-bottom-color: var(--day-line) !important; }

/* 外卖：点菜按钮 / 订单 */
.tk-buy { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(212,106,147,.5); background: transparent; color: var(--primary); font-family: inherit; cursor: pointer; }
.tk-sec { font-size: 11px; letter-spacing: .12em; opacity: .5; padding: 14px 4px 6px; }
.tk-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tk-order-st { font-size: 12px; color: var(--primary); flex: none; }
html[data-mode="day"] .tk-buy { color: var(--day-accent) !important; border-color: rgba(178,58,102,.45) !important; }
html[data-mode="day"] .tk-order { border-bottom-color: var(--day-line) !important; }
html[data-mode="day"] .tk-order-st { color: var(--day-accent) !important; }

/* 会话里的外卖卡片 */
.chat-message.takeout-msg {
    width: 78%; max-width: 78%; border-radius: 16px; padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
}
.chat-message.takeout-msg.user { align-self: flex-end; }
.chat-message.takeout-msg.assistant { align-self: flex-start; }
.to-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.to-ico { width: 18px; height: 18px; border-radius: 6px; background: rgba(212,106,147,.55); }
.to-item { display: flex; justify-content: space-between; font-size: 12px; opacity: .85; margin-top: 8px; }
.to-addr { font-size: 11px; opacity: .6; margin-top: 6px; line-height: 1.5; }
.to-note { font-size: 11px; opacity: .72; margin-top: 6px; line-height: 1.5; }
.to-foot { font-size: 11px; color: var(--primary); margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.10); }
html[data-mode="day"] .chat-message.takeout-msg { background: #fff !important; border-color: var(--day-line) !important; color: var(--day-ink) !important; }
html[data-mode="day"] .to-foot { color: var(--day-accent) !important; border-top-color: var(--day-line) !important; }
html[data-mode="day"] .to-ico { background: rgba(178,58,102,.45) !important; }

/* 语音条展开区里的译文 */
.vm-trans {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,.14);
    font-size: 12px;
    opacity: .8;
}
.vm-tag {
    display: inline-block;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(212,106,147,.28);
    color: var(--primary);
    margin-right: 6px;
    vertical-align: 1px;
}
html[data-mode="day"] .vm-trans { border-top-color: var(--day-line) !important; }
html[data-mode="day"] .vm-tag { background: rgba(178,58,102,.12) !important; color: var(--day-accent) !important; }

/* ============================================================
   引用消息
   - .chat-quote-bar：输入框上方的“正在引用”条
   - .chat-quote：气泡里显示的引用块
   ============================================================ */
.chat-quote-bar {
    flex: 0 0 100%;
    order: -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 6px 8px 6px 10px;
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    background: rgba(212, 106, 147, .10);
    font-size: 12px;
    color: var(--text-dim);
}
.chat-quote-bar[hidden] { display: none; }
.cq-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
}
.cq-name {
    flex: none;
    max-width: 32%;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cq-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .8;
}
.cq-close {
    flex: none;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.chat-quote {
    margin: 0 0 6px;
    padding: 5px 8px;
    border-left: 3px solid rgba(212, 106, 147, .55);
    border-radius: 4px;
    background: rgba(0, 0, 0, .14);
    font-size: 12px;
    line-height: 1.45;
}
.chat-quote-who {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: .8;
    margin-bottom: 1px;
}
.chat-quote-body {
    display: block;
    opacity: .78;
    word-break: break-word;
}
.chat-message.assistant .chat-quote { background: rgba(255, 255, 255, .06); }
.group-msg:not(.user) .chat-quote { background: rgba(255, 255, 255, .07); }
html[data-mode="day"] .chat-quote-bar {
    background: rgba(212, 106, 147, .08);
    border-left-color: var(--day-accent);
    color: #6B564E;
}
html[data-mode="day"] .cq-name { color: var(--day-accent); }
html[data-mode="day"] .cq-close { background: rgba(36, 26, 34, .06); }
html[data-mode="day"] .chat-quote {
    background: rgba(36, 26, 34, .06);
    border-left-color: var(--day-accent);
}
html[data-mode="day"] .chat-message.assistant .chat-quote,
html[data-mode="day"] .group-msg:not(.user) .chat-quote { background: rgba(36, 26, 34, .05); }

/* ===== ����ҳ��Ԥ������ token ===== */
.token-estimate {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}
.token-estimate-title {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.token-estimate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.token-estimate-row:first-child { border-top: 0; }
.token-estimate-label { font-size: 13px; color: var(--text); min-width: 0; }
.token-estimate-value {
    font-size: 13px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.token-estimate-sub {
    grid-column: 1 / -1;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-dim);
    opacity: .78;
}
html[data-mode="day"] .token-estimate {
    background: rgba(36, 26, 34, .04);
    border-color: rgba(36, 26, 34, .12);
}
html[data-mode="day"] .token-estimate-row { border-top-color: rgba(36, 26, 34, .08); }
html[data-mode="day"] .token-estimate-value { color: var(--day-accent); }
html[data-mode="day"] .token-estimate-sub { color: var(--day-dim); }

/* P6: context estimate footer */
.token-estimate-context {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,.08);
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-dim);
    opacity: .78;
    font-variant-numeric: tabular-nums;
}
html[data-mode="day"] .token-estimate-context {
    border-top-color: rgba(36, 26, 34, .1);
    color: var(--day-dim);
}