*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#4f6ef7;--primary-hover:#3b57e0;--primary-light:#eef1fe;--surface:#fff;--surface-2:#f7f8fc;--border:#e4e7ef;--text:#1a1d2e;--text-muted:#6b7280;--text-light:#9ca3af;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--radius:10px;--radius-sm:6px;--shadow:0 1px 4px #00000014, 0 4px 16px #0000000a;--shadow-sm:0 1px 3px #00000014;--sidebar-width:220px;--header-height:56px}html,body{height:100%;color:var(--text);background:var(--surface-2);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:14px}#app{height:100%}.layout{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;display:flex}.sidebar-logo{height:var(--header-height);border-bottom:1px solid var(--border);color:var(--primary);align-items:center;gap:8px;padding:0 20px;font-size:15px;font-weight:700;display:flex}.sidebar-nav{flex:1;padding:12px 10px}.nav-item{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);align-items:center;gap:8px;padding:9px 12px;font-size:13px;text-decoration:none;transition:background .15s,color .15s;display:flex}.nav-item:hover,.nav-item.active{background:var(--primary-light);color:var(--primary)}.nav-item-disabled{opacity:.45;cursor:not-allowed}.nav-item-disabled:hover{color:var(--text-muted);background:0 0}.sidebar-footer{border-top:1px solid var(--border);color:var(--text-muted);justify-content:space-between;align-items:center;padding:14px 16px;font-size:12px;display:flex}.logout-btn{color:var(--danger);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:4px 8px;font-size:12px;transition:background .15s}.logout-btn:hover{background:#fee2e2}.main-content,.main-content>*{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.page-header{height:var(--header-height);border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;align-items:center;gap:12px;padding:0 24px;display:flex}.page-header h1{font-size:16px;font-weight:600}.page-body{flex:1;min-height:0;padding:20px 24px;overflow-y:auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}thead th{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);background:var(--surface-2);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;padding:10px 14px;font-size:12px;font-weight:600}tbody td{border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;padding:12px 14px}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--surface-2)}.td-link{color:var(--primary);cursor:pointer;font-weight:500;text-decoration:none}.td-link:hover{text-decoration:underline}.td-link-disabled{color:var(--text-light);cursor:not-allowed;font-weight:500;text-decoration:none}.td-link-disabled:hover{text-decoration:none}.badge{border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.badge-h5{color:#1d4ed8;background:#dbeafe}.badge-guest{color:#7e22ce;background:#f3e8ff}.badge-wechat,.badge-active{color:#15803d;background:#dcfce7}.badge-handoff{color:#b45309;background:#f59e0b26;border:1px solid #f59e0b59}.badge-closed{color:#6b7280;background:#f3f4f6}.badge-resolved{color:#15803d;background:#dcfce7}.badge-pending{color:#1d4ed8;background:#dbeafe}.badge-unresolved{color:#b91c1c;background:#fee2e2}.badge-agent{color:#6d28d9;background:#ede9fe}.badge-awaiting-pickup{color:#b45309;background:#f59e0b26}.badge-user-replied{color:#b91c1c;background:#fee2e2;font-weight:700}.badge-latest{color:#047857;background:#ecfdf5;border:1px solid #10b98159}.search-bar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;display:flex}.search-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);outline:none;width:240px;padding:8px 12px;font-size:13px;transition:border-color .15s}.search-input:focus{border-color:var(--primary)}.select-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;color:var(--text);outline:none;padding:8px 12px;font-size:13px}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s,opacity .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-ghost{color:var(--text-muted);border:1px solid var(--border);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--surface-2)}.pagination{border-top:1px solid var(--border);color:var(--text-muted);justify-content:flex-end;align-items:center;gap:8px;padding:14px 16px;font-size:12px;display:flex}.breadcrumb{color:var(--text-muted);align-items:center;gap:6px;font-size:13px;display:flex}.breadcrumb a{color:var(--primary);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb-sep{color:var(--border)}.chat-card{padding:0 20px}.chat-messages{flex-direction:column;align-items:flex-start;gap:16px;padding:20px 0;display:flex}.chat-row{gap:10px;max-width:780px;display:flex}.chat-row>div:not(.chat-avatar){flex-direction:column;width:fit-content;min-width:0;max-width:min(640px,100%);display:flex}.chat-row.user{flex-direction:row-reverse;align-self:flex-end;max-width:100%;margin-left:auto}.chat-row.user>div:not(.chat-avatar){align-items:flex-end}.chat-row.assistant,.chat-row:not(.user){align-self:flex-start}.chat-row.assistant>div:not(.chat-avatar),.chat-row:not(.user)>div:not(.chat-avatar){align-items:flex-start}.chat-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:700;display:flex}.avatar-user{background:var(--primary)}.avatar-assistant{background:#6366f1}.avatar-agent{background:#7c3aed}.chat-bubble{white-space:pre-wrap;word-break:break-word;border-radius:14px;width:fit-content;max-width:min(640px,100%);padding:10px 14px;font-size:13px;line-height:1.6}.bubble-user{background:var(--primary);color:#fff;border-bottom-right-radius:4px}.voice-badge{vertical-align:middle;color:#fff;background:#ffffff38;border-radius:4px;margin-right:6px;padding:1px 6px;font-size:11px;font-weight:700;line-height:1.4;display:inline-block}.bubble-assistant{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}.bubble-agent{color:#4c1d95;background:#f5f3ff;border:1px solid #ddd6fe;border-bottom-left-radius:4px}.chat-time{color:var(--text-light);text-align:left;align-self:stretch;margin-top:4px;font-size:11px}.chat-row.user .chat-time{text-align:right}.chat-row.assistant .chat-time,.chat-row:not(.user) .chat-time{text-align:left}.list-page-body{flex-direction:column;display:flex;overflow:hidden}.list-toolbar{flex-shrink:0;margin-bottom:16px}.list-scroll-area{flex:1;min-height:0;padding-right:4px;overflow-y:auto}.list-scroll-area .table-wrap{overflow-x:auto}.list-scroll-area thead th{z-index:1;position:sticky;top:0}.list-pagination{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-muted);box-shadow:var(--shadow-sm);flex-shrink:0;justify-content:flex-end;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;font-size:12px;display:flex}.pagination-total{flex-shrink:0}.pagination-controls{align-items:center;gap:8px;display:flex}.messages-detail-body{flex-direction:column;display:flex;overflow:hidden}.session-info-fixed{flex-shrink:0;margin-bottom:12px}.messages-scroll-area{flex:1;min-height:0;padding-right:4px;overflow-y:auto}.session-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:16px;padding:12px 16px;display:flex}.info-item{gap:6px;font-size:12px;display:flex}.info-label{color:var(--text-muted);font-weight:500}.info-value{color:var(--text)}.state-box{text-align:center;color:var(--text-muted);padding:48px 24px;font-size:14px}.login-page{background:linear-gradient(135deg,#eef1fe 0%,#f7f8fc 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);width:380px;box-shadow:var(--shadow);border-radius:16px;padding:40px 36px}.login-logo{text-align:center;margin-bottom:28px}.login-logo-icon{background:var(--primary);color:#fff;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:10px;font-size:22px;display:inline-flex}.login-logo h2{color:var(--text);font-size:18px;font-weight:700}.login-logo p{color:var(--text-muted);margin-top:4px;font-size:12px}.form-group{margin-bottom:16px}.form-label{color:var(--text);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.form-control{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text);outline:none;padding:10px 12px;font-size:14px;transition:border-color .15s}.form-control:focus{border-color:var(--primary)}.login-btn{background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;width:100%;margin-top:8px;padding:11px;font-size:15px;font-weight:600;transition:background .15s}.login-btn:hover:not(:disabled){background:var(--primary-hover)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.guest-login-btn{background:var(--surface);color:var(--primary);border:1px solid var(--primary);margin-top:10px}.guest-login-btn:hover:not(:disabled){background:var(--primary-light)}.error-msg{color:var(--danger);text-align:center;margin-top:10px;font-size:13px}.back-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;gap:4px;padding:4px 6px;font-size:13px;text-decoration:none;transition:background .15s,color .15s;display:inline-flex}.back-btn:hover{background:var(--surface-2);color:var(--text)}.metrics-page{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.metrics-toolbar{flex-wrap:wrap;margin-bottom:20px}.metrics-time-field{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;display:flex}.metrics-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px;display:grid}.metrics-kpi-card{padding:18px 20px}.metrics-kpi-label{color:var(--text-muted);align-items:center;gap:6px;margin-bottom:8px;font-size:12px;display:flex}.metrics-kpi-unit{color:var(--text-light);font-size:11px;font-weight:500}.metrics-kpi-value{color:var(--text);word-break:break-all;font-size:28px;font-weight:700;line-height:1.2}.metrics-kpi-value--primary{color:var(--primary)}.metrics-kpi-sub{color:var(--text-light);margin-top:8px;font-size:11px}.metrics-detail-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px;display:grid}.metrics-detail-card{padding:18px 20px}.metrics-section-title{margin-bottom:14px;font-size:14px;font-weight:600}.metrics-stat-list{flex-direction:column;gap:10px;list-style:none;display:flex}.metrics-stat-list li{align-items:center;gap:8px;display:flex}.metrics-stat-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.metrics-stat-dot--success{background:var(--success)}.metrics-stat-dot--danger{background:var(--danger)}.metrics-stat-dot--warning{background:var(--warning)}.metrics-stat-name{color:var(--text-muted);flex:1;font-size:13px}.metrics-stat-num{font-variant-numeric:tabular-nums;font-weight:600}.metrics-progress{background:var(--surface-2);border-radius:3px;height:6px;margin-top:16px;display:flex;overflow:hidden}.metrics-progress-seg{min-width:0;height:100%;transition:width .3s}.metrics-progress-seg--success{background:var(--success)}.metrics-progress-seg--danger{background:var(--danger)}.metrics-progress-seg--warning{background:var(--warning)}.metrics-notes{color:var(--text-muted);padding:18px 20px;font-size:13px;line-height:1.6}.metrics-notes ul{flex-direction:column;gap:8px;padding-left:18px;display:flex}.metrics-notes code{background:var(--surface-2);border-radius:4px;padding:1px 4px;font-size:12px}.metrics-error{color:var(--danger);margin-bottom:16px;padding:14px 16px}@media (width<=960px){.metrics-kpi-grid{grid-template-columns:repeat(2,1fr)}.metrics-detail-grid{grid-template-columns:1fr}}.quality-page{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.modal-overlay{z-index:1000;background:#0f172a73;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-dialog{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:min(920px,100%);max-height:min(88vh,900px);box-shadow:var(--shadow);flex-direction:column;display:flex;overflow:hidden}.modal-dialog.quality-modal--split{width:min(1080px,96vw);max-height:min(90vh,920px)}.modal-dialog.quality-modal--single{width:min(520px,96vw);max-height:min(90vh,920px)}.modal-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.modal-header h2{font-size:15px;font-weight:600}.modal-close{width:32px;height:32px;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:22px;line-height:1;transition:background .15s,color .15s;display:flex}.modal-close:hover{background:var(--surface-2);color:var(--text)}.modal-body{flex:1;min-height:0;padding:20px;overflow-y:auto}.modal-footer{border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;padding:12px 20px}.quality-modal-section{margin-bottom:20px}.quality-modal-section:last-child{margin-bottom:0}.quality-modal-section-title{margin-bottom:12px;font-size:14px;font-weight:600}.quality-modal-form-section{border-top:1px solid var(--border);padding-top:16px}@media (width<=860px){.modal-dialog.quality-modal--split{width:min(96vw,100%)}}@media (width<=640px){.modal-overlay{padding:12px}.modal-body{padding:16px}.modal-footer{padding:12px 16px}}