static/wizard.css

/* ╔══════════════════════════════════════════════════════╗
   ║  OBSIDIAN FORGE — Kinetic RLM Environment          ║
   ║  Absolute Black · 1px Glass · Aetheric Pulse       ║
   ║  Neon Gradients · Quantum Sandbox · RLM Core       ║
   ╚══════════════════════════════════════════════════════╝ */

:root {
  --void: #000000;
  --glass-bg: rgba(255,255,255,.02);
  --glass-border: rgba(255,255,255,.06);
  --border-1px: rgba(255,255,255,.06);
  --border-glow: rgba(255,255,255,.10);
  --purple: #8B5CF6; --cyan: #06B6D4; --green: #10B981; --gold: #F59E0B; --red: #EF4444;
  --neon-purple: #A78BFA; --neon-cyan: #22D3EE; --neon-green: #34D399;
  --text-primary: #e0e0e0; --text-secondary: #8888a0; --text-muted: #555570;
  --radius-lg: 16px; --radius-md: 10px; --radius-sm: 6px;
  --font-mono: 'SF Mono','Fira Code','JetBrains Mono',monospace;
  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --transition-fast: 100ms cubic-bezier(.4,0,.2,1);
  --transition-smooth: 220ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font-sans);
  background:var(--void);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(139,92,246,.4);color:#fff}

/* ═══ OBSIDIAN SHELL ═══ */
.obsidian-shell{
  display:flex;flex-direction:column;
  height:100vh;padding:.6rem;gap:.45rem;
  max-width:760px;margin:0 auto;
  overflow-y:auto;
}

/* ═══ AURA FIELD: wizard + orbit ring + thought-stream ═══ */
.aura-field{
  text-align:center;
  padding:.6rem 0 .3rem;
  flex-shrink:0;
  position:relative;
}
.wizard-orbit{
  position:relative;display:inline-flex;
  align-items:center;justify-content:center;
  width:64px;height:64px;
}
.orbit-ring{
  position:absolute;inset:-4px;
  border-radius:50%;
  border:1.5px solid rgba(139,92,246,.25);
  animation:orbit-spin 12s linear infinite;
}
/* Aetheric pulse when active */
.orbit-ring.forging{
  border-color:rgba(6,182,212,.5);
  box-shadow:0 0 20px rgba(6,182,212,.15),inset 0 0 20px rgba(6,182,212,.08);
  animation:orbit-spin 6s linear infinite,orbit-glow 3s ease-in-out infinite;
}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes orbit-glow{0%,100%{box-shadow:0 0 16px rgba(139,92,246,.15),inset 0 0 16px rgba(139,92,246,.05)}50%{box-shadow:0 0 32px rgba(6,182,212,.25),inset 0 0 32px rgba(6,182,212,.12)}}

.wizard-hat{
  width:42px;height:42px;
  filter:drop-shadow(0 0 12px rgba(139,92,246,.35));
  transition:filter var(--transition-fast),transform var(--transition-fast);
  will-change:transform,filter;z-index:1;
}
.wizard-hat.pulse{
  animation:wiz-aether .5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes wiz-aether{
  0%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(139,92,246,.35))}
  50%{transform:scale(1.12);filter:drop-shadow(0 0 28px rgba(6,182,212,.7))}
  100%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(139,92,246,.35))}
}
.wizard-hat.stable{filter:drop-shadow(0 0 18px rgba(16,185,129,.7));animation:none;transform:scale(1)}
.wizard-hat.error{filter:drop-shadow(0 0 18px rgba(239,68,68,.7));animation:none}
.wizard-hat.deployed{filter:drop-shadow(0 0 22px rgba(245,158,11,.8));animation:none}

.hero-title{
  font-size:clamp(1.2rem,3.5vw,1.6rem);font-weight:800;line-height:1.1;
  background:linear-gradient(135deg,var(--neon-purple),var(--neon-cyan),var(--neon-green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-top:.3rem;
}

/* ═══ THOUGHT-STREAM — multi-sentence RLM narration ═══ */
.thought-stream{
  margin-top:.4rem;padding:.35rem .6rem;
  background:rgba(255,255,255,.015);
  border:1px solid var(--border-1px);
  border-radius:var(--radius-sm);
  text-align:left;
  display:flex;align-items:flex-start;gap:.5rem;
  opacity:0;transform:translateY(-3px);
  transition:opacity .25s,transform .25s;
  min-height:2.2rem;
}
.thought-stream.visible{opacity:1;transform:translateY(0)}
.stream-cursor{
  width:4px;height:4px;border-radius:50%;
  background:var(--neon-purple);
  margin-top:.35rem;flex-shrink:0;
  animation:cursor-blink .6s ease-in-out infinite;
  box-shadow:0 0 6px var(--neon-purple);
}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:.2}}
.stream-text{
  font-size:.72rem;color:var(--text-secondary);
  line-height:1.5;font-family:var(--font-mono);
}
.stream-text .sentence{
  display:block;animation:sentence-in .3s ease-out;
  margin-bottom:.15rem;
  color:var(--text-primary);
}
@keyframes sentence-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}

