/* 新增开始：社交频道四栏即时通讯系统样式（哥 2026-08-06） */

/* 强制聊天应用内使用系统无衬线字体，并恢复可选中 */
/* 修改：让频道板块向上铺满、遮住灰色斜条背景，并修正高度公式减去 header + 公告栏（哥 2026-08-10） */
.ww-chat-page {
    height: calc(100vh - 4.43vw - 2.08vw);
}
.ww-chat-page .content-box {
    height: 100%;
    margin-top: 0;
}

.ww-chat-app,
.ww-chat-app * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.ww-chat-app {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    background: #f5f7fa;
    border-radius: 8px;
    position: relative;
}

/* 通用变量（提升到 :root 全局，避免挂到 body 的登录弹窗等取不到变量导致边框失效，哥 2026-08-07） */
:root, .ww-chat-app {
    --sc-primary: #7cecfc;
    --sc-primary-dark: #62bfcc;
    --sc-bg: #f5f7fa;
    --sc-white: #ffffff;
    --sc-text1: #1f2329;
    --sc-text2: #606770;
    --sc-text3: #9097a0;
    --sc-border: #e5e6eb;
    --sc-hover: #f2f3f5;
    --sc-active: #e8f3ff;
    --sc-blue: #409eff;
    --sc-red: #ff4d4f;
    --sc-orange: #ff9c4a;
    --sc-gold: #f2c55c;
    --sc-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ---------- 第一栏：左侧工具栏 ---------- */
/* 修改：改回白底工具栏 + 深色图标，白色图标看不见的问题（哥 2026-08-07 第二轮） */
.ww-chat-toolbar {
    width: 52px;
    min-width: 52px;
    background: #ffffff;
    border-right: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 14px;
    position: relative;
    /* 修改：工具栏置于最顶层，高于邮件/通讯录面板（哥 2026-08-10） */
    z-index: 50;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
}

.ww-chat-toolbar .toolbar-brand {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #62bfcc, #7cecfc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a2a33;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 14px;
    box-shadow: 0 4px 10px rgba(98, 191, 204, 0.25);
    overflow: hidden;
    cursor: pointer;
}

/* 新增开始：左上角头像/访客样式（哥 2026-08-09） */
.ww-chat-toolbar .toolbar-brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.ww-chat-toolbar .toolbar-brand .avatar-placeholder {
    border-radius: 8px !important;
    font-weight: 700;
}

.ww-chat-toolbar .toolbar-visitor {
    background: linear-gradient(135deg, #909399, #c0c4cc);
    color: #fff;
    font-size: 14px;
}
/* 新增结束 */

.ww-chat-toolbar .tool-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    /* 修改：深灰图标，在白底工具栏上清晰可见（哥 2026-08-07 第二轮） */
    color: #4e5969;
    background: transparent;
    transition: all 0.2s ease;
    position: relative;
}

.ww-chat-toolbar .tool-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    flex-shrink: 0;
}

.ww-chat-toolbar .tool-btn:hover {
    background: #f2f3f5;
    color: #1f2329;
}

.ww-chat-toolbar .tool-btn.active {
    color: #0a2a33;
    background: #d9f6fb;
}

.ww-chat-toolbar .tool-btn.active svg {
    fill: #0a2a33;
}

.ww-chat-toolbar .tool-btn.active::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: #7cecfc;
    border-radius: 0 2px 2px 0;
}

.ww-chat-toolbar .tool-divider {
    width: 24px;
    height: 1px;
    /* 修改：白底工具栏下分隔线改为浅灰（哥 2026-08-07 第二轮） */
    background: var(--sc-border);
    margin: 8px 0;
}

.ww-chat-toolbar .toolbar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ww-chat-toolbar .tool-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--sc-red);
    color: #fff;
    border-radius: 7px;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    font-weight: 600;
    user-select: none;
}

/* ---------- 第二栏：频道与会话列表 ---------- */
.ww-chat-channel-list {
    width: 280px;
    min-width: 280px;
    background: var(--sc-white);
    border-right: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    z-index: 4;
    /* 修改：保留向上扩展遮住 page-join 顶部背景，但用 padding-top 把内容推到公告栏下方，避免搜索框被盖住（哥 2026-08-10） */
    margin-top: -2.08vw;
    padding-top: max(2.08vw, 30px);
    box-sizing: border-box;
    /* 修改结束 */
}

.ww-chat-channel-list .list-header {
    /* 修改：固定高度 60px 并垂直居中，与中间 chat-header、右侧 info-header 顶对齐 */
    height: 60px;
    padding: 0 16px;
    border-bottom: 1px solid var(--sc-border);
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.ww-chat-channel-list .search-box {
    flex: 1;
    height: 34px;
    background: #f2f3f5;
    border-radius: 17px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--sc-text3);
    font-size: 13px;
    cursor: text;
    transition: all 0.2s ease;
}

.ww-chat-channel-list .search-box:hover,
.ww-chat-channel-list .search-box:focus-within {
    background: #e8e9eb;
}

/* 新增开始：左侧真实搜索输入框（原来只有静态文字，搜索不可用）（哥 2026-08-07） */
.ww-chat-channel-list .search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--sc-text1);
    font-family: inherit;
}

.ww-chat-channel-list .search-input::placeholder {
    color: var(--sc-text3);
}

