/* 全局样式 - 强制无缝全屏 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* ⚡⚡⚡ 扫码动画定义 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes scaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.8), 0 0 40px rgba(0, 212, 255, 0.4);
    }
    50% {
        text-shadow: 0 0 30px rgba(0, 212, 255, 1), 0 0 60px rgba(0, 212, 255, 0.6);
    }
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.container {
    display: flex;
    height: 100vh;
    width: 100vw;
    padding: 55px 3px 3px 3px;
    gap: 6px;
    position: relative;
    margin: 0;
    box-sizing: border-box;
}

/* 右上角用户栏 */
.top-user-bar {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(42, 42, 62, 0.9);
    border: 2px solid #0f3460;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.top-user-bar span {
    color: #00d4ff;
    font-weight: bold;
    font-size: 14px;
}

.btn-top-purchase {
    background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-top-purchase:hover {
    background: linear-gradient(180deg, #e57373 0%, #f44336 100%);
    transform: translateY(-1px);
}

.btn-top-member {
    background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-top-member:hover {
    background: linear-gradient(180deg, #e57373 0%, #f44336 100%);
    transform: translateY(-1px);
}

.btn-top-logout {
    background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-top-logout:hover {
    background: linear-gradient(180deg, #e57373 0%, #f44336 100%);
    transform: translateY(-1px);
}

/* 右上角登录按钮（未登录状态） */
.top-login-bar {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(42, 42, 62, 0.9);
    border: 2px solid #0f3460;
    border-radius: 8px;
    padding: 10px 20px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.btn-top-login {
    background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-top-login:hover {
    background: linear-gradient(180deg, #42A5F5 0%, #2196F3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.5);
}

/* 左侧面板 - 响应式宽度 */
.left-panel {
    flex: 0 1 18vw;
    width: 18vw;
    min-width: 240px;
    max-width: 340px;
    background: rgba(42, 42, 62, 0.7);
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.left-panel h3 {
    font-size: 15px;
    color: #00d4ff;
    margin-bottom: 10px;
    font-weight: bold;
}

/* 登录区域 */
.login-section, .activation-section, .rules-section, .keyword-ban-section, .ai-reply-section, .auto-stop-section, .product-section, .punishment-auto-stop-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.qr-area {
    width: 100%;
    max-width: 300px;
    height: 280px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.qr-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-area .loading {
    color: #666;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}

.user-info {
    text-align: left;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 10px;
    color: #e0e0e0;
    font-size: 13px;
}

#userNickname {
    color: #e0e0e0;
    font-size: 13px;
}

/* 规则提示 */
.rules-tip {
    color: #00d4ff;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* AI自动回复区域 */
.ai-reply-section h3 {
    color: #ff9800;
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.ai-role-input {
    margin-bottom: 10px;
}

.ai-role-input label {
    color: #00d4ff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.ai-role-input textarea {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    resize: vertical;
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1.5;
}

.ai-role-input textarea:focus {
    outline: none;
    border-color: #ff9800;
    background: rgba(0, 0, 0, 0.5);
}

.ai-role-input textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.ai-reply-status {
    margin-top: 10px;
    text-align: center;
}

.ai-reply-status span {
    font-size: 12px;
    color: #999;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

.ai-reply-status span.active {
    color: #4CAF50;
    font-weight: bold;
}

/* 评论关键词拉黑区域 */
.keyword-ban-section h3 {
    color: #f44336;
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.keyword-ban-input {
    margin-bottom: 10px;
}

.keyword-ban-input label {
    color: #00d4ff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.keyword-ban-input label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.keyword-ban-input textarea {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    resize: vertical;
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1.5;
}

.keyword-ban-input textarea:focus {
    outline: none;
    border-color: #f44336;
    background: rgba(0, 0, 0, 0.5);
}

.keyword-ban-input textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.keyword-ban-status {
    margin-top: 10px;
    text-align: center;
}

.keyword-ban-status span {
    font-size: 12px;
    color: #999;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

.keyword-ban-status span.active {
    color: #f44336;
    font-weight: bold;
}

/* 规则勾选 - 两列布局 */
.rule-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 15px;
}

.rule-checks label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #e0e0e0;
    font-size: 14px;
    transition: all 0.3s;
}

.rule-checks label:hover {
    color: #fff;
}

.rule-checks input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border-radius: 4px;
}

/* 按钮 */
.btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
}

.btn-activate {
    background: linear-gradient(180deg, #9C27B0 0%, #7B1FA2 100%);
    min-height: 45px;
}

.btn-activate:hover {
    background: linear-gradient(180deg, #BA68C8 0%, #9C27B0 100%);
}

.btn-start {
    background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%);
    min-height: 60px;
    font-size: 16px;
    margin-bottom: 8px;
}

.btn-start:hover:not(:disabled) {
    background: linear-gradient(180deg, #42A5F5 0%, #2196F3 100%);
}

.btn-stop {
    background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
    min-height: 60px;
    font-size: 16px;
}

.btn-stop:hover:not(:disabled) {
    background: linear-gradient(180deg, #e57373 0%, #f44336 100%);
}

.btn-logout {
    background: linear-gradient(180deg, #666 0%, #444 100%);
    font-size: 14px;
    min-height: 35px;
}

.btn-logout:hover {
    background: linear-gradient(180deg, #777 0%, #555 100%);
}

.btn:disabled {
    background: #555 !important;
    color: #888;
    cursor: not-allowed;
}

.control-buttons {
    margin-top: auto;
}

/* 中间面板 - 横向两列布局（商品讲解 + 数据大屏）*/
.middle-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
}

/* 商品讲解区域 - 响应式宽度 */
.product-area {
    flex: 0 1 20vw;
    width: 20vw;
    min-width: 280px;
    max-width: 400px;
    background: rgba(42, 42, 62, 0.7);
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 15px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.product-area .product-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.data-panel {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(42, 42, 62, 0.7);
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 15px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 保留log-area样式以兼容性 */
.log-area {
    flex: 1.2;
    background: rgba(42, 42, 62, 0.7);
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

.log-area h3 {
    font-size: 18px;
    color: #00d4ff;
    padding-bottom: 10px;
    font-weight: bold;
}

.btn-clear-log {
    background: linear-gradient(180deg, #FF5722 0%, #E64A19 100%);
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-clear-log:hover {
    background: linear-gradient(180deg, #FF7043 0%, #FF5722 100%);
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.4);
}

.log-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #e0e0e0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.4) rgba(0, 0, 0, 0.2);
}

.log-item {
    padding: 6px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #00d4ff;
}

/* 右侧面板 - 响应式宽度 */
.right-panel {
    flex: 0 1 22vw;
    width: 22vw;
    min-width: 300px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    /* Firefox滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.6) rgba(0, 0, 0, 0.2);
}

/* 右侧面板滚动条样式 - Chrome/Edge/Safari */
.right-panel::-webkit-scrollbar {
    width: 8px;
}

.right-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.right-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.8) 0%, rgba(0, 153, 204, 0.8) 100%);
    border-radius: 4px;
    transition: all 0.3s;
}

.right-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 1) 0%, rgba(0, 153, 204, 1) 100%);
}

/* 实时消息 - 增加显示区域，更多画面 */
.message-area {
    flex: 0 0 auto;
    min-height: 600px;  /* 🔥 增加最小高度：500px → 600px */
    max-height: 900px;  /* 🔥 增加最大高度：750px → 900px */
    background: rgba(42, 42, 62, 0.7);
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 16px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;  /* 🔥 固定位置，防止随消息移动 */
}

.message-area h3 {
    font-size: 15px;
    color: #00d4ff;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 212, 255, 0.3);
    font-weight: bold;
}

.message-hint {
    font-size: 12px;
    color: #fff;
    margin-bottom: 10px;
    margin-top: -10px;
    padding: 6px 10px;
    background: transparent;
    border-left: 3px solid #ffd700;
    border-radius: 4px;
}

.message-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    height: 500px;  /* 🔥🔥🔥 固定高度，防止窗口随消息变化 */
    min-height: 500px;
    max-height: 500px;
    position: relative;
    /* Firefox滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.6) rgba(0, 0, 0, 0.2);
}

/* 商品列表容器滚动条 */
#productListContainer {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.6) rgba(0, 0, 0, 0.2);
}

/* 定时评论textarea滚动条 */
.timed-comment-content textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.6) rgba(0, 0, 0, 0.2);
}

/* AI角色设定textarea滚动条 */
.ai-role-input textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.6) rgba(0, 0, 0, 0.2);
}

/* 评论关键词textarea滚动条 */
.keyword-ban-input textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.6) rgba(0, 0, 0, 0.2);
}

/* Chrome/Edge/Safari 滚动条样式 - 统一美化滚动条 */
.message-list::-webkit-scrollbar,
#productListContainer::-webkit-scrollbar,
.timed-comment-content textarea::-webkit-scrollbar,
.ai-role-input textarea::-webkit-scrollbar,
.keyword-ban-input textarea::-webkit-scrollbar {
    width: 8px;
}

.message-list::-webkit-scrollbar-track,
#productListContainer::-webkit-scrollbar-track,
.timed-comment-content textarea::-webkit-scrollbar-track,
.ai-role-input textarea::-webkit-scrollbar-track,
.keyword-ban-input textarea::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.message-list::-webkit-scrollbar-thumb,
#productListContainer::-webkit-scrollbar-thumb,
.timed-comment-content textarea::-webkit-scrollbar-thumb,
.ai-role-input textarea::-webkit-scrollbar-thumb,
.keyword-ban-input textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border-radius: 4px;
    transition: all 0.3s;
}

.message-list::-webkit-scrollbar-thumb:hover,
#productListContainer::-webkit-scrollbar-thumb:hover,
.timed-comment-content textarea::-webkit-scrollbar-thumb:hover,
.ai-role-input textarea::-webkit-scrollbar-thumb:hover,
.keyword-ban-input textarea::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #42d4ff 0%, #00bfff 100%);
}

/* 🔥🔥🔥 消息气泡样式 - 完全重构 */
.message-item {
    margin-bottom: 8px;
    animation: fadeIn 0.3s;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    clear: both;
    width: 100%;
}

/* 粉丝消息 - 左对齐 */
.message-item.left {
    justify-content: flex-start !important;
    flex-direction: row !important;
}

/* 主播/助手消息 - 右对齐，完全紧贴右边框 */
.message-item.right {
    justify-content: flex-end !important;
    flex-direction: row-reverse !important;
    margin-right: -15px !important;
    padding-right: 15px !important;
}

.message-user {
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 16px;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;  /* 防止头像名称换行 */
    flex-shrink: 0;  /* 头像不被压缩 */
    line-height: 1.3;
    box-sizing: border-box;
}

/* 男生头像 - 蓝色 */
.message-user.male {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: 1px solid rgba(0, 212, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
}

.message-user.male:hover {
    background: linear-gradient(135deg, #42d4ff 0%, #00bfff 100%);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
    transform: translateY(-1px);
}

/* 女生头像 - 粉色 */
.message-user.female {
    background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
    border: 1px solid rgba(255, 105, 180, 0.5);
    box-shadow: 0 2px 8px rgba(255, 105, 180, 0.2);
}

.message-user.female:hover {
    background: linear-gradient(135deg, #ff85c1 0%, #ff3da8 100%);
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
    transform: translateY(-1px);
}

/* 未知性别 - 默认蓝色 */
.message-user:not(.male):not(.female) {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: 1px solid rgba(0, 212, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
}

.message-user:not(.male):not(.female):hover {
    background: linear-gradient(135deg, #42d4ff 0%, #00bfff 100%);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
    transform: translateY(-1px);
}

.message-user:active {
    transform: translateY(0);
}

.message-bubble {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 150, 200, 0.1) 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    padding: 8px 14px;
    display: inline-block;
    max-width: calc(100% - 120px);  /* 为头像留出空间 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1);
    flex-shrink: 1;  /* 允许收缩 */
    box-sizing: border-box;
}

.message-bubble.ban {
    background: linear-gradient(135deg, rgba(230, 67, 64, 0.15) 0%, rgba(200, 50, 50, 0.1) 100%);
    border-color: rgba(230, 67, 64, 0.3);
    white-space: nowrap;  /* 🔥 防止拉黑消息换行，横排显示 */
    overflow: hidden;  /* 超长内容隐藏 */
    text-overflow: ellipsis;  /* 超长内容显示省略号 */
    max-width: 600px;  /* 增加最大宽度，确保横排显示 */
}

/* 🔥🔥🔥 关注消息、分享消息 - 横着显示不换行 */
.message-bubble.follow,
.message-bubble.share {
    white-space: nowrap;  /* 不换行 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
}

/* 🔥 进入消息 - 允许换行显示完整内容 */
.message-bubble.enter {
    white-space: normal;  /* 允许换行 */
    word-break: break-word;
    max-width: 400px;
    line-height: 1.5;
}

/* 手动回复输入框 */
.manual-reply-box {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    padding-top: 15px;
    border-top: 2px solid rgba(0, 212, 255, 0.2);
    width: 100%;
}

.manual-reply-box input {
    flex: 1;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.manual-reply-box input:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.manual-reply-box input::placeholder {
    color: #999;
}

.manual-reply-box button {
    padding: 12px 25px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

.manual-reply-box button:hover {
    background: linear-gradient(135deg, #42d4ff 0%, #00bfff 100%);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.5);
    transform: translateY(-1px);
}

.manual-reply-box button:active {
    transform: translateY(0);
}

/* 拉黑列表 - 已隐藏（使用黑名单按钮） */
.ban-area {
    display: none;
}

/* 定时评论功能区域 - 下移并优化布局 */
.timed-comment-section {
    flex: 0 0 auto;
    margin-top: 20px;
    background: rgba(42, 42, 62, 0.7);
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.timed-comment-section h3 {
    font-size: 15px;
    color: #00d4ff;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 212, 255, 0.3);
    font-weight: bold;
}

.timed-comment-content textarea {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    outline: none;
    transition: all 0.3s;
}

.timed-comment-content textarea:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.timed-comment-content textarea::placeholder {
    color: #666;
}

.timed-comment-content select {
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
}

.timed-comment-content select:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.timed-comment-content .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.5);
}

.timed-comment-content .btn:active {
    transform: translateY(0);
}

.timed-comment-status {
    margin-top: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
}

.timed-comment-status span {
    color: #999;
}

.timed-comment-status span.active {
    color: #4CAF50;
    font-weight: bold;
}

.ban-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
    min-height: 150px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.4) rgba(0, 0, 0, 0.2);
}

.ban-item {
    padding: 10px;
    margin-bottom: 8px;
    background: rgba(230, 67, 64, 0.1);
    border-radius: 6px;
    border-left: 3px solid #e64340;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #e0e0e0;
    cursor: pointer;
    word-wrap: break-word;  /* 长文字自动换行 */
    overflow-wrap: break-word;  /* 确保换行 */
    gap: 10px;
}

.ban-item > div:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ban-item:hover {
    background: rgba(230, 67, 64, 0.2);
}

.ban-item button {
    background: #4CAF50;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

.ban-item button:hover {
    background: #45a049;
}

/* 模态框 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    margin: 5% auto;
    padding: 30px;
    border: 2px solid #00d4ff;
    border-radius: 15px;
    width: 700px;
    max-width: 90%;
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.4), 0 0 60px rgba(0, 212, 255, 0.15);
    max-height: 90vh;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    position: relative;
}

.modal-content h2 {
    color: #00d4ff;
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.payment-packages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.package-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.package-month {
    border: 2px solid #4CAF50;
}

.package-year {
    border: 2px solid #FF9800;
}

.package-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.package-month .package-title {
    color: #4CAF50;
}

.package-year .package-title {
    color: #FF9800;
}

.package-price {
    font-size: 28px;
    font-weight: bold;
    color: white;
    margin: 10px 0;
}

.package-desc {
    color: #ccc;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 15px;
}

.package-card .btn {
    width: 100%;
    background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%) !important;
    font-size: 16px;
    font-weight: bold;
}

.package-card .btn:hover {
    background: linear-gradient(180deg, #42A5F5 0%, #2196F3 100%) !important;
    transform: translateY(-2px);
}

.modal-body {
    margin-bottom: 20px;
}

.modal-body input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid rgba(0, 212, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.modal-body input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.modal-body input:focus {
    outline: none;
    border-color: #00d4ff;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.modal-body .btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    transition: all 0.3s;
}

.modal-body .btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

.close {
    color: rgba(255, 255, 255, 0.5);
    float: right;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
    transition: all 0.3s;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.close:hover {
    color: #00d4ff;
    transform: rotate(90deg);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
}

.message {
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 14px;
}

.message.success {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border: 1px solid #4CAF50;
}

.message.error {
    background: rgba(230, 67, 64, 0.2);
    color: #e64340;
    border: 1px solid #e64340;
}

/* 商品列表项样式 */
.product-item {
    transition: all 0.3s ease;
}

.product-item:hover {
    background: rgba(0, 212, 255, 0.08) !important;
    border-left: 2px solid #00d4ff;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
    transform: translateX(2px);
}

/* 间隔按钮悬停效果 */
.interval-btn:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 153, 204, 0.3) 100%) !important;
    border-color: rgba(0, 212, 255, 0.6) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3) !important;
}

/* 重复讲解控制按钮悬停效果 */
.repeat-control-btn:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.3);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4) !important;
}

.repeat-control-btn:not(:disabled):active {
    transform: translateY(0);
}

#selectAllProducts:hover {
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.5) !important;
}

#startRepeatBtn:hover {
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5) !important;
}

#stopRepeatBtn:not(:disabled):hover {
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.5) !important;
}

