/* Studio: sidebar | chat | artifact panel */
html, body { height:100%; }
body.studio-body { overflow:hidden; }
.studio { display:grid; grid-template-columns:248px minmax(0,1fr) minmax(0,46%); height:100vh; height:100dvh; }
.studio.nopanel { grid-template-columns:248px minmax(0,1fr) 0; }
.studio.nopanel #panel { display:none; }

/* sidebar */
#side { background:var(--bg1); border-right:1px solid var(--bd); display:flex; flex-direction:column; min-height:0; }
.sb-top { padding:14px 14px 10px; display:flex; align-items:center; justify-content:space-between; }
.sb-top .logo { text-decoration:none; color:var(--fg); }
.sb-new { margin:0 10px 8px; display:flex; align-items:center; gap:8px; width:calc(100% - 20px); background:transparent; color:var(--fg);
          border:1px solid var(--bd2); border-radius:6px; padding:7px 10px; font-size:13.5px; cursor:pointer; text-align:left; }
.sb-new:hover { background:var(--bg3); }
.sb-new kbd, .kbd { margin-left:auto; font-family:"JetBrains Mono", monospace; font-size:10.5px; color:var(--mu); border:1px solid var(--bd2); border-radius:3px; padding:0 4px; }
.sb-list { flex:1; overflow-y:auto; padding:4px 6px 10px; }
.sb-h { font-family:"JetBrains Mono", monospace; font-size:10.5px; color:var(--mu); letter-spacing:.08em; text-transform:uppercase; padding:12px 8px 4px; }
.sb-item { display:block; padding:6px 8px; border-radius:5px; color:var(--fg2); text-decoration:none; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-item:hover { background:var(--bg3); color:var(--fg); }
.sb-item.on { background:var(--bg3); color:var(--fg); }
.sb-item .st { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--mu2); margin-right:8px; vertical-align:1px; }
.sb-item .st.run { background:var(--warn); animation:pulse 1.4s infinite; } .sb-item .st.ok { background:var(--ok); }
.sb-foot { border-top:1px solid var(--bd); padding:12px 14px; font-size:12.5px; color:var(--fg2); }
.sb-foot .meter { margin-bottom:10px; } .sb-foot .meter .mt { font-size:12px; }
.sb-links { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; }
.sb-links a, .sb-links button { color:var(--mu); text-decoration:none; background:none; border:0; padding:0; font-size:12.5px; cursor:pointer; }
.sb-links a:hover, .sb-links button:hover { color:var(--fg); }
.sb-user { color:var(--mu); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:8px; }

/* chat */
#chat { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--bg); }
.ch-head { height:48px; flex:none; display:flex; align-items:center; gap:10px; padding:0 18px; border-bottom:1px solid var(--bd); }
.ch-head h1 { font-size:14px; font-weight:600; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:0; }
.ch-head .pill { flex:none; }
.ch-head .sp { flex:1; }
.icon-btn { background:none; border:1px solid transparent; color:var(--fg2); border-radius:5px; padding:4px 7px; cursor:pointer; font-size:13px; }
.icon-btn:hover { background:var(--bg3); color:var(--fg); }
.icon-btn[aria-pressed="true"] { border-color:var(--bd2); color:var(--fg); }
#menuBtn { display:none; }
.demo-line { flex:none; font-size:12px; color:var(--warn); padding:6px 18px; border-bottom:1px solid var(--bd); font-family:"JetBrains Mono", monospace; }
#tl { flex:1; overflow-y:auto; padding:22px 0 30px; scroll-behavior:smooth; }
.tl-in { max-width:760px; margin:0 auto; padding:0 22px; display:flex; flex-direction:column; gap:14px; }
.msg-u { align-self:flex-end; max-width:82%; background:var(--bg3); color:var(--fg); padding:10px 14px; border-radius:10px; white-space:pre-wrap; font-size:14.5px; }
.msg-a { max-width:100%; color:var(--fg); white-space:pre-wrap; font-size:14.5px; }
.msg-a .who { text-transform:none !important; }
.msg-a .who, .msg-u .who { display:block; font-family:"JetBrains Mono", monospace; font-size:10.5px; color:var(--mu); letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; white-space:normal; }
.msg-e { border-left:2px solid var(--fg2); padding-left:12px; }
.caret::after { content:"▍"; animation:blink 1s steps(1) infinite; color:var(--fg2); margin-left:1px; }
@keyframes pulse { 50% { opacity:.35; } }