.ww-chat-channel-list .search-clear {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--sc-text3);
    background: rgba(0, 0, 0, 0.06);
    /* 修改：消除 inline 元素的行高空隙，让 X 在灰色圆圈里严格居中（哥 2026-08-10） */
    line-height: 0;
}

.ww-chat-channel-list .search-clear:hover {
    color: var(--sc-text1);
    background: rgba(0, 0, 0, 0.12);
}

.ww-chat-channel-list .search-clear svg {
    width: 12px;
    height: 12px;
    margin-right: 0;
    fill: currentColor;
    display: block;
}

/* 新增开始：消息搜索结果项（哥 2026-08-10） */
.search-msg-item {
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--sc-border);
}
.search-msg-item:hover {
    background: var(--sc-hover);
}
.search-msg-item .smi-name {
    font-size: 12px;
    color: var(--sc-text3);
    margin-bottom: 2px;
}
.search-msg-item .smi-text {
    font-size: 13px;
    color: var(--sc-text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 消息定位高亮 */
.msg-item.msg-highlight {
    animation: msgHighlightFade 2s ease;
}
@keyframes msgHighlightFade {
    0% { background: rgba(98, 191, 204, 0.28); }
    100% { background: transparent; }
}
/* 新增结束 */
/* 新增结束 */

.ww-chat-channel-list .search-box svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    opacity: 0.7;
}

.ww-chat-channel-list .new-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f2f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-text2);
    transition: all 0.2s ease;
    font-size: 20px;
    line-height: 1;
}

.ww-chat-channel-list .new-btn:hover {
    background: #e8e9eb;
    color: var(--sc-text1);
}

.ww-chat-channel-list .list-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.ww-chat-channel-list .channel-group {
    margin-bottom: 4px;
}

.ww-chat-channel-list .group-header {
    height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--sc-text3);
    font-size: 12px;
    transition: all 0.2s ease;
}

.ww-chat-channel-list .group-header:hover {
    background: var(--sc-hover);
}

.ww-chat-channel-list .group-header svg {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.ww-chat-channel-list .group-header.collapsed svg {
    transform: rotate(-90deg);
}

.ww-chat-channel-list .group-header .group-title {
    flex: 1;
    font-weight: 600;
}

.ww-chat-channel-list .group-items {
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.ww-chat-channel-list .channel-item,
.ww-chat-channel-list .session-item {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.ww-chat-channel-list .channel-item:hover,
.ww-chat-channel-list .session-item:hover {
    background: var(--sc-hover);
}

.ww-chat-channel-list .channel-item.active,
.ww-chat-channel-list .session-item.active {
    background: var(--sc-active);
}

.ww-chat-channel-list .channel-item.active .item-name,
.ww-chat-channel-list .session-item.active .item-name {
    color: var(--sc-text1);
    font-weight: 600;
}

.ww-chat-channel-list .item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
    background: #e8e9eb;
}

.ww-chat-channel-list .item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-chat-channel-list .item-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text3);
    font-size: 14px;
    font-weight: 600;
}

.ww-chat-channel-list .item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ww-chat-channel-list .item-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ww-chat-channel-list .item-name {
    font-size: 14px;
    color: var(--sc-text1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

.ww-chat-channel-list .item-time {
    font-size: 11px;
    color: var(--sc-text3);
    flex-shrink: 0;
}

.ww-chat-channel-list .item-preview {
    font-size: 12px;
    color: var(--sc-text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-chat-channel-list .item-badge {
    position: absolute;
    right: 14px;
    top: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--sc-red);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

.ww-chat-channel-list .session-item .close-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--sc-text3);
    font-size: 14px;
    cursor: pointer;
}

.ww-chat-channel-list .session-item:hover .close-btn {
    display: flex;
}

.ww-chat-channel-list .session-item:hover .item-time {
    display: none;
}

.ww-chat-channel-list .session-item .close-btn:hover {
    background: #e8e9eb;
    color: var(--sc-red);
}

/* ---------- 第三栏：聊天主区域 ---------- */
.ww-chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--sc-bg);
    position: relative;
}

/* 顶部标题栏 */
.ww-chat-main .chat-header {
    height: 60px;
    background: var(--sc-white);
    border-bottom: 1px solid var(--sc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
}

.ww-chat-main .chat-header .header-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sc-text1);
    display: flex;
    align-items: center;
}

.ww-chat-main .chat-header .header-title .member-count {
    font-size: 13px;
    color: var(--sc-text3);
    font-weight: 400;
    margin-left: 8px;
}

.ww-chat-main .chat-header .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ww-chat-main .chat-header .header-actions .action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: var(--sc-text2);
    transition: all 0.2s ease;
}

.ww-chat-main .chat-header .header-actions .action-btn:hover {
    background: var(--sc-hover);
    color: var(--sc-text1);
}

.ww-chat-main .chat-header .header-actions .action-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* 新增开始：中间聊天板块右上角三条杠按钮样式（哥 2026-08-10） */
.ww-chat-main .chat-header .header-actions .action-btn.info-collapse-btn {
    font-size: 18px;
    line-height: 1;
    user-select: none;
}
/* 新增结束 */