/* 下拉选择框样式统一 */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #00d4ff !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

select option {
    background: rgba(42, 42, 62, 0.95);
    color: #e0e0e0;
    padding: 8px;
}

/* 复选框样式 */
input[type="checkbox"] {
    accent-color: #00d4ff;
    cursor: pointer;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 10px;  /* 增加滚动条宽度，更容易看到 */
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.4);  /* 增加不透明度 */
    border-radius: 5px;
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);  /* 悬停时更明显 */
}

/* ⚠️ 处罚通知自动下播区域美化 */
.punishment-auto-stop-section {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08) 0%, rgba(255, 87, 34, 0.08) 100%) !important;
    border: 2px solid rgba(255, 152, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.2);
    transition: all 0.3s;
}

.punishment-auto-stop-section:hover {
    border-color: rgba(255, 152, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.3);
}

.punishment-checkbox-wrapper {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
}

.punishment-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

.punishment-label:hover {
    transform: translateX(5px);
}

.punishment-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: #ff9800;
}

.punishment-text {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.punishment-hint {
    background: rgba(255, 152, 0, 0.1);
    border-left: 3px solid #ff9800;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.punishment-hint span:last-child {
    flex: 1;
}

/* ⏰ 定时下播区域美化 */
.timed-stop-section {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(30, 136, 229, 0.08) 100%) !important;
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
    transition: all 0.3s;
}

