/* ============================================================
   CHAT-FIRST — the front door.
   A single column conversation, Claude-like. The visual appears
   inline as it is built. The editor is a secondary surface reached
   from here, not the starting point.
   ============================================================ */

:root{
  --ui-surface:#FFFFFF; --ui-border:#E7E7EA; --ui-heading:#18181B; --ui-body:#3F3F46;
  --ui-muted:#9AA1AC; --ui-hover:#F4F4F5; --ui-bg:#F7F7F8;
  --ui-accent:#18181B; --brand:#F2685C;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  height:100vh;display:flex;flex-direction:column;background:var(--ui-bg);
  color:var(--ui-heading);font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;
}

/* ---- top bar ---- */
.top{
  flex:none;height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:var(--ui-surface);border-bottom:1px solid var(--ui-border);
}
.brand{display:flex;align-items:center;gap:9px;font-size:14px;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);}
.brand b{font-weight:800;}
.who{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ui-muted);}
.editorlink{
  color:var(--ui-body);text-decoration:none;font-weight:700;font-size:13px;
  padding:5px 11px;border:1px solid var(--ui-border);border-radius:8px;
}
.editorlink:hover{background:var(--ui-hover);}
.editorlink.hidden{display:none;}

/* ---- thread ---- */
.thread{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:center;padding:26px 20px 40px;
}
.thread > *{width:100%;max-width:720px;}

.intro{margin:auto 0;text-align:center;padding:20px 0;}
.intro h1{font-size:28px;font-weight:800;margin:0 0 12px;}
.intro p{color:var(--ui-body);margin:0 auto 26px;max-width:560px;}
.examples{display:flex;flex-direction:column;gap:9px;max-width:520px;margin:0 auto;}
.ex{
  font:inherit;font-size:14px;text-align:left;color:var(--ui-body);cursor:pointer;
  background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:11px;padding:12px 15px;
  transition:border-color .12s,background .12s;
}
.ex:hover{border-color:#D4D4D8;background:#fff;}

/* ---- messages ---- */
.msg{display:flex;flex-direction:column;margin:0 0 22px;}
.msg .role{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ui-muted);margin-bottom:7px;}
.msg.user .bubble{
  background:var(--ui-heading);color:#fff;align-self:flex-end;max-width:88%;
  border-radius:15px 15px 4px 15px;padding:11px 15px;white-space:pre-wrap;
}
.msg.user .role{align-self:flex-end;}
.msg.bot .bubble{color:var(--ui-heading);white-space:pre-wrap;}
.bubble{font-size:15px;}

/* the assistant's build steps */
.steps{margin:12px 0 4px;display:flex;flex-direction:column;gap:1px;}
.step{
  display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ui-body);
  padding:5px 0;opacity:0;transform:translateY(3px);animation:rise .25s ease forwards;
}
@keyframes rise{to{opacity:1;transform:none;}}
.step .ic{flex:none;width:18px;height:18px;margin-top:1px;color:var(--brand);}
.step.refused{color:#9A3412;}
.step.refused .ic{color:#EA580C;}
.step .spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* the built visual, inline */
.built{
  margin:14px 0 2px;border:1px solid var(--ui-border);border-radius:14px;
  background:var(--ui-surface);overflow:hidden;
}
.built .strip{display:flex;gap:10px;overflow-x:auto;padding:14px;}
.built .card{flex:none;width:150px;}
.built .frame{
  width:150px;height:187px;border-radius:7px;overflow:hidden;position:relative;
  background:#fff;box-shadow:0 1px 5px rgb(0 0 0 / .10);
}
.built .frame iframe{
  width:1080px;height:1350px;border:0;position:absolute;top:0;left:0;
  transform:scale(0.1389);transform-origin:top left;pointer-events:none;
}
.built .cap{font-size:11px;color:var(--ui-muted);margin-top:6px;text-align:center;}
.built .bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-top:1px solid var(--ui-border);
}
.built .bar span{font-size:12.5px;color:var(--ui-muted);}
.built .open{
  font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:none;
  color:#fff;background:var(--ui-heading);border:0;border-radius:8px;padding:7px 13px;
}
.built .open:hover{background:#000;}
.built.single .card{width:210px;}
.built.single .frame{width:210px;height:262px;}
.built.single .frame iframe{transform:scale(0.1944);}

.err{color:#B91C1C;font-size:14px;background:#FEF2F2;border:1px solid #FECACA;border-radius:11px;padding:11px 14px;}

/* ---- composer ---- */
.composer{flex:none;background:var(--ui-bg);padding:0 20px 16px;}
.composer-inner{
  max-width:720px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;
  background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:15px;
  padding:8px 8px 8px 15px;box-shadow:0 2px 10px rgb(0 0 0 / .05);
}
.composer-inner:focus-within{border-color:#C4C4C8;}
#input{
  flex:1;border:0;outline:0;resize:none;font:inherit;background:transparent;
  color:var(--ui-heading);max-height:200px;padding:6px 0;line-height:1.5;
}
#send{
  flex:none;width:38px;height:38px;border:0;border-radius:10px;cursor:pointer;
  background:var(--ui-heading);color:#fff;display:flex;align-items:center;justify-content:center;
}
#send:hover{background:#000;}
#send:disabled{background:#D4D4D8;cursor:default;}
#send.stop{background:var(--brand);}
#send svg{width:18px;height:18px;}
.hint{max-width:720px;margin:8px auto 0;font-size:11.5px;color:var(--ui-muted);text-align:center;}