/* === Chat Widgets Styles v2.1 === */
/* 创建: 2026-06-23 (DataSpell 聊天富输出方案 handoff) */
/* 颜色变量参考 report-gateway/templates/weekly_business_blue.html */

.ds-chart { width: 100%; height: 240px; margin: 12px 0; }
.ds-error { background: rgba(239, 68, 68, 0.08); color: #b91c1c; padding: 10px 12px; border-radius: 6px; font-size: 12px; font-family: monospace; white-space: pre-wrap; }

/* KPI Cards */
.kpis { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.kpi-card { flex: 1; min-width: 130px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border-color, #e5edf5); background: var(--bg-surface, #fff); }
.kpi-card.highlight { border-left: 3px solid #ef4444; background: linear-gradient(135deg, #fff 0%, rgba(239,68,68,0.03) 100%); }
.kpi-label { font-size: 11px; color: var(--text-secondary, #64748b); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; }
.kpi-value { font-size: 22px; font-weight: 600; color: var(--text-primary, #0f172a); font-feature-settings: "tnum"; }
.kpi-delta { font-size: 11px; margin-top: 4px; font-weight: 600; }
.kpi-delta.up { color: #16a34a; }
.kpi-delta.down { color: #dc2626; }
.kpi-delta.flat { color: var(--text-secondary, #64748b); }
.kpi-hint { font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: 4px; }

/* Progress Bars */
.ds-progress-list { margin: 10px 0; }
.ds-progress { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ds-progress-label { width: 110px; min-width: 80px; font-size: 13px; color: var(--text-primary, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.ds-progress-count { width: 32px; height: 24px; text-align: center; line-height: 24px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
.ds-progress-bar { flex: 1; height: 8px; background: var(--bg-hover, #f1f5f9); border-radius: 4px; overflow: hidden; }
.ds-progress-bar > div { height: 100%; border-radius: 4px; transition: width 0.3s; }
.ds-progress-percent { width: 50px; text-align: right; font-size: 12px; color: var(--text-secondary, #64748b); font-feature-settings: "tnum"; flex-shrink: 0; }

.ds-progress-red .ds-progress-count { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }
.ds-progress-red .ds-progress-bar > div { background: linear-gradient(90deg, #ef4444, #f87171); }
.ds-progress-yellow .ds-progress-count { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.ds-progress-yellow .ds-progress-bar > div { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ds-progress-purple .ds-progress-count { background: rgba(168, 85, 247, 0.15); color: #7c3aed; }
.ds-progress-purple .ds-progress-bar > div { background: linear-gradient(90deg, #a855f7, #c084fc); }
.ds-progress-green .ds-progress-count { background: rgba(16, 185, 129, 0.15); color: #047857; }
.ds-progress-green .ds-progress-bar > div { background: linear-gradient(90deg, #10b981, #34d399); }
.ds-progress-blue .ds-progress-count { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.ds-progress-blue .ds-progress-bar > div { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

/* Color Tags */
.ds-tag-list { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.ds-tag strong { margin-left: 6px; font-weight: 700; }
.ds-tag-red { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.ds-tag-yellow { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.ds-tag-purple { background: rgba(168, 85, 247, 0.12); color: #7c3aed; }
.ds-tag-green { background: rgba(16, 185, 129, 0.12); color: #047857; }
.ds-tag-blue { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }

/* Collapsible */
.ds-collapsible { margin: 10px 0; border: 1px solid var(--border-color, #e5edf5); border-radius: 6px; background: var(--bg-surface, #fff); }
.ds-collapsible summary { padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; list-style: none; }
.ds-collapsible summary::-webkit-details-marker { display: none; }
.ds-collapsible-title { font-weight: 500; color: var(--text-primary, #0f172a); }
.ds-collapsible-summary { font-size: 12px; color: var(--text-muted, #94a3b8); }
.ds-collapsible-content { padding: 10px 14px; border-top: 1px solid var(--border-color, #e5edf5); font-size: 13px; line-height: 1.6; }