:root{--bg:#f5f5f0;--card:#fff;--line:#e5e5e0;--ink:#2d2d2d;--muted:#888;--teal:#63b9b1;--teal-dark:#477c82;--teal-soft:#edf8f6;--danger:#cf4b54}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC",sans-serif;color:var(--ink);background:var(--bg)}body{height:100vh;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit}.quickbar{min-height:52px;padding:7px 24px;display:flex;align-items:center;justify-content:center;gap:18px;flex:none;background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:#555}.quick-brand{display:flex;align-items:center;gap:8px;margin-right:auto}.quick-brand img{width:30px;height:30px;object-fit:contain}.quick-brand strong{color:#222;font-size:14px}.quickbar label{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.quickbar input[type=range]{width:105px;accent-color:var(--teal)}.quickbar em{min-width:56px;font-style:normal;color:#777}.quickbar input[type=checkbox]{accent-color:var(--teal)}.quick-status{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;background:#f7f7f4}.quick-status>i{width:7px;height:7px;border-radius:50%;background:#aaa}.quick-status>i.online{background:#3ba272}.quick-status>i.busy{background:#d99a32;animation:pulse 1.2s infinite}.quick-status>i.error{background:var(--danger)}.search-state{display:flex;align-items:center;gap:6px;color:#477c82}.search-state i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.main{width:calc(100% - 24px);height:calc(100vh - 24px);margin:12px;display:grid;grid-template-columns:5fr 4fr;grid-template-rows:minmax(0,1fr);gap:14px}.col-left,.col-right{display:flex;flex-direction:column;min-width:0;min-height:0;gap:14px}.panel-media,.wave-wrap,.panel-avatar,.panel-settings,.panel-dialog,.panel-controls{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}.panel-media{position:relative;flex:1;min-height:392px;background:#111}.media-label{position:absolute;left:0;right:0;top:0;z-index:8;height:42px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(rgba(0,0,0,.62),transparent);font-size:14px;font-weight:600}.stage-badges{display:flex;gap:6px}.stage-badges b{padding:3px 7px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(0,0,0,.38);font-size:10px;font-weight:500;color:#ddd}.stage-badges b.online{color:#dffbf7;border-color:#79c9c1}.stage{position:absolute;inset:0;background:#111;overflow:hidden}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.05)}#avatar,.idle-video{display:none;width:100%;height:100%;object-fit:contain;background:#111}.idle-video{position:absolute;inset:0}.avatar-placeholder{position:absolute;inset:0;display:grid;place-items:center}.avatar-placeholder img{width:210px;max-width:40%;opacity:.34;filter:grayscale(.15)}#cameraPreview{display:none;position:absolute;right:14px;top:48px;width:150px;aspect-ratio:4/3;object-fit:cover;border:2px solid rgba(255,255,255,.75);border-radius:8px;transform:scaleX(-1);box-shadow:0 4px 18px rgba(0,0,0,.3)}.camera-close{display:none;position:absolute;right:17px;top:51px;width:22px;height:22px;border:0;border-radius:50%;color:#fff;background:rgba(0,0,0,.65);cursor:pointer}.fullscreen{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:7px;color:#fff;background:rgba(0,0,0,.42);cursor:pointer}.subtitles{position:absolute;left:8%;right:8%;bottom:8%;z-index:5;text-align:center;color:#fff;font-size:18px;font-weight:600;text-shadow:0 2px 7px #000}
.wave-wrap{position:relative;height:48px;flex:none;background:#fff}.wave-wrap canvas{width:100%;height:100%}.wave-wrap span{position:absolute;inset:0;display:grid;place-items:center;color:#aaa;font-size:12px}
.panel-avatar{height:224px;flex:none;padding:10px 14px;display:grid;grid-template-columns:170px minmax(245px,1fr);grid-template-rows:auto 1fr;gap:9px 14px}.avatar-header{grid-row:1/-1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}.avatar-header strong{display:block;font-size:16px}.avatar-header small{display:block;margin-top:3px;color:#777;font-size:11px;line-height:1.4}.upload-button{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:4px 10px;border:1px solid #9fd4d0;border-radius:6px;color:var(--teal-dark);background:#f0faf9;font-size:12px;font-weight:600;cursor:pointer}.upload-button:hover{background:#def4f1}.upload-button input{display:none}.idle-control{padding:8px 9px;border:1px solid #d1e8e6;border-radius:9px;background:linear-gradient(145deg,#fff,#edf9f7);display:grid;grid-template-columns:auto auto minmax(125px,1fr);align-items:center;gap:7px}.mode-buttons{display:flex;gap:4px}.mode-buttons button{min-height:29px;padding:3px 8px;border:1px solid #c9dfee;border-radius:6px;color:#5d8589;background:#fff;font-size:10px;font-weight:700;cursor:pointer}.mode-buttons button.active{color:#fff;border-color:#61afa9;background:linear-gradient(145deg,#83cbc4,#5dafaa)}.generate-button{min-height:29px;padding:4px 10px;border:1px solid #5eaea8;border-radius:6px;color:#fff;background:#65b7b1;font-size:11px;font-weight:600;cursor:pointer}.generate-button:disabled{opacity:.45}.idle-control>label{display:flex;align-items:center;gap:6px;color:#66898c;font-size:11px}.idle-control select{min-width:0;width:100%;padding:5px 7px;border:1px solid #d6e5e2;border-radius:6px;background:#fff;color:#444}.generation-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;color:#738c8a}.generation-meta b,.generation-meta small{font-size:10px;font-weight:500}.generation-progress{grid-column:1/-1;height:4px;border-radius:4px;background:#dce8e6;overflow:hidden}.generation-progress i{display:block;width:0;height:100%;background:var(--teal);transition:width .35s}.avatar-library{display:flex;align-items:center;gap:9px;min-width:0;overflow-x:auto;padding:2px 3px 5px;scrollbar-width:thin}.avatar-item{position:relative;width:82px;height:76px;flex:none;padding:0;overflow:hidden;border:2px solid transparent;border-radius:9px;background:#e8e8e3;box-shadow:0 2px 7px rgba(0,0,0,.08);cursor:pointer}.avatar-item:hover{transform:translateY(-1px)}.avatar-item.selected{border-color:#68b7b1;box-shadow:0 0 0 2px rgba(104,183,177,.18)}.avatar-item img{width:100%;height:100%;object-fit:cover}.avatar-item em{position:absolute;left:0;right:0;bottom:0;padding:12px 5px 3px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));font-size:10px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-item .delete-avatar{position:absolute;right:4px;top:4px;width:21px;height:21px;border:1px solid rgba(255,255,255,.7);border-radius:6px;color:#fff;background:rgba(190,35,55,.9);opacity:0;cursor:pointer}.avatar-item:hover .delete-avatar{opacity:1}
.panel-settings{flex:none}.panel-heading{min-height:43px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f0eb;font-size:14px;font-weight:600}.settings-grid{padding:13px 15px;display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:flex;flex-direction:column;gap:5px}.field>span,.reference-block>span{font-size:11px;color:#888;font-weight:500}.field select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fafaf7;color:#333}.reference-block{display:flex;align-items:center;gap:7px;grid-column:1/-1;padding-top:2px}.reference-block>span{margin-right:auto}.reference-block small{max-width:210px;color:#999;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.architecture{margin:0 15px 13px;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:7px;background:#fafaf7}.architecture b{font-size:10px;font-weight:600;color:#666}.architecture i{font-style:normal;color:#aaa}
.panel-dialog{flex:1;min-height:0;display:flex;flex-direction:column}.text-button{border:0;background:none;color:#888;font-size:11px;cursor:pointer}.transcript{flex:1;min-height:0;padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:11px}.welcome{margin:auto;text-align:center;color:#aaa}.welcome>span{font-size:30px;opacity:.45}.welcome p{font-size:12px}.message{max-width:84%;padding:9px 12px;border-radius:9px;font-size:14px;line-height:1.55}.message.user{align-self:flex-end;background:#e1f3f0;border-bottom-right-radius:3px}.message.assistant{align-self:flex-start;background:#f3f3ef;border-bottom-left-radius:3px}.message small{display:block;margin-bottom:2px;color:#999;font-size:10px}.notice{align-self:center;color:#999;font-size:11px}.notice.error{color:var(--danger)}.composer{display:flex;gap:8px;padding:11px 12px;border-top:1px solid #f0f0eb}.composer textarea{flex:1;resize:none;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:#fafaf7;outline:none}.composer textarea:focus{border-color:#9fd4d0}.composer button{padding:0 17px;border:1px solid #5eaea8;border-radius:7px;color:#fff;background:var(--teal);font-weight:600}.composer button:disabled{opacity:.4}
.panel-controls{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;padding:13px}.control{min-width:120px;padding:11px 25px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;font-size:14px;font-weight:500}.control.primary{color:#fff;border-color:#5eaea8;background:var(--teal)}.control.danger{color:#b93842;background:#fff}.control:disabled{opacity:.38;cursor:not-allowed}.control-divider{width:1px;height:27px;background:#e0e0dc}.hint{color:#999;font-size:11px}
@keyframes pulse{50%{opacity:.35}}@media(max-width:1050px){body{height:auto;min-height:100vh}.quickbar{justify-content:flex-start;flex-wrap:wrap}.main{height:auto;grid-template-columns:1fr}.col-left,.col-right{min-height:auto}.panel-media{height:560px;flex:none}.panel-avatar{height:auto;min-height:230px}.panel-dialog{height:520px}.panel-controls{grid-column:1}}@media(max-width:680px){.quickbar{padding:9px 12px;gap:10px}.quick-brand{width:100%}.main{width:calc(100% - 16px);margin:8px;gap:8px}.col-left,.col-right{gap:8px}.panel-media{height:480px}.panel-avatar{grid-template-columns:1fr;grid-template-rows:auto}.avatar-header{grid-row:auto}.idle-control{grid-template-columns:1fr}.mode-buttons{justify-content:space-between}.idle-control .generate-button,.idle-control>label{width:100%}.avatar-library{min-height:86px}.settings-grid{grid-template-columns:1fr}.reference-block{grid-column:1}.panel-controls{flex-wrap:wrap}.hint{width:100%;text-align:center}.check,.search-state{display:none}}

/* Original Omni Preview dual-camera stage. */
.panel-media{padding:6px;background:linear-gradient(145deg,#e3f3f2,#e8f4f8)}
.stage{position:relative;inset:auto;width:100%;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:30px minmax(0,1fr);gap:6px;background:transparent}
.stage:after{display:none}.pane-label{display:flex;align-items:center;justify-content:space-between;padding:0 9px;border:1px solid #cee4e3;border-radius:7px 7px 3px 3px;color:#454545;background:rgba(250,255,254,.9);font-size:12px;font-weight:700}.camera-pane-label{grid-column:1;grid-row:1}.avatar-pane-label{grid-column:2;grid-row:1}.stage-badges b{color:#657d7b;border-color:#d4e7e5;background:#f3fbfa}.stage-badges b.online{color:#348c84;border-color:#9fd4d0}
.camera-pane,.avatar-pane{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:6px;background:#111}.camera-pane{grid-column:1;grid-row:2}.avatar-pane{grid-column:2;grid-row:2}
#cameraPreview{position:absolute;inset:0;display:none;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none;transform:scaleX(-1)}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8c9695;background:#151717}.camera-placeholder .camera-icon{display:grid;place-items:center;width:44px;height:34px;border:1px solid #69706f;border-radius:7px;font-size:22px;opacity:.65}.camera-placeholder p{margin:9px 0 0;font-size:11px}.camera-close{right:9px;top:9px;z-index:5}
.avatar-pane #avatar,.avatar-pane #mouthCanvas,.avatar-pane .idle-video{position:absolute;inset:0}.avatar-pane #avatar{z-index:1;opacity:1;transition:opacity .08s ease-out}.avatar-pane .idle-video{z-index:2;opacity:0;transition:opacity .08s ease-out;will-change:opacity}.avatar-pane #mouthCanvas{z-index:3;display:none;width:100%;height:100%;background:transparent}.avatar-pane .avatar-placeholder{position:absolute;inset:0;z-index:0;transition:opacity .08s ease-out}.avatar-pane .fullscreen{z-index:6}.avatar-pane .subtitles{z-index:5}
@media(max-width:680px){.panel-media{height:720px}.stage{grid-template-columns:1fr;grid-template-rows:30px minmax(0,1fr) 30px minmax(0,1fr)}.camera-pane-label{grid-column:1;grid-row:1}.camera-pane{grid-column:1;grid-row:2}.avatar-pane-label{grid-column:1;grid-row:3}.avatar-pane{grid-column:1;grid-row:4}}

/* Original Omni avatar library: header, action controls, then card grid. */
.panel-avatar{height:286px;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px;background:#fff}
.avatar-header{width:100%;min-height:44px;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:10px;flex:none}
.avatar-header>div{min-width:0}.avatar-header strong{display:block;color:#222;font-size:16px}.avatar-header small{display:block;margin-top:2px;color:#777;font-size:12px;line-height:1.35}.avatar-header #avatarStatus{color:#4e9996;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.idle-control{width:100%;display:grid;grid-template-columns:auto auto auto minmax(180px,1fr);grid-template-rows:auto auto auto;align-items:center;gap:7px 8px;padding:9px 10px;flex:none;border:1px solid #d1e8e6;border-radius:10px;background:linear-gradient(145deg,rgba(252,255,255,.96),rgba(237,249,247,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.idle-label{color:#66898c;font-size:12px;font-weight:600;white-space:nowrap}.mode-buttons{display:flex;align-items:center;gap:5px}.mode-buttons button{min-width:49px;min-height:32px;padding:4px 10px;font-size:12px}.generate-button{min-height:32px;margin-left:0;padding:4px 12px;font-size:12px}.primary-action{display:flex!important;align-items:center!important;gap:8px!important;min-width:0;color:#66898c!important;font-size:12px!important}.primary-action span{flex:none}.primary-action select{flex:1;min-width:0;height:32px;padding:4px 8px}
.generation-meta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-width:0}.generation-meta b,.generation-meta small{font-size:10px}.generation-progress{grid-column:1/-1}
.avatar-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px;min-width:0;min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:2px 3px 5px}.avatar-item{width:100%;height:108px}.avatar-item em{font-size:11px;padding:13px 5px 4px}
@media(max-width:780px){.panel-avatar{height:auto;min-height:360px}.idle-control{grid-template-columns:1fr}.idle-label{display:none}.mode-buttons{justify-content:space-between}.generate-button,.primary-action{width:100%}.avatar-library{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Reserved for the redesigned avatar controls: match the avatar video pane. */
.panel-avatar.empty-design-slot{width:calc(50% - 3px);height:286px;min-height:286px;align-self:flex-end;padding:0;background:#fff}
.empty-design-slot>.avatar-content{display:none}
@media(max-width:680px){.panel-avatar.empty-design-slot{width:100%;height:240px;min-height:240px}}

/* Verbatim Omni Preview avatar-library component styling. */
.panel-avatar-library.avatar-library{width:calc(50% - 3px);height:360px;min-width:0;min-height:0;align-self:flex-end;display:flex;align-items:stretch;flex-direction:column;gap:8px;padding:10px 14px;flex:none;overflow:hidden;border:1px solid #e5e5e0;border-radius:10px;background:#fff}
.panel-avatar-library .avatar-library-header{width:100%;min-height:44px;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:8px;flex:none}
.panel-avatar-library .avatar-library-header>div{min-width:0}.avatar-library-header strong{display:block;color:#222;font-size:16px}.avatar-library-header small{display:block;margin-top:2px;color:#777;line-height:1.35;font-size:12px}.avatar-upload-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.avatar-upload-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:3px 10px;border:1px solid #9fd4d0;border-radius:6px;color:#477c82;background:#f0faf9;font-weight:600;cursor:pointer;white-space:nowrap}.avatar-upload-button:hover{background:#def4f1}.avatar-upload-button.is-loading{pointer-events:none;cursor:wait;opacity:.82}.avatar-upload-button.is-loading::before{content:"";width:12px;height:12px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:avatar-upload-spin .75s linear infinite}@keyframes avatar-upload-spin{to{transform:rotate(360deg)}}.avatar-upload-status{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#777;font-size:11px}.avatar-upload-status[data-state=loading]{color:#a16207}.avatar-upload-status[data-state=success]{color:#4e9996}.avatar-upload-status[data-state=error]{color:#b91c1c}
.idle-control-panel{position:relative;width:100%;padding:9px 10px;border:1px solid #d1e8e6;border-radius:10px;background:linear-gradient(145deg,rgba(252,255,255,.96),rgba(237,249,247,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.idle-action-row{display:flex;align-items:center;gap:8px;min-width:0}.idle-action-label{display:none;flex:none;color:#66898c;font-size:12px;font-weight:600}.idle-mode-buttons{display:flex;align-items:center;gap:5px;min-width:0}.idle-mode-button,.idle-generate-button{min-height:32px;border:1px solid #c9dfee;border-radius:7px;background:#fff;color:#333;font:inherit;font-size:13px}.idle-mode-button{min-width:49px;padding:4px 10px;cursor:pointer;color:#5d8589;background:#fff;font-size:12px;font-weight:700;letter-spacing:.03em;transition:color .18s,background .18s,border-color .18s,box-shadow .18s,transform .18s}.idle-mode-button:hover:not(:disabled){color:#467d81;border-color:#9ed4d0;transform:translateY(-1px)}.idle-mode-button.active{color:#fff;border-color:#61afa9;background:linear-gradient(145deg,#83cbc4,#5dafaa);box-shadow:0 4px 11px rgba(65,147,142,.2)}.idle-generate-button{margin-left:auto;padding:4px 10px;cursor:pointer;color:#fff;border-color:#5eaea8;background:#65b7b1;font-weight:650;white-space:nowrap}.idle-generate-button:hover:not(:disabled){border-color:#499b98;background:#52a5a1;box-shadow:0 5px 13px rgba(58,137,133,.2)}.idle-generate-button:disabled,.idle-mode-button:disabled{cursor:not-allowed;opacity:.5}
.idle-playback-row{display:flex;align-items:center;gap:8px;margin-top:8px;color:#66898c;font-size:12px;font-weight:600}.idle-playback-row>span{flex:none}.idle-playback-select{min-width:0;height:30px;flex:1;padding:3px 28px 3px 9px;border:1px solid #cbe5e3;border-radius:7px;color:#47747a;background:#fff;font:inherit;font-size:12px;cursor:pointer}.idle-playback-select:disabled{color:#88aaa9;background:#edf7f6;cursor:not-allowed}.idle-generation-status{min-height:0;margin-top:7px;color:#6b898d;font-size:12px;line-height:1.35}.idle-generation-status:empty{display:none}.generation-provider,.panel-avatar-library .avatar-upload-status{display:none}
.idle-generation-progress{display:grid;grid-template-columns:minmax(100px,1fr) auto;align-items:center;gap:9px;width:100%;margin-top:8px;padding:7px 9px;border:1px solid #b8dfdc;border-radius:7px;background:#eefaf8;box-shadow:inset 0 1px 2px rgba(52,124,121,.06)}.idle-generation-progress[hidden]{display:none}.idle-generation-progress-track{height:9px;overflow:hidden;border-radius:999px;background:#dcefed}.idle-generation-progress-fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#a8e2dc,#61b7b1);transition:width .35s ease}.idle-generation-progress-label{color:#477b7e;font-size:12px;white-space:nowrap}
.panel-avatar-library .avatar-library-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));align-content:start;align-items:start;gap:10px;min-width:0;min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:2px 3px 5px;scrollbar-width:thin}.panel-avatar-library .avatar-card{position:relative;width:100%;height:108px;padding:0;flex:none;overflow:hidden;cursor:pointer;border:2px solid transparent;border-radius:10px;background:#e8e8e3;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:border-color .16s,transform .16s,box-shadow .16s}.avatar-card:hover{transform:translateY(-1px);box-shadow:0 5px 13px rgba(0,0,0,.13)}.avatar-card.selected{border-color:#68b7b1;box-shadow:0 0 0 2px rgba(104,183,177,.2)}.avatar-card>img{width:100%;height:100%;display:block;object-fit:cover}.avatar-card-name{position:absolute;left:0;right:0;bottom:0;padding:13px 5px 4px;overflow:hidden;color:#fff;font-size:11px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;background:linear-gradient(transparent,rgba(0,0,0,.78))}.avatar-card-check{position:absolute;top:5px;left:5px;display:none;width:20px;height:20px;align-items:center;justify-content:center;border:2px solid #fff;border-radius:50%;color:#fff;background:#61ada8;font-size:12px;font-weight:700}.avatar-card.selected .avatar-card-check{display:flex}.avatar-card-delete{position:absolute;top:5px;right:5px;width:24px;height:24px;padding:0;visibility:hidden;opacity:0;cursor:pointer;border:1px solid rgba(255,255,255,.75);border-radius:7px;color:#fff;background:rgba(190,35,55,.9);transition:opacity .16s,visibility .16s}.avatar-card:hover .avatar-card-delete,.avatar-card:focus-within .avatar-card-delete,.avatar-card-delete:focus-visible{visibility:visible;opacity:1}.avatar-card-delete:hover{background:#dc263f}
@media(max-width:680px){.panel-avatar-library.avatar-library{width:100%;height:360px}.idle-control-panel{padding-inline:7px}.idle-action-row{gap:5px}.idle-mode-buttons{gap:3px}.idle-mode-button{min-width:42px;padding-inline:7px}.idle-generate-button{padding-inline:8px;font-size:12px}}

/* Avatar library visual target: compact blue/lilac four-column card. */
.panel-avatar-library.avatar-library{width:calc(50% - 3px);height:440px;padding:15px 16px 18px;gap:9px;border:1px solid #dce6f4;border-radius:16px;background:linear-gradient(150deg,#fbfdff 0%,#f6f9ff 68%,#f2f7fb 100%);box-shadow:0 8px 24px rgba(73,99,140,.08)}
.panel-avatar-library .avatar-library-header{min-height:45px;align-items:flex-start}.avatar-library-header strong{color:#344a63;font-size:17px;line-height:1.25}.avatar-library-header small{margin-top:3px;color:#8193a8;font-size:13px}.avatar-upload-button{min-height:33px;padding:5px 13px;border-color:#52c3c4;border-radius:7px;color:#168a8b;background:#f8ffff;font-size:14px;font-weight:700}.avatar-upload-button:hover{color:#087d7e;background:#eaffff}
.idle-control-panel{padding:9px 10px 10px;border-color:#c9d8ff;border-radius:10px;background:linear-gradient(120deg,rgba(230,243,255,.96),rgba(242,229,255,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.idle-action-row{gap:6px}.idle-mode-buttons{gap:5px}.idle-mode-button{min-width:48px;min-height:32px;padding:4px 10px;border-color:#c8d7ee;border-radius:7px;color:#5d7089;background:rgba(255,255,255,.78);box-shadow:none}.idle-mode-button:hover:not(:disabled){color:#426890;border-color:#8fb7ef}.idle-mode-button.active{color:#fff;border-color:#5a96f4;background:linear-gradient(135deg,#55b0fb,#656ff0);box-shadow:0 5px 12px rgba(69,116,237,.22)}.idle-generate-button{min-height:32px;padding:4px 12px;border-color:#647cf6;border-radius:7px;background:linear-gradient(135deg,#3f9cff,#834eea);box-shadow:0 5px 12px rgba(92,82,231,.2);font-size:13px}.idle-generate-button:hover:not(:disabled){border-color:#596ce3;background:linear-gradient(135deg,#318deb,#7342d8)}
.idle-playback-row{margin-top:8px;color:#60728c;font-size:12px}.idle-playback-select{height:30px;border-color:#c6d7ec;color:#7f90a6;background:rgba(238,246,255,.75)}.idle-playback-select:disabled{color:#98a7b9;background:rgba(230,239,251,.72)}.idle-generation-status{margin-top:7px;color:#798ba1;font-size:11px}
.panel-avatar-library .avatar-library-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 9px;padding:1px 2px 5px}.panel-avatar-library .avatar-card{width:100%;height:108px;border-radius:9px;border-color:#d5e0ef;background:#111;box-shadow:0 3px 8px rgba(45,69,105,.18)}.panel-avatar-library .avatar-card:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(45,69,105,.22)}.panel-avatar-library .avatar-card.selected{border-color:#55a9f6;box-shadow:0 0 0 2px rgba(78,159,244,.26),0 5px 12px rgba(45,69,105,.2)}.avatar-card-check{top:5px;left:5px;width:20px;height:20px;border-width:2px;background:linear-gradient(135deg,#56b7fa,#5875ef);box-shadow:0 2px 5px rgba(34,77,143,.25)}.avatar-card-name{padding:15px 5px 4px;font-size:11px}.avatar-card-delete{z-index:3}
.avatar-card-actions{position:absolute;right:5px;bottom:5px;z-index:2;padding:3px 6px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;background:rgba(31,47,78,.68);box-shadow:0 2px 6px rgba(16,29,52,.18);backdrop-filter:blur(4px);font-size:9px;font-weight:600;line-height:1;white-space:nowrap}.panel-avatar-library .avatar-card-delete{top:5px;right:5px}
@media(max-width:900px){.panel-avatar-library.avatar-library{width:100%;height:440px}}@media(max-width:520px){.panel-avatar-library .avatar-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Global blue/lilac theme matching the supplied reference. */
:root{--bg:#eef3ff;--card:#fbfdff;--line:#d9e4f3;--ink:#344a63;--muted:#8193a8;--teal:#538ff7;--teal-dark:#426da8;--teal-soft:#eaf3ff;--danger:#d85b72}
html,body{color:var(--ink);background:linear-gradient(135deg,#f4f8ff 0%,#eef2ff 48%,#f6efff 100%)}
.quickbar{background:rgba(251,253,255,.96);border-bottom-color:#d9e4f3;box-shadow:0 2px 12px rgba(72,100,151,.06)}.quick-brand strong{color:#344a63}.quickbar em,.quickbar label{color:#73869d}.quickbar input[type=range]{accent-color:#5b8df5}.quickbar input[type=checkbox]{accent-color:#6b78ee}.quick-status{color:#637891;background:#edf4ff;border:1px solid #d8e5f5}.quick-status>i.online{background:#51a7f8;box-shadow:0 0 0 3px rgba(81,167,248,.15)}.search-state{color:#55729b}.search-state i{background:linear-gradient(135deg,#55b6ef,#756bea)}
.sync-state{padding:5px 9px;border:1px solid #d8e5f5;border-radius:7px;color:#607a9c;background:#f2f7ff;font-size:12px}
.session-inline-settings{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 12px 0}.session-inline-settings .quick-status,.session-inline-settings .sync-state{padding:4px 8px}.session-inline-settings .check,.session-inline-settings .search-state{font-size:11px;color:#647b97}
.avatar-stage-status{display:flex;align-items:center;gap:6px}.motion-state{padding:2px 7px;border-radius:999px;color:#557b9b;background:#e7f2ff;font-size:10px;font-weight:600}.motion-state.speaking{color:#5c56ae;background:#ebe9ff}.motion-state.listening{color:#a06b14;background:#fff3d8}.status-lamp{display:none;align-items:center;gap:6px;padding:3px 8px;border-radius:20px;color:#555;background:#ecece7;font-size:11px;font-weight:600;letter-spacing:.5px}.status-lamp.visible{display:flex}.status-lamp .dot{width:8px;height:8px;flex:none;border-radius:50%}.status-lamp .timer{font-size:11px;font-weight:500;opacity:.7;font-variant-numeric:tabular-nums}.status-lamp.live{color:#147a38;background:#e1f6e7}.status-lamp.live .dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}.status-lamp.preparing .dot{background:#eab308;animation:pulse-dot 1s ease-in-out infinite}.status-lamp.stopped .dot{background:#888}.status-lamp.error{color:#b42332;background:#fde8eb}.status-lamp.error .dot{background:#ef4444}@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.panel-media,.wave-wrap,.panel-settings,.panel-dialog,.panel-controls{border-color:#d9e4f3;background:rgba(251,253,255,.96);box-shadow:0 8px 24px rgba(73,99,140,.07)}.panel-media{border-radius:16px;background:linear-gradient(145deg,#e8f3ff,#eeeaff)}.pane-label{color:#425a75;border-color:#cdddf2;background:rgba(248,252,255,.94)}.stage-badges b{color:#647b97;border-color:#d2e0f2;background:#edf4fc}.stage-badges b.online{color:#4d6fcd;border-color:#aabef5;background:#edf1ff}.camera-pane,.avatar-pane{background:#111827}.camera-placeholder{color:#8fa0b4;background:linear-gradient(145deg,#172134,#121927)}.fullscreen{border-color:rgba(190,211,246,.45);background:rgba(39,55,87,.62)}
.wave-wrap{background:linear-gradient(90deg,#f9fcff,#f3f5ff)}.wave-wrap span{color:#91a1b5}
.panel-settings,.panel-dialog,.panel-controls{border-radius:14px}.panel-heading{color:#405872;border-bottom-color:#e3eaf5;background:linear-gradient(90deg,#fbfdff,#f7f5ff)}.settings-grid{background:rgba(250,252,255,.72)}.field>span,.reference-block>span{color:#778ba3}.field select,.composer textarea{color:#40546d;border-color:#d6e2f2;background:#f7faff}.field select:focus,.composer textarea:focus{border-color:#88aafa;box-shadow:0 0 0 3px rgba(91,141,245,.1)}.upload-button{color:#357f9f;border-color:#74c5d8;background:#f2fdff}.upload-button:hover{background:#e4faff}.architecture{color:#657b96;background:linear-gradient(90deg,#edf6ff,#f2edff)}.architecture b{color:#58708d}
.transcript{background:linear-gradient(150deg,#fcfdff,#faf8ff)}.message.user{color:#304f76;background:linear-gradient(135deg,#dceeff,#e5e7ff)}.message.assistant{color:#455a75;background:#eef3fa}.composer{border-top-color:#e0e8f4;background:#fbfdff}.composer button{border-color:#5f79ef;background:linear-gradient(135deg,#4ca4fb,#7656eb);box-shadow:0 4px 10px rgba(82,100,226,.18)}
.panel-controls{background:linear-gradient(90deg,#fbfdff,#f8f6ff)}.control{color:#536981;border-color:#d6e1ef;background:#fff}.control.primary{color:#fff;border-color:#6578ef;background:linear-gradient(135deg,#4ca5fb,#7952e8);box-shadow:0 5px 14px rgba(85,93,222,.2)}.control.danger{color:#c04e68;border-color:#efd1da;background:#fff8fb}.control-divider{background:#dbe4f1}.hint{color:#8494a8}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#edf3fb}::-webkit-scrollbar-thumb{border:2px solid #edf3fb;border-radius:999px;background:#b9c8df}::selection{color:#fff;background:#6c78ed}

/* Settings and avatar library share the lower-left row; dialog owns right column. */
.lower-panels{height:440px;min-height:440px;display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:none}.lower-panels .panel-avatar-library.avatar-library{width:100%;height:440px;align-self:stretch}.compact-settings{height:440px;min-width:0;display:flex;flex-direction:column;overflow:hidden}.compact-settings .settings-grid{grid-template-columns:1fr;gap:10px;overflow-y:auto}.compact-settings .reference-block{grid-column:1;flex-wrap:wrap}.compact-settings .reference-block>span{width:100%}.compact-settings .reference-block small{max-width:100%}.compact-settings .architecture{margin-top:auto;flex-wrap:wrap;gap:5px;padding:8px 6px}.col-right>.panel-dialog{height:100%;flex:1}
@media(max-width:1050px){.lower-panels{height:auto;min-height:440px;grid-template-columns:1fr 1fr}.lower-panels .panel-avatar-library.avatar-library,.compact-settings{height:440px}}@media(max-width:760px){.lower-panels{grid-template-columns:1fr;height:auto}.lower-panels .panel-avatar-library.avatar-library,.compact-settings{height:440px}}

.reference-preview{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:4px;padding:9px 10px;border:1px solid #d7e3f4;border-radius:9px;background:linear-gradient(135deg,#f4f9ff,#f5f1ff)}.reference-preview>span{color:#657b96;font-size:11px;font-weight:600}.reference-preview audio{width:100%;height:34px;display:block;accent-color:#617df1}.reference-preview audio::-webkit-media-controls-panel{background:linear-gradient(90deg,#eaf4ff,#eeeaff)}

/* Keep the settings card compact while exposing live barge-in sensitivity. */
.compact-settings{font-size:12px}.compact-settings .panel-heading{min-height:36px;padding:0 11px;font-size:12px}.compact-settings .session-inline-settings{gap:5px;padding:6px 9px 0;font-size:10px}.compact-settings .session-inline-settings .quick-status,.compact-settings .session-inline-settings .sync-state{padding:3px 6px;font-size:10px}.compact-settings .settings-grid{gap:7px;padding:8px 10px}.compact-settings .field{gap:3px}.compact-settings .field>span,.compact-settings .reference-block>span{font-size:10px}.compact-settings .field select{min-height:28px;padding:4px 7px;font-size:11px}.compact-settings .reference-block{gap:5px;padding-top:0}.compact-settings .upload-button{min-height:26px;padding:3px 7px;font-size:10px}.compact-settings .reference-preview{gap:3px;margin-top:2px;padding:6px 7px}.compact-settings .reference-preview>span{font-size:10px}.compact-settings .reference-preview audio{height:28px}.vad-field>span{display:flex;align-items:center;justify-content:space-between}.vad-field output{color:#5872a4;font-size:10px;font-variant-numeric:tabular-nums}.vad-field input[type=range]{width:100%;height:14px;margin:0;accent-color:#6386ef}.vad-field small{display:flex;justify-content:space-between;color:#97a4b7;font-size:9px}.vad-field small b{font-weight:500}

.dialog-controls{display:flex;align-items:center;gap:10px;padding:11px 12px;border-top:1px solid #e0e8f4;background:linear-gradient(90deg,#fbfdff,#f8f6ff)}.dialog-controls .control{min-width:120px;padding:10px 20px}.dialog-controls .hint{min-width:0}.dialog-controls .control-divider{height:27px}
.panel-dialog .dialog-wave{width:auto;height:48px;margin:0 12px 10px;flex:none;border-color:#d9e4f3;border-radius:9px;background:linear-gradient(90deg,#f8fbff,#f4f3ff)}
@media(max-width:680px){.dialog-controls{flex-wrap:wrap}.dialog-controls .hint{width:100%;text-align:center}}

/* Compact generation header and allow the full progress widget to render. */
.panel-avatar-library.avatar-library{padding-top:11px;gap:6px}.panel-avatar-library .avatar-library-header{min-height:41px}.idle-control-panel{padding-top:7px;padding-bottom:7px}.idle-generation-progress.generation-progress{height:auto;min-height:25px;overflow:visible;margin-top:5px;padding:5px 8px}.idle-generation-progress-track{height:8px}.idle-generation-status{margin-top:5px}
/* Subtitles are intentionally disabled; conversation text remains in the log. */
.subtitles{display:none!important}

/* Semi-transparent JoyFox watermark for the realtime conversation canvas. */
.panel-dialog .transcript{
  background-color:#fbfcff;
  background-image:
    linear-gradient(rgba(251,253,255,.89),rgba(249,248,255,.89)),
    url("/api/brand/logo"),
    linear-gradient(150deg,#fcfdff,#faf8ff);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,center,center;
  background-size:cover,min(48%,420px) auto,cover;
}
.panel-dialog .message,
.panel-dialog .notice,
.panel-dialog .welcome{position:relative}

/* Keep the compact session indicators on one visual baseline. */
.compact-settings .session-inline-settings{align-items:center}
.compact-settings .session-inline-settings .check,
.compact-settings .session-inline-settings .search-state{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:20px;
  line-height:1;
  white-space:nowrap;
}
.compact-settings .session-inline-settings .check input{
  width:13px;
  height:13px;
  margin:0;
  flex:none;
}
.compact-settings .session-inline-settings .search-state i{
  width:7px;
  height:7px;
  flex:none;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.14);
}