/* 新消息提示条 */
.ww-chat-main .new-msg-bar {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: var(--sc-blue);
    color: #fff;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--sc-shadow);
    display: none;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.ww-chat-main .new-msg-bar:hover {
    background: #66b1ff;
}

.ww-chat-main .new-msg-bar.show {
    display: flex;
}

/* 消息流 */
.ww-chat-main .message-flow {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.ww-chat-main .message-flow .flow-inner {
    margin-top: auto;
    width: 100%;
}

.ww-chat-main .msg-item {
    display: flex;
    margin-bottom: 20px;
    position: relative;
    animation: msgFadeIn 0.2s ease;
}

@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ww-chat-main .msg-item.self {
    flex-direction: row-reverse;
}

.ww-chat-main .msg-item.system {
    justify-content: center;
    margin: 12px 0;
}

.ww-chat-main .msg-item .msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: #e8e9eb;
    cursor: pointer;
}

.ww-chat-main .msg-item.self .msg-avatar {
    margin-left: 12px;
}

.ww-chat-main .msg-item:not(.self) .msg-avatar {
    margin-right: 12px;
}

.ww-chat-main .msg-item .msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-chat-main .msg-item .msg-body {
    max-width: 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ww-chat-main .msg-item.self .msg-body {
    align-items: flex-end;
}

.ww-chat-main .msg-item .msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.ww-chat-main .msg-item.self .msg-meta {
    flex-direction: row-reverse;
}

.ww-chat-main .msg-item .msg-username {
    color: var(--sc-text1);
    font-weight: 500;
    cursor: pointer;
}

.ww-chat-main .msg-item .msg-level {
    background: #f2f3f5;
    color: var(--sc-text2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.ww-chat-main .msg-item .msg-title {
    /* 修改：放大底色框并让文字上下左右居中（哥 2026-08-09） */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    min-height: 22px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    font-weight: 500;
}

.ww-chat-main .msg-item .msg-title.owner {
    background: var(--sc-red);
}

.ww-chat-main .msg-item .msg-title.admin {
    background: var(--sc-orange);
}

.ww-chat-main .msg-item .msg-title.vip {
    background: var(--sc-gold);
    color: var(--sc-text1);
}

/* 新增开始：去掉文字色时，用默认文字色兜底，不显示自定义 textColor（哥 2026-08-11） */
.ww-chat-main .msg-item .msg-title.no-text-color,
.ww-chat-info .member-item .member-title.no-text-color {
    color: var(--sc-text1) !important;
}
/* 新增结束 */

.ww-chat-main .msg-item .msg-bubble {
    background: var(--sc-white);
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    color: var(--sc-text1);
    line-height: 1.6;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    position: relative;
}

.ww-chat-main .msg-item.self .msg-bubble {
    background: var(--sc-primary);
    /* 修改：哥要求自己消息纯黑字（原 #1f2329 深灰）2026-08-09 */
    color: #000;
}

.ww-chat-main .msg-item .msg-bubble .msg-text {
    white-space: pre-wrap;
}

.ww-chat-main .msg-item .msg-bubble .msg-text .at-tag {
    color: var(--sc-blue);
    cursor: pointer;
}

.ww-chat-main .msg-item.self .msg-bubble .msg-text .at-tag {
    /* 修改：哥要求自己消息纯黑字 2026-08-09 */
    color: #000;
    text-decoration: underline;
}

/* 新增开始：消息气泡内加粗/下划线必须可见（哥 2026-08-10） */
.ww-chat-main .msg-bubble b,
.ww-chat-main .msg-bubble strong {
    font-weight: bold;
}
.ww-chat-main .msg-bubble u {
    text-decoration: underline;
}
/* 新增结束 */

.ww-chat-main .msg-item .msg-bubble .msg-image {
    max-width: 100%;
    max-height: 220px;
    border-radius: 6px;
    margin: 4px 0;
    cursor: pointer;
    display: block;
}

.ww-chat-main .msg-item .msg-bubble .msg-emoji {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin: 0 2px;
}

.ww-chat-main .msg-item .msg-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 4px;
    z-index: 5;
}

.ww-chat-main .msg-item.self .msg-bubble:hover .msg-actions {
    display: flex;
}

.ww-chat-main .msg-item .msg-actions button {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--sc-white);
    border: 1px solid var(--sc-border);
    color: var(--sc-text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.ww-chat-main .msg-item .msg-actions button:hover {
    background: var(--sc-hover);
    color: var(--sc-text1);
}

.ww-chat-main .msg-item .msg-status {
    font-size: 11px;
    color: var(--sc-text3);
    margin-top: 4px;
    text-align: right;
}

.ww-chat-main .msg-item .msg-status.pending {
    color: var(--sc-orange);
}

.ww-chat-main .msg-item.system .system-text {
    background: rgba(0, 0, 0, 0.04);
    color: var(--sc-text3);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}

/* 底部输入区 */
.ww-chat-main .chat-input-area {
    background: var(--sc-white);
    border-top: 1px solid var(--sc-border);
    padding: 12px 20px 20px;
    flex-shrink: 0;
}

.ww-chat-main .chat-input-area .input-tools {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.ww-chat-main .chat-input-area .input-tools .tool-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-text2);
    transition: all 0.2s ease;
}

.ww-chat-main .chat-input-area .input-tools .tool-icon:hover {
    color: var(--sc-text1);
}

/* 新增开始：加粗/下划线按钮激活态为青色（哥 2026-08-10） */
.ww-chat-main .chat-input-area .input-tools .tool-icon.active {
    color: var(--sc-primary);
}
/* 新增结束 */

/* 新增开始：左侧头像点击弹出的个人资料/退出菜单（哥 2026-08-10） */
.ww-user-menu {
    /* 修改：默认隐藏，避免 buildLayout 里的空 #wwUserMenu div 在聊天区右侧露出白色空白框（哥 2026-08-10 修复 #180） */
    display: none;
    min-width: 160px;
    background: var(--sc-white);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 8px;
    z-index: 9999;
}
/* 修改：头像菜单头部改为头像在上、名字在下的垂直居中布局（哥 2026-08-10） */
.ww-user-menu__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 14px;
    border-bottom: 1px solid var(--sc-border);
    margin-bottom: 6px;
}
.ww-user-menu__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e8e9eb;
}
.ww-user-menu__avatar img,
.ww-user-menu__avatar .avatar-placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: block;
}
.ww-user-menu__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-text1);
}
.ww-user-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--sc-text1);
    cursor: pointer;
    text-decoration: none;
}
.ww-user-menu a:hover {
    background: var(--sc-bg);
}
.ww-user-menu a.danger {
    color: #e54545;
}
.ww-user-menu a.danger:hover {
    background: #fdeced;
}
/* 新增结束 */