/* ═══ CHAT INPUT: absolute black, 1px border ═══ */
.forge-input-section{flex-shrink:0}
.input-obsidian{
  display:flex;align-items:stretch;gap:.4rem;
  background:rgba(255,255,255,.01);
  border:1px solid var(--border-1px);
  border-radius:var(--radius-lg);
  padding:.3rem .3rem .3rem .85rem;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.input-obsidian:focus-within{
  border-color:rgba(139,92,246,.35);
  box-shadow:0 0 18px rgba(139,92,246,.08);
}
#prompt-input{
  flex:1;background:transparent;border:none;
  color:var(--text-primary);font-family:var(--font-sans);
  font-size:.84rem;line-height:1.5;resize:none;outline:none;
  padding:.3rem 0;min-height:36px;max-height:110px;
}
#prompt-input::placeholder{color:var(--text-muted)}

/* ═══ LIGHTNING BOLT SEND — solid black + glowing ring ═══ */
.btn-lightning{
  width:42px;height:42px;min-width:42px;
  background:var(--void);
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:var(--neon-purple);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all var(--transition-fast);
  flex-shrink:0;
}
.btn-lightning:hover{
  border-color:rgba(139,92,246,.4);
  box-shadow:0 0 16px rgba(139,92,246,.2),inset 0 0 8px rgba(139,92,246,.06);
  color:var(--neon-cyan);
}
.btn-lightning:active{transform:scale(.94);background:var(--void)}
.btn-lightning:disabled{
  opacity:.3;cursor:not-allowed;transform:none;
  box-shadow:none;border-color:rgba(255,255,255,.04);
  color:var(--text-muted);
}

/* ═══ TAB NAV: 1px glass ═══ */
.tab-nav{
  display:flex;gap:.2rem;
  padding:.15rem;
  background:rgba(255,255,255,.01);
  border:1px solid var(--border-1px);
  border-radius:var(--radius-sm);
  flex-shrink:0;
}
.tab-btn{
  display:flex;align-items:center;gap:.3rem;
  flex:1;padding:.35rem .6rem;
  background:transparent;border:1px solid transparent;
  border-radius:4px;
  color:var(--text-muted);
  font-family:var(--font-sans);font-size:.72rem;font-weight:600;
  cursor:pointer;transition:all var(--transition-fast);
}
.tab-btn:hover:not(:disabled){
  background:rgba(255,255,255,.02);
  color:var(--text-secondary);
  border-color:rgba(255,255,255,.04);
}
.tab-btn.active{
  background:rgba(139,92,246,.08);
  color:var(--text-primary);
  border-color:rgba(139,92,246,.15);
}
.tab-btn.locked{cursor:not-allowed;opacity:.4}
.tab-icon{font-size:.85rem}
.tab-label{font-size:.68rem}

/* ═══ TAB PANELS ═══ */
.tab-panels{flex:1;min-height:0;position:relative}
.tab-panel{display:none;flex-direction:column;height:100%}
.tab-panel.active{display:flex}

/* ═══ FORGE PANEL ═══ */
.forge-panel{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.01);
  border:1px solid var(--border-1px);
  border-radius:var(--radius-lg);
  overflow:hidden;flex:1;
}
.forge-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.3rem .65rem;
  border-bottom:1px solid var(--border-1px);
  flex-shrink:0;
}
.forge-title{
  font-size:.68rem;font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.1em;
}
.forge-actions{display:flex;align-items:center;gap:.35rem}
.char-count{font-size:.62rem;color:var(--text-muted)}
.forge-action{
  background:none;border:1px solid var(--border-1px);
  border-radius:3px;padding:.12rem .3rem;
  color:var(--text-secondary);cursor:pointer;font-size:.7rem;
  transition:all var(--transition-fast);
}
.forge-action:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}

/* ═══ CODE ═══ */
.forge-code{
  flex:1;overflow:auto;padding:.65rem;margin:0;
  font-family:var(--font-mono);font-size:.72rem;
  line-height:1.5;color:var(--text-secondary);
  white-space:pre-wrap;word-break:break-all;
}
.forge-code .placeholder{color:var(--text-muted);font-style:italic}

