:root {
  --bg: #0a0a0f;
  /* Project border colour — JS sets this from the project's chosen colour
     (projects-meta.json, same source as the BG-wash). All panel/chrome borders
     ("windows-bar", topbar, panels, panes) use it. Fallback = the legacy purple. */
  --proj-border: rgba(168, 85, 247, 0.55);
  /* Fixed per-lane colours (independent of project colour). Used ONLY on the
     lane's tab (always) + the terminal-window & textarea border WHEN that lane
     is the active main view. ROOT given as black by Henning; rest delegated. */
  --lane-root: #000000;
  --lane-app:  #3fb950;
  --lane-db:   #58a6ff;
  --lane-ext:  #f0883e;
  --lane-gui:  #db61dd;
  /* COORD er IKKE en fast lane-farve (Henning) → følger projekt-farven (--proj-border). */
  --text: #d4d4d8;
  /* Raised from #6b7280 (gray-500) → #9ca3af (gray-400): the dim labels were
     too dark to read on the dark bg + meta-tint + panel-transparency. One
     change lifts every secondary label globally (all GUIs). */
  --text-dim: #9ca3af;
  --footer-cyan: #22d3ee;
  --topbar-h: 38px;
  --grid-gap: 10px;
  --left-w: 480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Subtle scrollbars ---- */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }
*::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;
  font-size: 12px;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: var(--topbar-h) auto auto 1fr;
  height: 100vh;        /* fallback */
  height: 100dvh;       /* dynamic viewport — excludes mobile keyboard area */
}

/* Meta-space tint — a warm dark-amber/olive wash so the META workspace is
   instantly distinguishable from the cool near-black of project spaces. Meta-
   only: data-space is templated from __PROJECT__ ("meta" on meta, project-name
   elsewhere), so this rule never matches a project GUI. The WHOLE base is warmed
   (#15110a, clearly warm vs the cool #0a0a0f) — not just a top glow — and an
   amber radial adds depth up top. Still dark and tasteful; text (#d4d4d8) keeps
   full contrast since the base stays low-luminance. Henning can fine-tune. */
body[data-space="meta"] {
  background:
    radial-gradient(140% 110% at 50% 0%,
      rgba(214, 158, 58, 0.30), rgba(214, 158, 58, 0.10) 68%, transparent 100%),
    #201a0a;
}

/* Meta-only: make the big panel surfaces SEMI-transparent so the warm body
   tint bleeds through the whole UI, not just the gaps. ~0.65-0.7 alpha — clearly
   see-through but panels stay distinct, readable surfaces. Project spaces are
   untouched. color-mix keeps each lane's own hue while adding the transparency.
   (The terminal iframe stays opaque — ttyd paints its own bg; warming it needs
   a separate ttyd theme-alpha change.) Henning fine-tunes the alphas. */
body[data-space="meta"] .pane {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--panel-bg, #0d0b14) 68%, transparent) 0%,
    color-mix(in srgb, var(--panel-bg-2, #0a0810) 68%, transparent) 100%);
}
body[data-space="meta"] .topbar,
body[data-space="meta"] .preview-panel,
body[data-space="meta"] .metadata-panel,
body[data-space="meta"] .rail-panel,
body[data-space="meta"] .cord-compose {
  background: rgba(13, 11, 20, 0.66);
}
body[data-space="meta"] .main-tab.is-active { background: rgba(13, 11, 20, 0.58); }
body[data-space="meta"] .pane-head,
body[data-space="meta"] .metadata-head,
body[data-space="meta"] .preview-toolbar {
  background: rgba(22, 18, 31, 0.60);
}

/* Meta-only: the web-preview feature is removed from META — meta is the control
   center, there's no product to preview, and the 🌐 toggle broke meta's layout.
   Hide the button + panel + its resizer; app.js also skips wirePreviewPanel on
   meta. Project spaces keep preview fully (untouched). */
body[data-space="meta"] #preview-btn,
body[data-space="meta"] #preview-resizer,
body[data-space="meta"] #preview-panel { display: none !important; }

.topbar { grid-row: 1; }
.gh-status { grid-row: 2; }
.mobile-pills { grid-row: 3; }
.layout { grid-row: 4; min-height: 0; }

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d0b14;
  border-bottom: 1px solid var(--proj-border);   /* topbar bottom = projekt-farve (Henning) */
  padding: 0 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f4f4f5;
}

.brand .mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
}

.brand .name {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 13px;
}

.brand .project {
  color: #c084fc;
  font-size: 17px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: lowercase;
  margin-left: 4px;
  padding: 2px 10px 2px 8px;
  border: 0;
  background: transparent;
  border-left: 1px solid rgba(168, 85, 247, 0.3);
  text-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 120ms;
}
.brand .project::after {
  content: "▾";
  font-size: 11px;
  opacity: 0.7;
}
.brand .project:hover,
.brand .project[aria-expanded="true"] {
  background: rgba(168, 85, 247, 0.15);
}

/* Project switcher dropdown */
.project-menu {
  position: fixed;
  top: var(--topbar-h);
  left: 8px;
  min-width: 220px;
  background: #0d0b14;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 28px rgba(168, 85, 247, 0.15);
  z-index: 100;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.project-menu[hidden] { display: none; }

.project-menu-item {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 100ms;
}
.project-menu-item:hover { background: rgba(168, 85, 247, 0.18); }
.project-menu-item.is-current {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
}
.project-menu-item.is-current::before {
  content: "●";
  color: #10b981;
  font-size: 9px;
}
.project-menu-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 0 6px rgba(0, 0, 0, 0.4);
}
.project-menu-item:not(.is-current)::before {
  content: "○";
  color: var(--text-dim);
  font-size: 9px;
}

.topbar-actions { display: flex; gap: 8px; align-items: center; }

.topbar-actions .user-badge {
  color: #c084fc;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 3px;
  background: rgba(168, 85, 247, 0.06);
}
.topbar-actions .user-badge:empty { display: none; }

/* Fleet-wide weekly token-usage bar (topbar, all projects). Calibrated proxy
   for /usage — a "how close to the weekly rate-limit" signal. */
/* Per-project split bar — rolling 7-day share of fleet token-forbrug.
   Sits left of the UGE bar; the UGE bar keeps the margin-right:auto that
   pushes topbar-actions to the right edge. */
