:root{--bg-color: var(--tg-theme-bg-color, #000000);--text-color: var(--tg-theme-text-color, #ffffff);--hint-color: var(--tg-theme-hint-color, #999999);--button-color: var(--tg-theme-button-color, #3390ec);--button-text-color: var(--tg-theme-button-text-color, #ffffff);--secondary-bg: var(--tg-theme-secondary-bg-color, #1c1c1e);--destructive-color: #e53935;--guide-color: #00d4ff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-color);height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column;align-items:center;height:100%}.state{display:none;flex-direction:column;align-items:center;width:100%;height:100%}.state.active{display:flex}#state-connecting{justify-content:center;gap:20px}#state-active{position:relative;overflow:hidden}.settings-btn{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--hint-color);opacity:.5;transition:opacity .2s;-webkit-tap-highlight-color:transparent;z-index:20}.settings-btn:active{opacity:1}.layout-item{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:1;touch-action:none}#state-active.edit-mode .layout-item{border:2px dashed rgba(255,255,255,.3);border-radius:12px;padding:8px;cursor:grab;opacity:.9;box-shadow:0 0 12px #3390ec26;transition:box-shadow .2s,transform .15s ease-out}#state-active.edit-mode .layout-item.dragging{cursor:grabbing;opacity:1;box-shadow:0 0 20px #3390ec66;z-index:100}@keyframes snap-pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.03)}to{transform:translate(-50%,-50%) scale(1)}}#state-active.edit-mode .layout-item.snap-feedback{animation:snap-pulse .15s ease-out;box-shadow:0 0 24px #00d4ff59}#state-active.edit-mode .control-btn{pointer-events:none}#state-active.edit-mode .transcript{overflow:hidden}.smart-guide{display:none;position:absolute;z-index:90;pointer-events:none}.smart-guide-h{left:0;right:0;top:50%;height:1px;background:var(--guide-color);box-shadow:0 0 6px 1px var(--guide-color),0 0 14px 2px #00d4ff66}.smart-guide-v{top:0;bottom:0;left:50%;width:1px;background:var(--guide-color);box-shadow:0 0 6px 1px var(--guide-color),0 0 14px 2px #00d4ff66}.smart-guide.visible{display:block}.edit-label{display:none;position:absolute;top:-2px;left:50%;transform:translate(-50%);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#ffffffb3;background:#0000008c;padding:2px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:10}#state-active.edit-mode .edit-label{display:block}.position-indicator{display:none;position:absolute;z-index:110;font-size:11px;font-weight:600;font-family:SF Mono,Menlo,monospace;color:#ffffffd9;background:#000000b3;padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.15);pointer-events:none;white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.position-indicator.visible{display:block}.resize-handle{display:none;position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize;z-index:10;touch-action:none}.resize-handle:after{content:"";position:absolute;bottom:4px;right:4px;width:0;height:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent transparent rgba(255,255,255,.5) transparent}#state-active.edit-mode .resize-handle{display:block}.edit-toolbar{display:none;position:absolute;bottom:24px;left:50%;transform:translate(-50%);flex-direction:column;gap:8px;padding:10px 14px;background:#1c1c1eeb;border-radius:16px;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:50;max-width:95vw}#state-active.edit-mode .edit-toolbar{display:flex}.edit-toolbar-row{display:flex;gap:8px;align-items:center;justify-content:center}.edit-toolbar-btn{padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#ffffff14;color:var(--text-color);font-size:13px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,opacity .2s}.edit-toolbar-btn:active{background-color:#ffffff26}.edit-toolbar-btn:disabled{opacity:.35;cursor:default}.edit-toolbar-btn-primary{background-color:var(--button-color);color:var(--button-text-color);border-color:var(--button-color)}.edit-toolbar-btn-primary:active{background-color:#2a7ad4}.grid-controls{display:flex;align-items:center;gap:6px}.grid-control-btn{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:var(--hint-color);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s}.grid-control-btn.grid-control-active{background:#00d4ff26;color:var(--guide-color);border-color:#00d4ff4d}.grid-size-group{display:flex;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.grid-size-btn{padding:5px 10px;border:none;background:#ffffff0f;color:var(--hint-color);font-size:11px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s}.grid-size-btn+.grid-size-btn{border-left:1px solid rgba(255,255,255,.08)}.grid-size-btn.grid-size-active{background:#00d4ff26;color:var(--guide-color)}.caller-info{text-align:center}.caller-name{font-size:28px;font-weight:300;letter-spacing:.5px;white-space:nowrap}#call-status{font-size:14px;color:var(--hint-color);margin-top:6px;font-weight:400}.visualizer{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.bot-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;position:relative;z-index:2;border:2px solid rgba(255,255,255,.15);box-shadow:0 0 20px #3390ec33}.visualizer-ring{position:absolute;border-radius:50%;border:1.5px solid var(--button-color);opacity:.3;transition:transform .15s ease-out,opacity .15s ease-out;z-index:1}.visualizer-ring:nth-child(2){width:140px;height:140px}.visualizer-ring:nth-child(3){width:160px;height:160px}.visualizer-ring:nth-child(4){width:180px;height:180px}.transcript{width:100%;height:100%;overflow-y:auto;padding:12px 16px;font-size:14px;line-height:1.5;text-align:left;border-radius:16px;background-color:var(--secondary-bg);scrollbar-width:thin}.transcript:empty:before{content:""}.transcript-line{margin-bottom:10px}.transcript-line:last-child{margin-bottom:0}.transcript-line .role{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--hint-color);display:block;margin-bottom:2px}.transcript-line .text{display:block}.controls{display:flex;gap:40px}.control-btn{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:var(--secondary-bg);color:var(--text-color);transition:background-color .2s,transform .1s;-webkit-tap-highlight-color:transparent}.control-btn:active{transform:scale(.92)}.control-btn.muted,.control-btn.hangup{background-color:var(--destructive-color);color:#fff}#state-settings{overflow-y:auto;padding:0}.settings-panel{width:100%;max-width:400px;padding:16px 20px 40px}.settings-header{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding-top:8px}.settings-back-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--text-color);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.settings-back-btn:active{background:#ffffff14}.settings-title{font-size:22px;font-weight:600}.settings-section{margin-bottom:28px}.settings-label{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--hint-color);margin-bottom:8px}.settings-hint{font-size:12px;color:var(--hint-color)}.settings-input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:var(--secondary-bg);color:var(--text-color);font-size:16px;font-family:inherit;outline:none;-webkit-appearance:none}.settings-input:focus{border-color:var(--button-color)}.avatar-upload-row{display:flex;align-items:center;gap:16px}.settings-avatar-preview{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12);flex-shrink:0}.settings-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}.settings-action-btn{width:100%;text-align:center}.editor-btn{padding:10px 28px;border-radius:12px;border:1px solid var(--hint-color);background:var(--secondary-bg);color:var(--text-color);font-size:15px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s}.editor-btn:active{background-color:#ffffff1a}.editor-btn-primary{background-color:var(--button-color);color:var(--button-text-color);border-color:var(--button-color)}.editor-btn-primary:active{background-color:#2a7ad4}.layout-preview{position:relative;width:100%;aspect-ratio:9 / 16;max-height:400px;background:var(--secondary-bg);border-radius:16px;border:1px solid rgba(255,255,255,.12);overflow:hidden;touch-action:none}.layout-preview-item{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.3);border-radius:12px;padding:12px 18px;cursor:grab;z-index:1;touch-action:none;transition:box-shadow .2s;min-width:60px;min-height:36px}.layout-preview-item:active,.layout-preview-item.dragging{cursor:grabbing;box-shadow:0 0 20px #3390ec66;z-index:100}.layout-preview-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#ffffffb3;white-space:nowrap;pointer-events:none}.preview-resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize;z-index:10;touch-action:none}.preview-resize-handle:after{content:"";position:absolute;bottom:4px;right:4px;width:0;height:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent transparent rgba(255,255,255,.5) transparent}.settings-grid-controls{display:flex;align-items:center;gap:6px;margin-top:12px}#state-ended{justify-content:center;gap:12px}#state-error{justify-content:center;gap:12px;padding:20px}.status-text{font-size:20px;font-weight:600}.status-sub{font-size:14px;color:var(--hint-color)}.error-text{color:var(--destructive-color)}.spinner{width:48px;height:48px;border:4px solid var(--secondary-bg);border-top-color:var(--button-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}