/* ═══ PREVIEW ═══ */
.preview-container{flex:1;position:relative;background:#111}
.preview-iframe{width:100%;height:100%;border:none;display:block}
.preview-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.9);
  transition:opacity var(--transition-smooth);
  pointer-events:none;
}
.preview-overlay.hidden{opacity:0}
.overlay-content{text-align:center;color:var(--text-secondary)}
.obsidian-loader{
  width:32px;height:32px;margin:0 auto .6rem;
  border:1.5px solid rgba(255,255,255,.06);
  border-top-color:var(--neon-purple);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ DEPLOY BAR: 1px glass ═══ */
.deploy-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem .75rem;
  background:rgba(255,255,255,.01);
  border:1px solid var(--border-1px);
  border-radius:var(--radius-lg);
  flex-shrink:0;
  transition:border-color var(--transition-smooth);
}
.deploy-bar.ready{
  border-color:rgba(16,185,129,.2);
  box-shadow:0 0 12px rgba(16,185,129,.04);
}
.deploy-bar.verified{
  border-color:rgba(245,158,11,.2);
  box-shadow:0 0 16px rgba(245,158,11,.06);
}
.deploy-status{display:flex;align-items:center;gap:.4rem}
.deploy-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--text-muted);
  transition:background var(--transition-fast);
}
.deploy-dot.ready{background:var(--neon-green);box-shadow:0 0 6px var(--neon-green)}
.deploy-dot.verifying{background:var(--neon-cyan);animation:dot-pulse .5s ease-in-out infinite}
.deploy-dot.deployed{background:var(--gold);box-shadow:0 0 8px var(--gold)}
@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.deploy-text{font-size:.72rem;color:var(--text-secondary)}

.btn-deploy{
  display:flex;align-items:center;gap:.3rem;
  padding:.35rem .85rem;
  background:var(--void);
  border:1px solid var(--border-1px);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-family:var(--font-sans);font-size:.75rem;font-weight:700;
  cursor:pointer;transition:all var(--transition-smooth);
  white-space:nowrap;
}
.btn-deploy:hover:not(:disabled){
  border-color:rgba(16,185,129,.3);
  color:var(--neon-green);
  box-shadow:0 0 12px rgba(16,185,129,.1);
}
.btn-deploy:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;border-color:var(--border-1px)}
.btn-deploy.ready:not(:disabled){
  border-color:rgba(16,185,129,.35);
  color:var(--neon-green);
}
.btn-deploy.deploying{
  border-color:rgba(6,182,212,.3);
  color:var(--neon-cyan);
}
.btn-deploy.deployed{
  border-color:rgba(245,158,11,.35);
  color:var(--gold);
}
.deploy-spinner{
  display:none;width:12px;height:12px;
  border:1.5px solid rgba(255,255,255,.1);
  border-top-color:var(--neon-cyan);
  border-radius:50%;animation:spin .5s linear infinite;
}
.btn-deploy.deploying .deploy-spinner{display:inline-block}

/* ═══ VERIFIED RESULT ═══ */
.deploy-result{flex-shrink:0}
.verified-card{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .85rem;
  background:rgba(245,158,11,.04);
  border:1px solid rgba(245,158,11,.15);
  border-radius:var(--radius-md);
  animation:card-rise .3s ease-out;
}
@keyframes card-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.verified-icon{font-size:1.1rem;color:var(--gold)}
.verified-body strong{display:block;font-size:.75rem;margin-bottom:.05rem}
.verified-url{
  font-size:.7rem;color:var(--neon-cyan);text-decoration:none;
  word-break:break-all;transition:color var(--transition-fast);
}
.verified-url:hover{color:var(--neon-purple)}

/* ═══ TOAST ═══ */
.toast-container{position:fixed;bottom:.6rem;right:.6rem;display:flex;flex-direction:column;gap:.3rem;z-index:1000}
.toast{padding:.45rem .75rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.02);border:1px solid var(--border-1px);color:var(--text-primary);font-size:.7rem;animation:toast-in .2s ease-out;max-width:260px}
.toast.error{border-color:rgba(239,68,68,.2)}
.toast.success{border-color:rgba(16,185,129,.2)}
@keyframes toast-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.code-chunk-new{animation:chunk-in .1s ease-out}
@keyframes chunk-in{from{opacity:0}to{opacity:1}}

/* ═══ MOBILE ═══ */
@media(max-width:500px){
  .obsidian-shell{padding:.35rem;gap:.3rem}
  .wizard-orbit{width:50px;height:50px}
  .wizard-hat{width:34px;height:34px}
  .hero-title{font-size:1.05rem}
  .thought-stream{padding:.25rem .45rem}
  .stream-text{font-size:.65rem}
  .tab-btn{padding:.3rem .4rem}
  .tab-label{font-size:.62rem}
  .deploy-bar{flex-direction:column;gap:.35rem;align-items:stretch}
  .btn-deploy{justify-content:center}
}