.fleet-split {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 14px;
  padding: 2px 8px;
  border: 1px solid rgba(168, 85, 247, 0.55);   /* tydeligere border (Henning) */
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  cursor: default;
  user-select: none;
}
.fleet-split[hidden] { display: none; }
.fleet-split-cap {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.fleet-split-track {
  display: flex;
  width: 180px;            /* +50% — Henning wants the 7D-split more prominent */
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.fleet-split-seg {
  height: 100%;
  min-width: 2px;           /* keep tiny projects visible */
  transition: flex-basis 320ms ease;
}
.fleet-split-seg + .fleet-split-seg {
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35);  /* hairline divider */
}
@media (max-width: 720px) {
  .fleet-split-track { width: 96px; }
}

.usage-meter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 0 10px;   /* sit just right of the split bar */
  padding: 2px 8px;
  border: 1px solid rgba(168, 85, 247, 0.55);   /* tydeligere border (Henning) */
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  cursor: default;
  user-select: none;
}
.usage-meter[hidden] { display: none; }
.usage-meter.is-stale { opacity: 0.5; }
.usage-cap {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.usage-track {
  width: 42px;             /* -50% — de-emphasise the Anthropic weekly bar vs the 7D-split */
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.usage-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: #10b981;
  transition: width 320ms ease, background 320ms ease;
}
.usage-fill[data-level="yellow"] { background: #fbbf24; }
.usage-fill[data-level="red"]    { background: #ef4444; }
.usage-pct {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  min-width: 30px;
  text-align: right;
}
.usage-pct[data-level="yellow"] { color: #fbbf24; }
.usage-pct[data-level="red"]    { color: #ef4444; }
.usage-reset {
  font-size: 9px;
  color: var(--text-dim);
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.usage-reset-btn {
  border: 1px solid rgba(168, 85, 247, 0.25);
  background: transparent;
  color: var(--text-dim);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1;
  padding: 1px 5px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.usage-reset-btn:hover {
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.1);
}
.usage-meter.is-manual .usage-cap { color: #c084fc; }   /* anchored to a manual marker */
@media (max-width: 720px) {
  .usage-reset { display: none; }       /* keep it compact on mobile */
  .usage-track { width: 52px; }
}

/* ---- Live preview panel (right side) ---- */
.preview-resizer {
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 6;
}
.preview-resizer[hidden] { display: none; }
.preview-resizer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.05);
}
.preview-resizer:hover::before { background: rgba(168, 85, 247, 0.55); width: 2px; }

/* Vertical stack inside the right column: preview (flex:1) + metadata (auto) */
.right-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 0;
}
.right-stack[hidden] { display: none; }
/* Item 3 (Henning): ~10px luft mellem main-slot og højre-rail-panelerne. META-
   ONLY + på SELVE containeren (.right-stack) — IKKE på delt .preview-panel, så
   det ikke lækker til projekters web-preview-layout. Henning finjusterer i review. */
body[data-space="meta"] .right-stack { padding-left: 10px; }

.preview-panel {
  display: flex;
  flex-direction: column;
  background: #0d0b14;
  border: 1px solid var(--proj-border);   /* panel-border = projekt-farve */
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
}
.preview-panel[hidden] { display: none; }

.preview-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: #16121f;
  border-bottom: 1px solid rgba(168, 85, 247, 0.30);
  flex-shrink: 0;
}
.preview-toolbar .ghost {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.preview-toolbar .ghost:hover {
  background: rgba(168, 85, 247, 0.12);
  color: #fff;
}
.preview-url {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 11.5px;
  outline: none;
  min-width: 0;
}
.preview-url:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.18);
}
.preview-auto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
}
.preview-auto input { cursor: pointer; }
.preview-zoom {
  width: 80px;
  cursor: pointer;
}
.preview-zoom-val {
  color: var(--text-dim);
  font-size: 10px;
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.preview-frame-wrap {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  background: #050507;
}
.preview-frame {
  border: 0;
  background: #fff;
  /* CSS-vars driven by JS so iframe stays the right size at any zoom */
  width: var(--preview-iframe-w, 100%);
  height: var(--preview-iframe-h, 100%);
  transform-origin: top left;
  transform: scale(var(--preview-zoom, 1));
}
.preview-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background: #050507;
}
.preview-hint code {
  background: rgba(168, 85, 247, 0.12);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: inherit;
  color: #c084fc;
}
.preview-hint[hidden] { display: none; }

/* Resizer between preview-panel and metadata-panel (horizontal) */
.right-stack-resizer {
  height: 8px;
  cursor: row-resize;
  position: relative;
  background: transparent;
  flex-shrink: 0;
}
.right-stack-resizer[hidden] { display: none; }
.right-stack-resizer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: rgba(255, 255, 255, 0.05);
}
.right-stack-resizer:hover::before {
  background: rgba(168, 85, 247, 0.55);
  height: 2px;
  margin-top: -1px;
}

/* Metadata panel — compact project info, easy to extend with new fields */
.metadata-panel {
  display: flex;
  flex-direction: column;
  background: #0d0b14;
  border: 1px solid var(--proj-border);   /* panel-border = projekt-farve */
  border-radius: 8px;
  overflow: hidden;
  min-height: 100px;
  height: var(--metadata-h, 180px);
  flex-shrink: 0;
}
.metadata-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #16121f;
  border-bottom: 1px solid rgba(168, 85, 247, 0.30);
  flex-shrink: 0;
}
.metadata-head .prompt-icon {
  color: #a855f7;
  font-size: 13px;
}
.metadata-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f4f4f5;
}
.metadata-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 8px 12px;
  min-height: 0;
}
.metadata-list {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}
.metadata-list dt {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
  align-self: center;
  white-space: nowrap;
}
.metadata-list dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
  font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}