.ww-chat-main .chat-input-area .input-tools .tool-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ww-chat-main .chat-input-area .input-box {
    min-height: 80px;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--sc-text1);
    line-height: 1.6;
    outline: none;
    transition: all 0.2s ease;
    white-space: pre-wrap;
    word-break: break-word;
}

.ww-chat-main .chat-input-area .input-box:empty::before {
    content: attr(data-placeholder);
    color: var(--sc-text3);
}

.ww-chat-main .chat-input-area .input-box:focus {
    border-color: var(--sc-primary-dark);
}

.ww-chat-main .chat-input-area .input-box img {
    max-width: 120px;
    max-height: 120px;
    border-radius: 6px;
    vertical-align: middle;
    margin: 2px;
}

/* 新增开始：输入框内加粗/下划线必须可见（哥 2026-08-10） */
.ww-chat-main .chat-input-area .input-box b,
.ww-chat-main .chat-input-area .input-box strong {
    font-weight: bold;
}
.ww-chat-main .chat-input-area .input-box u {
    text-decoration: underline;
}
/* 新增结束 */

.ww-chat-main .chat-input-area .input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.ww-chat-main .chat-input-area .input-tip {
    font-size: 12px;
    color: var(--sc-text3);
}

.ww-chat-main .chat-input-area .send-btn {
    height: 34px;
    padding: 0 24px;
    background: var(--sc-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ww-chat-main .chat-input-area .send-btn:hover {
    background: var(--sc-primary-dark);
}

.ww-chat-main .chat-input-area .send-btn:disabled {
    background: #c9cdd4;
    cursor: not-allowed;
}

.ww-chat-main .chat-input-area.muted .input-box {
    background: #f7f8fa;
    color: var(--sc-text3);
    pointer-events: none;
}

.ww-chat-main .chat-input-area.muted .input-tip {
    color: var(--sc-red);
}

/* ---------- 第四栏：信息详情栏 ---------- */
.ww-chat-info {
    width: 300px;
    min-width: 300px;
    background: var(--sc-white);
    border-left: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 4;
}

.ww-chat-info .info-header {
    /* 修改：固定高度 60px，与左侧 list-header、中间 chat-header 顶对齐 */
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid var(--sc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.ww-chat-info .info-header .info-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-text1);
}

.ww-chat-info .info-header .info-search {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: var(--sc-text2);
    transition: all 0.2s ease;
}

.ww-chat-info .info-header .info-search:hover {
    background: var(--sc-hover);
}

/* 新增开始：右侧成员搜索输入框（哥 2026-08-07） */
.ww-chat-info .info-search-box {
    margin: 10px 16px;
    height: 32px;
    background: #f2f3f5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    transition: background 0.2s ease;
}

.ww-chat-info .info-search-box:focus-within {
    background: #e8e9eb;
}

.ww-chat-info .info-search-box svg {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    fill: var(--sc-text3);
    flex-shrink: 0;
}

.ww-chat-info .info-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--sc-text1);
    font-family: inherit;
}

.ww-chat-info .info-search-input::placeholder {
    color: var(--sc-text3);
}
/* 新增结束 */

.ww-chat-info .member-group {
    margin-bottom: 8px;
}

.ww-chat-info .member-group-title {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--sc-text3);
    font-weight: 500;
}

.ww-chat-info .member-item {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ww-chat-info .member-item:hover {
    background: var(--sc-hover);
}

.ww-chat-info .member-item .member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
    background: #e8e9eb;
    flex-shrink: 0;
}

.ww-chat-info .member-item .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-chat-info .member-item .member-main {
    flex: 1;
    min-width: 0;
}

