/**
 * 客服系统 v2.0 - 前台专用样式
 */

/* 头部客服状态统计 */
.cs-status-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 16px;
}

.cs-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary, #666);
    padding: 4px 8px;
    background: var(--bg-tertiary, #f5f5f5);
    border-radius: 4px;
}

.cs-stat-item i {
    font-size: 8px;
}

.cs-stat-online {
    color: #52c41a;
}

.cs-stat-online i {
    color: #52c41a;
}

.cs-stat-busy {
    color: #faad14;
}

.cs-stat-busy i {
    color: #faad14;
}

.cs-stat-offline {
    color: #999;
}

.cs-stat-offline i {
    color: #999;
}

.cs-stat-item span {
    font-weight: 600;
}

.cs-messages-header { padding: 12px 15px; border-bottom: 1px solid var(--border-color, #e8e8e8); }
.cs-messages-header .customer-info { display: flex; align-items: center; gap: 10px; }
.cs-messages-header .customer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-messages-header .customer-name { font-size: 15px; font-weight: 600; color: var(--text-primary, #333); margin: 0; }

/* 消息头像居中 */
.cs-message-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-product-card { padding: 12px; display: flex; gap: 12px; cursor: pointer; }
.cs-product-card img { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; }
.cs-product-card-title { font-size: 14px; font-weight: 500; color: var(--text-primary, #333); margin: 0 0 4px 0; }
.cs-product-card-price { font-size: 14px; color: var(--primary-color, #ff5000); font-weight: 600; margin: 0; }

.cs-order-card { padding: 12px; cursor: pointer; }
.cs-order-card-number { font-size: 13px; color: var(--text-secondary, #666); margin: 0; }
.cs-order-card-total { font-size: 14px; color: var(--primary-color, #ff5000); font-weight: 600; margin: 8px 0 0 0; }

/* ========== 暗色主题样式 ========== */
[data-theme="dark"] .cs-messages-header {
    background: var(--bg-primary, #1a1a1a);
    border-bottom-color: var(--border-color, #333);
}

[data-theme="dark"] .cs-messages-header .customer-avatar {
    background: var(--bg-tertiary, #333);
}

[data-theme="dark"] .cs-messages-header .customer-name {
    color: var(--text-primary, #e8e8e8);
}

[data-theme="dark"] .cs-product-card-title {
    color: var(--text-primary, #e8e8e8);
}

[data-theme="dark"] .cs-product-card-price {
    color: var(--primary-color, #9ca3af);
}

[data-theme="dark"] .cs-order-card-number {
    color: var(--text-secondary, #999);
}

[data-theme="dark"] .cs-order-card-total {
    color: var(--primary-color, #9ca3af);
}

[data-theme="dark"] .cs-stat-item {
    background: var(--bg-tertiary, #2a2a2a);
    color: var(--text-secondary, #999);
}