.timed-stop-section:hover {
    border-color: rgba(33, 150, 243, 0.5);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.3);
}

.timed-stop-preset:hover {
    background: rgba(33, 150, 243, 0.25) !important;
    border-color: rgba(33, 150, 243, 0.6) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.timed-stop-preset:active {
    transform: translateY(0);
}

.timed-stop-hint {
    background: rgba(33, 150, 243, 0.1);
    border-left: 3px solid #2196F3;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.timed-stop-hint span:last-child {
    flex: 1;
}

/* 选中时长显示动画 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ========================================
   📱 响应式设计 - 890P到4K完美适配
   ======================================== */

/* 🖥️ 4K超高分辨率 (3840×2160及以上) */
@media (min-width: 3840px) {
    .container {
        padding: 60px 8px 8px 8px;
        gap: 12px;
        width: 100vw;
    }
    
    .left-panel {
        width: 16vw;
        min-width: 380px;
        max-width: 450px;
        font-size: 15px;
    }
    
    .product-area {
        width: 18vw;
        min-width: 400px;
        max-width: 550px;
    }
    
    .right-panel {
        width: 20vw;
        min-width: 450px;
        max-width: 600px;
        gap: 16px;
    }
    
    .message-area {
        min-height: 750px;  /* 🔥 增加：650px → 750px */
        max-height: 1200px;  /* 🔥 增加：1050px → 1200px */
        padding: 22px;
    }
    
    .message-area h3 {
        font-size: 18px !important;
    }
    
    .timed-comment-section {
        margin-top: 24px;
        padding: 22px;
    }
    
    .timed-comment-section h3 {
        font-size: 18px !important;
    }
    
    /* 数据卡片更大字体 */
    .data-value {
        font-size: 28px !important;
    }
    
    .data-label {
        font-size: 14px !important;
    }
    
    /* 画像页面4K优化 - 无需额外padding，使用内部元素控制 */
    #portraitPage > div > div:first-child {
        padding: 20px 25px !important;
    }
    
    #portraitChartContainer {
        gap: 40px !important;
    }
}