.ww-chat-info .member-item .member-name {
    font-size: 13px;
    color: var(--sc-text1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-chat-info .member-item .member-level {
    font-size: 11px;
    color: var(--sc-text3);
    margin-top: 2px;
}

.ww-chat-info .member-item .member-title {
    /* 修改：放大底色框并让文字上下左右居中（哥 2026-08-09） */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    font-size: 11px;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 6px;
    line-height: 1.3;
    flex-shrink: 0;
}

.ww-chat-info .member-item .member-title.owner { background: var(--sc-red); }
.ww-chat-info .member-item .member-title.admin { background: var(--sc-orange); }
.ww-chat-info .member-item .member-title.vip { background: var(--sc-gold); color: var(--sc-text1); }

/* 个人主页（好友私聊场景） */
.ww-chat-info .profile-page {
    padding: 20px;
    text-align: center;
}

.ww-chat-info .profile-page .profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 16px;
    overflow: hidden;
    background: #e8e9eb;
}

.ww-chat-info .profile-page .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-chat-info .profile-page .profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-text1);
    margin-bottom: 8px;
}

.ww-chat-info .profile-page .profile-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ww-chat-info .profile-page .profile-signature {
    font-size: 13px;
    color: var(--sc-text2);
    margin-bottom: 24px;
    word-break: break-word;
}

.ww-chat-info .profile-page .profile-section-title {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--sc-text1);
    /* 修改：历史发言与上方删好友按钮拉开间距（哥 2026-08-10） */
    margin-top: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sc-border);
}

.ww-chat-info .profile-page .profile-history-item {
    text-align: left;
    padding: 10px;
    border-radius: 8px;
    background: var(--sc-hover);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ww-chat-info .profile-page .profile-history-item:hover {
    background: #e8e9eb;
}

.ww-chat-info .profile-page .profile-history-item .history-text {
    font-size: 13px;
    color: var(--sc-text1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-chat-info .profile-page .profile-history-item .history-time {
    font-size: 11px;
    color: var(--sc-text3);
    margin-top: 4px;
}

/* 新增开始：个人主页历史发言区域加滚动条（哥 2026-08-10） */
.ww-chat-info .profile-page .profile-history-list {
    max-height: 220px;
    overflow-y: auto;
}
/* 新增结束 */

/* ---------- 悬浮个人资料卡片 ---------- */
.ww-chat-hover-card {
    position: fixed;
    z-index: 200;
    width: 280px;
    background: var(--sc-white);
    border-radius: 12px;
    box-shadow: var(--sc-shadow);
    padding: 16px;
    display: none;
    /* 修改：浮层需要接收鼠标事件，否则 mouseenter 不触发，移到浮层上就会消失 */
    pointer-events: none;
    /* 修改：统一提示框加边框，更精致 */
    border: 1px solid var(--sc-border);
}

.ww-chat-hover-card.show {
    display: block;
    pointer-events: auto;
}

.ww-chat-hover-card .card-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.ww-chat-hover-card .card-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #e8e9eb;
    margin-right: 12px;
    flex-shrink: 0;
}

.ww-chat-hover-card .card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-chat-hover-card .card-info {
    flex: 1;
    min-width: 0;
}

.ww-chat-hover-card .card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--sc-text1);
    margin-bottom: 4px;
}

.ww-chat-hover-card .card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ww-chat-hover-card .card-signature {
    font-size: 12px;
    color: var(--sc-text2);
    line-height: 1.4;
    word-break: break-word;
}

.ww-chat-hover-card .card-history-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-text1);
    margin: 12px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--sc-border);
}

.ww-chat-hover-card .card-history-item {
    padding: 6px 0;
    font-size: 12px;
    color: var(--sc-text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ww-chat-hover-card .card-history-item:hover {
    color: var(--sc-blue);
}

/* 新增开始：悬浮卡片最近发言区域加滚动条（哥 2026-08-10） */
.ww-chat-hover-card .card-history-list {
    max-height: 160px;
    overflow-y: auto;
}
/* 新增结束 */

/* ---------- 登录/注册弹窗 ---------- */
.ww-chat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.ww-chat-modal-overlay.show {
    display: flex;
}

.ww-chat-modal {
    width: 400px;
    background: var(--sc-white);
    border-radius: 12px;
    box-shadow: var(--sc-shadow);
    overflow: hidden;
    /* 修改：弹窗加边框 */
    border: 1px solid var(--sc-border);
}

.ww-chat-modal .modal-header {
    padding: 18px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.ww-chat-modal .modal-header .panel-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-text2);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.ww-chat-modal .modal-header .panel-close:hover {
    background: var(--sc-hover);
    color: var(--sc-text1);
}

.ww-chat-modal .modal-header .panel-close svg {
    width: 20px;
    height: 20px;
}

.ww-chat-modal .modal-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--sc-border);
}

.ww-chat-modal .modal-tab {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sc-text3);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.ww-chat-modal .modal-tab:hover {
    color: var(--sc-text1);
}

.ww-chat-modal .modal-tab.active {
    color: var(--sc-blue);
}

.ww-chat-modal .modal-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--sc-blue);
    border-radius: 1px;
}

.ww-chat-modal .modal-body {
    padding: 24px;
}

.ww-chat-modal .form-group {
    margin-bottom: 16px;
}

.ww-chat-modal .form-group label {
    display: block;
    font-size: 13px;
    color: var(--sc-text2);
    margin-bottom: 6px;
}

.ww-chat-modal .form-group input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--sc-text1);
    transition: all 0.2s ease;
}

