*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;min-height:100vh}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#0a0a0a;color:#fff;min-height:100vh;overflow:hidden;margin:0;padding:0;box-sizing:border-box}#app{display:flex;flex-direction:column;height:100vh;min-height:0;width:100%}#main-app{display:flex;flex-direction:column;flex:1;min-height:0}.header{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);padding:1rem 2rem;border-bottom:2px solid #00ff88;box-shadow:0 2px 10px #00ff881a}.header{display:flex;justify-content:space-between;align-items:center}.header h1{font-size:2rem;font-weight:300;color:#0f8;margin-bottom:.25rem}.header p{color:#b0b0b0;font-size:.9rem}.logout-btn{background:#e74c3c;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background .3s}.logout-btn:hover{background:#c0392b}.main-content{display:flex;flex:1;overflow:hidden;min-height:0}.chat-panel-container,.editor-panel,.viewer-panel{display:flex;flex-direction:column;background-color:#1a1a1a;border:1px solid #333}.chat-panel-container{width:350px;height:100%;border-right:1px solid #333;overflow:hidden;display:flex;flex-direction:column;min-height:0;flex:0 0 auto;position:relative}#chat-container{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;height:100%}.editor-panel,.viewer-panel{flex:1}.editor-panel{border-right:1px solid #333}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#252525;border-bottom:1px solid #333}.panel-header h2{font-size:1.2rem;font-weight:400;color:#fff}.controls{display:flex;gap:.5rem}#editor-container{flex:1;overflow:hidden;position:relative}#viewer-container{flex:1;position:relative;background:radial-gradient(circle at center,#1a1a1a,#0a0a0a)}.status{padding:.75rem 1rem;background-color:#252525;border-top:1px solid #333;font-size:.9rem;min-height:2.5rem;display:flex;align-items:center;transition:all .3s ease}.status-info{background-color:#1e3a5f;color:#87ceeb}.status-success{background-color:#1a4d2e;color:#90ee90}.status-error{background-color:#5a1a1a;color:#ff6b6b}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}.btn-primary{background:linear-gradient(135deg,#0f8,#00cc6a);color:#000}.btn-primary:hover{background:linear-gradient(135deg,#0f8,#0f8);transform:translateY(-1px);box-shadow:0 4px 12px #00ff884d}.btn-secondary{background-color:#404040;color:#fff;border:1px solid #555}.btn-secondary:hover{background-color:#505050;border-color:#0f8;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.footer{background-color:#1a1a1a;padding:.75rem 2rem;border-top:1px solid #333;text-align:center;color:#666;font-size:.8rem}.monaco-editor,.monaco-editor .margin{background-color:#1a1a1a!important}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.loading{animation:pulse 1.5s ease-in-out infinite}@media(max-width:768px){#app{width:100vw}.main-content{flex-direction:column}.editor-panel{border-right:none;border-bottom:1px solid #333}.panel-header{padding:.75rem}.panel-header h2{font-size:1rem}.btn{padding:.4rem .8rem;font-size:.8rem}.header{padding:.75rem 1rem}.header h1{font-size:1.5rem}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#404040;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.btn:focus,button:focus{outline:2px solid #00ff88;outline-offset:2px}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000}.tooltip:hover:after{opacity:1}.chat-panel{flex:1;display:flex;flex-direction:column;background-color:#1a1a1a;height:100%;overflow:hidden;position:relative;min-height:0}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#252525;border-bottom:1px solid #333;flex-shrink:0}.chat-header h3{font-size:1.1rem;font-weight:400;color:#fff;margin:0}.header-controls{display:flex;align-items:center;gap:.5rem}.settings-btn{background:none;border:1px solid #555;color:#fff;padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.settings-btn:hover{background-color:#333;border-color:#777}.settings-panel{background-color:#252525;border-bottom:1px solid #333;padding:1rem;flex-shrink:0}.settings-panel h4{color:#0f8;margin-bottom:1rem;font-size:1rem}.api-key-inputs{display:flex;flex-direction:column;gap:1rem}.api-key-inputs .input-group{display:flex;flex-direction:column;gap:.25rem}.api-key-inputs label{font-size:.9rem;color:#b0b0b0;font-weight:500}.api-key-input{background-color:#333;color:#fff;border:1px solid #555;border-radius:4px;padding:.5rem;font-size:.9rem;font-family:monospace}.api-key-input:focus{outline:2px solid #00ff88;border-color:#0f8}.settings-actions{display:flex;gap:.5rem;margin-top:1rem}.save-keys-btn,.test-keys-btn{background-color:#0f8;color:#000;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease}.save-keys-btn:hover,.test-keys-btn:hover{background-color:#0c6}.test-keys-btn{background-color:#08f}.test-keys-btn:hover{background-color:#06c}.experimental-banner{background-color:#4a3c1d;color:#fc0;padding:.5rem 1rem;text-align:center;font-size:.9rem;font-weight:500;border-bottom:1px solid #666;flex-shrink:0}.model-select,.lighting-select{background-color:#333;color:#fff;border:1px solid #555;border-radius:4px;padding:.25rem .5rem;font-size:.8rem}.model-select:focus,.lighting-select:focus{outline:2px solid #00ff88;border-color:#0f8}.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem 1rem 2rem;scroll-behavior:smooth;min-height:0;position:relative;contain:layout style paint;transform:translateZ(0);background-color:#1a1a1a;will-change:scroll-position}.welcome-message{text-align:center;color:#b0b0b0;padding:1rem;background-color:#252525;border-radius:8px;border:1px solid #333;margin-bottom:1rem}.welcome-message p{margin:.5rem 0}.chat-message{padding:.75rem;border-radius:8px;background-color:#2a2a2a;border:1px solid #444;margin-bottom:1rem;animation:slideIn .3s ease-out;scroll-margin-bottom:1rem;will-change:transform,opacity}.chat-message-user{background-color:#2d4a3e;border-color:#0f8;align-self:flex-end;margin-left:2rem}.chat-message-assistant{background-color:#1e3a5f;border-color:#87ceeb;align-self:flex-start;margin-right:2rem}.chat-message-error{background-color:#5a1a1a;border-color:#ff6b6b;align-self:center}.chat-message-system{background-color:#404040;border-color:#666;align-self:center;font-style:italic}.message-content{margin-bottom:.5rem;line-height:1.4}.code-block{background-color:#0a0a0a;border:1px solid #333;border-radius:4px;padding:.75rem;margin:.5rem 0;overflow-x:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;line-height:1.3}.copy-btn{background-color:#333;color:#fff;border:1px solid #555;border-radius:4px;padding:.25rem .5rem;font-size:.7rem;cursor:pointer;transition:all .2s ease}.copy-btn:hover{background-color:#555;border-color:#777}.chat-input-area{padding:1rem;background-color:#252525;border-top:1px solid #333;flex-shrink:0;box-shadow:0 -2px 10px #0000004d}.input-group{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.chat-input{flex:1;padding:.75rem;background-color:#1a1a1a;border:1px solid #555;border-radius:4px;color:#fff;font-size:.9rem}.chat-input:focus{outline:2px solid #00ff88;border-color:#0f8}.chat-input:disabled{background-color:#333;color:#666;cursor:not-allowed}.send-btn{padding:.75rem 1rem;background:linear-gradient(135deg,#0f8,#00cc6a);color:#000;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;white-space:nowrap;min-width:80px;opacity:1;visibility:visible}.send-btn:hover:not(:disabled){background:linear-gradient(135deg,#0f8,#0f8);transform:translateY(-1px);box-shadow:0 4px 12px #00ff884d}.send-btn:disabled{background-color:#333;color:#666;cursor:not-allowed;transform:none;box-shadow:none;opacity:.7}.send-btn:disabled:after{content:" (disabled)";font-size:.7rem;margin-left:5px}.scroll-btn{padding:.75rem;background:linear-gradient(135deg,#666,#555);color:#fff;border:1px solid #777;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:700;transition:all .2s ease;white-space:nowrap;min-width:40px}.scroll-btn:hover{background:linear-gradient(135deg,#777,#666);transform:translateY(-1px);box-shadow:0 2px 8px #ffffff1a}.scroll-btn:active{transform:translateY(0)}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background-color:#1a1a1a;margin:10% auto;padding:0;border:1px solid #333;border-radius:8px;width:80%;max-width:800px;max-height:70vh;overflow:hidden;box-shadow:0 10px 30px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#252525;border-bottom:1px solid #333}.modal-header h3{margin:0;color:#ff6b6b;font-size:1.2rem}.close-btn{background:none;border:none;color:#b0b0b0;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.close-btn:hover{background-color:#333;color:#fff}.modal-body{padding:1rem;max-height:calc(70vh - 80px);overflow-y:auto}.modal-body pre{background-color:#0a0a0a;border:1px solid #333;border-radius:4px;padding:1rem;margin:0;white-space:pre-wrap;word-wrap:break-word;color:#ff6b6b;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.4}