/* 🖥️ 2K分辨率 (2560×1440) */
@media (min-width: 2560px) and (max-width: 3839px) {
    .container {
        padding: 55px 6px 6px 6px;
        gap: 10px;
        width: 100vw;
    }
    
    .left-panel {
        width: 17vw;
        min-width: 320px;
        max-width: 380px;
    }
    
    .product-area {
        width: 19vw;
        min-width: 350px;
        max-width: 450px;
    }
    
    .right-panel {
        width: 21vw;
        min-width: 400px;
        max-width: 550px;
        gap: 14px;
    }
    
    .message-area {
        min-height: 700px;  /* 🔥 增加：600px → 700px */
        max-height: 1100px;  /* 🔥 增加：950px → 1100px */
        padding: 20px;
    }
    
    .message-area h3 {
        font-size: 17px !important;
    }
    
    .timed-comment-section {
        margin-top: 22px;
        padding: 20px;
    }
    
    .timed-comment-section h3 {
        font-size: 17px !important;
    }
    
    .data-value {
        font-size: 24px !important;
    }
}

/* 💻 Full HD (1920×1080) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .container {
        padding: 55px 5px 5px 5px;
        gap: 8px;
        width: 100vw;
    }
    
    .left-panel {
        width: 18vw;
        min-width: 290px;
        max-width: 350px;
    }
    
    .product-area {
        width: 20vw;
        min-width: 320px;
        max-width: 400px;
    }
    
    .right-panel {
        width: 22vw;
        min-width: 360px;
        max-width: 480px;
        gap: 12px;
    }
    
    .message-area {
        min-height: 650px;  /* 🔥 增加：550px → 650px */
        max-height: 1000px;  /* 🔥 增加：850px → 1000px */
        padding: 18px;
    }
    
    .message-area h3 {
        font-size: 16px !important;
    }
    
    .timed-comment-section {
        margin-top: 20px;
        padding: 18px;
    }
    
    .timed-comment-section h3 {
        font-size: 16px !important;
    }
}