.ww-chat-modal .form-group input:focus {
    border-color: var(--sc-blue);
}

.ww-chat-modal .form-error {
    color: var(--sc-red);
    font-size: 12px;
    margin-top: -8px;
    margin-bottom: 12px;
    min-height: 18px;
}

.ww-chat-modal .submit-btn {
    width: 100%;
    height: 44px;
    background: var(--sc-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ww-chat-modal .submit-btn:hover {
    background: #66b1ff;
}

/* ---------- 右上角用户入口 ---------- */
.ww-user-entry {
    position: fixed;
    top: calc(4.43vw + 12px);
    right: 20px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ww-user-entry .entry-btn {
    height: 34px;
    padding: 0 18px;
    background: var(--sc-white);
    border: 1px solid var(--sc-border);
    border-radius: 17px;
    color: var(--sc-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ww-user-entry .entry-btn:hover {
    background: var(--sc-active);
    border-color: var(--sc-blue);
}

.ww-user-entry .entry-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: #e8e9eb;
    border: 1px solid var(--sc-border);
}

.ww-user-entry .entry-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-user-entry .entry-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    width: 140px;
    background: var(--sc-white);
    border-radius: 8px;
    box-shadow: var(--sc-shadow);
    display: none;
    overflow: hidden;
}

.ww-user-entry .entry-dropdown.show {
    display: block;
}

.ww-user-entry .entry-dropdown a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--sc-text1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ww-user-entry .entry-dropdown a:hover {
    background: var(--sc-hover);
}

/* ---------- 通用辅助 ---------- */
.ww-hidden { display: none !important; }

.ww-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sc-text3);
    font-size: 14px;
}

.ww-empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

/* 滚动条 */
.ww-chat-app ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.ww-chat-app ::-webkit-scrollbar-thumb {
    background: #c9cdd4;
    border-radius: 3px;
}

.ww-chat-app ::-webkit-scrollbar-track {
    background: transparent;
}

/* 图片预览 */
.ww-image-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.ww-image-preview.show {
    display: flex;
}

.ww-image-preview img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
}

/* 邮件侧边面板 */
.ww-mail-panel {
    position: absolute;
    top: 0;
    /* 修改： toolbar 宽度改为 52px */
    left: 52px;
    width: 320px;
    height: 100%;
    background: var(--sc-white);
    border-right: 1px solid var(--sc-border);
    /* 修改：邮件面板层级低于工具栏(50)但高于频道/好友/消息/成员列表（哥 2026-08-10） */
    z-index: 40;
    /* 修改：原 translateX(-100%) 会让面板右边缘停在 x=52，白底整块盖住工具栏（大白屏根因）。
       改为额外再左移 52px 完全移出，并配合 visibility 彻底隐藏（哥 2026-08-07） */
    transform: translateX(calc(-100% - 52px));
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    /* 修改：隐藏态禁止拦截点击，避免盖住左侧工具栏（哥 2026-08-07） */
    pointer-events: none;
}

.ww-mail-panel.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s linear 0s;
    pointer-events: auto;
}

.ww-mail-panel .panel-header {
    height: 60px;
    border-bottom: 1px solid var(--sc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.ww-mail-panel .panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sc-text1);
}

.ww-mail-panel .panel-close {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-text2);
}

.ww-mail-panel .panel-close:hover {
    background: var(--sc-hover);
}

.ww-mail-panel .mail-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.ww-mail-panel .mail-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sc-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ww-mail-panel .mail-item:hover {
    background: var(--sc-hover);
}

.ww-mail-panel .mail-item.unread {
    background: var(--sc-active);
}

.ww-mail-panel .mail-item .mail-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-text1);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-mail-panel .mail-item .mail-time {
    font-size: 11px;
    color: var(--sc-text3);
    margin-bottom: 6px;
}

.ww-mail-panel .mail-item .mail-preview {
    font-size: 12px;
    color: var(--sc-text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-mail-panel .mail-detail {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: none;
}

.ww-mail-panel .mail-detail.show {
    display: block;
}

.ww-mail-panel .mail-detail .detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sc-text1);
    margin-bottom: 8px;
}

.ww-mail-panel .mail-detail .detail-time {
    font-size: 12px;
    color: var(--sc-text3);
    margin-bottom: 20px;
}

.ww-mail-panel .mail-detail .detail-content {
    font-size: 14px;
    color: var(--sc-text2);
    line-height: 1.7;
    word-break: break-word;
}

/* 联系人面板 */
.ww-contacts-panel {
    position: absolute;
    top: 0;
    /* 修改： toolbar 宽度改为 52px */
    left: 52px;
    width: 280px;
    height: 100%;
    background: var(--sc-white);
    border-right: 1px solid var(--sc-border);
    /* 修改：通讯录面板层级同邮件面板，低于工具栏(50)高于内容区（哥 2026-08-10） */
    z-index: 40;
    /* 修改：同邮件面板，隐藏时必须完全移出，否则白底会盖住 52px 工具栏（哥 2026-08-07） */
    transform: translateX(calc(-100% - 52px));
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    /* 修改：隐藏态禁止拦截点击，避免盖住左侧工具栏（哥 2026-08-07） */
    pointer-events: none;
}

.ww-contacts-panel.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s linear 0s;
    pointer-events: auto;
}

