/* 客服端界面 */
.cs-info-card-button {
    background: #4CAF50;
    border: 1px solid #388E3C;
    border-radius: 4px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cs-info-card-button:hover {
    background: #388E3C;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.cs-info-card-button .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: white;
    font-family: 'dashicons' !important;
}

/* 确保Dashicons字体正确加载 */
.cs-info-card-button .dashicons:before {
    content: '\f191'; /* 爪印图标代码 */
}

/* 客户端界面 */
.chat-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #111111 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    font-family: 'dashicons' !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
}

.chat-icon:before {
    content: '\f125';
    font-size: 28px;
    color: white;
}

.chat-icon.has-new-message::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ff0000;
}

.chat-window {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 595px; /* 原350px × 1.7 */
    height: 765px; /* 原450px × 1.7 */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: none;
    flex-direction: column;
    z-index: 9998;
}

/* 添加媒体查询适配小屏幕 */
@media (max-width: 768px) {
    .chat-window {
        width: 90%; /* 小屏占屏幕宽度90% */
        height: 70vh; /* 小屏占视口高度70% */
        bottom: 15px;
        right: 5%; /* 水平居中 */
        left: 5%;
    }
}

.chat-window-header {
    padding: 10px;
    background-color: #111111;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px; /* 设置固定高度 */
}

.chat-window-header h3 {
    color: white !important;
    margin: 0;
    font-size: 20px; 
}

.close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 40px; /* 原20px × 2 */
    cursor: pointer;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9;
}

.chat-input-area {
    padding: 10px; 
    border-top: 1px solid #ddd; 
    display: flex; 
    gap: 10px;
}

.chat-input {
    flex: 1; 
    padding: 8px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    resize: none; 
    height: 50px;
    font-size: 15px; 
}

.send-button {
    padding: 8px 16px; 
    background: #111111; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer;
}

.send-button:hover {
    background-color: #1b9ef0;
}

.chat-container {
    display: flex;
    width: 100%;
}

.customer-column {
    width: 50%;
    padding-right: 10px;
    box-sizing: border-box;
}

.support-column {
    width: 50%;
    padding-left: 10px;
    margin-left: auto;
    box-sizing: border-box;
}

.message {
    max-width: 100%;
    margin-bottom: 15px;
     /* 允许长单词或 URL 自动换行到下一行 */
    word-wrap: break-word;
    /* 强制在任意字符处换行，防止超长内容溢出 */
    word-break: break-all;
}

/* 前端的客户聊天框 */
#chat-messages .support-message,.chat-messages .customer-message {
    background-color: #40fb1a;
    text-align: right; 
    position: relative; /* 关键：让伪元素相对当前元素定位 */
    padding: 10px 15px; /* 内边距让内容不贴边 */
    border-radius: 8px; /* 气泡圆角，更贴近聊天框样式 */
    max-width: 70%; /* 限制气泡宽度，避免过宽 */
    margin-left: auto; /* 让气泡靠右对齐（自己发的消息居右） */
    margin-right: 10px; /* 右侧留空隙，避免箭头超出容器 */
}
/* 前端的客户聊天框，右下角箭头 */
#chat-messages .support-message::after,.chat-messages .customer-message::after {
    content: "";
    position: absolute;
    right: -10px; /* 箭头向右超出气泡10px */
    bottom: 10px; /* 距离气泡底部10px */
    border-width: 10px 0 10px 10px; /* 控制箭头形状 */
    border-style: solid;
    border-color: transparent transparent transparent #40fb1a; /* 箭头颜色与气泡一致 */
}

#chat-messages .customer-message,.chat-messages .support-message {
    background-color: #e9ecef;
    position: relative; /* 关键：让伪元素相对当前元素定位 */
    text-align: left; /* 文本靠左 */
    padding: 10px 15px; /* 内边距 */
    border-radius: 8px; /* 气泡圆角 */
    max-width: 70%; /* 限制气泡宽度 */
    margin-right: auto; /* 让气泡靠左对齐 */
    margin-left: 10px; /* 左侧留空隙 */
}

.typing-indicator {
    display: none;
    color: #bcbcbc;
    font-style: italic;
    text-align: center; 
    font-size: 15px;

}

/* 客服聊天框，左下角箭头 */
#chat-messages .customer-message::after,.chat-messages .support-message::after {
    content: "";
    position: absolute;
    left: -10px; /* 箭头向左超出气泡10px */
    bottom: 10px; /* 距离气泡底部10px */
    border-width: 10px 10px 10px 0; /* 控制箭头形状（与客户箭头相反） */
    border-style: solid;
    border-color: transparent #e9ecef transparent transparent; /* 箭头颜色与气泡一致 */
}

