/* ============================================================
   BrainChain · app-components.css
   bc-pane · bc-statusbar · bc-flykey · bc-map · cockpit chrome
============================================================ */

/* ---------- Cockpit container ---------- */
.bc-cockpit {
  background: var(--bc-bg-primary);
  border: 1px solid var(--bc-border-soft);
  border-radius: var(--bc-radius-xl);
  overflow: hidden;
  box-shadow: var(--bc-shadow-xl);
  position: relative;
  transform-style: preserve-3d;
  perspective: 1200px;
}
.bc-cockpit__titlebar {
  height: 28px;
  background: rgba(18,18,18,0.94);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 var(--bc-space-3);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  color: var(--bc-text-tertiary);
  gap: var(--bc-space-2);
}
.bc-cockpit__titlebar .right { margin-left: auto; display: flex; gap: var(--bc-space-2); color: var(--bc-text-muted); }
.bc-cockpit__header {
  height: 48px;
  background: var(--bc-bg-secondary);
  border-bottom: 1px solid var(--bc-border-soft);
  display: flex;
  align-items: center;
  padding: 0 var(--bc-space-3);
  gap: var(--bc-space-2);
}
.bc-cockpit__header .seg {
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  letter-spacing: var(--bc-ls-wide);
  text-transform: uppercase;
  color: var(--bc-text-tertiary);
  padding: var(--bc-space-1) var(--bc-space-2);
  border-radius: var(--bc-radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bc-border-soft);
}
.bc-cockpit__header .seg--accent { color: var(--bc-accent-light); background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.25); }
.bc-cockpit__header .seg svg { width: 11px; height: 11px; margin-right: 4px; vertical-align: -2px; }
.bc-cockpit__header .spacer { flex: 1; }
.bc-cockpit__header .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-border-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-accent-light);
}
.bc-cockpit__header .avatar svg { width: 14px; height: 14px; }

.bc-cockpit__panes {
  display: grid;
  background: var(--bc-bg-void);
  gap: 1px;
  /* Hard-cap each row so streaming text can't expand the cockpit —
     panes are flex columns with overflow:hidden, so trimming stays in place. */
}
.bc-cockpit__panes--2col { grid-template-columns: 1fr 1fr; height: 420px; }
.bc-cockpit__panes--2x2  { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 560px; }

.bc-cockpit__statusbar {
  height: 24px;
  background: var(--bc-bg-secondary);
  border-top: 1px solid var(--bc-border-soft);
  display: flex;
  align-items: center;
  gap: var(--bc-space-3);
  padding: 0 var(--bc-space-3);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  color: var(--bc-text-tertiary);
  overflow: hidden;
  white-space: nowrap;
}
.bc-cockpit__statusbar .sep { color: var(--bc-text-muted); }
.bc-cockpit__statusbar .green { color: var(--bc-success); }

/* ---------- Pane ---------- */
.bc-pane {
  background: var(--bc-bg-void);
  display: flex;
  flex-direction: column;
  min-height: 0;          /* grid/flex child: allow shrink so children don't push */
  min-width: 0;
  position: relative;
  border: 1px solid transparent;
  transition: border-color 200ms;
  overflow: hidden;       /* anything bigger than the row gets clipped */
}
.bc-pane[data-focused="true"] {
  border-color: var(--bc-accent);
  box-shadow: inset 0 0 0 1px rgba(124,58,237,0.4);
}
.bc-pane__header {
  height: 26px;
  background: var(--bc-bg-secondary);
  border-bottom: 1px solid var(--bc-border-soft);
  display: flex;
  align-items: center;
  padding: 0 var(--bc-space-2);
  gap: var(--bc-space-2);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  letter-spacing: 0.02em;
}
.bc-pane__header .ident {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--bc-text-tertiary);
}
.bc-pane__header .agent-chip {
  font-weight: var(--bc-fw-semibold);
  padding: 1px 6px;
  border-radius: var(--bc-radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--bc-ls-wide);
}
.bc-pane__header .id { color: var(--bc-text-muted); }
.bc-pane__header .right { margin-left: auto; display: flex; gap: 4px; color: var(--bc-text-muted); }
.bc-pane__header .right svg { width: 11px; height: 11px; }

