:root {
  --void: #0a0b0c;
  --ivory: #fcfaf2;
  --glow: #7cd6d6;
  --alert: #d9534f;
  --warn: #e0a23c;
  --font: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--void);
  color: var(--ivory);
  font-family: var(--font);
  letter-spacing: -0.01em;
  line-height: 1.6;
  font-size: 15px;
}
#app { display: grid; grid-template-columns: 64px 1fr; height: 100vh; }
#spine {
  border-right: 1px solid rgba(124, 214, 214, 0.15);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 24px 0; color: var(--glow);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
}
#spine .v { writing-mode: vertical-rl; transform: rotate(180deg); }
#main { display: flex; flex-direction: column; padding: 32px 10% 24px 36px; min-width: 0; }
#status { font-size: 11px; color: var(--glow); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
#keystone { font-size: 11px; color: var(--alert); border: 1px solid var(--alert); padding: 6px 10px; margin-bottom: 14px; letter-spacing: 0.05em; text-shadow: 0 0 6px var(--alert); }
#hb { width: 9px; height: 9px; border-radius: 1px; background: var(--warn); transition: 0.3s; }
#hb.pass { background: var(--glow); box-shadow: 0 0 6px var(--glow); }
#hb.fail { background: var(--alert); box-shadow: 0 0 8px var(--alert); }
#log { flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.turn { margin-bottom: 18px; }
.you { color: var(--glow); }
.bb { color: var(--ivory); }
.thinking { color: var(--glow); opacity: 0.6; }
.tool { color: var(--glow); opacity: 0.55; font-style: italic; font-size: 13px; }
.meta { color: rgba(252, 250, 242, 0.4); font-size: 11px; margin-top: 4px; }
.concept { border-left: 1px solid rgba(124, 214, 214, 0.25); padding-left: 14px; }
.concept-title { color: var(--glow); }
.concept-body { color: rgba(252, 250, 242, 0.82); font-size: 14px; margin-top: 4px; }
#attach, #brain, #logout {
  color: var(--glow); cursor: pointer; font-size: 18px; line-height: 1;
  margin-right: 10px; opacity: 0.7; user-select: none; transition: 0.2s;
}
#brain, #logout { font-size: 15px; }
#attach:hover, #brain:hover, #logout:hover { opacity: 1; text-shadow: 0 0 6px var(--glow); }
#graphzoomin, #graphzoomout { background: transparent; border: 1px solid rgba(124, 214, 214, 0.3); color: var(--glow); border-radius: 3px; font-family: var(--font); font-size: 13px; width: 26px; height: 26px; cursor: pointer; padding: 0; }
#graphzoomin:hover, #graphzoomout:hover { box-shadow: 0 0 8px var(--glow); }
.bar { height: 3px; background: rgba(124, 214, 214, 0.15); margin-top: 6px; border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--glow); box-shadow: 0 0 6px var(--glow); transition: width 0.2s; }
#drop {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(10, 11, 12, 0.82); z-index: 10;
  border: 2px dashed var(--glow); border-radius: 4px;
}
#drop.on { display: flex; }
#dropmsg { color: var(--glow); font-size: 18px; letter-spacing: 0.1em; text-shadow: 0 0 12px var(--glow); }
#auth { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--void); z-index: 20; }
#auth[hidden] { display: none; }
#authbox { width: min(360px, 86vw); display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid rgba(124, 214, 214, 0.25); border-radius: 4px; }
.authtitle { color: var(--glow); font-size: 16px; letter-spacing: 0.2em; text-shadow: 0 0 10px var(--glow); }
.authsub { color: rgba(252, 250, 242, 0.45); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; margin-top: -6px; }
#auth input { background: transparent; border: none; border-bottom: 1px solid rgba(252, 250, 242, 0.15); color: var(--ivory); font-family: var(--font); font-size: 15px; padding: 8px 2px; outline: none; }
#auth input:focus { border-bottom-color: var(--glow); }
.authrow { display: flex; gap: 10px; margin-top: 8px; }
#auth button { flex: 1; background: var(--glow); color: var(--void); border: none; border-radius: 3px; font-family: var(--font); font-size: 13px; padding: 9px; cursor: pointer; transition: 0.2s; }
#auth button:hover { box-shadow: 0 0 10px var(--glow); }
#auth button.ghost { background: transparent; color: var(--glow); border: 1px solid rgba(124, 214, 214, 0.3); }
#authmsg { color: var(--warn); font-size: 12px; min-height: 16px; }
#graph { position: fixed; inset: 0; background: var(--void); z-index: 15; }
#graph[hidden] { display: none; }
#graphcanvas { display: block; width: 100vw; height: 100vh; cursor: grab; }
#graphbar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; font-size: 11px; color: var(--glow); letter-spacing: 0.08em; }
#graphclose { background: transparent; border: 1px solid rgba(124, 214, 214, 0.3); color: var(--glow); border-radius: 3px; font-family: var(--font); font-size: 11px; padding: 5px 10px; cursor: pointer; }
#graphclose:hover { box-shadow: 0 0 8px var(--glow); }
#graphdetail { position: fixed; bottom: 24px; left: 24px; max-width: 360px; white-space: pre-wrap; color: var(--ivory); font-size: 12px; border-left: 1px solid var(--glow); padding: 8px 12px; background: rgba(10, 11, 12, 0.7); }
#inputrow { display: flex; align-items: center; border-top: 1px solid rgba(252, 250, 242, 0.1); padding-top: 16px; margin-top: 12px; }
#prompt { flex: 1; background: transparent; border: none; color: var(--ivory); font-family: var(--font); font-size: 16px; outline: none; }
#cursor { display: inline-block; width: 8px; height: 1.1em; background: var(--glow); margin-left: 2px; vertical-align: middle; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; }
  #spine { display: none; }
  #main { padding: 20px; }
}

/* --- Action buttons: one-click taps BB needs from Gareth (deploy approve, --- */
/* --- start session, etc.) so he never types /delegate approve <id>.       --- */
.action { margin-bottom: 18px; border-left: 1px solid var(--glow); padding: 8px 0 8px 12px; }
.action-title { color: var(--glow); font-size: 14px; margin-bottom: 4px; }
.action-desc { color: var(--ivory); opacity: 0.75; font-size: 13px; margin-bottom: 10px; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; }
button.act { background: var(--glow); color: var(--void); border: none; border-radius: 3px;
  font-family: var(--font); font-size: 13px; padding: 9px 18px; cursor: pointer;
  transition: 0.2s; letter-spacing: 0.03em; }
button.act:hover { box-shadow: 0 0 10px var(--glow); }
button.act:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
button.act.high { background: var(--alert); }
button.act.high:hover { box-shadow: 0 0 10px var(--alert); }
button.act.medium { background: var(--warn); }
button.act.medium:hover { box-shadow: 0 0 10px var(--warn); }
button.act.ghost { background: transparent; color: var(--glow); border: 1px solid rgba(124, 214, 214, 0.3); }
button.act.ghost:hover { box-shadow: 0 0 8px var(--glow); }