/* 💻 标准HD+ (1600×900 - 1680×1050) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .container {
        padding: 55px 4px 4px 4px;
        gap: 6px;
        width: 100vw;
    }
    
    .left-panel {
        width: 18vw;
        min-width: 270px;
        max-width: 320px;
        padding: 10px;
    }
    
    .product-area {
        width: 20vw;
        min-width: 300px;
        max-width: 380px;
        padding: 12px;
    }
    
    .right-panel {
        width: 22vw;
        min-width: 340px;
        max-width: 450px;
        gap: 11px;
    }
    
    .message-area {
        min-height: 580px;  /* 🔥 增加：480px → 580px */
        max-height: 870px;  /* 🔥 增加：720px → 870px */
        padding: 15px;
    }
    
    .timed-comment-section {
        margin-top: 18px;
        padding: 15px;
    }
    
    .data-value {
        font-size: 18px !important;
    }
}

/* 💻 890P - 标准HD (1280×720 - 1440×900) */
@media (min-width: 1280px) and (max-width: 1599px) {
    .container {
        padding: 52px 3px 3px 3px;
        gap: 5px;
        width: 100vw;
    }
    
    .left-panel {
        width: 18vw;
        min-width: 260px;
        max-width: 300px;
        padding: 10px;
        gap: 8px;
    }
    
    .left-panel h3 {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .product-area {
        width: 20vw;
        min-width: 280px;
        max-width: 350px;
        padding: 12px;
    }
    
    .right-panel {
        width: 22vw;
        min-width: 320px;
        max-width: 420px;
        gap: 10px;
    }
    
    .message-area {
        min-height: 550px;  /* 🔥 增加：450px → 550px */
        max-height: 800px;  /* 🔥 增加：650px → 800px */
        padding: 14px;
    }
    
    .message-area h3 {
        font-size: 14px !important;
    }
    
    .timed-comment-section {
        margin-top: 16px;
        padding: 14px;
    }
    
    .data-value {
        font-size: 16px !important;
    }
    
    .data-label {
        font-size: 10px !important;
    }
    
    /* 紧凑按钮 */
    .btn {
        padding: 10px;
        font-size: 13px;
    }
    
    /* 数据面板网格紧凑 */
    .data-panel [style*="grid-template-columns: repeat(4"] {
        gap: 10px !important;
    }
    
    .data-item {
        padding: 8px !important;
    }
    
    /* 消息气泡更小 */
    .message-bubble {
        font-size: 12px;
        padding: 5px 8px;
    }
    
    .message-user {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* 🎨 画像页面响应式优化 */
@media (min-width: 3840px) {
    #portraitChartContainer {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 40px !important;
    }
    
    #portraitChartContainer > div {
        padding: 30px !important;
    }
    
    #portraitChartContainer canvas {
        height: 700px !important;
    }
}