/* Project theme control — color-picker + indehaver (project-details panel). */
.project-theme {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(168, 85, 247, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-theme-label {
  flex: 0 0 78px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
}
.project-theme-color {
  flex: 0 0 auto;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.project-theme-color::-webkit-color-swatch-wrapper { padding: 2px; }
.project-theme-color::-webkit-color-swatch { border: 0; border-radius: 2px; }
.project-theme-hex {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text);
  text-transform: uppercase;
}
.project-theme-owner-display {
  flex: 1 1 0;
  min-width: 0;
  color: var(--text);
  font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}
.project-theme-status {
  font-size: 9.5px;
  min-height: 12px;
  color: var(--text-dim);
}
.project-theme-status[data-kind="ok"]  { color: #10b981; }
.project-theme-status[data-kind="err"] { color: #ef4444; }

/* ============================================================================
   Meta-rail — fleet + server-health dashboard (meta-only; see app.js gate).
   Lives at the top of the right-stack, above preview + project-details.
   ========================================================================== */
.meta-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  margin-bottom: 8px;
  flex: 1 1 0;          /* take the slack so fleet list can scroll */
}
.meta-rail[hidden] { display: none; }

.rail-panel {
  display: flex;
  flex-direction: column;
  background: #0d0b14;
  border: 1px solid var(--proj-border);   /* panel-border = projekt-farve */
  border-radius: 8px;
  overflow: hidden;
  min-height: 0;
}
#fleet-panel { flex: 1 1 0; }          /* fleet list grows + scrolls */
#health-panel { flex: 0 0 auto; }

/* .rail-head er omdøbt til .pane-head (Henning: ÉN konsistent klasse) — base-
   styling kommer nu fra .pane-head + .rail-panel .pane-head ovenfor. */
.rail-panel .pane-head .prompt-icon { font-size: 12px; }
.rail-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #f4f4f5;
}
.rail-headline {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
  font-family: ui-monospace, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-body {
  overflow-y: auto;
  padding: 6px 8px;
  min-height: 0;
}

/* ---- Health metrics ---- */
.health-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 5px;
  align-items: center;
  font-size: 10.5px;
}
.health-grid .hk {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
  white-space: nowrap;
}
.health-grid .hv {
  font-family: ui-monospace, monospace;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.health-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  min-width: 40px;
}
.health-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: #10b981;
  transition: width 240ms ease;
}
.health-bar[data-level="yellow"]::after { background: #fbbf24; }
.health-bar[data-level="red"]::after    { background: #ef4444; }
.health-num[data-level="green"]  { color: #10b981; }
.health-num[data-level="yellow"] { color: #fbbf24; }
.health-num[data-level="red"]    { color: #ef4444; }

.pm2-warn {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pm2-warn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}
.pm2-warn-row[data-kind="high-restarts"] {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.28);
  color: #fcd34d;
}
.pm2-ok {
  margin-top: 6px;
  font-size: 9.5px;
  color: var(--text-dim);
}

/* ---- Fleet groups + lane rows ---- */
.fleet-group { margin-bottom: 8px; }
.fleet-group:last-child { margin-bottom: 0; }
.fleet-group-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c084fc;
  padding: 2px 2px 4px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
  margin-bottom: 3px;
}
.fleet-lane {
  display: grid;
  grid-template-columns: 8px 38px 1fr auto auto;
  align-items: center;
  column-gap: 7px;
  padding: 3px 2px;
  font-size: 10.5px;
}
.fleet-lane.is-dormant { opacity: 0.42; }   /* dim sleeping/missing/0-weight */

/* Collapsed "+N dormant" fold line (per project). Clicking unfolds the dormant
   lane rows. A fully-dormant project shows just this one line (project name +
   count) so the panel scales as more projects spin up. */
.fleet-dormant-fold {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 2px 3px;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
}
.fleet-dormant-fold:hover { background: rgba(168, 85, 247, 0.08); }
.fleet-fold-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c084fc;
}
.fleet-fold-count {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.fleet-dormant-fold:hover .fleet-fold-count { color: var(--text); }
.fleet-dormant-fold.is-open .fleet-fold-count { color: #c084fc; }

.fleet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
  flex-shrink: 0;
}
.fleet-dot[data-status="idle"]     { background: #10b981; box-shadow: 0 0 5px rgba(16, 185, 129, 0.5); }
.fleet-dot[data-status="working"]  { background: #fbbf24; animation: status-pulse 1.4s ease-in-out infinite; }
.fleet-dot[data-status="sleeping"] { background: #3b82f6; }
.fleet-dot[data-status="missing"]  { background: #f87171; }
.fleet-dot[data-status="unknown"]  { background: #6b7280; }

.fleet-lane-name {
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
}
.fleet-gauge {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.fleet-gauge::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: #10b981;
  transition: width 240ms ease, background 240ms ease;
}
.fleet-gauge[data-level="yellow"]::after { background: #fbbf24; }
.fleet-gauge[data-level="red"]::after    { background: #ef4444; }
.fleet-bytes {
  font-family: ui-monospace, monospace;
  color: var(--text-dim);
  font-size: 9.5px;
  white-space: nowrap;
  text-align: right;
}
.fleet-ckpt {
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.10);
  color: #d8b4fe;
  border-radius: 4px;
  font-size: 9.5px;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.fleet-ckpt:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.22);
  border-color: #a855f7;
  color: #fff;
}
.fleet-ckpt:disabled { opacity: 0.3; cursor: default; }
.fleet-ckpt.is-busy { color: #fbbf24; border-color: rgba(251, 191, 36, 0.5); }
.fleet-ckpt.is-done { color: #10b981; border-color: rgba(16, 185, 129, 0.5); }
.fleet-ckpt.is-error { color: #f87171; border-color: rgba(239, 68, 68, 0.5); }

.fleet-err, .health-err {
  font-size: 10px;
  color: #f87171;
  padding: 4px 2px;
}

/* Visual hint while a file is being dragged over the window (fallback drop) */
body.is-window-dragover::before {
  content: "Slip filen for at uploade til aktiv lane";
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.07);
  border: 2px dashed rgba(168, 85, 247, 0.55);
  box-shadow: inset 0 0 60px rgba(168, 85, 247, 0.08);
  z-index: 9999;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

/* Refresh button + dropdown (admin only, meta only) */
.refresh-wrap { position: relative; display: inline-flex; }
.refresh-wrap[hidden] { display: none; }
.refresh-btn {
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none !important;
}
.refresh-btn:hover {
  background: rgba(168, 85, 247, 0.12);
  color: #fff !important;
  border-color: #a855f7 !important;
}
.refresh-btn[aria-expanded="true"] { background: rgba(168, 85, 247, 0.15); }
.refresh-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: #0d0b14;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 24px rgba(168, 85, 247, 0.12);
  z-index: 120;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.refresh-menu[hidden] { display: none; }
.refresh-menu button {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 3px;
  text-align: left;
  cursor: pointer;
  transition: background 100ms;
}
.refresh-menu button:hover { background: rgba(168, 85, 247, 0.18); color: #fff; }

.topbar-actions .logout-form { display: inline-flex; margin: 0; padding: 0; }
.topbar-actions .logout-form .logout-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
}
.topbar-actions .logout-form .logout-btn:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fff;
  border-color: #f87171;
}

button.ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 120ms;
}

button.ghost:hover { color: var(--text); }

/* Install-app button (only visible when beforeinstallprompt has fired) */
.install-btn {
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #c084fc;
}
.install-btn:hover {
  background: rgba(168, 85, 247, 0.12);
  color: #fff;
}

/* Mic button (voice dictation toggle) */
.mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mic-btn .mic-state {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.mic-btn.is-on {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.08);
  animation: mic-pulse 1.8s ease-in-out infinite;
}
.mic-btn.is-on .mic-state { color: #f87171; }
.mic-btn.is-error {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
}
.mic-btn.is-error .mic-state { color: #fbbf24; }

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18); }
}

/* ---- Layout: left stack + main + optional preview ---- */
.layout {
  display: grid;
  grid-template-columns: var(--left-w) 14px 1fr;
  gap: 0;
  padding: var(--grid-gap);
  min-width: 0;
  min-height: 0;
}
/* Preview panel docked on the right — columns become 5-wide when open */
body.preview-open .layout {
  grid-template-columns: var(--left-w) 14px 1fr 8px var(--preview-w, 480px);
}

/* META-only: the right-stack (fleet/health rail + project-details) is ALWAYS
   docked, independent of the preview toggle — it's Henning's persistent token-
   værn. When preview closes it's a narrow rail; when preview opens it widens to
   the preview width (preview-panel takes over inside it). The preview-open rule
   above already gives the 5-col layout, so we only add the closed-state column.
   The preview-resizer is display:none when closed and drops out of the grid
   flow, so right-stack lands in col 4. Project instances keep the original
   preview-gated behaviour untouched. */
body[data-space="meta"] .layout {
  grid-template-columns: var(--left-w) 14px 1fr var(--meta-rail-w, 320px);
}

/* Resizer column — fills the visual gap between left-stack and main-slot */
.resizer {
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 6;
  transition: background 120ms;
}
/* Thin vertical line down the middle as visual divider */
.resizer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.05);
  transition: background 120ms, width 120ms;
}
/* Grip indicator (centered short bar so user knows it's draggable) */
.resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 32px;
  margin: -16px 0 0 -2px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  transition: background 120ms;
}
.resizer:hover,
body.is-resizing .resizer { background: rgba(168, 85, 247, 0.06); }
.resizer:hover::before,
body.is-resizing .resizer::before {
  background: rgba(168, 85, 247, 0.55);
  width: 2px;
  margin-left: -1px;
}
.resizer:hover::after,
body.is-resizing .resizer::after { background: var(--text); }

/* While dragging: globally show col-resize cursor + disable iframe events so
   the mousemove doesn't get swallowed by the terminal iframe under the cursor. */
body.is-resizing {
  cursor: col-resize !important;
  user-select: none;
}
body.is-resizing iframe { pointer-events: none; }

.left-stack {
  display: grid;
  /* Top row = chat-panel takes free space; bottom row = lane-stack (compact) */
  grid-template-rows: minmax(180px, 1fr) auto;
  gap: var(--grid-gap);
  min-height: 0;
  min-width: 0;
}

/* Compact stack of lane-panes below the chat panel */
.lane-stack {
  display: grid;
  grid-auto-rows: minmax(56px, max-content);
  gap: var(--grid-gap);
  min-height: 0;
  min-width: 0;
}

/* Lane-stack panes: header + 1 line of msg-view + tiny footer */
.lane-stack .pane-head { padding: 5px 10px; }
.lane-stack .pane-body { max-height: 22px; overflow: hidden; }
.lane-stack .msg-list { padding: 2px 8px; gap: 0; }
.lane-stack .pane-footer { padding: 3px 10px; font-size: 9.5px; }
.lane-stack .pane[data-lane="root"] { min-height: 0; }

.main-slot {
  display: grid;
  grid-template-rows: auto 1fr auto;   /* tabs | content | cord-compose */
  min-height: 0;
  min-width: 0;
}

/* ---- Main tabs: one per lane + ROOT ---- */
.main-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 4px 0;
  background: transparent;   /* fane-bar transparent → projekt-BG-wash skinner igennem mellem tabs */
  border-bottom: 1px solid var(--proj-border);   /* 'windows-bar' = projekt-farve (Henning) */
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 0;
}
.main-tabs::-webkit-scrollbar { display: none; }

.main-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(13, 11, 20, 0.62);   /* tabs = mørke blokke mod den transparente bar (wash bag) */
  border: 1px solid transparent;
  border-bottom: 0;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
  margin-bottom: -1px;
  transition: background 100ms, color 100ms;
}
.main-tab .prompt-icon { font-size: 13px; opacity: 0.75; }
.main-tab:hover { color: var(--text); background: rgba(168, 85, 247, 0.08); }
.main-tab.is-active {
  color: #fff;
  background: #0d0b14;
}
/* Lane-farve på fanebladet ALTID (uafhængig af projekt-farve) — Henning. */
.main-tab[data-lane="root"]  { border-color: var(--lane-root); }
.main-tab[data-lane="app"]   { border-color: var(--lane-app); }
.main-tab[data-lane="db"]    { border-color: var(--lane-db); }
.main-tab[data-lane="ext"]   { border-color: var(--lane-ext); }
.main-tab[data-lane="gui"]   { border-color: var(--lane-gui); }
.main-tab[data-lane="coord"] { border-color: var(--proj-border); }   /* coord = projekt-farve */

.main-tab[data-lane="ext"].is-active   { border-color: var(--lane-ext); }
.main-tab[data-lane="ext"].is-active .prompt-icon   { color: #a855f7; opacity: 1; }
.main-tab[data-lane="db"].is-active    { border-color: var(--lane-db); }
.main-tab[data-lane="db"].is-active .prompt-icon    { color: #22d3ee; opacity: 1; }
.main-tab[data-lane="gui"].is-active   { border-color: var(--lane-gui); }
.main-tab[data-lane="gui"].is-active .prompt-icon   { color: #10b981; opacity: 1; }
.main-tab[data-lane="app"].is-active   { border-color: var(--lane-app); }
.main-tab[data-lane="app"].is-active .prompt-icon   { color: #f59e0b; opacity: 1; }
.main-tab[data-lane="coord"].is-active { border-color: var(--proj-border); }
.main-tab[data-lane="coord"].is-active .prompt-icon { color: #ec4899; opacity: 1; }
.main-tab[data-lane="root"].is-active  { border-color: var(--lane-root); }
.main-tab[data-lane="root"].is-active .prompt-icon  { color: #ef4444; opacity: 1; }

/* Active lane's TERMINAL-WINDOW + TEXTAREA border = lane-farve, KUN når lanen
   er den aktive main-view (body[data-main-lane] sættes af JS i swapToMain).
   Alle andre borders (paneler/windows-bar) forbliver projekt-farve. */
body[data-main-lane="root"]  .main-content .pane { --border-col: var(--lane-root); }
body[data-main-lane="app"]   .main-content .pane { --border-col: var(--lane-app); }
body[data-main-lane="db"]    .main-content .pane { --border-col: var(--lane-db); }
body[data-main-lane="ext"]   .main-content .pane { --border-col: var(--lane-ext); }
body[data-main-lane="gui"]   .main-content .pane { --border-col: var(--lane-gui); }
/* coord = projekt-farve: EKSPLICIT override — ellers falder pane'en tilbage på
   sin indbyggede per-lane --border-col (.pane[data-lane=coord], gammel pink),
   IKKE --proj-border. (Bug fundet af Henning.) */
body[data-main-lane="coord"] .main-content .pane { --border-col: var(--proj-border); }
/* Textarea: cord-text (meta's CORD-composer) + per-lane compose-text (projekter). */
body[data-main-lane="root"]  .cord-text,
body[data-main-lane="root"]  .main-content .compose-text { border-color: var(--lane-root); }
body[data-main-lane="app"]   .cord-text,
body[data-main-lane="app"]   .main-content .compose-text { border-color: var(--lane-app); }
body[data-main-lane="db"]    .cord-text,
body[data-main-lane="db"]    .main-content .compose-text { border-color: var(--lane-db); }
body[data-main-lane="ext"]   .cord-text,
body[data-main-lane="ext"]   .main-content .compose-text { border-color: var(--lane-ext); }
body[data-main-lane="gui"]   .cord-text,
body[data-main-lane="gui"]   .main-content .compose-text { border-color: var(--lane-gui); }
body[data-main-lane="coord"] .cord-text,
body[data-main-lane="coord"] .main-content .compose-text { border-color: var(--proj-border); }

.main-tab .tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

/* Context-gauge: thin horizontal fill at the bottom of each tab. Width
   reflects transcript bytes / CTX_FULL; color reflects threshold level.
   Reads --ctx-width / data-level set by pollLaneStatus(). */
.main-tab { position: relative; }
.main-tab .tab-ctx {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  pointer-events: none;
}
.main-tab .tab-ctx::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--ctx-width, 0%);
  background: #10b981;
  transition: width 220ms ease, background 220ms ease;
}
.main-tab .tab-ctx[data-level="yellow"]::after { background: #fbbf24; }
.main-tab .tab-ctx[data-level="red"]::after    { background: #ef4444; }
.main-tab .tab-ctx[data-level=""]::after,
.main-tab .tab-ctx:not([data-level])::after    { background: transparent; }

/* Non-interactive divider label between primary tabs (coord, root) and
   the remaining lanes — purely a visual hint. */
.main-tab-divider {
  display: inline-flex;
  align-items: center;
  padding: 7px 6px 7px 28px;
  margin-bottom: -1px;
  color: rgba(255, 255, 255, 0.82);   /* lys near-white (ikke ren hvid) — Henning */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: italic;
  cursor: default;
  opacity: 0.95;
  margin-left: 8px;            /* border-left fjernet (Henning) */
  user-select: none;
  flex-shrink: 0;
}
.main-tab .tab-dot[data-status="idle"]     { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.55); }
.main-tab .tab-dot[data-status="working"]  { background: #fbbf24; animation: status-pulse 1.4s ease-in-out infinite; }
.main-tab .tab-dot[data-status="sleeping"] { background: #3b82f6; }
.main-tab .tab-dot[data-status="missing"]  { background: #f87171; }
.main-tab .tab-dot[data-status="unknown"]  { background: #6b7280; }

.main-content {
  display: grid;
  min-height: 0;
  min-width: 0;
}

/* When pane lives inside main-content (tab body): show ONLY the terminal.
   Tab header replaces pane-head; chat-panel/CORD replaces per-lane compose. */
.main-content .pane-head,
.main-content .pane-footer,
.main-content .compose-area,
.main-content .pane-body > .msg-view,
.main-content .pane-body > .blank-view {
  display: none !important;
}
.main-content .pane-body { display: grid; }
.main-content .pane-body > .term-view { display: block !important; grid-column: 1; grid-row: 1; }
.main-content .pane { border-radius: 0 0 8px 8px; }   /* flat top to meet tabs row */

/* Hide the lane-stack entirely — lanes now live in main-tabs */
.lane-stack { display: none !important; }
.left-stack { grid-template-rows: 1fr !important; }   /* chat-panel takes full height */

/* ---- CORD compose: persistent input at bottom of main-slot ---- */
.cord-compose {
  display: block;              /* textarea fuld bredde (matcher terminal/main-content) */
  position: relative;         /* anker for den overlejrede send-knap */
  /* Vandret padding FJERNET så textarea'en flugter med terminal-vinduets bredde
     (terminalen er edge-to-edge i main-slot). Lodret padding-top = den ønskede
     luft mellem terminal og textarea. */
  padding: 10px 0 0;
  background: #0d0b14;
  border-top: 1px solid var(--proj-border);   /* coord-panel = projekt-farve (Q2) */
  box-shadow: 0 -8px 24px rgba(236, 72, 153, 0.06);
  flex-shrink: 0;
}
.cord-compose[hidden] { display: none; }
.cord-text {
  display: block;
  width: 100%;                /* fuld bredde */
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  border: 1px solid rgba(236, 72, 153, 0.35);
  border-radius: 6px;
  padding: 8px 10px 38px;     /* ekstra bund-plads til send-knappen i nederste-højre hjørne */
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  resize: none;
  outline: none;
  /* ~5 lines visible by default; auto-grow handler caps at 30vh */
  min-height: 110px;
  max-height: 30vh;
  transition: border-color 120ms, box-shadow 120ms;
}
.cord-text:focus {
  border-color: #ec4899;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.18);
}

/* Voice-listening glow — applied to whichever textarea is the active dictation
   target (cord-text on coord-instances, per-lane .compose-text otherwise).
   Toggled by JS as long as sr.wantOn is true and a target exists. */
.compose-text.is-listening,
.cord-text.is-listening,
.chat-text.is-listening {
  border-color: #f472b6 !important;
  animation: listening-pulse 1.6s ease-in-out infinite;
}
@keyframes listening-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.20),
                0 0 12px rgba(244, 114, 182, 0.35),
                inset 0 0 10px rgba(244, 114, 182, 0.06);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.34),
                0 0 24px rgba(244, 114, 182, 0.60),
                inset 0 0 16px rgba(244, 114, 182, 0.12);
  }
}
.cord-send {
  position: absolute;          /* overlejret i textarea'ens nederste-højre hjørne */
  right: 18px;
  bottom: 16px;
  background: #ec4899;
  color: #0a0a0f;
  border: 0;
  border-radius: 5px;
  padding: 4px 11px;           /* mindre (Henning) */
  font-family: inherit;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 120ms;
  z-index: 1;
}
.cord-send:hover:not(:disabled) { filter: brightness(1.12); }
.cord-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Pane ---- */
.pane {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--panel-bg, #0d0b14) 0%, var(--panel-bg-2, #0a0810) 100%);
  border: 1px solid var(--border-col, var(--proj-border));   /* default projekt-farve; aktiv lane overstyrer --border-col */
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  box-shadow:
    0 0 0 1px var(--accent-tint, rgba(168, 85, 247, 0.08)),
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 0 36px var(--accent-bloom, rgba(168, 85, 247, 0.05));
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.pane.in-main {
  box-shadow:
    0 0 0 1px var(--accent-tint, rgba(168, 85, 247, 0.16)),
    0 24px 48px rgba(0, 0, 0, 0.55),
    0 0 64px var(--accent-bloom, rgba(168, 85, 247, 0.12));
}

/* Per-lane palettes */
.pane[data-lane="ext"] {
  --accent: #a855f7;
  --accent-dim: #7c3aed;
  --accent-glow: rgba(168, 85, 247, 0.35);
  --accent-tint: rgba(168, 85, 247, 0.08);
  --accent-bloom: rgba(168, 85, 247, 0.06);
  --border-col: rgba(168, 85, 247, 0.45);
  --header-bg: #16121f;
  --panel-bg: #0d0b14;
  --panel-bg-2: #0a0810;
  --footer-line: rgba(168, 85, 247, 0.18);
}
.pane[data-lane="db"] {
  --accent: #22d3ee;
  --accent-dim: #0891b2;
  --accent-glow: rgba(34, 211, 238, 0.35);
  --accent-tint: rgba(34, 211, 238, 0.08);
  --accent-bloom: rgba(34, 211, 238, 0.06);
  --border-col: rgba(34, 211, 238, 0.45);
  --header-bg: #0d1a1f;
  --panel-bg: #0a1318;
  --panel-bg-2: #070f13;
  --footer-line: rgba(34, 211, 238, 0.18);
}
.pane[data-lane="gui"] {
  --accent: #10b981;
  --accent-dim: #047857;
  --accent-glow: rgba(16, 185, 129, 0.35);
  --accent-tint: rgba(16, 185, 129, 0.08);
  --accent-bloom: rgba(16, 185, 129, 0.06);
  --border-col: rgba(16, 185, 129, 0.45);
  --header-bg: #0c1815;
  --panel-bg: #0a130f;
  --panel-bg-2: #07100c;
  --footer-line: rgba(16, 185, 129, 0.18);
}
.pane[data-lane="app"] {
  --accent: #f59e0b;
  --accent-dim: #b45309;
  --accent-glow: rgba(245, 158, 11, 0.35);
  --accent-tint: rgba(245, 158, 11, 0.08);
  --accent-bloom: rgba(245, 158, 11, 0.06);
  --border-col: rgba(245, 158, 11, 0.45);
  --header-bg: #1a160c;
  --panel-bg: #141009;
  --panel-bg-2: #100c07;
  --footer-line: rgba(245, 158, 11, 0.18);
}
.pane[data-lane="coord"] {
  --accent: #ec4899;
  --accent-dim: #be185d;
  --accent-glow: rgba(236, 72, 153, 0.35);
  --accent-tint: rgba(236, 72, 153, 0.08);
  --accent-bloom: rgba(236, 72, 153, 0.06);
  --border-col: rgba(236, 72, 153, 0.45);
  --header-bg: #1a0d16;
  --panel-bg: #140a10;
  --panel-bg-2: #100709;
  --footer-line: rgba(236, 72, 153, 0.18);
}
.pane[data-lane="root"] {
  --accent: #ef4444;
  --accent-dim: #b91c1c;
  --accent-glow: rgba(239, 68, 68, 0.35);
  --accent-tint: rgba(239, 68, 68, 0.08);
  --accent-bloom: rgba(239, 68, 68, 0.06);
  --border-col: rgba(239, 68, 68, 0.45);
  --header-bg: #1c0b0b;
  --panel-bg: #140808;
  --panel-bg-2: #100606;
  --footer-line: rgba(239, 68, 68, 0.18);
}
.pane[data-lane="chat"] {
  --accent: #f472b6;
  --accent-dim: #db2777;
  --accent-glow: rgba(244, 114, 182, 0.35);
  --accent-tint: rgba(244, 114, 182, 0.08);
  --accent-bloom: rgba(244, 114, 182, 0.06);
  --border-col: rgba(244, 114, 182, 0.45);
  --header-bg: #1a0f17;
  --panel-bg: #140a10;
  --panel-bg-2: #100707;
  --footer-line: rgba(244, 114, 182, 0.18);
}

/* ---- Chat panel (SMS-style bubbles + compose) ---- */
.chat-panel.pane {
  /* .pane already provides flex column + gradient bg + border */
  min-height: 0;
}
.chat-panel.pane.is-dragover {
  outline: 2px dashed rgba(244, 114, 182, 0.7);
  outline-offset: -4px;
}
.chat-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
  margin-left: 4px;
}
.presence-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4b5563;
  flex-shrink: 0;
  transition: background 200ms, box-shadow 200ms;
}
.presence-dot[data-state="online"] {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.65);
}
.presence-dot[data-state="away"]    { background: #3b82f6; }
.presence-dot[data-state="offline"] { background: #4b5563; }
.presence-sep { opacity: 0.4; }
/* Typing indicator — one or more chat-style bubbles with three pulsing dots,
   one bubble per active typer. Styled to match the corresponding sender's
   bubble vibe: gray for henning/maj (them-side), pink for claude. */
.chat-typing-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px;
  flex-shrink: 0;
  min-height: 0;
}
.chat-typing-list:empty {
  padding: 0;
}
.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  border-radius: 14px;
  width: max-content;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.typing-bubble-them {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.typing-bubble-claude {
  align-self: center;
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.40);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.08);
}
.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: typing-dot 1.3s ease-in-out infinite;
}
.typing-bubble-claude .typing-dot { background: #c084fc; }
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
.chat-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 82%;
}
.chat-msg-me { align-self: flex-end; align-items: flex-end; }
.chat-msg-them { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 7px 11px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-msg-me .chat-bubble {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-them .chat-bubble {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 4px;
}
/* Claude as 3rd sender — system-message look: centered, brand-purple tint */
.chat-msg-claude {
  align-self: center;
  align-items: center;
  max-width: 92%;
}
.chat-msg-claude .chat-bubble {
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.40);
  color: #e9d5ff;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
  font-style: italic;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.08);
}
.chat-msg-claude .chat-meta {
  color: #c084fc;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
  text-align: center;
}
/* Inline image in a chat bubble (cs-chat --img / cs-imagine output) */
.chat-img {
  display: block;
  max-width: 180px;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 10px;
  margin: 0 auto;
  cursor: zoom-in;
  background: rgba(0, 0, 0, 0.25);
}
.chat-bubble-text {
  display: block;
  margin-top: 6px;
}
.chat-bubble-text:first-child { margin-top: 0; }
.chat-msg-claude .chat-img { border: 1px solid rgba(168, 85, 247, 0.30); }
.chat-meta {
  font-size: 9.5px;
  color: var(--text-dim);
  padding: 0 4px;
  letter-spacing: 0.04em;
}
.chat-compose {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--footer-line);
  background: rgba(0, 0, 0, 0.25);
  align-items: flex-end;
  flex-shrink: 0;
}
.chat-text {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  resize: none;
  outline: none;
  min-height: 28px;
  max-height: 80px;
  transition: border-color 120ms;
}
.chat-text:focus { border-color: var(--accent); }
.chat-text:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-send {
  background: var(--accent);
  color: #0a0a0f;
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter 120ms;
}
.chat-send:hover:not(:disabled) { filter: brightness(1.12); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Quick-emoji row — single horizontal line below chat-compose.
   Overflow scrolls horizontally if it doesn't fit; no wrap, no vertical
   growth — keeps the chat-body's vertical real estate. */
.emoji-row {
  display: flex;
  gap: 2px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid var(--footer-line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
  flex-wrap: nowrap;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.emoji-row::-webkit-scrollbar { display: none; }
.emoji-btn {
  background: transparent;
  border: 0;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 100ms, transform 80ms;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.emoji-btn:hover { background: rgba(255, 255, 255, 0.08); }
.emoji-btn:active { transform: scale(0.9); }

/* ---- Header ---- */
.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--header-bg, #16121f);   /* fallback for rail-paneler (ingen --header-bg) */
  border-bottom: 1px solid var(--proj-border);   /* 'windows-bar' = projekt-farve (Henning) */
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background 120ms;
}
/* Rail-headers (tidl. .rail-head, nu konsistent .pane-head) er ikke klikbare
   paneler → ingen pointer-cursor; bevar ikon/titel-mellemrum. */
.rail-panel .pane-head { cursor: default; gap: 8px; }

.pane.in-main .pane-head {
  cursor: default;
  padding: 11px 14px;
}

.pane-head:hover:not(.pane.in-main .pane-head) {
  background: color-mix(in srgb, var(--header-bg) 75%, var(--accent) 25%);
}

.pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f4f4f5;
}

.pane.in-main .pane-title { font-size: 13px; }

.pane-title .prompt-icon {
  color: var(--accent);
  font-size: 13px;
}

.lane-status {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.lane-status:empty { display: none; }
.lane-status[data-status="sleeping"] { color: #3b82f6; }
.lane-status[data-status="idle"]     { color: #10b981; }
.lane-status[data-status="working"]  { color: #fbbf24; animation: status-pulse 1.4s ease-in-out infinite; }
.lane-status[data-status="missing"]  { color: #f87171; }
.lane-status[data-status="unknown"]  { color: #6b7280; }

@keyframes status-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.pane-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: inherit;
  transition: color 120ms, background 120ms;
}

.icon-btn:hover {
  color: var(--accent);
  background: var(--accent-tint);
}

/* ---- Body ---- */
.pane-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: grid;
  position: relative;
}

.pane-body > .msg-view,
.pane-body > .term-view,
.pane-body > .blank-view {
  grid-column: 1; grid-row: 1;
  min-height: 0;
  min-width: 0;
}

.pane[data-mode="msg"]   .term-view,
.pane[data-mode="msg"]   .blank-view { display: none; }
.pane[data-mode="term"]  .msg-view,
.pane[data-mode="term"]  .blank-view { display: none; }
.pane[data-mode="blank"] .msg-view,
.pane[data-mode="blank"] .term-view  { display: none; }

/* ---- msg-view: plain terminal-log style ---- */
.msg-view {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  line-height: 1.45;
}

.msg-list:empty::before {
  content: "(ingen beskeder)";
  color: var(--text-dim);
  opacity: 0.45;
  font-style: italic;
  padding: 8px 0;
}

.msg-row {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  animation: msg-in 220ms ease-out;
}

.msg-row .msg-ts {
  color: var(--text-dim);
  margin-right: 8px;
}

.msg-row .msg-prompt {
  color: var(--accent);
  margin-right: 6px;
}

.msg-row .msg-text {
  color: var(--text);
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- ASK row ---- */
.ask-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0;
  padding: 6px 8px;
  border-left: 2px solid var(--ask-accent, #fbbf24);
  background: rgba(251, 191, 36, 0.05);
  border-radius: 0 4px 4px 0;
}
.ask-row.ask-answered {
  --ask-accent: #10b981;
  background: rgba(16, 185, 129, 0.04);
  opacity: 0.7;
}

.ask-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-badge {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ask-accent, #fbbf24);
  padding: 1px 6px;
  border: 1px solid var(--ask-accent, #fbbf24);
  border-radius: 3px;
}

.ask-row .msg-prompt { color: var(--ask-accent, #fbbf24); }

.ask-question {
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  padding-left: 4px;
}

.ask-answer-block { padding-left: 4px; }

.ask-answer-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 4px;
}

.ask-answer-text {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
  resize: vertical;
  min-height: 32px;
}

.ask-answer-text:focus {
  outline: none;
  border-color: var(--ask-accent, #fbbf24);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18);
}

.ask-answer-send {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 120ms;
}
.ask-answer-send:hover {
  background: rgba(251, 191, 36, 0.3);
  color: #fff;
}

.ask-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ask-choice {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 5px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
  min-height: 36px;
}
.ask-choice:hover {
  background: rgba(251, 191, 36, 0.25);
  color: #fff;
}
.ask-choice.is-chosen {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.ask-choice:disabled { opacity: 0.5; cursor: default; }

.ask-answer-shown {
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(16, 185, 129, 0.06);
  border-left: 2px solid rgba(16, 185, 129, 0.5);
  border-radius: 0 3px 3px 0;
  color: var(--text-dim);
  font-size: 11px;
  white-space: pre-wrap;
}

/* ---- term-view: iframe ---- */
.term-view {
  display: flex;
  flex-direction: column;
}

.pane-term {
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: block;
  flex: 1;
}

/* ---- blank-view: hint only (ROOT default) ---- */
.blank-view {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.5;
  padding: 16px;
  text-align: center;
}

.blank-hint { line-height: 1.6; }

/* ---- Pane footer ---- */
.pane-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
  border-top: 1px solid var(--footer-line);
  font-size: 10px;
  color: var(--footer-cyan);
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.pane.in-main .pane-footer {
  padding: 7px 14px;
  font-size: 11px;
}

.pane-footer .tmux-info {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Special-keys row (mobile only, when terminal active) ---- */
.term-keys {
  display: none;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--footer-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.term-keys::-webkit-scrollbar { display: none; }
.term-keys button {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-width: 38px;
  min-height: 38px;
  flex-shrink: 0;
  transition: all 80ms;
}
.term-keys button:active { background: var(--accent-tint); border-color: var(--accent); }
.term-keys button[data-ctrl="1"] { color: var(--accent); }

/* Attach button pushed to far right of the row */
.term-keys-attach {
  margin-left: auto !important;
  background: var(--accent-tint) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Non-interactive copy hint — Shift+drag is the only way to copy from a
   ttyd terminal pane (xterm.js bundle has no OSC52 support). Dim styling
   so it doesn't compete visually with the action buttons. */
.term-keys-hint {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  font-style: italic;
  user-select: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.7;
}

/* ---- Compose area (only in MAIN, hidden for ROOT) ---- */
.compose-area {
  display: none;
  position: relative;
  border-top: 1px solid var(--footer-line);
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.pane.in-main:not([data-lane="root"]) .compose-area {
  display: block;
}

.compose-form {
  display: block;             /* textarea fuld bredde (samme som terminal-vinduet) */
  position: relative;         /* anker for de overlejrede handlings-knapper */
  padding: 8px 8px;
}

.compose-text {
  display: block;
  width: 100%;                /* fuld bredde = matcher terminal-vinduet */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px 34px;     /* ekstra bund-plads til de overlejrede knapper i nederste-højre hjørne */
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  resize: none;               /* ⤢-knappen styrer størrelsen; undgår resize-grip-konflikt med overlay */
  min-height: 76px;
  max-height: 360px;
  transition: border-color 120ms, box-shadow 120ms, min-height 220ms ease;
}

.compose-area.is-expanded .compose-text {
  min-height: 50vh;
  max-height: 50vh;
  resize: none;
}

.compose-text::placeholder {
  color: var(--text-dim);
}

.compose-text:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}

/* Pending-submit indicator: Enter pressed on empty textarea — waiting for
   Voice In to deliver text within PENDING_MAX_MS. */
.pane.compose-pending .compose-text {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18);
}
.pane.compose-pending .compose-text::placeholder {
  color: #fbbf24;
}


.compose-actions {
  position: absolute;        /* overlejret i textarea'ens nederste-højre hjørne */
  right: 15px;
  bottom: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  z-index: 1;
}

.compose-attach,
.compose-send {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 3px 9px;          /* kompakt — knapperne sidder oven på feltet */
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 120ms;
}

.compose-attach,
.compose-expand { font-size: 12px; padding: 2px 6px; }
.compose-area.is-expanded .compose-expand { color: var(--accent); border-color: var(--accent); }

.compose-attach:hover,
.compose-send:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.compose-send {
  background: var(--accent-dim);
  color: #fff;
  border-color: transparent;
}

.compose-send:hover {
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  color: #fff;
}

.compose-drop-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--accent-tint);
  border: 2px dashed var(--accent);
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 2;
}

.compose-area.is-dragover .compose-drop-overlay {
  display: flex;
}

/* ---- Swap transition (FLIP) ---- */
.pane.is-swapping {
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
  z-index: 5;
}

/* ---- GitHub status strip (hidden until data + only when project active) ---- */
.gh-status {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid rgba(168, 85, 247, 0.12);
  font-size: 11px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gh-status.is-active { display: flex; }
.gh-status::-webkit-scrollbar { display: none; }

.gh-status-label {
  color: var(--text-dim);
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 9.5px;
  flex-shrink: 0;
}

.gh-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: all 120ms;
}
.gh-run:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}
.gh-run .gh-glyph { font-size: 12px; line-height: 1; }
.gh-run .gh-name  { font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.gh-run .gh-branch { color: var(--text-dim); font-size: 10px; }
.gh-run .gh-ago    { color: var(--text-dim); font-size: 10px; }

.gh-run-group {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}
.gh-run-group .gh-run { border-radius: 3px 0 0 3px; }
.gh-run-group:has(.gh-dl) .gh-run { border-right: 0; }

.gh-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 3px 3px 0;
  color: #10b981;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 120ms;
}
.gh-dl:hover {
  background: rgba(16, 185, 129, 0.22);
  color: #fff;
}

.gh-run[data-status="success"]     { border-color: rgba(16, 185, 129, 0.35); }
.gh-run[data-status="success"]     .gh-glyph { color: #10b981; }
.gh-run[data-status="failure"]     { border-color: rgba(248, 113, 113, 0.4); }
.gh-run[data-status="failure"]     .gh-glyph { color: #f87171; }
.gh-run[data-status="in_progress"] { border-color: rgba(34, 211, 238, 0.4); }
.gh-run[data-status="in_progress"] .gh-glyph { color: #22d3ee; animation: status-pulse 1.4s ease-in-out infinite; }
.gh-run[data-status="cancelled"]   .gh-glyph { color: var(--text-dim); }

.gh-err {
  color: #fbbf24;
  font-style: italic;
  font-size: 10.5px;
}

/* ---- Mobile lane-pills (hidden on desktop) ---- */
.mobile-pills { display: none; }

/* ============================================================
   MOBILE LAYOUT (≤ 600px)
   Single column, msg-view only, lane-pills for switching, sticky compose.
   ============================================================ */
@media (max-width: 600px) {
  :root {
    --topbar-h: 44px;
    --grid-gap: 0px;
  }

  body {
    grid-template-columns: 1fr;
  }

  /* Topbar */
  .topbar { padding: 0 10px; }
  .brand .name { font-size: 13px; }
  .brand .project { font-size: 15px; padding: 0 6px; }
  .topbar-actions .mic-btn { display: none; }   /* mobile keyboard has voice */
  /* On mobile, the topbar is tight — drop everything I added recently so the
     original settings (⚙) + reload (↻) stay visible at the right edge.
     Admin/logout actions are desktop-only; log out via URL if needed on phone. */
  .topbar-actions .user-badge   { display: none; }
  .topbar-actions .refresh-wrap { display: none; }
  .topbar-actions .logout-form  { display: none; }

  /* Hide GitHub strip on mobile (saves vertical space) */
  .gh-status { display: none !important; }

  /* Drop compose textarea on mobile — user dictates direkte i terminalen */
  .compose-area { display: none !important; }
  /* Same intent for the persistent CORD compose — mobile keyboard has its
     own mic; Henning når CORD via mobile-pills + dikterer i terminalen */
  .cord-compose { display: none !important; }
  /* Preview + metadata panels are desktop-only (right column too narrow) */
  .right-stack,
  .preview-panel,
  .preview-resizer,
  .metadata-panel,
  #preview-btn { display: none !important; }
  body.preview-open .layout {
    grid-template-columns: 1fr !important;
  }

  /* Pills row */
  .mobile-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    background: #0d0b14;
    border-bottom: 1px solid rgba(168, 85, 247, 0.18);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }
  .mobile-pills::-webkit-scrollbar { display: none; }

  .mobile-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 120ms;
  }
  .mobile-pill[data-lane="ext"]   { color: #a855f7; }
  .mobile-pill[data-lane="db"]    { color: #22d3ee; }
  .mobile-pill[data-lane="gui"]   { color: #10b981; }
  .mobile-pill[data-lane="app"]   { color: #f59e0b; }
  .mobile-pill[data-lane="coord"] { color: #ec4899; }

  .mobile-pill.is-active {
    background: rgba(168, 85, 247, 0.15);
    border-color: currentColor;
    box-shadow: 0 0 0 1px currentColor inset;
  }
  .mobile-pill .pill-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: 0.85;
  }
  .mobile-pill[data-status="sleeping"] .pill-dot { background: #3b82f6; }
  .mobile-pill[data-status="working"]  .pill-dot { animation: status-pulse 1.4s ease-in-out infinite; }
  .mobile-pill[data-status="missing"]  .pill-dot { background: #f87171; }

  /* Layout: hide left stack + resizer, main takes full width */
  .layout {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }
  .left-stack,
  .resizer { display: none; }
  .main-slot { display: grid; }

  /* Pane styling — borderless, fill viewport */
  .pane {
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .pane-head {
    padding: 10px 14px;
    cursor: default;   /* no swap-by-tap; user uses pills */
  }
  .pane-head:hover { background: var(--header-bg); }
  /* Show term-keys row when current main pane is in term mode */
  .pane.in-main[data-mode="term"] .term-keys { display: flex; }
  /* On desktop, margin-left:auto pushes 📎 to the right end of the row.
     On mobile, the row overflows horizontally — auto-margin then parks 📎
     OUTSIDE the scrollable area and you can't reach it. Drop it on mobile so
     it sits at the natural last-flex-item position (still rightmost via HTML
     order) and stays scrollable into view. */
  .term-keys-attach { margin-left: 8px !important; }

  /* Compose sticky bottom, offset by keyboard intrusion (set via JS) */
  .compose-area {
    position: sticky;
    bottom: var(--kb-offset, 0);
    z-index: 5;
  }
  .compose-form {
    padding: 8px 10px;
  }
  .compose-text {
    min-height: 44px;
    max-height: 40vh;
    font-size: 14px;   /* iOS won't zoom on focus if ≥ 16px; use 16 if needed */
  }
  .compose-attach,
  .compose-expand,
  .compose-send {
    min-height: 38px;
    padding: 8px 14px;
  }

  /* Pane footer — slim on mobile */
  .pane-footer { font-size: 9.5px; padding: 4px 12px; }
  .pane-footer .tmux-info { display: none; }

  /* Msg-view list — more padding for touch */
  .msg-list { padding: 10px 12px; font-size: 12.5px; }

  /* ASK touch targets */
  .ask-row { padding: 10px 10px; margin: 6px 0; }
  .ask-answer-text { font-size: 14px; min-height: 44px; }
  .ask-answer-send { padding: 10px 16px; min-height: 44px; font-size: 12px; }

  /* Hide swap-FLIP transition on mobile (no left-stack to animate to) */
  .pane.is-swapping { transition: none; transform: none !important; }
}