.ww-contacts-panel .panel-header {
    height: 60px;
    border-bottom: 1px solid var(--sc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

/* 新增开始：通讯录 X 关闭按钮缺失尺寸导致宽度 0、不可点击（哥 2026-08-07） */
.ww-contacts-panel .panel-close {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-text2);
    flex-shrink: 0;
}
.ww-contacts-panel .panel-close:hover {
    background: var(--sc-hover);
}
/* 新增结束 */

.ww-contacts-panel .user-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.ww-contacts-panel .user-list-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ww-contacts-panel .user-list-item:hover {
    background: var(--sc-hover);
}

.ww-contacts-panel .user-list-item .u-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
    background: #e8e9eb;
}

.ww-contacts-panel .user-list-item .u-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-contacts-panel .user-list-item .u-name {
    font-size: 14px;
    color: var(--sc-text1);
}

/* 新增开始：加好友相关样式（哥 2026-08-06 / 2026-08-07 改为通讯录好友列表） */
.ww-contacts-panel .user-list-item {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.ww-contacts-panel .user-list-item:hover {
    background: var(--sc-hover);
}

.ww-contacts-panel .user-list-item .u-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
    background: #e8e9eb;
    flex-shrink: 0;
}

.ww-contacts-panel .user-list-item .u-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-contacts-panel .user-list-item .u-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ww-contacts-panel .user-list-item .u-name {
    font-size: 14px;
    color: var(--sc-text1);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ww-contacts-panel .user-list-item .u-sub {
    font-size: 12px;
    color: var(--sc-text3);
    margin-top: 2px;
}

.ww-contacts-panel .user-list-item .u-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 8px;
}