@media (min-width: 2560px) and (max-width: 3839px) {
    #portraitChartContainer {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 30px !important;
    }
    
    #portraitChartContainer canvas {
        height: 650px !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    #portraitChartContainer {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 25px !important;
    }
    
    #portraitChartContainer canvas {
        height: 550px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    #portraitChartContainer {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
    
    #portraitChartContainer > div {
        padding: 20px !important;
    }
    
    #portraitChartContainer canvas {
        height: 480px !important;
    }
    
    #portraitPage h4 {
        font-size: 16px !important;
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    #portraitChartContainer {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
    }
    
    #portraitChartContainer > div {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    #portraitChartContainer canvas {
        height: 400px !important;
    }
    
    #portraitPage h4 {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }
    
    #portraitPage .data-card {
        padding: 6px 8px !important;
    }
    
    #portraitMainGender, #portraitMainAge, #portraitMainGroup, #portraitMainProvince {
        font-size: 16px !important;
    }
}

/* 📊 Tab内容区域响应式 */
@media (max-width: 1599px) {
    #dataTabContent {
        max-width: 100% !important;
    }
    
    .data-tabs {
        gap: 15px !important;
    }
    
    .data-tab {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    /* 画像页面padding优化 */
    #portraitPage > div > div:first-child {
        padding: 12px 15px !important;
    }
    
    #portraitPage > div > div:nth-child(2) {
        padding: 12px 15px !important;
    }
}

/* 🎯 890P画像页面特殊优化 */
@media (min-width: 1280px) and (max-width: 1599px) {
    #portraitPage > div > div:first-child {
        padding: 10px 12px !important;
    }
    
    #portraitPage > div > div:nth-child(2) {
        padding: 10px 12px !important;
    }
    
    /* 用户特征总览更紧凑 */
    #portraitPage [style*="padding: 25px"] {
        padding: 15px !important;
    }
    
    /* 省级分布更紧凑 */
    #provinceList {
        max-height: 350px !important;
    }
}

/* 💎 确保所有分辨率无边距空隙 - 强制全屏 */
html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

.container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
}

/* 强制左右侧面板不超出屏幕 - 允许收缩 */
.left-panel,
.product-area,
.data-panel,
.right-panel {
    flex-shrink: 1 !important;
}

/* 890P下进一步缩小最小宽度 */
@media (max-width: 1599px) {
    .left-panel {
        min-width: 220px !important;
    }
    
    .product-area {
        min-width: 260px !important;
    }
    
    .right-panel {
        min-width: 280px !important;
    }
}

/* 所有子面板都不允许溢出 */
.left-panel,
.middle-panel,
.right-panel,
.product-area,
.data-panel {
    overflow-x: hidden;
}




/* ========================================
   📱 小屏幕优化（720P - 1280x720）
   ======================================== */