.message-sender, .message-time {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

.message-content {
    font-size: 16px;
    color: #111111;
}


/* 后台聊天样式 */


/* 复用 WooCommerce 场景的 img 约束，根据实际需求调整选择器 */
.product-card img {
  max-width: 100%;
  height: auto;
}

.customer-list {
    width: 250px;
    border-right: 1px solid #e5e5e5;
    overflow-y: auto;
    background-color: #f9f9f9;
}

.customer-item {
    padding: 12px 15px;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-item:hover {
    background-color: #f0f0f1;
}

.unread-badge {
    background-color: #d63638;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 12px;
}

.chat-window .chat-header {
    padding: 15px;
    background-color: #f0f0f1;
    border-bottom: 1px solid #e5e5e5;
    font-weight: bold;
}

/* 聊天容器样式 */ 
 .cs-chat-container { 
     display: flex; 
     gap: 20px; 
     height: calc(100vh - 150px); 
 } 
 
 /* 客户列表区域 */ 
 .cs-customers-list { 
     width: 300px; 
     border: 1px solid #ddd; 
     background: white; 
     overflow-y: auto; 
     font-size: 15px;
 } 
 
 .cs-list-header { 
    font-size: 15px;
     padding: 10px; 
     background: #f5f5f5; 
     border-bottom: 1px solid #ddd; 
 } 
 
 #customers-list { 
     padding: 10px; 
 } 
 
 .cs-customer-item {
     padding: 8px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     margin-bottom: 15px; /* 增加列表项之间的垂直距离 */
     position: relative; /* 添加相对定位，用于徽章定位 */
 }

 .cs-customer-item.active {
    background-color: #e6f7ff;
    border-left: 3px solid #1890ff;
    font-weight: bold;
}

/* 新消息闪烁动画 */
.cs-customer-item.new-message-blink {
    animation: blink 1s ease-in-out 3;
}

@keyframes blink {
    0%, 100% { background-color: inherit; }
    50% { background-color: #fffbe6; }
}


 
 .cs-customer-item.active {
    background-color: #e3f2fd; /* 浅蓝色背景高亮 */
    border-left: 3px solid #2196f3; /* 左侧蓝色指示条 */
    font-weight: bold; /* 文字加粗 */
}

/* 客户资料链接样式 */
.customer-profile-link {
    color: #1b9ef0; /* 蓝色链接 */
    text-decoration: underline; /* 下划线 */
    font-weight: bold; /* 加粗显示 */
    cursor: pointer;
}

.customer-profile-link:hover {
    color: #1565c0; /* 鼠标悬停时颜色变深 */
    text-decoration: none; /* 悬停时去除下划线 */
}
 
 /* 聊天窗口区域 */ 
 .cs-chat-window { 
     flex: 1; 
     border: 1px solid #ddd; 
     background: white; 
     display: flex; 
     flex-direction: column; 
 } 
 
 .cs-chat-header { 
     padding: 10px; 
     background: #f5f5f5; 
     border-bottom: 1px solid #ddd; 
     display: flex; 
     justify-content: space-between; 
     font-size: 15px;
 } 
 
 .cs-status-indicator { 
     color: #4CAF50; 
 } 
 
 #chat-messages { 
     flex: 1; 
     padding: 10px; 
     overflow-y: auto; 
 } 
 
 .cs-message-placeholder { 
     text-align: center; 
     color: #999; 
     margin-top: 20px; 
     font-size: 15px;
 } 
 
 .cs-chat-input { 
     padding: 10px; 
     border-top: 1px solid #ddd; 
     display: flex; 
     gap: 10px; 
 } 
 
 #message-input { 
     flex: 1; 
     padding: 8px; 
     border: 1px solid #ddd; 
     border-radius: 4px; 
     resize: none; 
     height: 50px; 
 } 
 
 #send-message { 
     padding: 8px 16px; 
     background: #111111; 
     color: white; 
     border: none; 
     border-radius: 4px; 
     cursor: pointer; 
 }
 #send-message:hover {
    background-color: #1b9ef0;
}
/* 将原.unread-badge修改为.cs-unread-badge并更新样式 */
.cs-unread-badge {
    background-color: #d63638;
    color: white;
    border-radius: 50%; /* 圆形红点 */
    min-width: 20px; /* 确保圆形显示 */
    height: 30px; /* 固定高度 */
    padding: 0 6px;
    font-size: 12px;
    display: flex; /* 文字居中 */
    align-items: center;
    justify-content: center;
    position: absolute; /* 绝对定位 */
    top: -5px; /* 右上角定位 */
    right: -5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* 添加轻微阴影增强立体感 */
}
 .cs-customer-item.active {
    background-color: #e3f2fd; /* 浅蓝色背景高亮 */
    border-left: 3px solid #2196f3; /* 左侧蓝色指示条 */
    font-weight: bold; /* 文字加粗 */
}
 
 /* 聊天窗口区域 */ 
 .cs-chat-window { 
     flex: 1; 
     border: 1px solid #ddd; 
     background: white; 
     display: flex; 
     flex-direction: column; 
 } 
 
 .cs-chat-header { 
     padding: 10px; 
     background: #f5f5f5; 
     border-bottom: 1px solid #ddd; 
     display: flex; 
     justify-content: space-between; 
     font-size: 15px;
 } 
 
 .cs-status-indicator { 
     color: #4CAF50; 
 } 
 
 #chat-messages { 
     flex: 1; 
     padding: 10px; 
     overflow-y: auto; 
 } 
 
 .cs-message-placeholder { 
     text-align: center; 
     color: #999; 
     margin-top: 20px; 
     font-size: 15px;
 } 
 
 .cs-chat-input { 
     padding: 10px; 
     border-top: 1px solid #ddd; 
     display: flex; 
     gap: 10px; 
 } 
 
 #message-input { 
     flex: 1; 
     padding: 8px; 
     border: 1px solid #ddd; 
     border-radius: 4px; 
     resize: none; 
     height: 50px; 
 } 
 
 #send-message { 
     padding: 8px 16px; 
     background: #111111; 
     color: white; 
     border: none; 
     border-radius: 4px; 
     cursor: pointer; 
 }
 #send-message:hover {
    background-color: #1b9ef0;
}
 
 /* 信息卡片面板样式 */
 .cs-info-card-panel {
     position: absolute;
     top: 50px; /* 调整top值，确保面板不被聊天窗口标题栏遮挡 */
     right: 10px;
     width: 680px; /* 控制框宽度 */
    height: 642px; /* 控制框高度 */
     background: white;
     border: 1px solid #ddd;
     border-radius: 4px;
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     z-index: 1000;
 }
 
 .cs-panel-header {
     padding: 10px;
     background: #f5f5f5;
     border-bottom: 1px solid #ddd;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .cs-panel-header h3 {
     margin: 0;
     font-size: 16px;
 }
 
 .cs-close-panel {
     background: none;
     border: none;
     font-size: 20px;
     cursor: pointer;
     color: #999;
 }
 
 .cs-panel-content {
     padding: 10px;
 }
 
 .cs-category-selector {
     display: flex;
     gap: 10px;
     margin-bottom: 10px;
 }
 
 .cs-category-btn {
     padding: 5px 10px;
     border: 1px solid #ddd;
     background: white;
     cursor: pointer;
     border-radius: 4px;
 }
 
 .cs-category-btn.active {
     background: #111111;
     color: white;
 }
 
 /* 商品分类容器样式 */
 #product-categories {
     display: flex;
     gap: 10px;
     margin-bottom: 10px;
     flex-wrap: wrap;
 }
 
 .cs-items-container {
     max-height: 435px;
     overflow-y: auto;
 }
 
 .cs-item {
     padding: 10px;
     border: 1px solid #eee;
     margin-bottom: 10px;
     cursor: pointer;
     border-radius: 4px;
 }
 
 .cs-item:hover {
     background: #f9f9f9;
 }
 
 .cs-item.selected {
     background: #e3f2fd;
     border-color: #2196f3;
 }
 
 .cs-item-title {
     font-weight: bold;
     margin-bottom: 5px;
     font-size: 16px; /* 与客户端h4标签字体大小保持一致 */
 }
 
 .cs-item-description {
     font-size: 14px;
     color: #666;
 }
 
 .cs-panel-footer {
     padding: 10px;
     border-top: 1px solid #ddd;
     display: flex;
     justify-content: flex-end;
 }
 
 .cs-send-button {
     padding: 8px 16px;
     background: #111111;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }
 
 .cs-send-button:hover {
     background-color: #1b9ef0;
 }
 
 /* 信息卡片按钮样式 */
 .cs-info-card-button {
     background: #111111;
     color: white;
     border: none;
     border-radius: 20%;
     width: 30px;
     height: 30px;
     cursor: pointer;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .cs-info-card-button:hover {
     background-color: #1b9ef0;
 }

 .cs-item-image {
    width: 100%;
    height: auto;
    margin-top: 5px;
    border-radius: 4px;
}

/* 订单详情链接样式 */
.order-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.order-detail-link {
    display: inline-block;
    padding: 6px 12px;
    background-color: #1b9ef0;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.order-detail-link:hover {
    background-color: #1565c0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: white;
}

.order-detail-link:active {
    transform: translateY(0);
    box-shadow: none;
}