/* step lines */
.steps { border:1px solid var(--bd); border-radius:8px; background:var(--bg1); overflow:hidden; }
.steps-h { display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13px; color:var(--fg2); border-bottom:1px solid var(--bd); }
.steps-h b { color:var(--fg); font-weight:600; }
.steps-h .r { margin-left:auto; font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--mu); }
.step { font-family:"JetBrains Mono", monospace; font-size:12.5px; color:var(--fg2); }
.step > button { all:unset; box-sizing:border-box; display:flex; gap:10px; align-items:baseline; width:100%; padding:6px 12px; cursor:pointer; }
.step > button:hover { background:var(--bg2); }
.step > button:focus-visible { outline:1px solid var(--fg2); outline-offset:-1px; }
.step .ic { width:12px; flex:none; text-align:center; }
.step .ic.ok { color:var(--ok); } .step .ic.run { color:var(--warn); animation:pulse 1.1s infinite; } .step .ic.bad { color:var(--bad); } .step .ic.cv { color:var(--warn); }
.step .tx { flex:1; min-width:0; } .step.now .tx { color:var(--fg); }
.step .tm { color:var(--mu2); font-size:11px; }
.step .chev { color:var(--mu2); font-size:10px; transition:transform .15s; }
.step.open .chev { transform:rotate(90deg); }
.step .out { display:none; padding:2px 12px 10px 34px; color:var(--fg2); font-size:12px; white-space:pre-wrap; line-height:1.6; }
.step.open .out { display:block; }
.out .row2 { display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--bd); padding:2px 0; }
.out .row2 span:last-child { color:var(--fg); text-align:right; }
.steps-f { display:flex; gap:8px; flex-wrap:wrap; padding:9px 12px; border-top:1px solid var(--bd); }

/* artifact card in chat */
.acard { display:flex; align-items:center; gap:12px; border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg1); cursor:pointer; text-align:left; color:var(--fg); font:inherit; width:100%; }
.acard:hover { border-color:var(--bd2); background:var(--bg2); }
.acard .ai { width:30px; height:30px; flex:none; border-radius:6px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--fg2); }
.acard b { display:block; font-weight:600; font-size:13.5px; }
.acard span { color:var(--mu); font-size:12.5px; }
.acard .go { margin-left:auto; color:var(--mu); font-family:"JetBrains Mono", monospace; font-size:12px; }
.sysline { font-family:"JetBrains Mono", monospace; font-size:12px; color:var(--mu); display:flex; gap:8px; align-items:baseline; }
.sysline .ic { color:var(--ok); } .sysline.warn .ic { color:var(--warn); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }

/* composer */
.composer2 { flex:none; padding:10px 22px 16px; }
.cbox { max-width:760px; margin:0 auto; border:1px solid var(--bd2); border-radius:10px; background:var(--bg1); padding:8px 10px 8px 12px; }
.cbox:focus-within { border-color:var(--fg2); }
.cbox textarea { all:unset; box-sizing:border-box; display:block; width:100%; min-height:24px; max-height:220px; overflow-y:auto; resize:none; font-size:14.5px; line-height:1.5; color:var(--fg); white-space:pre-wrap; padding:4px 0; }
.cbox textarea::placeholder { color:var(--mu); }
.cbar { display:flex; align-items:center; gap:8px; margin-top:4px; }
.cbar .modes { display:flex; gap:4px; }
.cbar .modes button { background:none; border:1px solid transparent; color:var(--mu); border-radius:5px; padding:2px 8px; font-size:12px; cursor:pointer; }
.cbar .modes button[aria-pressed="true"] { border-color:var(--bd2); color:var(--fg); }
.cbar .hint { margin-left:auto; color:var(--mu2); font-family:"JetBrains Mono", monospace; font-size:11px; }
.send { background:var(--acc); color:var(--acc-fg); border:0; border-radius:6px; width:30px; height:28px; cursor:pointer; font-size:14px; }
.send[disabled] { background:var(--bg3); color:var(--mu); cursor:default; }
.cnote { max-width:760px; margin:6px auto 0; color:var(--mu); font-size:12px; text-align:center; }

/* artifact panel */
#panel { background:var(--bg1); border-left:1px solid var(--bd); display:flex; flex-direction:column; min-height:0; min-width:0; }
.pn-tabs { height:48px; flex:none; display:flex; align-items:stretch; gap:2px; padding:0 10px; border-bottom:1px solid var(--bd); overflow-x:auto; scrollbar-width:none; }
.pn-tabs::-webkit-scrollbar { display:none; }
.pn-tabs button { background:none; border:0; border-bottom:2px solid transparent; color:var(--mu); padding:0 10px; font-size:13px; cursor:pointer; white-space:nowrap; }
.pn-tabs button:hover { color:var(--fg2); }
.pn-tabs button[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--fg); }
.pn-tabs .x { margin-left:auto; }
.pn-body { flex:1; overflow:auto; padding:20px 22px 40px; }
.pn-body h2 { margin:0 0 4px; }
.pn-body .sub { margin:0 0 14px; font-size:13px; }
.pn-body section + section { margin-top:28px; }
.pn-body .panel { padding:14px 16px; }
.pn-body .lane h3 { font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.08em; color:var(--mu); }
.pn-body .lane ul { padding-left:16px; margin:0; } .pn-body .lane li { font-size:13.5px; margin:4px 0; }
.pn-body .three { grid-template-columns:1fr; gap:10px; }
.pn-body .viewer model-viewer { height:min(62vh, 560px); }
.kv2 { display:grid; grid-template-columns:140px 1fr; gap:6px 14px; font-size:13.5px; } .kv2 dt { color:var(--mu); } .kv2 dd { margin:0; }
.empty { color:var(--mu); font-size:13.5px; padding:30px 0; text-align:center; }

