:root{--builder-bg:#fff;--builder-surface:#fafafa;--builder-border:#e7e7e7;--builder-text:#1a1a1a;--builder-text-muted:#6b6b6b;--builder-accent:#2c92ff;--builder-accent-secondary:#18cbef;--builder-accent-bright:#5f4aff;--builder-terminal-bg:#17140f;--builder-terminal-surface:#1f1b14;--builder-terminal-border:#332c20;--builder-terminal-text:#ede7da;--builder-terminal-text-muted:#8a8371;--agent-consultant:#5f4aff;--agent-architect:#2c92ff;--agent-database:#18cbef;--agent-backend:#c97a3b;--agent-frontend:#b0559c;--agent-content:#b08d2e;--agent-security:#c24545;--agent-deploy:#1e6fdb}.builder-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}@media (max-width:767px){.builder-main{flex-direction:column!important}.builder-sidebar{border-bottom:1px solid var(--builder-border);height:auto;max-height:40vh;border-right:none!important;width:100%!important}.builder-chat{width:100%!important;min-width:unset!important}.builder-editor{height:50vh!important}.builder-header-center{display:none!important}.builder-header-actions{gap:.5rem!important}.builder-header-actions .hidden-mobile{display:none!important}}@media (min-width:768px) and (max-width:1023px){.builder-sidebar{width:200px!important}}@media (min-width:1024px){.builder-main{flex-direction:row}.builder-sidebar{width:260px;min-width:200px}}@media (min-width:1920px){.builder-sidebar{width:320px}.chat-message{font-size:1.1rem!important}.builder-header{height:70px;padding:0 2rem}}@media (min-width:2560px){.builder-sidebar{width:400px}.chat-message{padding:1.25rem!important;font-size:1.25rem!important}.chat-bubble{border-radius:20px;padding:1.25rem 1.5rem}.chat-avatar{width:48px;height:48px;font-size:1.5rem}.chat-input{padding:.75rem;font-size:1.125rem}.chat-send-btn{width:56px;height:56px}.file-item{padding:.75rem 1rem;font-size:1rem}.code-display{font-size:1.1rem;line-height:1.8}.progress-step-icon{width:44px;height:44px;font-size:1.25rem}.progress-step-label{font-size:.875rem}.builder-header{height:80px;padding:0 3rem}}@media (min-width:3840px){.builder-sidebar{width:500px}.chat-message{padding:1.5rem!important;font-size:1.5rem!important}.chat-bubble{border-radius:24px;padding:1.5rem 2rem}.chat-avatar{width:64px;height:64px;font-size:2rem}.builder-header{height:100px;padding:0 4rem}}.builder-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--builder-border);z-index:50;background:#ffffffeb;justify-content:space-between;align-items:center;height:60px;padding:0 1rem;display:flex;position:relative}.builder-logo{align-items:center;gap:.75rem;transition:transform .3s;display:flex}.builder-logo:hover{transform:scale(1.02)}.credits-badge{background:#2c92ff14;border:1px solid #2c92ff40;border-radius:12px;align-items:center;gap:.5rem;padding:.5rem 1rem;transition:all .3s;display:flex}.credits-badge:hover{border-color:#2c92ff73;box-shadow:0 0 20px #2c92ff1f}.credits-bar{background:#00000014;border-radius:2px;width:60px;height:4px;overflow:hidden}.credits-bar-fill{background:linear-gradient(90deg,var(--builder-accent)0%,var(--builder-accent-bright)100%);border-radius:2px;height:100%;transition:width .5s}.chat-container{background:var(--builder-bg);flex-direction:column;height:100%;display:flex}.chat-messages{flex-direction:column;flex:1;gap:.5rem;padding:.5rem;display:flex;overflow-y:auto}.chat-message{gap:.5rem;animation:.3s ease-out messageSlideIn;display:flex}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-message.user{flex-direction:row-reverse}.chat-avatar{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.25rem;display:flex;position:relative;overflow:hidden}.chat-avatar:before{content:"";opacity:.12;border-radius:inherit;background:currentColor;position:absolute;inset:0}.chat-avatar.agent{animation:2s ease-in-out infinite agentPulse}@keyframes agentPulse{0%,to{box-shadow:0 0}50%{box-shadow:0 0 16px 4px}}.chat-bubble{border-radius:12px;max-width:85%;padding:.5rem .75rem;position:relative}.chat-bubble.user{background:linear-gradient(135deg,var(--builder-accent)0%,var(--builder-accent-bright)100%);color:#fff;border-bottom-right-radius:4px}.chat-bubble.assistant{background:var(--builder-surface);border:1px solid var(--builder-border);color:var(--builder-text);border-bottom-left-radius:4px}.chat-bubble.system{text-align:center;background:#2c92ff0f;border:1px solid #2c92ff2e;border-radius:12px;max-width:100%}.chat-timestamp{color:var(--builder-text-muted);opacity:0;margin-top:.25rem;font-size:.65rem;transition:opacity .2s}.chat-message:hover .chat-timestamp{opacity:1}.typing-indicator{align-items:center;gap:.75rem;padding:1rem;display:flex}.typing-dots{gap:4px;display:flex}.typing-dot{background:var(--builder-accent);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite typingBounce}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.chat-input-container{border-top:1px solid var(--builder-border);background:#ffffffe6;padding:1rem}.chat-input-wrapper{background:var(--builder-surface);border:1px solid var(--builder-border);border-radius:16px;align-items:flex-end;gap:.5rem;padding:.5rem;transition:all .3s;display:flex}.chat-input-wrapper:focus-within{border-color:var(--builder-accent);box-shadow:0 0 0 3px #2c92ff1f}.chat-input{color:var(--builder-text);resize:none;background:0 0;border:none;flex:1;max-height:150px;padding:.5rem;font-size:.9375rem;line-height:1.5}.chat-input:focus{outline:none}.chat-input::placeholder{color:var(--builder-text-muted)}.chat-send-btn{background:linear-gradient(135deg,var(--builder-accent)0%,var(--builder-accent-bright)100%);color:#fff;cursor:pointer;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex}.chat-send-btn:hover{transform:scale(1.05);box-shadow:0 0 20px #2c92ff4d}.chat-send-btn:active{transform:scale(.95)}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.progress-stepper{background:var(--builder-surface);border:1px solid var(--builder-border);border-radius:12px;align-items:center;gap:.25rem;padding:.5rem 1rem;display:flex;overflow-x:auto}.progress-step{flex-direction:column;align-items:center;gap:.25rem;min-width:60px;display:flex;position:relative}.progress-step-icon{background:#0000000a;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;transition:all .3s;display:flex}.progress-step.active .progress-step-icon{border-color:var(--builder-accent);background:#2c92ff1f;animation:1.5s ease-in-out infinite stepPulse}.progress-step.completed .progress-step-icon{background:var(--builder-accent-secondary);border-color:var(--builder-accent-secondary);color:#fff}@keyframes stepPulse{0%,to{box-shadow:0 0 #2c92ff59}50%{box-shadow:0 0 0 8px #2c92ff00}}.progress-step-label{color:var(--builder-text-muted);text-align:center;white-space:nowrap;font-size:.625rem}.progress-step.active .progress-step-label{color:var(--builder-accent)}.progress-connector{background:var(--builder-border);flex-shrink:0;width:20px;height:2px}.progress-connector.completed{background:linear-gradient(90deg,var(--builder-accent-secondary)0%,var(--builder-accent)100%)}.file-tree{padding:.5rem}.file-item{cursor:pointer;color:var(--builder-text-muted);border-radius:8px;align-items:center;gap:.5rem;padding:.5rem .75rem;transition:all .2s;display:flex}.file-item:hover{color:var(--builder-text);background:#0000000a}.file-item.selected{color:var(--builder-accent);border-left:2px solid var(--builder-accent);background:#2c92ff1a}.file-icon{flex-shrink:0;width:18px;height:18px}.file-icon.typescript{color:#3178c6}.file-icon.javascript{color:#b08d2e}.file-icon.css{color:#b0559c}.file-icon.html,.file-icon.json{color:#c97a3b}.file-icon.folder{color:#2c92ff}.file-name{text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;overflow:hidden}.file-modified{background:#c97a3b;border-radius:50%;width:6px;height:6px;margin-left:auto}.editor-container{background:var(--builder-terminal-bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.editor-tabs{background:var(--builder-terminal-surface);border-bottom:1px solid var(--builder-terminal-border);gap:0;display:flex}.editor-tab{color:var(--builder-terminal-text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.875rem;transition:all .2s;display:flex}.editor-tab:hover{color:var(--builder-terminal-text);background:#ffffff08}.editor-tab.active{color:var(--builder-accent-secondary);border-bottom-color:var(--builder-accent-secondary);background:#18cbef0f}.editor-content{flex:1;position:relative;overflow:auto}.code-display{color:var(--builder-terminal-text);white-space:pre-wrap;word-wrap:break-word;background:0 0;margin:0;padding:1rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875rem;line-height:1.6}.preview-frame{background:#fff;border:none;border-radius:8px;width:100%;height:100%;margin:1rem;box-shadow:0 0 40px #0000001f}.device-frame{background:#1a1a1a;border-radius:24px;max-width:320px;margin:1rem auto;padding:12px;position:relative;box-shadow:0 25px 50px -12px #00000059}.device-frame:before{content:"";background:#333;border-radius:2px;width:60px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.device-frame iframe{border:none;border-radius:12px;width:100%;height:568px}.hover-lift{transition:transform .2s,box-shadow .2s}.hover-lift:hover{transform:translateY(-2px);box-shadow:0 10px 25px #00000014}.hover-glow{transition:box-shadow .3s}.hover-glow:hover{box-shadow:0 0 30px #2c92ff33}.fade-in{animation:.3s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-up{animation:.4s ease-out slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.scale-in{animation:.3s ease-out scaleIn}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.celebration{pointer-events:none;z-index:100;position:fixed;inset:0}.confetti{width:10px;height:10px;animation:3s ease-out forwards confettiFall;position:absolute}@keyframes confettiFall{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.gradient-border{background:var(--builder-surface);border-radius:16px;position:relative}.gradient-border:before{content:"";background:linear-gradient(135deg,var(--builder-accent)0%,var(--builder-accent-bright)100%);border-radius:inherit;z-index:-1;opacity:.4;position:absolute;inset:-1px}@media (max-width:767px){.mobile-nav{-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--builder-border);padding:.5rem .75rem;padding-bottom:max(.5rem,env(safe-area-inset-bottom));z-index:50;background:#fffffff5;gap:.5rem;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 40px #0000000f}.mobile-nav-btn{min-height:52px;color:var(--builder-text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:1px solid #0000;border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.35rem;padding:.6rem .5rem;font-size:.65rem;font-weight:500;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.mobile-nav-btn:active{transition:transform .1s;transform:scale(.92)}.mobile-nav-btn.active{color:var(--builder-accent);background:#2c92ff14;border-color:#2c92ff40;box-shadow:0 0 20px #2c92ff1a}.mobile-nav-btn.active svg{filter:drop-shadow(0 0 6px #2c92ff66)}.mobile-nav-btn svg{width:22px;height:22px;transition:all .25s}.mobile-nav-btn:hover:not(.active){color:var(--builder-text);background:#0000000a}.mobile-nav-btn .badge{color:#fff;background:#c24545;border-radius:8px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:.5rem;font-weight:700;display:flex;position:absolute;top:6px;right:calc(50% - 18px);box-shadow:0 2px 8px #c2454559}}@media (min-width:768px){.mobile-nav{display:none}}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:#00000026 transparent}.scrollbar-thin::-webkit-scrollbar{width:4px}.scrollbar-thin::-webkit-scrollbar-track{background:0 0}.scrollbar-thin::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background:#00000040}.editor-container .scrollbar-thin{scrollbar-color:#ffffff26 transparent}.editor-container .scrollbar-thin::-webkit-scrollbar-thumb{background:#ffffff26}.editor-container .scrollbar-thin::-webkit-scrollbar-thumb:hover{background:#ffffff40}.glow-purple{box-shadow:0 0 30px #5f4aff40}.glow-blue{box-shadow:0 0 30px #2c92ff40}.glow-green{box-shadow:0 0 30px #18cbef40}.building-pulse{animation:2s ease-in-out infinite buildingPulse}@keyframes buildingPulse{0%,to{box-shadow:0 0 #2c92ff59}50%{box-shadow:0 0 0 15px #2c92ff00}}.shimmer{background:linear-gradient(90deg,#0000 0%,#0000000a 50%,#0000 100%) 0 0/200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.glass-panel{-webkit-backdrop-filter:blur(16px);border:1px solid var(--builder-border);background:#ffffffb8;border-radius:16px;box-shadow:0 4px 30px #0000000f}.token-pill{color:var(--builder-accent);background:#2c92ff14;border:1px solid #2c92ff40;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:500;transition:all .3s;display:inline-flex}.token-pill:hover{border-color:#2c92ff73;box-shadow:0 0 15px #2c92ff26}.token-pill.empty{color:#c24545;background:#c245450f;border-color:#c2454540}.token-pill.empty:hover{border-color:#c2454573;box-shadow:0 0 15px #c2454526}.live-preview-container{background:var(--builder-surface);border:1px solid var(--builder-border);border-radius:12px;width:100%;height:100%;overflow:hidden;box-shadow:0 10px 40px #00000014}