.ww-contacts-panel .user-list-item .u-actions .u-btn {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.ww-contacts-panel .user-list-item .u-actions .u-btn.chat {
    background: var(--sc-theme, #7CECFC);
    color: #0a2a33;
}

.ww-contacts-panel .user-list-item .u-actions .u-btn.chat:hover { filter: brightness(.95); }

.ww-contacts-panel .user-list-item .u-actions .u-btn.del {
    background: #ffe9e9;
    color: #ff4d4f;
}

.ww-contacts-panel .user-list-item .u-actions .u-btn.del:hover { filter: brightness(.97); }

.ww-chat-hover-card .card-add-friend {
    margin-top:10px;
    text-align:center;
    font-size:13px;
    padding:7px 0;
    border-radius:8px;
    background:var(--sc-theme,#7CECFC);
    color:#0a2a33;
    cursor:pointer;
    transition:all .2s;
}
.ww-chat-hover-card .card-add-friend:hover { filter:brightness(.95); }

.profile-page .profile-add-friend {
    display:block;
    width:100%;
    margin-top:12px;
    font-size:13px;
    padding:8px 0;
    border:none;
    border-radius:8px;
    background:var(--sc-theme,#7CECFC);
    color:#0a2a33;
    cursor:pointer;
    transition:all .2s;
}
.profile-page .profile-add-friend:hover { filter:brightness(.95); }
/* 新增结束：加好友相关样式 */

/* 新增结束：社交频道四栏即时通讯系统样式 */

/* 新增开始：居中模态提示框(替代原生alert/confirm) */
.ww-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:10000; }
.ww-modal-overlay.show { display:flex; }
.ww-modal { background:#fff; border-radius:14px; padding:26px 28px; min-width:300px; max-width:90vw; max-height:90vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.25); animation:wwModalIn .18s ease-out; border:1px solid #e5e6eb; }
@keyframes wwModalIn { from { transform:translateY(10px) scale(.96); opacity:0; } to { transform:none; opacity:1; } }
.ww-modal-msg { font-size:15px; line-height:1.6; color:#1f2329; margin-bottom:20px; word-break:break-word; white-space:pre-wrap; }
.ww-modal-btns { display:flex; gap:12px; justify-content:flex-end; }
.ww-modal-btn { font-size:14px; padding:8px 20px; border-radius:8px; border:none; cursor:pointer; transition:all .15s; }
.ww-modal-btn.ok { background:var(--sc-theme,#7CECFC); color:#0a2a33; font-weight:600; }
.ww-modal-btn.ok:hover { filter:brightness(.95); }
.ww-modal-btn.cancel { background:#eef0f2; color:#5a6168; }
.ww-modal-btn.cancel:hover { background:#e3e6e9; }
/* 新增结束：居中模态提示框 */

/* 新增开始：邮箱双栏 + 好友申请操作按钮（哥 2026-08-07） */
.ww-mail-panel .mail-tabs { display:flex; border-bottom:1px solid var(--sc-border); }
.ww-mail-panel .mail-tab { flex:1; text-align:center; padding:12px 0; font-size:13px; color:var(--sc-text2); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.ww-mail-panel .mail-tab.active { color:var(--sc-blue); border-bottom-color:var(--sc-blue); font-weight:600; }
.ww-mail-panel .mail-detail-actions { display:flex; gap:12px; margin-top:16px; }
.ww-mail-panel .mail-accept, .ww-mail-panel .mail-reject { flex:1; padding:9px 0; border:none; border-radius:8px; cursor:pointer; font-size:14px; transition:all .15s; }
.ww-mail-panel .mail-accept { background:var(--sc-theme,#7CECFC); color:#0a2a33; font-weight:600; }
.ww-mail-panel .mail-accept:hover { filter:brightness(.95); }
.ww-mail-panel .mail-reject { background:#f2f3f5; color:#5a6168; }
.ww-mail-panel .mail-reject:hover { background:#e3e6e9; }
.ww-mail-panel .detail-meta { font-size:12px; color:#9097a0; margin:6px 0 12px; }
.ww-mail-panel .detail-back { margin-top:16px; text-align:center; font-size:13px; color:var(--sc-blue); cursor:pointer; }
/* 浮层/资料页 待通过 + 删好友 状态 */
.ww-chat-hover-card .card-pending { background:#e8e9eb; color:#9097a0; cursor:default; }
.ww-chat-hover-card .card-del-friend { background:#ffe9e9; color:#ff4d4f; }
.ww-chat-hover-card .card-del-friend:hover { filter:brightness(.97); }
.profile-page .profile-pending { background:#e8e9eb; color:#9097a0; cursor:default; }
.profile-page .profile-del-friend { background:#ffe9e9; color:#ff4d4f; }
.profile-page .profile-del-friend:hover { filter:brightness(.97); }
/* 新增结束：邮箱双栏 + 好友申请操作按钮 */

/* 新增开始：侧边栏/成员栏折叠 + 收起按钮 + 未登录提示（哥 2026-08-09） */
.ww-chat-channel-list {
    transition: width 0.3s ease, min-width 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.ww-chat-channel-list.ww-collapsed {
    width: 0;
    min-width: 0;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}
.ww-chat-info {
    position: relative;
    transition: width 0.3s ease, min-width 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.ww-chat-info.ww-collapsed {
    width: 0;
    min-width: 0;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.ww-chat-info .info-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--sc-white);
}
.ww-chat-info .info-collapse-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--sc-text2);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.2s;
}
.ww-chat-info .info-collapse-btn:hover {
    background: var(--sc-hover);
    color: var(--sc-blue);
}
.ww-chat-info .info-collapse-btn--float {
    position: absolute;
    top: 16px;
    right: 12px;
    z-index: 40;
    background: var(--sc-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--sc-border);
}
.ww-user-entry .entry-tip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--sc-text2);
    font-size: 14px;
    text-align: center;
}
.ww-user-entry .entry-tip a {
    color: var(--sc-blue);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.ww-user-entry .entry-tip a:hover {
    text-decoration: underline;
}
/* 新增结束 */

/* 修改：登录入口移到右上角，改为蓝框样式（哥 2026-08-09） */
.header .ww-header-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 14px;
    padding: 7px 16px;
    border-radius: 16px;
    border: 1px solid var(--sc-blue);
    background: transparent;
    color: var(--sc-blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.header .ww-header-login:hover {
    background: var(--sc-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
}
/* 修改结束 */

/* 新增开始：header 下方全宽滚动公告栏（哥 2026-08-09） */
.ww-top-ad {
    width: 100%;
    height: 2.08vw;            /* 40px @ 1920 设计稿基准 */
    min-height: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #62bfcc 0%, #7cecfc 100%);
    color: #fff;
    font-size: 0.72vw;         /* 约 13.8px @ 1920 */
    letter-spacing: 0.05vw;
    position: relative;
    z-index: 30;
}
.ww-top-ad__track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: ww-ad-scroll 26s linear infinite;
}
.ww-top-ad__item {
    padding: 0 2.5vw;
    flex-shrink: 0;
}
.ww-top-ad:hover .ww-top-ad__track {
    animation-play-state: paused;
}
@keyframes ww-ad-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* 修改：社交频道页为公告栏让出 2.08vw 高度，避免整体溢出 100vh（哥 2026-08-09） */
.page-join.ww-chat-page {
    height: calc(100vh - 4.43vw - 2.08vw);
}
/* 新增结束 */

/* 新增开始：邮件删除与一键已读（哥 2026-08-09） */
.ww-mail-panel .mail-read-all {
    margin-right: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--sc-blue), #66b1ff);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ww-mail-panel .mail-read-all:hover {
    filter: brightness(1.05);
    box-shadow: 0 4px 10px rgba(64, 158, 255, 0.45);
    transform: translateY(-1px);
}
.ww-mail-panel .mail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
}
.ww-mail-panel .mail-item .mail-info {
    flex: 1;
    min-width: 0;
}
.ww-mail-panel .mail-delete,
.ww-mail-panel .mail-delete-detail {
    flex-shrink: 0;
    margin-left: 8px;
    padding: 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #9097a0;
    cursor: pointer;
    line-height: 1;
}
.ww-mail-panel .mail-delete:hover,
.ww-mail-panel .mail-delete-detail:hover {
    background: #ffe9e9;
    color: #ff4d4f;
}
.ww-mail-panel .mail-delete svg {
    width: 16px;
    height: 16px;
    display: block;
}
.ww-mail-panel .detail-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}
.ww-mail-panel .mail-delete-detail {
    background: #ffe9e9;
    color: #ff4d4f;
    padding: 6px 12px;
    font-size: 12px;
}
/* 新增结束 */

/* 修改：普通用户头衔兜底样式（哥 2026-08-09） */
.ww-chat-info .member-item .member-title.base {
    background: #909399;
    color: #ffffff;
}
/* 新增结束 */