/* Shell layout. Lives in a file because the CSP forbids inline style. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0f1114;
  color: #dfe3e8;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* The app is the two-column grid; the gate is a centred form. `hidden` has to be
 * restated because display:grid would otherwise win over the attribute. */
#app {
  display: grid;
  grid-template-columns: 1fr 320px;
  height: 100%;
}
#app[hidden], #gate[hidden] { display: none; }
#gate {
  max-width: 22rem;
  margin: 20vh auto;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #333a44;
  border-radius: 6px;
}
#gate h1 { margin: 0; font-size: 14px; font-weight: 600; color: #8fb7ff; }
#gate label { font-size: 12px; color: #8d97a6; }
#gate-message { margin: 0; min-height: 1.5em; color: #e6a5a5; }
#model { position: relative; min-width: 0; }
/* The model canvas is sized by CSS; house-app.js matches the drawing buffer to it and
 * never touches the style attribute, which is inline style as far as the CSP goes. */
#model canvas { display: block; width: 100%; height: 100%; }
#chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-left: 1px solid #333a44;
  overflow: hidden;
}
#chat h1 { margin: 0; font-size: 14px; font-weight: 600; color: #8fb7ff; }
#log { flex: 1; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.msg { margin: 0 0 8px; white-space: pre-wrap; word-break: break-word; }
.msg-user { color: #dfe3e8; }
.msg-assistant { color: #9fb4cc; }
#composer { display: flex; flex-direction: column; gap: 6px; }
#composer label { font-size: 12px; color: #8d97a6; }
textarea, button {
  background: #2a2f38; color: #dfe3e8; border: 1px solid #3d4550;
  border-radius: 4px; padding: 6px; font: inherit; resize: vertical;
}
button { cursor: pointer; }
button:hover { background: #343b46; }
#meter { margin: 0; font-size: 12px; color: #8d97a6; }
/* The unsaved-changes line: quiet when there is nothing to say, warm when there is. */
#status { margin: 0; min-height: 1.5em; font-size: 12px; color: #d9b06a; word-break: break-word; }

/* The part-visibility checkboxes sit over the top-left of the model. */
#zones{position:absolute;left:10px;top:10px;z-index:5;display:flex;flex-direction:column;
  gap:2px;padding:8px 10px;border-radius:6px;background:#1e2128e6;border:1px solid #333a44;
  font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#dfe3e8}
#zones label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
#model{position:relative}