@import"https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap";:root{--bg: linear-gradient(135deg, #f3f7ff, #e9eef7 45%, #dde7f2);--panel-bg: #ffffffcc;--panel-border: #c6d4e8;--text: #0f172a;--subtle: #334155;--primary: #0f172a;--danger: #be123c;--ok: #16a34a;--warn: #d97706;--shadow: 0 8px 22px rgba(15, 23, 42, .08);--cta: #22c55e;--code-bg: #0b1220;--code-text: #e2e8f0;--tab-bar-bg: #e2e8f0;--tab-active-bg: #ffffff;--tab-hover-bg: rgba(255, 255, 255, .5);--input-bg: #f8fbff;--input-border: #c7d5eb;--btn-bg: #f8fbff;--btn-border: #9aaecf;--btn-hover-bg: #eaf1fc;--btn-primary-bg: #0f172a;--btn-primary-color: #f8fafc;--btn-primary-hover: #020617;--btn-danger-bg: #fff1f2;--surface: #f8fbff;--surface-border: #e8eef8;--border-light: #d6e1f2;--border-medium: #d4e0f1;--border-table: #d8e3f4;--timeline-bg: linear-gradient(180deg, #f8fbff 0%, #f1f6fe 100%);--bubble-bg: #ffffff;--bubble-border: #c6d4e8;--bubble-shadow: 0 8px 18px rgba(15, 23, 42, .08);--bubble-hover-shadow: 0 10px 24px rgba(15, 23, 42, .12);--bubble-out-bg: linear-gradient(135deg, #1d4ed8, #2563eb);--bubble-out-border: #1d4ed8;--bubble-audio-bg: #edf4fe;--bubble-active-border: #0f172a;--bubble-active-shadow: 0 0 0 2px rgba(15, 23, 42, .2);--bubble-role-bg: #e2e8f0;--bubble-role-color: #1e293b;--status-bg: #e2e8f0;--status-color: #0f172a;--status-ok-bg: #dcfce7;--status-ok-color: #14532d;--status-off-bg: #e2e8f0;--status-off-color: #334155;--status-device-bg: #dbeafe;--status-device-color: #1e3a8a;--status-error-bg: #fee2e2;--status-error-color: #991b1b;--error-border: #ef4444;--error-bg: #fee2e2;--error-color: #7f1d1d;--metric-warn-bg: #fffbeb;--metric-warn-border: #fbbf24;--tool-call-name: #1d4ed8;--tool-call-args-bg: #f1f5f9;--iot-hover-bg: #edf2fc;--composer-input-bg: #ffffff;--composer-input-border: #c4d4ea;--composer-value-color: #1e3a8a;--state-idle: #1e3a8a;--state-active: #15803d;--state-pending: #92400e;--state-error: #991b1b}[data-theme=dark]{--bg: linear-gradient(135deg, #0f1419, #1a1f2e);--panel-bg: #1e2535cc;--panel-border: #2d3748;--text: #e2e8f0;--subtle: #94a3b8;--primary: #e2e8f0;--danger: #f87171;--ok: #4ade80;--warn: #fbbf24;--shadow: 0 8px 22px rgba(0, 0, 0, .3);--cta: #22c55e;--code-bg: #0d1117;--code-text: #e2e8f0;--tab-bar-bg: #1e2535;--tab-active-bg: #2d3748;--tab-hover-bg: rgba(255, 255, 255, .08);--input-bg: #141922;--input-border: #374151;--btn-bg: #1e2535;--btn-border: #374151;--btn-hover-bg: #2d3748;--btn-primary-bg: #3b82f6;--btn-primary-color: #ffffff;--btn-primary-hover: #2563eb;--btn-danger-bg: rgba(248, 113, 113, .12);--surface: #141922;--surface-border: #2d3748;--border-light: #2d3748;--border-medium: #2d3748;--border-table: #2d3748;--timeline-bg: linear-gradient(180deg, #111827 0%, #0f1419 100%);--bubble-bg: #1e2535;--bubble-border: #2d3748;--bubble-shadow: 0 8px 18px rgba(0, 0, 0, .25);--bubble-hover-shadow: 0 10px 24px rgba(0, 0, 0, .35);--bubble-out-bg: linear-gradient(135deg, #1e40af, #1d4ed8);--bubble-out-border: #1e40af;--bubble-audio-bg: rgba(59, 130, 246, .1);--bubble-active-border: #60a5fa;--bubble-active-shadow: 0 0 0 2px rgba(96, 165, 250, .3);--bubble-role-bg: #2d3748;--bubble-role-color: #cbd5e1;--status-bg: #2d3748;--status-color: #e2e8f0;--status-ok-bg: rgba(74, 222, 128, .15);--status-ok-color: #4ade80;--status-off-bg: #2d3748;--status-off-color: #94a3b8;--status-device-bg: rgba(59, 130, 246, .15);--status-device-color: #60a5fa;--status-error-bg: rgba(248, 113, 113, .15);--status-error-color: #f87171;--error-border: #991b1b;--error-bg: rgba(248, 113, 113, .12);--error-color: #f87171;--metric-warn-bg: rgba(251, 191, 36, .1);--metric-warn-border: #92400e;--tool-call-name: #60a5fa;--tool-call-args-bg: #141922;--iot-hover-bg: rgba(59, 130, 246, .08);--composer-input-bg: #141922;--composer-input-border: #374151;--composer-value-color: #60a5fa;--state-idle: #60a5fa;--state-active: #4ade80;--state-pending: #fbbf24;--state-error: #f87171}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Fira Sans,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font-family:Fira Sans,sans-serif}.app-shell{max-width:1720px;margin:0 auto;padding:16px}.topbar{padding:12px 0 18px}.topbar h1{margin:0;font-family:Fira Code,monospace;font-weight:600;font-size:28px}.topbar p{margin:6px 0 0;color:var(--subtle)}.error-banner{border:1px solid var(--error-border);background:var(--error-bg);color:var(--error-color);border-radius:12px;padding:10px 12px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}.content-grid{display:grid;grid-template-columns:420px 1fr 430px;gap:12px;min-height:calc(100vh - 130px)}.column-left,.column-center,.column-right{display:grid;gap:12px;align-content:start}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;box-shadow:var(--shadow);padding:12px}.panel-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.panel-header h2+.status{margin-right:auto}.panel-header h2{margin:0;font-size:16px;font-family:Fira Code,monospace}.panel h3{margin:12px 0 6px;font-size:13px;font-family:Fira Code,monospace;color:var(--subtle)}.tab-bar{display:flex;gap:2px;background:var(--tab-bar-bg);border-radius:10px;padding:3px}.tab-item{flex:1;border:none;background:transparent;border-radius:8px;padding:6px 10px;font-size:12px;font-family:Fira Code,monospace;font-weight:500;color:var(--subtle);cursor:pointer;transition:background .18s ease,color .18s ease}.tab-item:hover{background:var(--tab-hover-bg);color:var(--text)}.tab-active{background:var(--tab-active-bg);color:var(--text);box-shadow:0 1px 3px #0f172a1a}.form-grid{display:grid;gap:8px}.form-grid label,.panel label{display:grid;gap:4px;font-size:12px;color:var(--subtle)}input,select{width:100%;border-radius:8px;border:1px solid var(--input-border);padding:8px;font-size:13px;color:var(--text);background:var(--input-bg)}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #60a5fa;outline-offset:1px}textarea{width:100%;border-radius:8px;border:1px solid var(--input-border);padding:8px;font-size:12px;font-family:Fira Code,monospace;color:var(--text);background:var(--input-bg);resize:vertical}.field-error{color:var(--danger);font-size:11px}.field-required{color:var(--danger)}.button-row{display:flex;gap:8px;margin-top:10px}.btn{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;transition:background .18s ease,transform .18s ease}.btn:hover{background:var(--btn-hover-bg);transform:translateY(-1px)}.btn:disabled{cursor:not-allowed;opacity:.45}.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-color);border-color:var(--btn-primary-bg)}.btn-primary:hover{background:var(--btn-primary-hover)}.btn-sm{padding:3px 8px;font-size:11px}.btn-danger{border-color:var(--danger);color:var(--danger);background:var(--btn-danger-bg)}.status{border-radius:999px;background:var(--status-bg);color:var(--status-color);padding:2px 8px;font-size:12px;font-family:Fira Code,monospace}.status-ok{background:var(--status-ok-bg);color:var(--status-ok-color)}.status-off{background:var(--status-off-bg);color:var(--status-off-color)}.status-device{background:var(--status-device-bg);color:var(--status-device-color)}.status-warn{background:var(--metric-warn-bg);color:var(--warn)}.status-error{background:var(--status-error-bg);color:var(--status-error-color)}.meta-grid{margin-top:10px;display:grid;grid-template-columns:1fr;gap:8px;font-size:12px}.meta-grid p{margin:4px 0 0;font-family:Fira Code,monospace}.hint{color:var(--subtle);font-size:12px;line-height:1.4}.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.metric-item{border:1px solid var(--border-light);border-radius:10px;padding:8px;display:grid;gap:4px;font-size:12px}.metric-item strong{font-family:Fira Code,monospace;font-size:14px}.metrics-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.metric-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:6px;font-size:12px;background:var(--surface);border:1px solid var(--surface-border)}.metric-row-label{color:var(--subtle)}.metric-row-value{font-family:Fira Code,monospace;font-weight:500}.metric-warn{background:var(--metric-warn-bg);border-color:var(--metric-warn-border)}.metric-warn .metric-row-value{color:var(--warn)}.metrics-section{margin-top:8px}.metrics-text-list{max-height:120px;overflow:auto}.metrics-text-item{margin:0;padding:4px 8px;font-size:12px;border-bottom:1px solid var(--surface-border);font-family:Fira Code,monospace;word-break:break-word}.tool-call-list{max-height:200px;overflow:auto}.tool-call-item{display:grid;grid-template-columns:1fr auto;gap:4px;padding:6px 8px;border-bottom:1px solid var(--surface-border);font-size:12px}.tool-call-name{font-family:Fira Code,monospace;font-weight:500;color:var(--tool-call-name)}.tool-call-time{font-family:Fira Code,monospace;color:var(--subtle);font-size:11px}.tool-call-args{grid-column:1 / -1;font-family:Fira Code,monospace;font-size:11px;color:var(--subtle);word-break:break-all;background:var(--tool-call-args-bg);padding:2px 6px;border-radius:4px}.iot-presets{display:grid;gap:6px;margin-top:8px}.iot-preset-item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border-light);border-radius:8px;cursor:pointer;transition:background .18s ease;font-size:13px}.iot-preset-item:hover{background:var(--iot-hover-bg)}.iot-preset-item input[type=checkbox]{width:auto;margin:0}.iot-preset-name{font-family:Fira Code,monospace;font-weight:500}.iot-preset-desc{color:var(--subtle);font-size:12px}.json-editor{font-family:Fira Code,monospace;font-size:12px;min-height:120px}.api-result{margin-top:10px}.api-result-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px}.api-result-header time{color:var(--subtle);font-family:Fira Code,monospace;font-size:11px}.api-result-body{margin:0;padding:10px;border-radius:8px;background:var(--code-bg);color:var(--code-text);overflow:auto;max-height:300px;font-size:12px;font-family:Fira Code,monospace}.api-form{margin-top:8px}.devices-current{margin-bottom:8px}.device-info-grid{display:grid;gap:2px}.device-info-row{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font-size:12px;border-radius:4px}.device-info-row:nth-child(odd){background:var(--surface)}.device-info-label{color:var(--subtle)}.device-info-value{font-family:Fira Code,monospace;font-weight:500}.devices-health,.devices-list{margin-top:10px}.state-history{max-height:260px;overflow:auto}.state-history table{width:100%;border-collapse:collapse;font-size:12px}.state-history th,.state-history td{text-align:left;padding:6px;border-bottom:1px solid var(--border-table)}.timeline-panel{min-height:calc(100vh - 150px);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:10px}.timeline-scroll{height:calc(100vh - 292px);overflow:auto;border:1px solid var(--border-medium);border-radius:14px;background:var(--timeline-bg)}.timeline-row{position:absolute;left:0;top:0;width:100%;padding:8px 10px;display:flex}.timeline-row.in{justify-content:flex-start}.timeline-row.out{justify-content:flex-end}.timeline-bubble{max-width:min(84%,640px);border:1px solid var(--bubble-border);border-radius:16px;background:var(--bubble-bg);color:var(--text);box-shadow:var(--bubble-shadow);padding:10px 12px;text-align:left;display:grid;gap:6px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:bubble-enter .22s ease both}.timeline-bubble:hover{transform:translateY(-1px);box-shadow:var(--bubble-hover-shadow)}.timeline-bubble.out{background:var(--bubble-out-bg);border-color:var(--bubble-out-border);color:#f8fafc}.timeline-bubble.audio{background:var(--bubble-audio-bg);border-style:dashed}.timeline-bubble.active{border-color:var(--bubble-active-border);box-shadow:var(--bubble-active-shadow)}.timeline-bubble:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.bubble-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bubble-role{border-radius:999px;background:var(--bubble-role-bg);color:var(--bubble-role-color);padding:1px 8px;font-family:Fira Code,monospace;font-size:11px}.timeline-bubble.out .bubble-role{background:#f1f5f938;color:#dbeafe}.bubble-type{font-family:Fira Code,monospace;font-size:11px;opacity:.8}.bubble-time{margin-left:auto;font-family:Fira Code,monospace;font-size:11px;opacity:.72}.timeline-bubble.out .bubble-time{color:#bfdbfe}.bubble-summary{margin:0;font-size:13px;line-height:1.4;word-break:break-word}.composer-status-line{display:flex;align-items:center;gap:8px;border:1px solid var(--border-light);border-radius:10px;background:var(--surface);padding:8px 10px}.composer-status-label{color:var(--subtle);font-size:13px;font-weight:500}.composer-status-value{font-family:Fira Code,monospace;font-size:14px;font-weight:600;color:var(--composer-value-color);min-width:90px}.composer-status-value.state-idle{color:var(--state-idle)}.composer-status-value.state-listening,.composer-status-value.state-speaking{color:var(--state-active)}.composer-status-value.state-thinking,.composer-status-value.state-connecting{color:var(--state-pending)}.composer-status-value.state-interrupted,.composer-status-value.state-error,.composer-status-value.state-disconnected{color:var(--state-error)}.chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.chat-input{flex:1 1 auto;min-width:0;border-radius:12px;border:1px solid var(--composer-input-border);background:var(--composer-input-bg);padding:10px 12px}.chat-input:focus-visible{outline:2px solid #60a5fa;outline-offset:1px}.composer-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}.composer-actions .btn{white-space:nowrap}.composer-mode-select{font-family:Fira Code,monospace;font-size:12px;border:1px solid var(--composer-input-border);border-radius:6px;background:var(--composer-input-bg);padding:3px 6px;color:var(--text);width:90px}.composer-mode-select:disabled{opacity:.5;cursor:not-allowed}.composer-detect-row{grid-column:1 / -1;display:flex;gap:8px;align-items:center}.detect-input{flex:1 1 auto;min-width:0;font-size:13px;padding:6px 10px}.composer-hint{margin:0}.detail-block{font-size:13px;display:grid;gap:6px}.detail-block p{margin:0}.detail-block pre{margin:0;padding:10px;border-radius:8px;background:var(--code-bg);color:var(--code-text);overflow:auto;max-height:calc(100vh - 320px);font-size:12px;font-family:Fira Code,monospace}.topbar-row{display:flex;align-items:center;justify-content:space-between}.theme-toggle{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s ease,transform .18s ease;flex-shrink:0}.theme-toggle:hover{background:var(--btn-hover-bg);transform:translateY(-1px)}.theme-toggle svg{width:18px;height:18px}.rpc-toast-container{position:fixed;top:12px;right:16px;z-index:50;display:flex;flex-direction:column;gap:6px;pointer-events:none}.rpc-toast{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;font-size:12px;font-family:Fira Code,monospace;box-shadow:0 4px 12px #00000026;pointer-events:auto;cursor:pointer;animation:toast-in .2s ease both;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.rpc-toast-ok{background:var(--status-ok-bg);color:var(--status-ok-color);border:1px solid var(--ok)}.rpc-toast-err{background:var(--status-error-bg);color:var(--status-error-color);border:1px solid var(--danger)}.rpc-toast-method{font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rpc-toast-duration{opacity:.8;white-space:nowrap}@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes bubble-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.timeline-bubble{animation:none;transition:none}.btn:hover{transform:none}.tab-item{transition:none}.rpc-toast{animation:none}}.device-sim-strip{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--border-light);border-radius:8px;background:var(--surface)}.device-sim-group{display:flex;align-items:center;gap:4px}.device-sim-label{font-family:Fira Code,monospace;font-size:10px;font-weight:500;color:var(--subtle);text-transform:uppercase;letter-spacing:.04em}.device-sim-toggle{display:flex;background:var(--tab-bar-bg);border-radius:6px;padding:2px;gap:1px}.device-sim-opt{border:none;background:transparent;color:var(--subtle);border-radius:5px;padding:3px 10px;font-size:11px;font-family:Fira Code,monospace;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease}.device-sim-opt:hover:not(:disabled){color:var(--text)}.device-sim-opt.active{background:var(--ok);color:#fff}.device-sim-opt.stop{background:var(--danger);color:#fff}.device-sim-opt:disabled{opacity:.4;cursor:not-allowed}.device-sim-counter{font-family:Fira Code,monospace;font-size:10px;color:var(--subtle);min-width:18px;text-align:center}.device-sim-divider{width:1px;height:16px;background:var(--border-light)}.playback-status{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:var(--surface);border:1px solid var(--surface-border);font-size:12px;flex-wrap:wrap;margin-bottom:8px}.playback-status .status{font-weight:600}.playback-music-name{opacity:.85}.playback-remaining{font-family:Fira Code,monospace;opacity:.7}.playback-error{color:var(--error-color);font-size:11px}.playback-controls{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.playback-controls .btn{flex:1;min-width:0}.countdown-row{display:flex;gap:6px;align-items:flex-end;margin-top:8px}.countdown-row label{flex:1}.result-list{margin-top:10px}.scenario-presets{margin-bottom:10px}.scenario-presets-label{font-size:11px;color:var(--subtle);margin-bottom:4px}.scenario-presets-row{display:flex;gap:6px}.scenario-btn{flex:1;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text);border-radius:8px;padding:8px 6px;text-align:center;cursor:pointer;transition:background .18s ease,color .18s ease}.scenario-btn:hover{background:var(--btn-hover-bg)}.scenario-btn.active{background:var(--btn-primary-bg);color:var(--btn-primary-color);border-color:var(--btn-primary-bg)}.scenario-btn-tag{font-weight:600;font-size:12px}.scenario-btn-name{font-size:11px;opacity:.8;margin-top:2px}.two-col-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.effect-box{margin-top:10px;padding:8px;border-radius:6px}.effect-box.enabled{background:var(--surface);border:1px solid var(--surface-border)}.effect-box.disabled{border:1px solid transparent}.effect-inner{margin-top:8px}.effect-option-row{display:flex;gap:12px;margin-bottom:8px}.sleep-controls{margin-top:10px;border-top:1px solid var(--border-light);padding-top:8px}label.checkbox-row{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--text);-webkit-user-select:none;user-select:none}label.checkbox-row.bold{font-weight:600}label.checkbox-row input[type=checkbox]{width:auto;margin:0}.tab-bar-scroll{overflow-x:auto;scrollbar-width:none}.tab-bar-scroll::-webkit-scrollbar{display:none}.tab-bar-scroll .tab-item{flex:0 0 auto;padding:6px 12px}@media (max-width: 1120px){.chat-composer{grid-template-columns:1fr}.composer-actions{justify-content:flex-start}}@media (max-width: 1280px){.content-grid{grid-template-columns:1fr}.timeline-panel{min-height:auto}.timeline-scroll{height:420px}.timeline-bubble{max-width:92%}}