/* empty chat state */
.hello { max-width:620px; margin:12vh auto 0; padding:0 22px; }
.hello h2 { font-size:22px; margin:0 0 6px; }
.hello p { color:var(--fg2); margin:0 0 18px; }
.ideas { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ideas button { text-align:left; background:var(--bg1); border:1px solid var(--bd); border-radius:8px; color:var(--fg2); padding:10px 12px; font-size:13px; cursor:pointer; font-family:inherit; }
.ideas button:hover { border-color:var(--bd2); color:var(--fg); }

/* phone */
.seg { display:none; }
@media (max-width:980px) {
  .studio, .studio.nopanel { grid-template-columns:minmax(0,1fr); }
  #side { position:fixed; inset:0 auto 0 0; width:84vw; max-width:300px; z-index:40; transform:translateX(-102%); transition:transform .2s ease; }
  .studio.menu #side { transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.5); }
  #menuBtn { display:inline-block; }
  #panel { display:none; }
  .studio.show-panel #chat { display:none; }
  .studio.show-panel #panel { display:flex; }
  .seg { display:inline-flex; border:1px solid var(--bd2); border-radius:6px; overflow:hidden; }
  .seg button { background:none; border:0; color:var(--mu); padding:3px 10px; font-size:12.5px; }
  .seg button[aria-pressed="true"] { background:var(--bg3); color:var(--fg); }
  #panelBtn { display:none; }
  .tl-in, .hello { padding:0 14px; }
  .composer2 { padding:8px 10px 12px; }
  .cbar .hint { display:none; }
  .ideas { grid-template-columns:1fr; }
  .msg-u { max-width:90%; }
  .pn-body { padding:16px 14px 40px; }
  .kv2 { grid-template-columns:1fr; }
}
.ch-head .pill { align-self:center; }
.cbar .modes button { white-space:nowrap; }
@media (max-width:980px) {
  .ch-head { padding:0 10px; gap:8px; }
  .ch-head .pill { display:none; }
  .seg { flex:none; }
  .demo-line { padding:5px 12px; font-size:11px; }
}
.pn-back { display:none; }
@media (max-width:980px) { .pn-tabs .pn-back { display:inline-block; color:var(--fg); border-right:1px solid var(--bd); margin-right:4px; } }

/* review round: collapsible blocks, outcomes, chips, phone */
button.steps-h { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; font-size:13px; color:var(--fg2); border-bottom:1px solid var(--bd); cursor:pointer; }
button.steps-h:hover { background:var(--bg2); }
button.steps-h .chev { color:var(--mu2); font-size:10px; transition:transform .15s; transform:rotate(90deg); }
.steps.collapsed button.steps-h { border-bottom:0; }
.steps.collapsed button.steps-h .chev { transform:none; }
.steps.collapsed .steps-b { display:none; }
.tag-est { font-family:"JetBrains Mono", monospace; font-size:10.5px; color:var(--mu); }
.outcome { padding:8px 12px; font-size:12.5px; color:var(--fg); border-bottom:1px dashed var(--bd); }
.outcome .ic.ok { color:var(--ok); } .outcome .ic.bad { color:var(--bad); }
.tl-in { gap:18px; }
.demo-line { display:flex; align-items:center; gap:8px; }
.demo-line span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-line .icon-btn { padding:0 6px; color:var(--warn); }
.seg button.new::after { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--warn); margin-left:5px; vertical-align:2px; }
@media (hover:none) { .cbar .hint { display:none; } }
@media (max-width:980px) {
  .cbox { position:relative; padding-right:48px; }
  .cbox .send { position:absolute; right:8px; bottom:8px; }
  .cbar:empty, .cbar .hint { display:none; }
  .pn-tabs { -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); }
  .pn-body .viewer model-viewer { height:calc(100dvh - 190px); }
  .tag-est { display:none; }
}
@media (min-width:981px) { .studio { grid-template-columns:248px minmax(0,1fr) minmax(0,42%); } }
button.steps-h > b, button.steps-h .label, button.steps-h .r, .icon-btn { white-space:nowrap; }
button.steps-h .tag-est { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }
button.steps-h .r { margin-left:auto; flex:none; }
@media (max-width:980px) { .cbar { padding-right:0; flex-wrap:wrap; } .cbar .modes button { padding:2px 6px; } }