:root{--ink:#16130f;--paper:#f4efe8;--ember:#e2562b;--stone:#6b635a;--sand:#e8e0d4;--card:#fbf8f3;--u:min(1vw,1.6vh)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
.stage{position:fixed;inset:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.8vh,18px);padding:max(1.6vh,env(safe-area-inset-top)) max(3vw,env(safe-area-inset-right)) max(1.6vh,env(safe-area-inset-bottom)) max(3vw,env(safe-area-inset-left));overflow:hidden}
.top{flex:none;width:min(100%,60rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.9vh,10px)}
.brand{color:var(--ember);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.6rem,min(1.1vw,1.7vh),.9rem)}
h1{font-size:clamp(1.05rem,min(3.4vw,5.4vh),2.7rem);line-height:1.08;letter-spacing:-.03em;font-weight:700}
h1 em{font-style:normal;color:var(--ember);display:inline-block}
.status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2em .8em;min-height:2.6em;font-size:clamp(.68rem,min(1.5vw,2.4vh),1.1rem);font-weight:500;color:var(--stone)}
.dot{width:.55em;height:.55em;border-radius:50%;background:var(--ember);animation:pulse 1.2s infinite}
.url{font-weight:600;color:var(--ink);background:var(--sand);padding:.2em .7em;border-radius:999px;animation:pop .4s}
.url b{color:var(--ember);font-weight:700}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
@keyframes pop{from{transform:scale(.9);opacity:0}}
#status-text{transition:opacity .2s}
#status-text.sw{opacity:0}

