#lab-container{width:100%;height:80vh;background-color:#080818;border-radius:12px;margin-top:1rem;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080;border:1px solid #334455}#lab-canvas{width:100%;height:100%;display:block}#ui-overlay{position:absolute;top:20px;right:20px;pointer-events:none}.panel{pointer-events:auto;background:#0a1423e6;backdrop-filter:blur(8px);border:1px solid var(--lab-accent, rgba(0, 210, 255, .3));border-radius:8px;color:#eee;padding:15px 20px;max-width:280px;box-shadow:0 4px 15px #0000004d}.panel h3{color:var(--lab-accent-text, #00d2ff);margin:0 0 8px;font-size:1em;text-transform:uppercase;letter-spacing:1.5px}.panel p{margin:0;font-size:.85em;line-height:1.5;color:#abb}.controls{position:absolute;bottom:20px;left:20px;display:flex;gap:8px;z-index:10}.btn-lab{pointer-events:auto;background:#00d2ff1a;border:1px solid var(--lab-accent-text, #00d2ff);color:var(--lab-accent-text, #00d2ff);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.8em;text-transform:uppercase;letter-spacing:1px;transition:all .2s}.btn-lab:hover{background:#00d2ff33}.btn-lab.active{background:#00d2ff4d;box-shadow:0 0 10px #00d2ff4d}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lab-accent-text, #00d2ff);font-size:1.2em;z-index:5}#tooltip{position:absolute;background:#0a1423e6;color:#eee;padding:6px 12px;border-radius:4px;font-size:.8em;pointer-events:none;display:none;z-index:10;white-space:nowrap;border:1px solid var(--lab-accent, rgba(0, 210, 255, .3))}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}#chat-toggle{position:absolute;bottom:20px;right:20px;z-index:20;background:#00d2ff26;border:1px solid var(--lab-accent-text, #00d2ff);color:var(--lab-accent-text, #00d2ff);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.3em;display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 4px 15px #00d2ff33;pointer-events:auto}#chat-toggle:hover,#chat-toggle.active{background:#00d2ff4d;box-shadow:0 4px 20px #00d2ff66;transform:scale(1.05)}#chat-panel{position:absolute;top:20px;right:20px;width:340px;max-height:calc(100% - 100px);background:#080f19e0;backdrop-filter:blur(12px);border:1px solid var(--lab-accent, rgba(0, 210, 255, .3));border-radius:12px;display:flex;flex-direction:column;z-index:15;transform:translate(calc(100% + 30px));transition:transform .35s cubic-bezier(.4,0,.2,1);pointer-events:auto;box-shadow:0 8px 32px #0006;overflow:hidden}#chat-panel.open{transform:translate(0)}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--lab-accent, rgba(0, 210, 255, .2));flex-shrink:0}.chat-header h3{margin:0;color:var(--lab-accent-text, #00d2ff);font-size:.95em;text-transform:uppercase;letter-spacing:1.5px;display:flex;align-items:center;gap:8px}.chat-header h3:before{content:"";display:inline-block;width:8px;height:8px;background:var(--lab-accent-text, #00d2ff);border-radius:50%;animation:pulse 2s infinite}#chat-close{background:none;border:none;color:#667;cursor:pointer;font-size:1.2em;padding:4px 8px;transition:color .2s}#chat-close:hover{color:#fff}#chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:#334 transparent}.chat-bubble{max-width:90%;padding:10px 14px;border-radius:12px;font-size:.88em;line-height:1.5;animation:fadeInUp .25s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.chat-user{align-self:flex-end;background:#00d2ff26;border:1px solid rgba(0,210,255,.3);color:#def;border-bottom-right-radius:4px}.chat-agent{align-self:flex-start;background:#1e2837e6;border:1px solid rgba(100,120,150,.2);color:#ccd;border-bottom-left-radius:4px}.chat-agent strong{color:var(--lab-accent-text, #00d2ff)}.chat-agent code{background:#00d2ff1a;padding:1px 5px;border-radius:3px;font-size:.9em;color:#8df}.chat-error{color:#f66;font-size:.85em}#chat-status{padding:6px 16px;font-size:.78em;color:var(--lab-accent-text, #00d2ff);text-transform:uppercase;letter-spacing:1px;display:none;animation:pulse 1.5s infinite}.chat-input-area{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(0,210,255,.15);flex-shrink:0}#chat-input{flex:1;background:#141e2dcc;border:1px solid rgba(0,210,255,.2);border-radius:8px;padding:10px 14px;color:#eee;font-size:.88em;font-family:inherit;resize:none;outline:none;transition:border-color .2s}#chat-input:focus{border-color:var(--lab-accent-text, #00d2ff)}#chat-input::placeholder{color:#556}#chat-send{background:#00d2ff33;border:1px solid var(--lab-accent-text, #00d2ff);color:var(--lab-accent-text, #00d2ff);padding:0 14px;border-radius:8px;cursor:pointer;font-size:1em;transition:all .2s;flex-shrink:0}#chat-send:hover:not(:disabled){background:#00d2ff59}#chat-send:disabled{opacity:.4;cursor:not-allowed}#narrate-toggle{position:absolute;bottom:80px;right:20px;z-index:20;background:#ffaa3226;border:1px solid #ffaa44;color:#fa4;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.3em;display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 4px 15px #ffaa3233;pointer-events:auto}#narrate-toggle:hover,#narrate-toggle.active{background:#ffaa324d;box-shadow:0 4px 20px #ffaa3266;transform:scale(1.05)}#narrate-panel{position:absolute;top:20px;right:20px;width:360px;max-height:calc(100% - 100px);background:#080f19e0;backdrop-filter:blur(12px);border:1px solid rgba(255,170,50,.3);border-radius:12px;display:flex;flex-direction:column;z-index:15;transform:translate(calc(100% + 30px));transition:transform .35s cubic-bezier(.4,0,.2,1);pointer-events:auto;box-shadow:0 8px 32px #0006;overflow:hidden}#narrate-panel.open{transform:translate(0)}.narrate-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,170,50,.2);flex-shrink:0}.narrate-header h3{margin:0;color:#fa4;font-size:.95em;text-transform:uppercase;letter-spacing:1.5px;display:flex;align-items:center;gap:8px}.narrate-header h3:before{content:"";display:inline-block;width:8px;height:8px;background:#fa4;border-radius:50%}#narrate-close{background:none;border:none;color:#667;cursor:pointer;font-size:1.2em;padding:4px 8px;transition:color .2s}#narrate-close:hover{color:#fff}.narrate-input-area{padding:12px 16px;border-bottom:1px solid rgba(255,170,50,.15);flex-shrink:0}#narrate-input{width:100%;min-height:80px;max-height:150px;background:#141e2dcc;border:1px solid rgba(255,170,50,.2);border-radius:8px;padding:10px 14px;color:#eee;font-size:.85em;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s;box-sizing:border-box}#narrate-input:focus{border-color:#fa4}#narrate-input::placeholder{color:#556}#narrate-input:disabled{opacity:.5}.narrate-controls{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid rgba(255,170,50,.1);flex-shrink:0;flex-wrap:wrap;align-items:center}.narrate-controls .btn-narrate{background:#ffaa321a;border:1px solid #ffaa44;color:#fa4;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.78em;text-transform:uppercase;letter-spacing:.5px;transition:all .2s;white-space:nowrap}.narrate-controls .btn-narrate:hover:not(:disabled){background:#ffaa3240}.narrate-controls .btn-narrate:disabled{opacity:.35;cursor:not-allowed}.narrate-controls .btn-generate{background:#8c64ff1a;border:1px solid #a080ff;color:#a080ff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.78em;letter-spacing:.5px;transition:all .2s;margin-left:auto;white-space:nowrap}.narrate-controls .btn-generate:hover:not(:disabled){background:#8c64ff40}.narrate-controls .btn-generate:disabled{opacity:.35;cursor:not-allowed}.narrate-options{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid rgba(255,170,50,.1);flex-shrink:0;align-items:center}.narrate-options label{font-size:.72em;color:#889;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.narrate-options select{background:#141e2dcc;border:1px solid rgba(255,170,50,.2);border-radius:4px;color:#ccc;font-size:.78em;padding:4px 6px;outline:none;cursor:pointer;max-width:160px}.narrate-options select:focus{border-color:#fa4}#narrate-display{flex:1;overflow-y:auto;padding:16px;line-height:2;font-size:1em;color:#667;scrollbar-width:thin;scrollbar-color:#334 transparent}#narrate-display:empty:before{content:"Narration text will appear here as highlighted words during playback...";color:#445;font-style:italic;font-size:.85em}.narrate-word{transition:color .15s,background .15s;border-radius:3px;padding:1px 2px}.narrate-word.part-match{text-decoration:underline;text-decoration-color:#ffaa3266;text-underline-offset:3px;color:#999}.narrate-word.active{color:#fff;background:#ffaa3240;text-shadow:0 0 8px rgba(255,170,50,.5)}.narrate-word.active.part-match{background:#ffaa3259;color:#fc6}.narrate-word.spoken{color:#889}#ar-toggle{display:none}.ar-active{background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}.ar-active #loading,.ar-active #tooltip{display:none!important}@media (max-width: 768px){#lab-container{height:100vh;border-radius:0;margin-top:0}#chat-toggle,#narrate-toggle{width:44px;height:44px;font-size:1.1em}#chat-toggle{bottom:12px;right:12px}#narrate-toggle{bottom:68px;right:12px}#chat-panel,#narrate-panel{inset:auto 0 0;width:100%;max-height:50vh;border-radius:16px 16px 0 0;border:none;border-top:1px solid var(--lab-accent, rgba(0, 210, 255, .3));transform:translateY(100%)}#narrate-panel{border-top-color:#ffaa324d}#chat-panel.open,#narrate-panel.open{transform:translateY(0)}#ui-overlay{top:10px;right:10px}.panel{max-width:200px;padding:10px 14px}.panel h3{font-size:.85em}.panel p{font-size:.78em}.controls{bottom:12px;left:12px;gap:6px}.btn-lab{padding:6px 12px;font-size:.72em}.chat-header{padding:10px 14px}.chat-header h3{font-size:.85em}#chat-messages{padding:12px;gap:8px}.chat-bubble{font-size:.82em}.chat-input-area{padding:8px 12px}#chat-input{padding:8px 10px;font-size:.82em}.narrate-header{padding:10px 14px}.narrate-header h3{font-size:.85em}.narrate-input-area{padding:8px 12px}#narrate-input{min-height:50px;max-height:80px;font-size:.8em}.narrate-controls{padding:6px 12px;gap:4px}.narrate-controls .btn-narrate,.narrate-controls .btn-generate{padding:5px 8px;font-size:.72em}.narrate-options{padding:6px 12px;gap:6px}.narrate-options select{font-size:.72em}#narrate-display{padding:10px 12px;font-size:.88em;line-height:1.8}}@media (max-width: 480px){#chat-panel,#narrate-panel{max-height:60vh}#narrate-input{min-height:40px;max-height:60px}.narrate-controls{flex-wrap:wrap}}