@media (max-width: 1279px) {
    body {
        font-size: 13px;
    }
    
    .container {
        padding: 50px 2px 2px 2px;
        gap: 4px;
    }
    
    /* 左侧面板 */
    .left-panel {
        width: 18vw;
        min-width: 240px !important;
        max-width: 280px;
        padding: 8px;
        gap: 6px;
    }
    
    .left-panel h3 {
        font-size: 13px !important;
        margin-bottom: 6px;
        padding-bottom: 6px;
    }
    
    .left-panel .btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    /* 产品区域 */
    .product-area {
        width: 20vw;
        min-width: 260px !important;
        max-width: 320px;
        padding: 10px;
    }
    
    .product-area h3 {
        font-size: 13px !important;
        margin-bottom: 8px;
    }
    
    /* 右侧面板 - 720P优化 */
    .right-panel {
        width: 22vw;
        min-width: 300px !important;
        max-width: 380px;
        gap: 10px;
    }
    
    /* 实时消息区域 */
    .message-area {
        min-height: 520px;  /* 🔥 增加：420px → 520px */
        max-height: 750px;  /* 🔥 增加：600px → 750px */
        padding: 12px;
    }
    
    .message-area h3 {
        font-size: 13px !important;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    
    .message-hint {
        font-size: 11px !important;
        padding: 4px 8px;
        margin-bottom: 8px;
    }
    
    .message-list {
        padding: 10px;
        min-height: 150px;
    }
    
    /* ❌ 已禁用手机端响应式样式（只保留电脑端） */
    /*
    .message-item {
        margin-bottom: 6px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }
    
    .message-item.right {
        justify-content: flex-end !important;
        flex-direction: row-reverse !important;
        margin-right: -10px !important;
        padding-right: 10px !important;
    }
    
    .message-item .username {
        font-size: 12px !important;
    }
    
    .message-item .message-text {
        font-size: 11px !important;
        line-height: 1.4;
    }
    */
    
    /* 定时评论区域 */
    .timed-comment-section {
        margin-top: 14px;
        padding: 12px;
    }
    
    .timed-comment-section h3 {
        font-size: 13px !important;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    
    .timed-comment-content label {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
    
    .timed-comment-content textarea {
        padding: 10px !important;
        font-size: 12px !important;
        min-height: 60px !important;
    }
    
    .timed-comment-content input[type="number"] {
        padding: 6px !important;
        font-size: 12px !important;
    }
    
    .timed-comment-content .btn {
        padding: 8px !important;
        font-size: 12px !important;
    }
    
    .timed-comment-status {
        font-size: 11px !important;
        padding: 6px !important;
        margin-top: 8px !important;
    }
    
    /* 数据面板 */
    .data-panel {
        padding: 10px;
    }
    
    .data-value {
        font-size: 14px !important;
    }
    
    .data-label {
        font-size: 9px !important;
    }
    
    /* 手动回复输入框 */
    .manual-reply-box input {
        font-size: 12px !important;
        padding: 8px !important;
    }
    
    .manual-reply-box button {
        font-size: 12px !important;
        padding: 8px 16px !important;
    }
}

/* ========================================
   📱 超小屏幕优化（低于720P）
   ======================================== */
@media (max-width: 1024px) {
    .container {
        padding: 48px 2px 2px 2px;
        gap: 3px;
    }
    
    .left-panel {
        min-width: 220px !important;
        max-width: 260px;
        padding: 6px;
    }
    
    .product-area {
        min-width: 240px !important;
        max-width: 280px;
        padding: 8px;
    }
    
    .right-panel {
        min-width: 280px !important;
        max-width: 340px;
        gap: 8px;
    }
    
    .message-area {
        min-height: 460px;  /* 🔥 增加：360px → 460px */
        max-height: 670px;  /* 🔥 增加：520px → 670px */
        padding: 10px;
    }
    
    .message-list {
        padding: 8px;
        min-height: 120px;
    }
    
    /* ❌ 已禁用小屏幕响应式样式（只保留电脑端） */
    /*
    .message-item.right {
        justify-content: flex-end !important;
        flex-direction: row-reverse !important;
        margin-right: -8px !important;
        padding-right: 8px !important;
    }
    */
    
    .timed-comment-section {
        margin-top: 12px;
        padding: 10px;
    }
    
    .data-value {
        font-size: 12px !important;
    }
}

/* ========================================
   黑金主题 (Gold Theme) - Luxury Dark
   ======================================== */
body.light-theme {
    background: linear-gradient(135deg, #0a0a0f 0%, #121218 50%, #0d0d14 100%);
    color: #e8e0d0;
}

.light-theme .container { color: #e8e0d0; }

.light-theme .top-user-bar,
.light-theme .top-login-bar {
    background: rgba(20, 18, 12, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.08);
}

.light-theme .top-user-bar span { color: #d4af37; font-weight: 600; }

.light-theme .left-panel,
.light-theme .product-area,
.light-theme .data-panel,
.light-theme .log-area,
.light-theme .message-area,
.light-theme .timed-comment-section {
    background: rgba(18, 16, 10, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.15);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(212, 175, 55, 0.04), inset 0 1px 0 rgba(212, 175, 55, 0.05);
}

.light-theme .left-panel h3,
.light-theme .log-area h3,
.light-theme .message-area h3,
.light-theme .timed-comment-section h3,
.light-theme .rules-tip,
.light-theme .ai-role-input label,
.light-theme .keyword-ban-input label {
    color: #d4af37;
}

.light-theme .login-section,
.light-theme .activation-section,
.light-theme .rules-section,
.light-theme .keyword-ban-section,
.light-theme .ai-reply-section,
.light-theme .auto-stop-section,
.light-theme .product-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.04) 0%, rgba(180, 140, 30, 0.02) 100%);
    border-radius: 10px;
}

.light-theme .punishment-auto-stop-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, rgba(180, 100, 20, 0.04) 100%) !important;
    border-color: rgba(212, 175, 55, 0.2);
}

.light-theme .qr-area {
    background: rgba(212, 175, 55, 0.04);
    border-color: rgba(212, 175, 55, 0.15);
}

.light-theme .user-info {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(180, 140, 30, 0.03) 100%);
    color: #c0b090;
}

.light-theme #userNickname { color: #c0b090; }