.bc-pane[data-agent="claude"]   .agent-chip { background: rgba(194,65,12,0.18);  color: #fb923c; }
.bc-pane[data-agent="codex"]    .agent-chip { background: rgba(13,148,136,0.18); color: #2dd4bf; }
.bc-pane[data-agent="gemini"]   .agent-chip { background: rgba(59,130,246,0.18); color: #60a5fa; }
.bc-pane[data-agent="browser"]  .agent-chip { background: rgba(59,130,246,0.18); color: #60a5fa; }
.bc-pane[data-agent="terminal"] .agent-chip { background: rgba(16,185,129,0.18); color: var(--bc-success); }

.bc-pane__subhead {
  padding: 0 var(--bc-space-2);
  height: 20px;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--bc-border-soft);
  display: flex; align-items: center;
  gap: var(--bc-space-2);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-9);
  color: var(--bc-text-muted);
}

.bc-pane__body {
  flex: 1 1 0;
  min-height: 0;          /* critical for flex child overflow:hidden to actually clip */
  padding: var(--bc-space-3);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-11);
  line-height: 1.55;
  color: var(--bc-text-secondary);
  overflow: hidden;
  position: relative;
}
.bc-pane__body .line { white-space: pre-wrap; }
.bc-pane__body .line .ok { color: var(--bc-success); }
.bc-pane__body .line .err { color: var(--bc-error); }
.bc-pane__body .line .warn { color: var(--bc-warning); }
.bc-pane__body .line .accent { color: var(--bc-accent-light); }
.bc-pane__body .line .muted { color: var(--bc-text-muted); }
.bc-pane__body .line .diff-add { color: var(--bc-success); }
.bc-pane__body .line .diff-rem { color: var(--bc-error); }
.bc-pane__body .ruler {
  color: var(--bc-text-muted); opacity: 0.7; margin: 6px 0;
}
.bc-pane__body .prompt {
  margin-top: 8px; color: var(--bc-text-tertiary);
  border-top: 1px dashed var(--bc-border-soft); padding-top: 6px;
}
.bc-pane__body .cursor::after {
  content: "▍"; display: inline-block; color: var(--bc-accent-light);
  animation: bc-blink 1s steps(2) infinite;
}
@keyframes bc-blink { 50% { opacity: 0; } }

.bc-pane__footer {
  border-top: 1px solid var(--bc-border-soft);
  padding: var(--bc-space-1_5) var(--bc-space-2);
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-9);
  color: var(--bc-text-muted);
  letter-spacing: 0.02em;
}
.bc-pane__footer .right { margin-left: auto; display: flex; gap: var(--bc-space-2); }
.bc-pane__footer .tok { color: var(--bc-accent-light); }
.bc-pane__footer .cost { color: var(--bc-warning); }

/* Browser pane chrome */
.bc-pane--browser .bc-pane__addressbar {
  height: 24px;
  border-bottom: 1px solid var(--bc-border-soft);
  display: flex; align-items: center; gap: var(--bc-space-2);
  padding: 0 var(--bc-space-2);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-9);
  color: var(--bc-text-tertiary);
}
.bc-pane--browser .bc-pane__addressbar .url {
  flex: 1;
  background: var(--bc-bg-tertiary);
  border-radius: var(--bc-radius-sm);
  padding: 2px 6px;
  color: var(--bc-info);
}
.bc-browser-content {
  background: white;
  color: #111;
  margin: var(--bc-space-2);
  border-radius: var(--bc-radius-sm);
  padding: var(--bc-space-3);
  flex: 1;
  font-family: var(--bc-font-sans);
  font-size: var(--bc-fs-11);
  color: #1f2937;
  overflow: hidden;
}
.bc-browser-content h3 { font-size: var(--bc-fs-13); margin-bottom: 4px; color: #111; }
.bc-browser-content .row { display: flex; gap: 6px; align-items: center; font-size: var(--bc-fs-10); color: #6b7280; }

/* ---------- Faux mouse cursor in cockpit ---------- */
.bc-fauxcursor {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 5;
  transform: translate(-2px, -2px);
  transition: opacity 200ms;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.bc-fauxcursor svg { width: 100%; height: 100%; }

/* ---------- FlyKey window ---------- */
.bc-flykey {
  position: absolute;
  width: 380px;
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-xl);
  box-shadow: var(--bc-shadow-xl);
  z-index: 6;
  overflow: hidden;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
}
.bc-flykey[data-open="true"] {
  opacity: 1; pointer-events: auto;
}
.bc-flykey__title {
  height: 28px;
  display: flex; align-items: center;
  padding: 0 var(--bc-space-2);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  color: var(--bc-text-tertiary);
  border-bottom: 1px solid var(--bc-border-soft);
  letter-spacing: var(--bc-ls-wide);
}
.bc-flykey__input {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  padding: var(--bc-space-3);
  border-bottom: 1px solid var(--bc-border-soft);
}
.bc-flykey__input svg { width: 14px; height: 14px; color: var(--bc-text-tertiary); }
.bc-flykey__input input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--bc-text-primary);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-12);
}
.bc-flykey__input input::placeholder { color: var(--bc-text-muted); }
.bc-flykey__list {
  padding: var(--bc-space-1);
  max-height: 200px;
  overflow: hidden;
}
.bc-flykey__row {
  display: flex;
  align-items: center;
  padding: var(--bc-space-2);
  border-radius: var(--bc-radius-sm);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-11);
  color: var(--bc-text-secondary);
}
.bc-flykey__row .name { flex: 1; }
.bc-flykey__row .kbd { color: var(--bc-text-muted); }
.bc-flykey__row[data-active="true"] {
  background: rgba(124,58,237,0.15);
  color: var(--bc-text-primary);
}