:root { --ink:#18262c; --muted:#68777d; --line:#d9e1e1; --bg:#f3f6f5; --panel:#fff; --teal:#14746d; --teal-soft:#e1f1ed; --gold:#bd7b19; --danger:#a44b42; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); font-size:14px; overflow:hidden; }
.toast { position:fixed; right:24px; bottom:24px; z-index:10; max-width:min(380px,calc(100vw - 40px)); transform:translateY(14px); opacity:0; pointer-events:none; border:1px solid #76a89f; border-radius:5px; background:#f7fbfa; color:#145f59; padding:10px 13px; box-shadow:0 8px 20px rgba(24,38,44,.14); transition:opacity .18s ease,transform .18s ease; }.toast.visible { transform:translateY(0); opacity:1; }.toast.error { border-color:#d79b94; background:#fff8f7; color:#9a3f36; }
button { font:inherit; cursor:pointer; }
.shell { display:grid; grid-template-columns:220px minmax(0,1fr); height:100vh; overflow:hidden; }
.sidebar { background:#17363a; color:#d8e4e2; padding:24px 14px; display:flex; flex-direction:column; overflow:hidden; }
.brand { color:#fff; font-size:17px; font-weight:700; display:flex; align-items:center; gap:10px; padding:0 10px 34px; }
.brand-mark { display:grid; place-items:center; background:#d9a23e; color:#253437; width:25px; height:25px; border-radius:5px; font-size:14px; }
nav { display:grid; gap:5px; }.nav-item { border:0; text-align:left; background:transparent; color:#c4d3d2; padding:10px 12px; border-radius:5px; }.nav-item.active,.nav-item:hover { color:#fff; background:#285156; }
.sidebar-note { margin-top:auto; padding:10px; display:flex; align-items:center; gap:8px; font-size:12px; color:#b4c5c4; }.status-dot { width:8px; height:8px; border-radius:50%; background:#e0a645; }.status-dot.ok { background:#5ec28d; }.status-dot.error { background:#e8776e; }
main { min-width:0; min-height:0; overflow-y:auto; }.topbar { position:sticky; top:0; z-index:2; height:101px; padding:22px 34px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.97); }.eyebrow { color:var(--teal); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:0; margin:0 0 4px; }.topbar h1 { margin:0; font-size:22px; }.icon-button { border:1px solid var(--line); width:35px; height:35px; border-radius:5px; background:#fff; color:var(--ink); font-size:21px; }.icon-button:hover { background:#edf6f4; }
.view { padding:26px 34px 34px; }.hidden { display:none; }.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px; }.metric { background:var(--panel); border:1px solid var(--line); padding:16px; border-radius:6px; min-height:86px; }.metric-label { color:var(--muted); font-size:12px; }.metric-value { font-size:27px; font-weight:700; margin-top:7px; }
.platform-switcher { border-bottom:1px solid var(--line); margin-bottom:18px; }.platform-tabs { display:flex; align-items:flex-end; gap:26px; }.platform-tab { display:flex; align-items:center; gap:8px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:0 2px 12px; font-weight:650; }.platform-tab:hover { color:var(--ink); }.platform-tab.active { color:var(--teal); border-bottom-color:var(--teal); }.platform-count { min-width:20px; height:20px; display:grid; place-items:center; border-radius:3px; background:#e9eeee; color:#5f7072; font-size:11px; font-weight:600; }.platform-tab.active .platform-count { background:var(--teal-soft); color:#10665e; }
.workspace { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(430px,1.6fr); align-items:start; gap:18px; }.panel { background:var(--panel); border:1px solid var(--line); border-radius:6px; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 18px; border-bottom:1px solid var(--line); }.panel-heading h2,.panel-heading h3 { margin:0; font-size:15px; }.count,.muted { color:var(--muted); font-size:12px; }
.conversation-list { position:sticky; top:121px; height:calc(100vh - 151px); min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }.list { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:7px; }.conversation { width:100%; border:0; border-radius:5px; background:transparent; text-align:left; padding:13px 12px; display:grid; gap:5px; }.conversation:hover,.conversation.selected { background:var(--teal-soft); }.conversation-top { display:flex; justify-content:space-between; align-items:center; }.contact { font-weight:650; }.badge { color:#145f59; background:#d4eae5; border-radius:3px; padding:2px 6px; font-size:11px; }.preview { color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.platform-empty { color:var(--muted); padding:26px 12px; text-align:center; }
.detail { min-height:530px; }.detail-header { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 22px 15px; }.detail-header h2 { margin:0; font-size:20px; }.detail-actions { display:flex; align-items:center; gap:8px; }.detail-actions select { width:auto; max-width:190px; }.primary,.secondary { border:0; padding:9px 13px; border-radius:5px; font-weight:600; }.primary { background:var(--teal); color:#fff; }.primary:hover { background:#0f625c; }.secondary { border:1px solid #73a69f; color:#10665e; background:#f7fbfa; }.secondary:hover { background:#e3f1ee; }.conversation-meta { margin:0 22px 18px; display:grid; grid-template-columns:150px minmax(0,1fr) auto auto; align-items:start; gap:10px; }.conversation-meta .secondary { align-self:end; }.conversation-meta label,.form-grid label { color:#435258; display:grid; gap:6px; font-size:12px; }.conversation-meta textarea { min-height:54px; resize:vertical; }.messages { padding:0 22px 14px; max-height:235px; overflow:auto; display:grid; gap:9px; }.message { max-width:80%; padding:9px 11px; border-radius:5px; line-height:1.5; }.message.inbound { background:#eef2f2; justify-self:start; }.message.outbound { background:#dff0ec; justify-self:end; }.message-meta { color:var(--muted); font-size:11px; margin-bottom:3px; }.message-image,.message-video { display:block; width:min(220px,100%); max-height:260px; object-fit:cover; border-radius:4px; margin-top:6px; }.message-form { padding:0 22px 16px; display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:8px; }.image-area,.video-area,.candidate-area { border-top:1px solid var(--line); }.image-area .panel-heading,.video-area .panel-heading,.candidate-area .panel-heading { border-bottom:0; }.image-form { padding:0 18px 12px; display:grid; grid-template-columns:minmax(0,1fr) 120px auto; gap:8px; align-items:end; }.image-form textarea { min-height:58px; resize:vertical; }.media-size { align-self:center; color:var(--muted); font-size:12px; }.image-list { padding:0 18px 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }.generated-media { border:1px solid var(--line); padding:7px; border-radius:5px; display:grid; gap:7px; min-width:0; }.generated-media img,.generated-media video { width:100%; aspect-ratio:1; object-fit:cover; border-radius:3px; background:#eaf0ef; }.generated-media .muted { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.media-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:5px; align-items:center; }.media-actions .secondary { padding:6px 5px; white-space:nowrap; }.media-actions .icon-button { width:31px; height:31px; color:var(--danger); }.media-preview-dialog { width:min(760px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:6px; padding:0; background:#fff; color:var(--ink); box-shadow:0 20px 70px rgba(16,38,42,.28); }.media-preview-dialog::backdrop { background:rgba(16,38,42,.42); }.media-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }.media-preview-header h3,.media-preview-header p { margin:0; }.media-preview-header p { margin-top:4px; max-width:620px; }.media-preview-content { display:grid; place-items:center; max-height:70vh; padding:16px; background:#f7faf9; }.media-preview-content img,.media-preview-content video { display:block; max-width:100%; max-height:62vh; border-radius:4px; }.candidate-list { padding:0 18px 18px; display:grid; gap:9px; }.candidate { border:1px solid var(--line); padding:11px; border-radius:5px; }.candidate p { margin:0 0 10px; line-height:1.55; }.candidate-edit { width:100%; min-height:58px; resize:vertical; margin-bottom:10px; }.candidate-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; }.candidate button { border:1px solid #73a69f; color:#10665e; background:#f7fbfa; padding:6px 9px; border-radius:4px; }.candidate button:hover { background:#e3f1ee; }.candidate.approved { opacity:.65; }
.empty-state { color:var(--muted); min-height:530px; display:grid; place-content:center; justify-items:center; gap:7px; }.empty-state strong { color:var(--ink); font-size:16px; }.device-panel { max-width:850px; }.device-list { padding:10px 18px; }.device { display:grid; grid-template-columns:1fr auto auto; gap:22px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }.device:last-child { border-bottom:0; }.status { text-transform:capitalize; font-size:12px; }.status.online { color:#117b55; }.status.offline { color:var(--danger); }
.approval-heading,.data-heading { align-items:flex-start; }.approval-heading p { margin:5px 0 0; }.approval-actions,.data-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.approval-actions select { width:auto; max-width:220px; }.check-label { display:flex; align-items:center; gap:6px; color:#435258; font-size:12px; white-space:nowrap; }.check-label input,.toggle-control input { width:auto; accent-color:var(--teal); }.approval-list { padding:0 18px; }.approval-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:start; padding:15px 0; border-bottom:1px solid var(--line); }.approval-row:last-child { border-bottom:0; }.row-check { padding-top:4px; }.row-check input { width:16px; height:16px; accent-color:var(--teal); }.approval-row p { margin:7px 0; line-height:1.55; }.approval-row-actions { display:flex; gap:8px; }.compact-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }.data-tabs { display:flex; align-items:center; gap:3px; }.data-tab { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:7px 9px; font-weight:650; }.data-tab.active { color:var(--teal); border-bottom-color:var(--teal); }.data-table-wrap { overflow:auto; max-height:calc(100vh - 276px); }.data-table { width:100%; min-width:760px; border-collapse:collapse; table-layout:fixed; }.data-table th { position:sticky; top:0; z-index:1; text-align:left; color:#617074; background:#f7faf9; border-bottom:1px solid var(--line); font-size:12px; font-weight:650; }.data-table th,.data-table td { padding:11px 14px; vertical-align:top; }.data-table td { border-bottom:1px solid #e7eeee; color:#37474c; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.data-table th:nth-child(1),.data-table td:nth-child(1) { width:17%; }.data-table th:nth-child(2),.data-table td:nth-child(2),.data-table th:nth-child(3),.data-table td:nth-child(3) { width:13%; }.data-table th:nth-child(4),.data-table td:nth-child(4) { width:35%; }.table-empty { color:var(--muted); text-align:center; padding:35px !important; }.toggle-field { align-content:start; }.toggle-control { display:flex; align-items:center; gap:7px; min-height:37px; color:#435258; font-size:14px; }
input,textarea,select { width:100%; border:1px solid #cbd7d6; border-radius:4px; color:var(--ink); background:#fff; padding:8px 9px; font:inherit; outline:none; } input:focus,textarea:focus,select:focus { border-color:#4e9289; box-shadow:0 0 0 2px #dcefeb; }.settings-layout { max-width:900px; }.model-settings { display:grid; gap:16px; }.settings-panel { overflow:hidden; }.form-grid { padding:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.form-grid .wide { grid-column:1 / -1; }.form-action { display:flex; align-items:end; }.reply-mode-field { grid-column:1 / -1; border-bottom:1px solid var(--line); padding-bottom:18px; }.reply-mode-field > .muted { line-height:1.5; }.switch { display:flex; align-items:center; gap:10px; width:max-content; color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; }.switch input { position:absolute; opacity:0; width:1px; height:1px; }.switch-track { width:42px; height:24px; display:flex; align-items:center; padding:3px; border-radius:999px; background:#89999a; transition:background .18s ease; }.switch-thumb { width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease; }.switch input:checked + .switch-track { background:var(--teal); }.switch input:checked + .switch-track .switch-thumb { transform:translateX(18px); }.switch input:focus-visible + .switch-track { box-shadow:0 0 0 3px #dcefeb; }.model-status { padding:18px 20px 0; display:grid; gap:12px; }.connection { display:flex; align-items:center; gap:8px; font-weight:650; }.connection.offline { color:var(--danger); }.connection.online { color:#117b55; }.model-details { display:grid; gap:6px; color:var(--muted); font-size:12px; }.model-list { display:flex; flex-wrap:wrap; gap:7px; }.model-list span { border:1px solid #c9dfda; background:#edf6f4; color:#125e57; border-radius:3px; padding:4px 7px; font-size:12px; }.task-list { padding:0 18px; }.task-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); }.task-row:last-child { border-bottom:0; }.task-title { display:flex; align-items:center; gap:8px; margin-bottom:6px; }.task-right { display:flex; align-items:flex-end; gap:10px; flex-shrink:0; }.task-status { font-size:12px; color:var(--muted); }.task-status.completed { color:#117b55; }.task-status.failed { color:var(--danger); }.task-status.running { color:#9a6415; }.task-status.scheduled { color:#5d5da8; }.task-status.paused { color:#68777d; }.task-error { color:var(--danger); font-size:12px; margin-top:7px; max-width:650px; }.task-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.task-controls input { width:178px; height:32px; padding:5px 7px; }.task-controls button { padding:6px 9px; }.task-schedule-note { margin-top:6px; }
@media (max-width:800px) { body { overflow:auto; }.shell { grid-template-columns:1fr; height:auto; overflow:visible; }.sidebar { min-height:auto; padding:12px; display:block; overflow:visible; }.brand { padding:0 6px 12px; }.sidebar nav { display:flex; flex-wrap:wrap; }.sidebar-note { display:none; } main { overflow:visible; }.topbar { position:static; }.topbar,.view { padding-left:18px; padding-right:18px; }.metrics,.workspace,.form-grid { grid-template-columns:1fr; }.platform-tabs { gap:20px; }.workspace { gap:14px; }.conversation-list { position:static; height:auto; min-height:auto; display:block; overflow:visible; }.list { overflow:visible; }.detail { min-height:420px; }.detail-header,.detail-actions { align-items:stretch; flex-direction:column; }.detail-actions select { max-width:none; width:100%; }.empty-state { min-height:350px; }.conversation-meta,.message-form,.image-form { grid-template-columns:1fr; }.conversation-meta .secondary,.message-form .secondary,.image-form .secondary { justify-self:start; }.task-row { flex-direction:column; }.form-grid .wide { grid-column:auto; } }
@media (max-width:800px) { .approval-heading,.data-heading { flex-direction:column; }.approval-actions,.data-filters { justify-content:flex-start; }.approval-actions select,.data-filters input,.data-filters select { width:100%; max-width:none; }.approval-row { grid-template-columns:auto minmax(0,1fr); }.approval-row-actions { grid-column:2; }.compact-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.data-tabs { width:100%; overflow-x:auto; }.data-table-wrap { max-height:none; } }