/* Dark Mode Styles for Customer Service Chat - Deep Green Theme */

/* 暗色模式下的背景和文字颜色 */
body.dark-mode {
    background-color: #1a3d35 !important;
    color: #FFFFFF !important;
}

body.dark-mode .visitorBody {
    /* background-color: #1E3838 !important; */
}

/* 聊天容器 */
body.dark-mode .chatCenter {
    
    background-color: #1a3d35 !important;
    /* background-color: red !important; */
}

/* 聊天标题区域 */
body.dark-mode .chatEntTitle {
    background: linear-gradient(to right, #001E14 0%, #007C34 100%);
    color: #FFFFFF !important;
    border-bottom: 1px solid #355050 !important;
}

/* 聊天内容区域 */
body.dark-mode .chatEntBox {
    background-color: #1a3d35 !important;
}

body.dark-mode .chatVisitorPage {
   background-color: #1a3d35 !important;
}

body.dark-mode .chatBox {
    background-color: #1a3d35 !important;
}

/* 聊天消息气泡 - 客服消息 */
body.dark-mode .chatContent {
    background-color: #2D5050 !important;
    color: #FFFFFF !important;
    border: 1px solid #355858 !important;
}

/* 聊天消息气泡 - 访客消息 */
body.dark-mode .chatBoxMe .chatContent {
    background-color: #246153 !important;
    color: #FFFFFF !important;
    border: 1px solid #246153 !important;
}

/* 消息发送状态 */
body.dark-mode .msg-status-sending { color: #7a9e9e; }
body.dark-mode .msg-status-failed { color: #ff6b6b; }

/* 时间戳 */
body.dark-mode .chatTime {
    color: #A0BFBF !important;
}

body.dark-mode .chatTime span {
    background-color: #2A4848 !important;
    color: #A0BFBF !important;
}

/* 通知消息 */
body.dark-mode .chatNotice {
    /* background-color: #2D4A4A !important; */
}

body.dark-mode .chatNoticeContent {
    color: #fff !important;
    background-color: #2D5050;
}


/* 输入框区域 */
body.dark-mode .chatBoxSend {
    background-color: #065946 !important;
    border-top: 1px solid #355050 !important;
}

/* Element UI 输入框暗色模式 */
body.dark-mode .el-textarea__inner {
    background-color: rgba(0,0,0,0.2) !important;
    border-color: #fff !important;
    color: #FFFFFF !important;
}

body.dark-mode .el-textarea__inner:focus {
    border-color: #507070 !important;
}

body.dark-mode .el-textarea__inner::placeholder {
    color: #7A9999 !important;
}

/* 图标按钮 */
body.dark-mode .iconBtn {
    color: #FFFFFF !important;
}

body.dark-mode .iconBtn:hover {
    color: #FFB84D !important;
}

body.dark-mode .visitorIconBtns {
    color: #FFFFFF !important;
}

body.dark-mode .visitorIconBtns:hover {
    color: #FFB84D !important;
}

/* 表情面板 */
body.dark-mode .faceBox {
    background-color: #2A4848 !important;
    border: 1px solid #355050 !important;
}

body.dark-mode .faceBoxList li {
    border-color: #355050 !important;
    background-color: #1E3838 !important;
}

body.dark-mode .faceBoxList li:hover {
    background-color: #355050 !important;
}

/* 公告区域 */
body.dark-mode .chatArticle {
    background-color: #27463f !important;
    border-top: 1px solid #355050 !important;
}

body.dark-mode .hotQuestionTitle {
    color: #FFFFFF !important;
    border-bottom: 1px solid #355050 !important;
}

body.dark-mode .allNotice {
    color: #A0BFBF !important;
}

/* Element UI 组件暗色模式 */
body.dark-mode .el-button--primary {
    background-color: #ffc800 !important;
    border-color: #ffc800 !important;
    color: #000;
}

body.dark-mode .el-button--primary:hover {
    background-color: #ffc800 !important;
}

body.dark-mode .el-button--primary.is-disabled {
    opacity: 0.5;
    color: #000 !important;
}

/* 链接 */
body.dark-mode a {
    color: #FFB84D !important;
}

body.dark-mode a:hover {
    color: #FFC870 !important;
}

/* 滚动条 */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background-color: #1E3838;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #355050;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #406060;
}

/* Badge */
body.dark-mode .el-badge__content {
    background-color: #FFB84D !important;
}

/* Message 组件 */
body.dark-mode .el-message {
    background-color: #2A4848 !important;
    border-color: #355050 !important;
    color: #FFFFFF !important;
}

body.dark-mode .el-message--warning {
    background-color: #6A5A3A !important;
    border-color: #8A7A5A !important;
}

/* Tooltip */
body.dark-mode .el-tooltip__popper {
    background-color: #2A4848 !important;
    color: #FFFFFF !important;
}

body.dark-mode .el-tooltip__popper[x-placement^=top] .popper__arrow {
    border-top-color: #2A4848 !important;
}

body.dark-mode .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: #2A4848 !important;
}