:root{--bg: #f0f2f8;--surface: #ffffff;--surface-2: #f7f8fc;--border: #e4e7f2;--border-light: #edf0fa;--text: #1a1c24;--text-sub: #7b8099;--text-hint: #adb3c8;--primary: #414fff;--primary-dim: rgba(65, 79, 255, .1);--primary-mid: rgba(65, 79, 255, .22);--success: #17c247;--warning: #f59e0b;--danger: #f03a3a;--radius-s: 6px;--radius-m: 10px;--radius-l: 14px;--radius-xl: 18px;--shadow-s: 0 1px 3px rgba(20,30,80,.07);--shadow-m: 0 4px 14px rgba(20,30,80,.09);--ease: all .18s ease;--left-w: 361px;--fs-label: 11px;--fs-body: 13px;--fs-title: 15px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:var(--fs-body);font-weight:500;line-height:1.5}#root{display:flex;width:100%;height:100vh;overflow:hidden}#app{display:flex;width:100%;height:100%;overflow:hidden}.panel-left{flex:0 0 360px;width:360px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:0 18px 16px;overflow:hidden}.app-title{display:flex;align-items:center;padding:16px 20px 14px;border-bottom:1px solid var(--border-light);margin:0;flex-shrink:0}.app-title:after{display:none}.app-logo{height:56px;width:auto;display:block}.left-section{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}.left-section-agent{flex:0 0 auto;margin-bottom:16px}.section-label{font-size:var(--fs-label);font-weight:700;color:var(--text-hint);text-transform:uppercase;letter-spacing:.9px;padding:0 2px;margin-top:2px}.section-title-label{font-size:var(--fs-title);font-weight:700;color:#1a2580;letter-spacing:.1px;padding:0 2px;margin-top:4px;margin-bottom:2px}.section-title-btn{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;border-bottom:2px solid var(--border);border-radius:0;padding:6px 2px;height:auto;font-size:var(--fs-title);font-weight:700;color:#1a2580;cursor:pointer;text-align:left;box-shadow:none;transition:var(--ease)}.section-title-btn:hover{color:var(--primary);border-bottom-color:var(--primary);transform:none;box-shadow:none}.section-chevron{margin-left:auto;font-size:var(--fs-label);color:var(--text-hint);transition:transform .2s ease}.section-title-btn.open .section-chevron{transform:rotate(180deg)}.agent-card-area{overflow-y:auto;max-height:340px}.agent-card-click-wrap{cursor:pointer;outline:none}.agent-card-click-wrap:hover .chat-agent-card{box-shadow:0 0 0 1px var(--primary-dim, rgba(167,139,250,.25))}.panel-right{flex:1;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;padding:20px 24px 18px;min-width:0}#status-volume-container{background:transparent;border:none;box-shadow:none;display:flex;flex-direction:column;gap:8px;padding:0;margin-bottom:0}#status-container{display:grid;grid-template-columns:1fr 1fr;gap:6px}.status-indicator{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-m);padding:7px 10px;font-size:var(--fs-body);font-weight:400;color:var(--text);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;transition:var(--ease)}.status-indicator i{font-size:var(--fs-body);width:14px;text-align:center;color:var(--primary);flex-shrink:0}#room-status{border-left:3px solid var(--primary)}#ai-state{border-left:3px solid var(--primary-mid)}.volume-indicators{display:flex;flex-direction:row;gap:10px}.volume-container{flex:1;display:flex;flex-direction:column;gap:5px;background:var(--surface-2);border:1px solid var(--border-light);border-radius:var(--radius-s);padding:7px 10px}.volume-label{font-size:var(--fs-body);color:var(--text);display:flex;align-items:center;gap:5px}.volume-bar-container{width:100%;height:4px;border-radius:2px;background:var(--border);overflow:hidden}.volume-bar{height:100%;width:0%;transition:width .12s cubic-bezier(.4,0,.2,1)}.agent-select,.voice-select{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:9px 12px;border-radius:var(--radius-m);font-size:var(--fs-body);height:40px;cursor:pointer;outline:none;transition:var(--ease);-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.agent-select:hover,.agent-select:focus,.voice-select:hover,.voice-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim)}@keyframes selectPulse{0%,to{box-shadow:0 0 #414fff1f}50%{box-shadow:0 0 8px #414fff40}}.agent-select[data-loading=true]{animation:selectPulse 1.5s infinite}.tts-provider-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;background:var(--surface-2)}.tts-provider-btn{flex:1;padding:8px 10px;background:transparent;border:none;color:var(--text-sub);font-size:var(--fs-body);font-weight:500;cursor:pointer;transition:var(--ease);height:36px;box-shadow:none}.tts-provider-btn+.tts-provider-btn{border-left:1px solid var(--border)}.tts-provider-btn:hover:not(.active){background:var(--border-light);color:var(--text);transform:none;box-shadow:none}.tts-provider-btn.active{background:var(--primary);color:#fff;font-weight:600}.model-settings-btn,.conv-settings-btn{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;border-bottom:2px solid var(--border);border-radius:0;padding:6px 2px;height:auto;font-size:var(--fs-title);font-weight:700;color:#1a2580;cursor:pointer;text-align:left;box-shadow:none;transition:var(--ease)}.model-settings-btn:hover,.conv-settings-btn:hover{color:var(--primary);border-bottom-color:var(--primary);transform:none;box-shadow:none}.conv-settings-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0}.save-config-to-agent-btn{font-size:14px;font-weight:500;color:var(--text-sub);border:1px solid var(--border);border-radius:6px;background:var(--surface-2);padding:10px 16px;transition:color .15s,border-color .15s,opacity .15s}.save-config-to-agent-btn:hover:not(:disabled){color:var(--primary);border-color:var(--primary)}.save-config-to-agent-btn:disabled{opacity:.45}.model-badge{font-size:var(--fs-label);background:var(--primary);color:#fff;border-radius:4px;padding:1px 6px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.left-bottom{flex:0 0 auto;margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:16px}.button-container{display:flex;gap:8px;width:100%}.button-container button{flex:1}.button-container-secondary{margin-top:0}button{background:var(--surface-2);color:var(--text);border:1px solid var(--border);transition:var(--ease);padding:0 16px;border-radius:var(--radius-m);cursor:pointer;font-size:var(--fs-body);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;white-space:nowrap}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-m)}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.35;transform:none!important;box-shadow:none!important}.start-button{background:var(--success);border:none;color:#fff;height:42px;font-size:var(--fs-body);font-weight:600}.start-button:hover:not(:disabled){background:#13aa3d;box-shadow:0 4px 16px #17c24752}.end-button{background:var(--danger);border:none;color:#fff;height:42px;font-size:var(--fs-body);font-weight:600}.end-button:hover:not(:disabled){background:#d42d2d;box-shadow:0 4px 16px #f03a3a52}.interrupt-button{background:#64748b;border:none;color:#fff;font-size:var(--fs-body)}.interrupt-button:hover:not(:disabled){background:#475569}.mute-button{background:#64748b;border:none;color:#fff;font-size:var(--fs-body)}.mute-button:hover:not(:disabled){background:#475569}.mute-button.muted{background:var(--primary)}.send-button{background:var(--primary);border:none;color:#fff;height:42px;padding:0 22px;font-weight:600}.send-button:hover:not(:disabled){background:#3340e0;box-shadow:0 4px 16px #414fff52}.chat-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-s);flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative;margin-bottom:12px}.chat-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 22px;display:flex;flex-direction:column;background:var(--surface)}.chat-list::-webkit-scrollbar{width:4px}.chat-list::-webkit-scrollbar-track{background:transparent}.chat-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.chat-list::-webkit-scrollbar-thumb:hover{background:var(--primary)}.chat-item{display:flex;flex-direction:column;margin-bottom:16px;max-width:72%}.chat-item.user{align-items:flex-end;align-self:flex-end}.chat-item.ai{align-items:flex-start;align-self:flex-start}.chat-id{font-size:var(--fs-body);font-weight:600;color:var(--text-sub);margin-bottom:4px;display:flex;align-items:center;gap:4px}.chat-id:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%}.chat-item.user .chat-id:before{background:var(--primary)}.chat-item.ai .chat-id:before{background:var(--success)}.chat-text{padding:10px 14px;border-radius:var(--radius-l);font-size:var(--fs-title);font-weight:600;white-space:pre-wrap;word-break:break-word;line-height:1.65}.chat-item.user .chat-text{background:var(--primary);color:#fff;border-top-right-radius:var(--radius-s);box-shadow:var(--shadow-s)}.chat-item.ai .chat-text{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-top-left-radius:var(--radius-s)}.chat-metrics{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;min-height:0}.chat-metrics:empty{display:none}.chat-metrics span{font-size:var(--fs-label);color:var(--text);background:var(--primary-dim);border:1px solid var(--primary-mid);border-radius:20px;padding:1px 8px;white-space:nowrap}.chat-metrics span b{color:var(--primary);font-weight:700}.chat-item.user .chat-metrics{justify-content:flex-end}.input-container{display:flex;gap:10px;align-items:center;flex-shrink:0}.text-input{flex:1;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:0 14px;border-radius:var(--radius-m);font-size:var(--fs-body);height:42px;outline:none;transition:var(--ease)}.text-input::placeholder{color:var(--text-hint)}.text-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim)}.panel-backdrop{position:fixed;top:0;bottom:0;left:calc(var(--left-w) + 24px);right:24px;z-index:299;background:#00000026;cursor:default}.model-settings-panel,.conv-settings-panel,.voice-picker-panel{position:fixed;top:0;left:calc(var(--left-w) + 24px);right:24px;z-index:300;background:var(--surface);border-bottom:1px solid var(--border);border-left:1px solid var(--border);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(-100%);transition:transform .26s ease;box-shadow:0 8px 40px #141e5024}.model-settings-panel.visible,.conv-settings-panel.visible,.voice-picker-panel.visible{transform:translateY(0)}.model-settings-panel.hidden,.conv-settings-panel.hidden,.voice-picker-panel.hidden{display:none}.agent-config-panel--large{max-height:90vh}.agent-config-panel--large .agent-config-panel-body{flex:1;min-height:0;overflow-y:auto}.model-settings-panel:not(.hidden),.conv-settings-panel:not(.hidden),.voice-picker-panel:not(.hidden){display:flex}.settings-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px 14px;font-size:var(--fs-title);font-weight:700;color:#1a2580;border-bottom:1px solid var(--border);background:var(--surface)}.settings-panel-hint{flex-shrink:0;margin:0;padding:8px 24px 12px;font-size:12px;color:var(--text-sub);line-height:1.4;border-bottom:1px solid var(--border);background:var(--surface)}.close-settings-btn{background:transparent;border:none;color:var(--text-sub);cursor:pointer;font-size:var(--fs-title);padding:4px 8px;border-radius:var(--radius-s);transition:var(--ease);height:auto;box-shadow:none}.close-settings-btn:hover{color:var(--text);background:var(--surface-2);transform:none;box-shadow:none}.settings-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:16px 24px 12px}.settings-row{display:flex;align-items:center;gap:12px}.settings-row label{min-width:88px;font-size:var(--fs-title);color:var(--text);font-weight:400}.search-row{display:flex;align-items:center;gap:8px;padding:2px 0 4px}.search-icon{color:var(--text-hint);font-size:var(--fs-title);flex-shrink:0}.model-search-input{flex:1}.settings-select,.settings-input{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-m);color:var(--text);padding:0 12px;font-size:var(--fs-title);height:42px;outline:none;transition:var(--ease)}.settings-select:focus,.settings-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim)}textarea.settings-input{padding:10px 12px;height:auto}.key-input-row{display:flex;flex:1;gap:8px}.key-input-row .settings-input{flex:1}.fetch-btn{padding:0 16px;background:var(--primary-dim);border:1px solid var(--primary-mid);border-radius:var(--radius-m);color:var(--primary);cursor:pointer;font-size:var(--fs-title);font-weight:600;white-space:nowrap;transition:var(--ease);height:42px}.fetch-btn:hover:not(:disabled){background:var(--primary-mid);transform:none;box-shadow:none}.fetch-btn:disabled{opacity:.4}.models-list-container{flex:1;overflow-y:auto;min-height:80px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-2)}.models-empty{padding:24px;text-align:center;color:var(--text-sub);font-size:var(--fs-body)}.model-row{display:grid;grid-template-columns:1fr 70px 1.2fr;gap:10px;align-items:center;padding:9px 16px;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-m);margin:3px 6px;transition:background .15s}.model-row:hover{background:var(--primary-dim)}.model-row.selected{background:#414fff1a;border-color:var(--primary-mid)}.model-name{font-size:var(--fs-title);color:var(--text)}.model-id-tag{font-size:var(--fs-body);color:var(--text-sub)}.model-ttft{font-size:var(--fs-body);font-weight:400;color:var(--success);text-align:center}.model-ttft.ttft-unknown{color:var(--text-sub)}.model-scenario{font-size:var(--fs-body);color:var(--text)}.voice-group-label{font-size:var(--fs-title);font-weight:700;color:#1a2580;text-transform:uppercase;letter-spacing:.8px;padding:10px 16px 4px}.voice-row{padding:5px 16px;font-size:var(--fs-body);color:var(--text);cursor:pointer;border-radius:var(--radius-m);margin:1px 6px;transition:background .12s}.voice-row:hover{background:var(--primary-dim)}.voice-row.selected{background:#414fff1a;color:var(--primary);font-weight:600}.settings-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:12px 24px 15px;background:var(--surface);border-top:1px solid var(--border)}.settings-footer-actions{display:flex;align-items:center;gap:10px}.no-llm-btn{padding:0 16px;height:40px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-m);color:var(--text-sub);font-size:var(--fs-title);font-weight:500;cursor:pointer;transition:var(--ease);white-space:nowrap}.no-llm-btn:hover{border-color:var(--primary-mid);color:var(--primary)}.no-llm-btn.selected{background:var(--primary-dim);border-color:var(--primary-mid);color:var(--primary);font-weight:700}.settings-status{font-size:var(--fs-title);color:var(--text-sub)}.settings-status.success{color:var(--success)}.settings-status.error{color:var(--danger)}.settings-status.info{color:var(--primary)}.apply-btn{padding:0 20px;background:var(--primary-dim);border:1px solid var(--primary-mid);border-radius:var(--radius-m);color:var(--primary);cursor:pointer;font-size:var(--fs-title);font-weight:700;transition:var(--ease);height:40px}.apply-btn:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary);transform:none;box-shadow:none}.apply-btn:disabled{opacity:.4}.conv-settings-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:16px 24px 12px}.conv-setting-row{display:flex;align-items:center;gap:14px}.conv-setting-label{font-size:var(--fs-body);color:var(--text);font-weight:400;width:72px;flex-shrink:0}.toggle-group{display:flex;border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;background:var(--surface-2)}.toggle-btn{padding:7px 16px;background:transparent;border:none;color:var(--text-sub);font-size:var(--fs-body);font-weight:400;cursor:pointer;transition:var(--ease);height:auto;box-shadow:none}.toggle-btn+.toggle-btn{border-left:1px solid var(--border)}.toggle-btn:hover:not(.active){background:var(--border-light);color:var(--text);transform:none;box-shadow:none}.toggle-btn.active{background:var(--primary);color:#fff;font-weight:600}.conv-setting-textarea{flex:1;min-width:0;padding:8px 12px;font-size:var(--fs-body);color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-m);resize:vertical;min-height:56px}.conv-setting-textarea::placeholder{color:var(--text-sub)}.conv-setting-row:has(.conv-setting-textarea){align-items:flex-start}.conv-setting-row:has(.conv-setting-textarea) .conv-setting-label{width:72px;padding-top:8px}.conv-setting-slider-row{flex-direction:column;align-items:stretch;gap:6px}.conv-slider-header{display:flex;align-items:center;justify-content:space-between}.slider-val{font-size:var(--fs-body);font-weight:400;color:var(--primary)}.conv-slider{width:100%;accent-color:var(--primary);cursor:pointer;height:4px}.slider-labels{display:flex;justify-content:space-between;font-size:var(--fs-body);color:var(--text-sub);margin-top:2px}.reset-btn{padding:0 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-m);color:var(--text-sub);cursor:pointer;font-size:var(--fs-title);font-weight:500;transition:var(--ease);height:40px}.reset-btn:hover{background:var(--border);color:var(--text);transform:none;box-shadow:none}.chat-agent-card{background:var(--surface);border-radius:var(--radius-l);padding:14px;margin:4px 0;box-shadow:var(--shadow-s);border:1px solid var(--border);color:var(--text);transition:box-shadow .2s,border-color .2s}.chat-agent-card:hover{box-shadow:var(--shadow-m);border-color:var(--primary-mid)}.agent-header{display:flex;align-items:center;margin-bottom:10px}.agent-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px;border:2px solid var(--primary-mid);background:var(--surface-2);object-fit:cover}.agent-info{flex:1}.agent-name{font-size:var(--fs-title);font-weight:700;color:var(--primary);margin-bottom:1px}.agent-role{font-size:var(--fs-label);color:var(--text-sub)}.agent-description{font-size:var(--fs-label);color:var(--text-sub);margin-bottom:10px;line-height:1.6}.agent-capabilities{margin-bottom:8px}.capabilities-title{font-size:var(--fs-label);font-weight:700;color:var(--primary);margin-bottom:5px}.capabilities-list{display:flex;flex-wrap:wrap;gap:4px}.capability-item{background:var(--primary-dim);padding:2px 9px;border-radius:20px;font-size:var(--fs-label);color:var(--primary);font-weight:600;border:1px solid var(--primary-mid)}.agent-personality{font-size:var(--fs-label);color:var(--text-sub)}.personality-label{font-weight:700;margin-right:4px;color:var(--primary)}.personality-text{color:var(--text)}.agent-voice-tags{margin:8px 0 0}.agent-voice-tags label{font-size:var(--fs-label);font-weight:700;color:var(--primary);margin-right:4px}.voice-tag-btn{font-family:inherit;font-size:var(--fs-label);padding:3px 10px;margin-right:4px;border-radius:var(--radius-m);border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;transition:var(--ease);font-weight:500;height:auto}.voice-tag-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-dim);transform:none;box-shadow:none}.voice-tag-btn.selected{background:var(--primary);color:#fff;border-color:var(--primary)}@keyframes volumePulse{0%{opacity:.7}to{opacity:1}}.volume-bar.active{animation:volumePulse .8s infinite alternate ease-in-out}@media(max-width:768px){#root,#app{flex-direction:column;height:auto;min-height:100vh;overflow-y:auto;overflow-x:hidden}.panel-left{width:100%;min-width:unset;max-width:unset;border-right:none;border-bottom:1px solid var(--border)}.left-bottom{flex:unset;justify-content:flex-start}.agent-card-area{display:none}.panel-right{padding:14px;min-height:60vh}.chat-container{min-height:300px}}@media(max-width:480px){.panel-left,.panel-right{padding:12px}}