:root{--red:#e0242f;--red-hi:#ff4a54;--red-lo:#8f1219;--bg:#0b070a;--panel:#1a1114;--panel2:#24161a;--text:#f1e9ea;--muted:#a99a9c;--line:#4a2228}
*{box-sizing:border-box}html,body{height:100%;overflow:hidden}
body{margin:0;background:radial-gradient(ellipse at 50% 20%,#2a0d12,var(--bg) 70%);color:var(--text);font-family:system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent}
main{max-width:640px;margin:auto;height:var(--app-h,100dvh);display:flex;flex-direction:column;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
#log{min-height:0}
a{color:var(--red-hi)}a:hover{color:#ff7a82}
#stage{position:relative;display:grid;place-items:center;flex:0 0 auto}#dev{width:min(60vw,320px);filter:drop-shadow(0 0 22px #e0242f55)}
#badge{position:absolute;bottom:4px;padding:3px 12px;border-radius:12px;background:#000a;border:1px solid var(--line);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#badge.live{border-color:var(--red);color:#fff;box-shadow:0 0 0 0 #e0242f88;animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #e0242f99}70%{box-shadow:0 0 0 10px #e0242f00}100%{box-shadow:0 0 0 0 #e0242f00}}
#log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:4px}
.m{padding:8px 12px;border-radius:12px;max-width:85%;white-space:pre-wrap;line-height:1.35}.u{align-self:flex-end;background:var(--red-lo);color:#fff}.a{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}.s{align-self:center;color:var(--muted);font-size:12px}
#controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:15px;cursor:pointer}
button:hover{border-color:var(--red)}button.on,button.primary{background:var(--red);border-color:var(--red);color:#fff}button.on:hover,button.primary:hover{background:var(--red-hi)}
#ptt.hold{background:var(--red-hi);border-color:#fff;color:#fff}
:focus-visible{outline:3px solid var(--red-hi);outline-offset:2px}
form{display:flex;gap:8px}input{flex:1;padding:12px;border-radius:10px;border:1px solid var(--line);background:#120b0e;color:var(--text);font-size:16px}
input:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px #e0242f55}
#install[hidden]{display:none}
#start{position:fixed;inset:0;background:#0b070af0;display:grid;place-content:center;text-align:center;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}
#start button{font-size:20px;padding:16px 28px}#start p,.muted{color:var(--muted)}
.center{justify-content:center;align-items:center;text-align:center}.offline-dev{width:min(50vw,220px);opacity:.8;filter:grayscale(.4) drop-shadow(0 0 18px #e0242f44)}

/* Landscape: Dev + controls on the left, chat on the right */
@media (orientation: landscape) and (min-width: 560px) {
  main#app{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"stage log" "controls form";column-gap:16px;row-gap:8px}
  #stage{grid-area:stage;min-height:0;height:100%}
  #stage{overflow:hidden}
  #dev{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  #badge{z-index:1}
  #controls{grid-area:controls;align-self:end}
  #log{grid-area:log;height:100%;background:#0006;border:1px solid var(--line);border-radius:14px;padding:8px}
  #f{grid-area:form;align-self:end}
}
@media (orientation: landscape) and (min-width: 560px) and (max-height: 480px) {
  main#app{row-gap:6px;column-gap:12px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  #controls{gap:6px}#controls button{padding:7px 10px;font-size:14px}input{padding:9px}#f button{padding:8px 12px}
}