@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--glass-bg: rgba(17, 25, 40, .75);--glass-border: rgba(255, 255, 255, .125);--accent-primary: #00d4ff;--accent-secondary: #ff006e;--accent-tertiary: #8338ec;--text-primary: rgba(255, 255, 255, .9);--text-secondary: rgba(255, 255, 255, .6);--success: #00f5d4;--error: #ff006e}body{font-family:Inter,sans-serif;background:#0a0e27;color:var(--text-primary);overflow:hidden;height:100vh}.app{position:relative;width:100vw;height:100vh;overflow:hidden}.gradient-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:radial-gradient(ellipse at top,#1b2735,#090a0f);overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 20s infinite ease-in-out}.orb-1{width:400px;height:400px;background:var(--accent-primary);top:-100px;right:-100px;animation-delay:0s}.orb-2{width:300px;height:300px;background:var(--accent-secondary);bottom:-50px;left:-50px;animation-delay:-5s}.orb-3{width:250px;height:250px;background:var(--accent-tertiary);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-10s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.glass-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:0 8px 32px #0000005e}.glass-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid var(--glass-border);background:#ffffff08}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:1.5rem;color:var(--accent-primary);text-shadow:0 0 20px rgba(0,212,255,.5)}.logo h1{font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.logo span{background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.status{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--error);box-shadow:0 0 10px var(--error);transition:all .3s ease}.status-dot.online{background:var(--success);box-shadow:0 0 10px var(--success)}.glass-main{flex:1;display:grid;grid-template-columns:300px 1fr;gap:1px;background:var(--glass-border);overflow:hidden}.history-panel,.output-panel{background:var(--glass-bg);display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--glass-border);background:#ffffff05}.panel-header h3{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.actions{display:flex;gap:.5rem;align-items:center}.btn-small{padding:.25rem .75rem;background:#ffffff1a;border:1px solid var(--glass-border);border-radius:4px;color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .2s}.btn-small:hover{background:#fff3;color:var(--text-primary)}.btn-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:1px solid var(--glass-border);border-radius:6px;cursor:pointer;transition:all .2s}.btn-icon:hover{background:#fff3;transform:translateY(-1px)}.badge{padding:.25rem .5rem;background:#00d4ff1a;border:1px solid rgba(0,212,255,.3);border-radius:4px;font-size:.75rem;color:var(--accent-primary)}.image-badge{background:#ff006e1a;border-color:#ff006e4d;color:var(--accent-secondary)}.history-list{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.empty-state{text-align:center;padding:2rem;color:var(--text-secondary);opacity:.6}.empty-state span{font-size:2rem;display:block;margin-bottom:.5rem}.history-item{background:#ffffff08;border:1px solid var(--glass-border);border-radius:8px;padding:.75rem;font-size:.875rem}.history-item.assistant{border-left:2px solid var(--accent-primary)}.history-item.user{border-left:2px solid var(--accent-tertiary)}.history-meta{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.75rem}.history-meta .badge{font-size:.625rem;text-transform:uppercase;letter-spacing:.5px}.history-meta .time{color:var(--text-secondary);font-size:.7rem}.history-content pre{font-family:JetBrains Mono,monospace;font-size:.75rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.output-area{flex:1;padding:1.5rem;overflow-y:auto;font-family:JetBrains Mono,monospace;font-size:.9rem;line-height:1.6;position:relative;background:#0003}.code-block{color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word}.placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.hint,.drop-zone{text-align:center;padding:2rem}.hint-icon,.drop-icon{font-size:3rem;display:block;margin-bottom:1rem;opacity:.5}.drop-zone{border:2px dashed var(--accent-primary);border-radius:12px;background:#00d4ff0d;color:var(--accent-primary)}.drop-zone .drop-icon{opacity:1}.output-area.drag-active{background:#00d4ff1a;border:2px dashed var(--accent-primary)}.streaming-indicator{position:absolute;bottom:1rem;right:1rem;display:flex;gap:4px;padding:.5rem 1rem;background:#00000080;border-radius:20px;border:1px solid var(--glass-border)}.streaming-indicator .dot{width:6px;height:6px;background:var(--accent-primary);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.streaming-indicator .dot:nth-child(1){animation-delay:-.32s}.streaming-indicator .dot:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.glass-footer{padding:1.5rem 2rem;border-top:1px solid var(--glass-border);background:#ffffff05}.input-form{max-width:900px;margin:0 auto}.input-wrapper{display:flex;gap:.75rem;align-items:center;background:#0000004d;border:1px solid var(--glass-border);border-radius:12px;padding:.5rem;transition:all .3s}.input-wrapper:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 3px #00d4ff1a}.glass-input{flex:1;background:transparent;border:none;padding:.75rem 1rem;color:var(--text-primary);font-size:.95rem;outline:none}.glass-input::placeholder{color:var(--text-secondary)}.btn-send{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));border:none;border-radius:8px;color:#fff;font-size:1.2rem;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px #00d4ff4d}.btn-send:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #00d4ff66}.btn-send:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(100%)}.input-hints{margin-top:.75rem;text-align:center;font-size:.8rem;color:var(--text-secondary);opacity:.7}.drag-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center}.drag-modal{background:var(--glass-bg);border:2px solid var(--accent-primary);border-radius:16px;padding:3rem;text-align:center;box-shadow:0 0 60px #00d4ff4d}.drag-modal .drag-icon{font-size:4rem;margin-bottom:1rem;display:block}.drag-modal h2{font-size:1.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--accent-primary),var(--text-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.drag-modal p{color:var(--text-secondary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){.glass-main{grid-template-columns:1fr}.history-panel{display:none}}