.light-theme .rule-checks label { color: #b0a590; }
.light-theme .rule-checks label:hover { color: #e8e0d0; }

.light-theme .log-list,
.light-theme .message-list {
    background: rgba(212, 175, 55, 0.02);
    color: #c0b090;
    scrollbar-color: rgba(212, 175, 55, 0.3) rgba(0, 0, 0, 0.2);
}

.light-theme .log-item {
    background: rgba(212, 175, 55, 0.05);
    border-left-color: #d4af37;
}

.light-theme .message-bubble {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(180, 140, 30, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    color: #e8e0d0;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.06);
}

.light-theme .message-bubble.ban {
    background: linear-gradient(135deg, rgba(220, 60, 60, 0.1) 0%, rgba(180, 40, 40, 0.06) 100%);
    border-color: rgba(220, 60, 60, 0.2);
}

.light-theme .manual-reply-box {
    border-top-color: rgba(212, 175, 55, 0.15);
}

.light-theme .manual-reply-box input {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
    color: #e8e0d0;
}

.light-theme .manual-reply-box input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.light-theme .manual-reply-box input::placeholder { color: #7a7060; }

.light-theme .manual-reply-box button {
    background: linear-gradient(135deg, #d4af37 0%, #b8941e 100%);
    color: #0a0a0f;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.light-theme .manual-reply-box button:hover {
    background: linear-gradient(135deg, #e6c040 0%, #d4af37 100%);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

.light-theme .timed-comment-content textarea,
.light-theme .ai-role-input textarea,
.light-theme .keyword-ban-input textarea {
    background: rgba(212, 175, 55, 0.04);
    border-color: rgba(212, 175, 55, 0.15);
    color: #e8e0d0;
}

.light-theme .timed-comment-content textarea:focus,
.light-theme .ai-role-input textarea:focus,
.light-theme .keyword-ban-input textarea:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.light-theme .timed-comment-content textarea::placeholder,
.light-theme .ai-role-input textarea::placeholder,
.light-theme .keyword-ban-input textarea::placeholder { color: #7a7060; }

.light-theme .timed-comment-status span { color: #7a7060; }

.light-theme .modal { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }

.light-theme .modal-content {
    background: linear-gradient(135deg, #141210 0%, #1a1814 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.08);
}

.light-theme .modal-content h2 {
    color: #d4af37;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.light-theme .modal-body input {
    border: 2px solid rgba(212, 175, 55, 0.2);
    background: rgba(212, 175, 55, 0.05);
    color: #e8e0d0;
}

.light-theme .modal-body input:focus {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.light-theme .modal-body input::placeholder { color: #7a7060; }

.light-theme .modal-body .btn {
    background: linear-gradient(135deg, #d4af37 0%, #b8941e 100%) !important;
    color: #0a0a0f !important;
}

.light-theme .modal-body .btn:hover {
    background: linear-gradient(135deg, #e6c040 0%, #d4af37 100%) !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.light-theme .close { color: rgba(212, 175, 55, 0.4); }
.light-theme .close:hover { color: #d4af37; text-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }

.light-theme .ban-item { background: rgba(220, 60, 60, 0.06); color: #c0b090; }
.light-theme .ban-item:hover { background: rgba(220, 60, 60, 0.1); }

.light-theme .product-item:hover {
    background: rgba(212, 175, 55, 0.06) !important;
    border-left-color: #d4af37;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1);
}

.light-theme .timed-stop-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(180, 140, 30, 0.03) 100%) !important;
    border-color: rgba(212, 175, 55, 0.15);
}

.light-theme .message-area h3,
.light-theme .timed-comment-section h3 {
    border-bottom-color: rgba(212, 175, 55, 0.2);
}

.light-theme ::-webkit-scrollbar-track { background: rgba(212, 175, 55, 0.03); }
.light-theme ::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.25); }
.light-theme ::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.4); }

.light-theme input[type="checkbox"] { accent-color: #d4af37; }

.light-theme select:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.light-theme select option { background: #141210; color: #e8e0d0; }

.light-theme .package-card { background: rgba(212, 175, 55, 0.04); }
.light-theme .package-price { color: #e8e0d0; }
.light-theme .package-desc { color: #a09080; }

.light-theme .message-hint { color: #c0b090; border-left-color: #d4af37; }

.light-theme .message-user.male {
    background: linear-gradient(135deg, #d4af37 0%, #b8941e 100%);
    color: #0a0a0f;
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.light-theme .message-user:not(.male):not(.female) {
    background: linear-gradient(135deg, #d4af37 0%, #b8941e 100%);
    color: #0a0a0f;
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.light-theme .modal-content a { color: #d4af37; }
.light-theme .modal-content a:hover { color: #e6c040; }

/* 主题切换按钮 */
.theme-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.5);
    background: rgba(42, 42, 62, 0.9);
    color: #00d4ff;
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
}

.light-theme .theme-toggle-btn {
    background: rgba(20, 18, 12, 0.95);
    border-color: rgba(212, 175, 55, 0.4);
    color: #d4af37;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}

.light-theme .theme-toggle-btn:hover {
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
}