:root {
  --bg: #121316;
  --panel: #1b1c1f;
  --line: #2c2d32;
  --text: #e6e6e8;
  --muted: #8b8c91;
  --accent: #3b6fe0;
  --danger: #ff8a7a;
  --chat-w: 300px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 13px/1.45 system-ui, sans-serif; }
#shell { display: flex; height: 100%; }
#chat {
  width: var(--chat-w); flex: none; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
}
#chat header { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
#chat h1 { margin: 0; font-size: 14px; font-weight: 600; }
#chat .sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
#status { padding: 8px 14px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); min-height: 2.4em; }
#log { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.msg.user { background: #25262b; align-self: flex-end; max-width: 95%; }
.msg.assistant { background: #22242a; border: 1px solid var(--line); }
.msg.tool { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.msg.err { color: var(--danger); }
#composer { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
#composer textarea {
  width: 100%; resize: none; height: 72px; padding: 8px; border-radius: 6px;
  border: 1px solid var(--line); background: #121316; color: var(--text); font: inherit;
}
.row { display: flex; gap: 6px; }
button {
  font: inherit; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer;
  background: var(--accent); color: #fff;
}
button.ghost { background: #2a2b31; color: var(--text); }
button:disabled { opacity: 0.5; cursor: default; }
#editor { flex: 1; position: relative; min-width: 0; background: #1b1c1f; }
#filmcraft_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; color: #c9c9cc; pointer-events: none; z-index: 2;
}
#loading.hidden { display: none; }
#fatal {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(20, 20, 22, 0.88); z-index: 10;
}
#fatal.on { display: flex; }
#fatal .box { max-width: 70ch; padding: 20px; background: #26272b; border-radius: 8px; }
.upstream-cover {
  position: absolute;
  z-index: 4;
  background: #1b1c1f;
  pointer-events: auto;
}