/* Dark Mode Styles for Customer Service Chat */

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

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

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

/* 聊天标题区域 */
body.dark-mode .chatEntTitle {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid #3d3d3d !important;
}

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

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

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

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

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

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

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

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

body.dark-mode .chatNoticeContent {
    color: #4a9eff !important;
}

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

/* Element UI 输入框暗色模式 */
body.dark-mode .el-textarea__inner {
    background-color: #1a1a1a !important;
    border-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}

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

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

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

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

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

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

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

body.dark-mode .faceBoxList li {
    border-color: #3d3d3d !important;
    background-color: #1a1a1a !important;
}

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

/* 公告区域 */
body.dark-mode .chatArticle {
    background-color: #2d2d2d !important;
    border-top: 1px solid #3d3d3d !important;
}

body.dark-mode .hotQuestionTitle {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #3d3d3d !important;
}

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

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

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

body.dark-mode .el-button--primary.is-disabled {
    background-color: #3d3d3d !important;
    border-color: #3d3d3d !important;
    color: #666666 !important;
}

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

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

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

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

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

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

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

/* Message 组件 */
body.dark-mode .el-message {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}

body.dark-mode .el-message--warning {
    background-color: #5a4e1e !important;
    border-color: #7a6e3e !important;
}

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

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

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