.app{flex:1 1 0;min-height:0;width:min(100%,56rem);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--sand);border-radius:clamp(10px,2vh,20px);box-shadow:0 1.5vh 5vh rgba(22,19,15,.08);overflow:hidden;font-size:clamp(.66rem,min(1.45vw,2.5vh),1.02rem)}
.appbar{flex:none;display:flex;align-items:center;gap:.8em;padding:.55em .9em;border-bottom:1px solid var(--sand);font-size:.82em;color:var(--stone);font-weight:500}
.lights{display:flex;gap:.35em}.lights i{width:.65em;height:.65em;border-radius:50%;background:var(--sand)}
.mcp{color:var(--ember);font-weight:600}
.chat{flex:1 1 0;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%)}
.msgs{display:flex;flex-direction:column;gap:.8em;padding:1em 1.1em .6em;transition:opacity .6s}
.msgs.out{opacity:0}
.m{max-width:88%;line-height:1.45;animation:in .35s ease-out both}
@keyframes in{from{opacity:0;transform:translateY(.6em)}}
.m.user{align-self:flex-end;background:var(--ink);color:var(--paper);padding:.6em .95em;border-radius:1.1em 1.1em .3em 1.1em}
.m.ai{align-self:flex-start;display:flex;flex-direction:column;gap:.6em;width:88%}
.avatar{display:flex;align-items:center;gap:.5em;font-weight:600;font-size:.85em}
.avatar i{width:1.5em;height:1.5em;border-radius:50%;background:var(--ember);display:inline-block}
.think{display:flex;gap:.3em;padding:.2em 0}.think i{width:.5em;height:.5em;border-radius:50%;background:var(--stone);animation:bounce 1s infinite}
.think i:nth-child(2){animation-delay:.15s}.think i:nth-child(3){animation-delay:.3s}
@keyframes bounce{40%{transform:translateY(-.4em);opacity:.4}}
.tool{border:1px solid var(--sand);background:#fff;border-radius:.8em;overflow:hidden}
.toolhd{display:flex;align-items:center;gap:.6em;padding:.5em .8em;background:var(--paper);font-size:.85em;font-weight:600}
.toolhd code{font-family:ui-monospace,Menlo,monospace;color:var(--ember);font-weight:600}
.toolhd .st{margin-left:auto;color:var(--stone);font-weight:500}
.steps{list-style:none;padding:.4em .8em .5em}
.steps li{display:flex;align-items:center;gap:.6em;padding:.18em 0;color:var(--stone);animation:in .3s both;font-size:.92em}
.steps li.done{color:var(--ink)}
.ic{flex:none;width:1.1em;height:1.1em;border-radius:50%;border:2px solid var(--sand);border-top-color:var(--ember);animation:spin .7s linear infinite}
li.done .ic{animation:none;border:0;background:var(--ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}
.final b{color:var(--ember)}
.preview{display:flex;align-items:center;gap:.8em;border:1px solid var(--sand);background:#fff;border-radius:.8em;padding:.6em .8em;animation:in .4s both;max-width:26em}
.thumb{flex:none;width:3.2em;height:2.4em;border-radius:.4em;background:var(--ink);position:relative;overflow:hidden}
.thumb::before{content:"";position:absolute;left:.4em;right:.4em;top:.5em;height:.3em;border-radius:2px;background:var(--ember)}
.thumb::after{content:"";position:absolute;left:.4em;right:.9em;top:1.1em;bottom:.4em;background:repeating-linear-gradient(var(--stone) 0 .15em,transparent .15em .4em)}
.pv-t{font-weight:600;font-size:.95em}.pv-u{color:var(--stone);font-size:.8em}
.pv-l{margin-left:auto;font-size:.75em;font-weight:600;color:var(--stone);white-space:nowrap}

.prompt{flex:none;display:flex;align-items:center;gap:.6em;margin:.4em .8em .8em;padding:.45em .5em .45em 1em;border:1px solid var(--sand);background:#fff;border-radius:999px;font-size:1.05em}
.field{flex:1;min-width:0;position:relative;white-space:nowrap;overflow:hidden;display:flex;align-items:center;height:1.6em}
#typed{flex:none}
.field.long{justify-content:flex-end}
.ph{position:absolute;left:0;color:#a69d92}
.field.has .ph{display:none}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--ember);margin-left:1px;animation:blink 1s steps(1) infinite;flex:none}
@keyframes blink{50%{opacity:0}}
.send{flex:none;width:2.3em;height:2.3em;border-radius:50%;border:0;background:var(--sand);color:var(--stone);padding:.55em;transition:transform .15s,background .2s}
.send.ready{background:var(--ember);color:#fff}
.send.press{transform:scale(.82)}

@media (max-height:460px){
  .top{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.2em 1.2em;width:100%}
  .brand{display:none}
  h1{font-size:clamp(.85rem,4.4vh,1.5rem)}
  .status{min-height:0;font-size:clamp(.6rem,3.6vh,.9rem)}
  .stage{gap:1vh;padding-top:1.2vh;padding-bottom:1.2vh}
  .app{font-size:clamp(.6rem,3.6vh,.9rem)}
  .appbar{display:none}
  .pv-l,.preview .thumb{display:none}
}
@media (max-aspect-ratio:4/5) and (min-width:600px){
  h1{font-size:clamp(1.6rem,4.6vw,3rem)}
  .app{font-size:clamp(.9rem,min(2.5vw,2.4vh),1.6rem);width:min(100%,46rem)}
  .status{font-size:clamp(.9rem,2vw,1.3rem)}
  .top{gap:1.2vh}
}
@media (max-width:480px){
  h1{font-size:clamp(1.05rem,6.2vw,1.7rem)}
  .status{font-size:clamp(.68rem,3.3vw,.9rem)}
  .app{font-size:clamp(.68rem,min(3.3vw,2.4vh),.9rem)}
  .m,.m.ai{max-width:94%;width:94%}.m.user{width:auto;max-width:90%}
  .pv-l{display:none}
}
/* wide screens: chat on the left, big stacked title on the right */
@media (min-aspect-ratio:5/4) and (min-width:900px) and (min-height:461px){
  .stage{flex-direction:row;align-items:stretch;justify-content:center;gap:clamp(24px,4vw,72px);padding-top:max(4vh,env(safe-area-inset-top));padding-bottom:max(4vh,env(safe-area-inset-bottom))}
  .app{order:1;flex:1 1 0;max-width:54rem;width:auto}
  .top{order:2;flex:0 0 clamp(16rem,30vw,32rem);width:auto;align-self:center;text-align:right;align-items:flex-end;gap:clamp(10px,2.4vh,24px)}
  .brand{font-size:clamp(.7rem,min(1.1vw,1.8vh),.95rem)}
  h1{font-size:clamp(2rem,min(4.6vw,8.4vh),5.2rem);line-height:1.02;letter-spacing:-.035em}
  h1 em{display:block;margin-top:.12em}
  .status{justify-content:flex-end;min-height:5.4em;align-content:flex-start;font-size:clamp(.8rem,min(1.3vw,2.2vh),1.1rem)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wr{width:.9em;height:.9em;border-radius:.25em;background:var(--ember);position:relative;flex:none}
.wr::after{content:"";position:absolute;inset:.22em;border:2px solid var(--paper);border-radius:50%}
.pv-l::before{content:"";display:inline-block;width:.55em;height:.4em;background:var(--stone);border-radius:2px;margin-right:.45em;vertical-align:.02em}