/* ============================================================
   Enigma UX replicas — live HTML stand-ins for the product
   screenshots in the #product showcase.

   Two panels: .ux-win[data-ux="ide"] and .ux-win[data-ux="agent"].

   Everything is namespaced under .ux-* and all custom properties
   are declared on .ux-stage, so nothing leaks into the rest of
   the landing page.

   Colours are lifted verbatim from the app's own theme file,
   assets/themes/cockpit-dark.toml, so the replica matches what
   ships. Type uses the site's already-loaded Manrope + DM Mono.

   Each replica is authored at a fixed 1280x840 design size and
   scaled to fit by enigma-ux.js, so the layout is pixel-stable
   at every viewport width — exactly how the screenshots behaved.
   ============================================================ */

.ux-stage {
  --ux-w: 1280;
  --ux-h: 840;
  --ux-scale: 1;

  --ux-app:        #15171C;
  --ux-panel:      #1C1F25;
  --ux-elevated:   #24272E;
  --ux-hover:      #2C2F36;
  --ux-active:     #34383F;
  --ux-border:     #282B32;
  --ux-border-2:   #34383F;
  --ux-text:       #C4C7D0;
  --ux-text-2:     #8C92A0;
  --ux-text-3:     #646A76;
  --ux-accent:     #688CC8;
  --ux-accent-dim: rgba(104, 140, 200, .16);
  --ux-success:    #5AB07A;
  --ux-warning:    #C8A058;
  --ux-danger:     #C86868;
  --ux-info:       #68A8C0;

  /* syntax — [colors.syntax] in cockpit-dark.toml */
  --ux-kw:   #B080D8;
  --ux-str:  #8AB870;
  --ux-num:  #C8A058;
  --ux-com:  #646A76;
  --ux-fn:   #688CC8;
  --ux-type: #68A8C0;

  --ux-sans: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --ux-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  position: relative;
  width: 100%;
  overflow: hidden;
}

.ux-stage *,
.ux-stage *::before,
.ux-stage *::after { box-sizing: border-box; }

/* The host page stretches any <img> inside .screenshot-wrap to full width
   (that rule sized the screenshots this replaces). Opt our own images out —
   specificity, not !important, so the page can still override deliberately. */
.ux-stage img,
.ux-stage svg { width: auto; height: auto; max-width: none; object-fit: fill; }

/* The fixed-size canvas, scaled to the container by JS. */
.ux-scaler {
  width: calc(var(--ux-w) * 1px);
  height: calc(var(--ux-h) * 1px);
  transform: scale(var(--ux-scale));
  transform-origin: top left;
}

.ux-win {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* measured from the real app: every surface is bg_panel; bg_app is the
     active editor tab only. */
  background: var(--ux-panel);
  color: var(--ux-text);
  font-family: var(--ux-sans);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* ── Title bar ─────────────────────────────────────────────── */
.ux-titlebar {
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--ux-panel);
  border-bottom: 1px solid var(--ux-border);
}

.ux-stage img.ux-logo { width: 19px; height: 19px; border-radius: 4px; flex: none; display: block; }
.ux-titlebar-name { font-size: 12.5px; color: var(--ux-text-2); font-weight: 500; }
.ux-spacer { flex: 1; }

.ux-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--ux-app);
  border: 1px solid var(--ux-border);
  border-radius: 7px;
}
.ux-seg > span {
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: 5px;
  color: var(--ux-text-3);
}
.ux-seg > span.on {
  background: var(--ux-accent-dim);
  color: var(--ux-accent);
  box-shadow: inset 0 0 0 1px rgba(104, 140, 200, .28);
}

.ux-toggles { display: flex; gap: 3px; }
.ux-toggle {
  width: 25px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--ux-text-3);
  font-size: 12px;
}
.ux-toggle.on { color: var(--ux-accent); background: var(--ux-accent-dim); }

/* ── Body grid ─────────────────────────────────────────────── */
.ux-body { flex: 1; display: grid; min-height: 0; }
.ux-win[data-ux="ide"]   .ux-body { grid-template-columns: 210px minmax(0, 1fr) 332px 180px; }
.ux-win[data-ux="agent"] .ux-body { grid-template-columns: 234px minmax(0, 1fr) 238px; }

/* ── Shared: panel headers, rows ───────────────────────────── */
.ux-panel-head {
  font-family: var(--ux-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ux-text-3);
  padding: 11px 12px 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ux-panel-head .ux-hd-act { margin-left: auto; color: var(--ux-text-3); font-size: 11px; letter-spacing: 0; }

.ux-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--ux-text-2);
}
.ux-row.on { background: var(--ux-elevated); color: var(--ux-text); }

.ux-glyph { width: 13px; flex: none; text-align: center; color: var(--ux-text-3); font-size: 11px; }
.ux-row.on .ux-glyph { color: var(--ux-accent); }

/* ── IDE · explorer ────────────────────────────────────────── */
.ux-explorer {
  background: var(--ux-panel);
  border-right: 1px solid var(--ux-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ux-tree { flex: 1; overflow: hidden; padding-bottom: 6px; }

.ux-node {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px;
  font-size: 12.5px;
  color: var(--ux-text-2);
  white-space: nowrap;
}
.ux-node.dir { color: var(--ux-text); }
.ux-node.sel { background: var(--ux-elevated); color: var(--ux-text); box-shadow: inset 2px 0 0 var(--ux-accent); }
.ux-node .ux-ind { display: inline-block; flex: none; }
.ux-node .ux-git { margin-left: auto; font-family: var(--ux-mono); font-size: 10px; }
.ux-node .ux-git.m { color: var(--ux-warning); }
.ux-node .ux-git.a { color: var(--ux-success); }

.ux-outline { border-top: 1px solid var(--ux-border); flex: none; }

/* ── IDE · editor ──────────────────────────────────────────── */
.ux-editor { display: flex; flex-direction: column; background: var(--ux-panel); min-width: 0; border-right: 1px solid var(--ux-border); }

.ux-tabs {
  height: 33px;
  flex: none;
  display: flex;
  align-items: stretch;
  background: var(--ux-panel);
  border-bottom: 1px solid var(--ux-border);
}
.ux-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  color: var(--ux-text-3);
  border-right: 1px solid var(--ux-border);
}
.ux-tab.on {
  background: var(--ux-app);
  color: var(--ux-text);
  box-shadow: inset 0 2px 0 var(--ux-accent);
}
.ux-tab .ux-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ux-warning); flex: none; }

.ux-code {
  flex: 1;
  display: flex;
  min-height: 0;
  font-family: var(--ux-mono);
  font-size: 11.5px;
  line-height: 19px;
  overflow: hidden;
}

.ux-gutter {
  flex: none;
  padding: 9px 10px 0 14px;
  text-align: right;
  color: var(--ux-text-3);
  opacity: .65;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.ux-lines { flex: 1; padding: 9px 0 0 6px; min-width: 0; overflow: hidden; white-space: pre; }
.ux-lines .ux-l { display: block; }
.ux-lines .ux-l.hl { background: rgba(104, 140, 200, .07); box-shadow: inset 2px 0 0 rgba(104, 140, 200, .5); }
.ux-lines .ux-l.add { background: rgba(90, 176, 122, .10); box-shadow: inset 2px 0 0 var(--ux-success); }
.ux-lines .ux-l.del { background: rgba(200, 104, 104, .10); box-shadow: inset 2px 0 0 var(--ux-danger); }

.ux-kw   { color: var(--ux-kw); }
.ux-str  { color: var(--ux-str); }
.ux-num  { color: var(--ux-num); }
.ux-com  { color: var(--ux-com); font-style: italic; }
.ux-fn   { color: var(--ux-fn); }
.ux-type { color: var(--ux-type); }
.ux-pun  { color: var(--ux-text-2); }

/* caret */
.ux-caret {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  vertical-align: -3px;
  background: var(--ux-accent);
}

.ux-minimap {
  flex: none;
  width: 58px;
  padding: 10px 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: .5;
}
.ux-minimap i { display: block; height: 2px; border-radius: 1px; background: var(--ux-border-2); }
.ux-minimap i.a { background: #3E4855; }
.ux-minimap i.b { background: #4A5665; }

/* ── Chat panel (IDE right side) + agent conversation ──────── */
.ux-chat {
  background: var(--ux-elevated);
  border-left: 1px solid var(--ux-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ux-threadbar {
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ux-border);
  font-size: 12px;
  color: var(--ux-text-2);
}
.ux-threadbar .ux-tb-end { margin-left: auto; font-family: var(--ux-mono); font-size: 10px; color: var(--ux-text-3); }

.ux-stream {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ux-col { width: 100%; padding: 0 14px; }
/* agent mode caps the reading column so prose stays legible full-window */
.ux-win[data-ux="agent"] .ux-col { max-width: 660px; margin: 0 auto; padding: 0 18px; }

.ux-user {
  background: var(--ux-elevated);
  border: 1px solid var(--ux-border-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ux-text);
}

.ux-agent {
  border-left: 2px solid var(--ux-border-2);
  padding-left: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ux-agent.live { border-left-color: var(--ux-accent); }
.ux-agent p { margin: 0; font-size: 12.5px; color: var(--ux-text); }
.ux-agent p.q { color: var(--ux-text-2); }
.ux-agent code {
  font-family: var(--ux-mono);
  font-size: 11px;
  background: var(--ux-app);
  border: 1px solid var(--ux-border);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--ux-info);
}

.ux-run {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ux-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ux-text-3);
}
.ux-run .ux-who { color: var(--ux-text-2); }
.ux-run .ux-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ux-border-2); flex: none; }
.ux-run .ux-ok { color: var(--ux-success); }

/* tool card */
.ux-tool { border: 1px solid var(--ux-border); border-radius: 6px; background: var(--ux-app); }
.ux-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--ux-text-2);
}
.ux-tool-head .ux-t-name { font-family: var(--ux-mono); font-size: 11px; color: var(--ux-text); }
.ux-tool-head .ux-t-stat { margin-left: auto; font-family: var(--ux-mono); font-size: 10px; }
.ux-plus { color: var(--ux-success); }
.ux-minus { color: var(--ux-danger); }

.ux-diff {
  border-top: 1px solid var(--ux-border);
  font-family: var(--ux-mono);
  font-size: 10.5px;
  line-height: 1.75;
  padding: 5px 0;
}
.ux-diff div { padding: 0 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.ux-diff .r { background: rgba(200, 104, 104, .11); color: #D89494; }
.ux-diff .a { background: rgba(90, 176, 122, .11); color: #86C79C; }
.ux-diff .c { color: var(--ux-text-3); }

/* result table */
.ux-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ux-tbl th,
.ux-tbl td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--ux-border); }
.ux-tbl th {
  font-family: var(--ux-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ux-text-3);
  font-weight: 400;
}
.ux-tbl td { color: var(--ux-text-2); }
.ux-tbl td.n { font-family: var(--ux-mono); font-variant-numeric: tabular-nums; color: var(--ux-text); }
.ux-tbl tr:last-child td { border-bottom: none; }

/* ── Composer — identical in both modes ────────────────────── */
.ux-composer { flex: none; border-top: 1px solid var(--ux-border); background: var(--ux-panel); padding: 9px 0 7px; }

.ux-cstatus {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 6px;
  font-size: 11px;
  color: var(--ux-text-2);
}
.ux-orb {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--ux-accent);
  box-shadow: 0 0 0 3px var(--ux-accent-dim);
}
.ux-cstats { margin-left: auto; font-family: var(--ux-mono); font-size: 10px; color: var(--ux-text-3); }

.ux-cinput {
  background: var(--ux-app);
  border: 1px solid var(--ux-border-2);
  border-radius: 8px;
  padding: 9px 11px;
  min-height: 48px;
  font-size: 12.5px;
  color: var(--ux-text-3);
}

.ux-crule { height: 1px; background: var(--ux-border); margin: 8px 0 6px; }

.ux-controls { display: flex; align-items: center; gap: 5px; }
.ux-cgap { flex: 1; }

.ux-iconbtn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ux-text-2);
  font-size: 14px;
  flex: none;
}

.ux-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--ux-text-3);
  background: var(--ux-elevated);
  white-space: nowrap;
  flex: none;
}
.ux-pill.io { padding: 0; width: 24px; justify-content: center; }
.ux-pill.acc {
  color: var(--ux-accent);
  background: var(--ux-accent-dim);
  box-shadow: inset 0 0 0 1px rgba(104, 140, 200, .27);
}
.ux-pill.warn {
  color: var(--ux-warning);
  background: rgba(200, 160, 88, .10);
  box-shadow: inset 0 0 0 1px rgba(200, 160, 88, .27);
}

.ux-send {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--ux-accent-dim);
  color: var(--ux-accent);
  box-shadow: inset 0 0 0 1px rgba(104, 140, 200, .30);
  font-size: 11px;
  flex: none;
}

/* ── Agent mode · left rail ────────────────────────────────── */
.ux-rail {
  background: var(--ux-panel);
  border-right: 1px solid var(--ux-border);
  display: flex;
  flex-direction: column;
  padding: 9px 7px 7px;
  gap: 2px;
  min-height: 0;
}

.ux-new {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: var(--ux-accent-dim);
  color: var(--ux-accent);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(104, 140, 200, .22);
}

.ux-railrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ux-text-2);
}
.ux-railrow .ux-kbd { margin-left: auto; font-family: var(--ux-mono); font-size: 10px; color: var(--ux-text-3); }

.ux-railhead {
  font-family: var(--ux-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ux-text-3);
  padding: 14px 10px 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ux-railhead::after { content: ""; flex: 1; height: 1px; background: var(--ux-border); }

.ux-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ux-text);
}
.ux-folder .ux-env { margin-left: auto; font-family: var(--ux-mono); font-size: 9.5px; color: var(--ux-text-3); }

.ux-thread {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ux-text-2);
  white-space: nowrap;
}
.ux-thread.sel { background: var(--ux-elevated); color: var(--ux-text); box-shadow: inset 2px 0 0 var(--ux-accent); }
.ux-thread .ux-when { margin-left: auto; font-family: var(--ux-mono); font-size: 9.5px; color: var(--ux-text-3); }

/* per-thread agent identity — real product logos */
.ux-stage svg.ux-mark { width: 14px; height: 14px; flex: none; display: block; }
.ux-mark.en { border-radius: 3px; }
.ux-mark.cc { color: #D97757; }
.ux-mark.cx { color: #B7BCC6; }
.ux-mark.gm { color: #5C8EE6; }

.ux-railfoot {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--ux-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ux-text-2);
}
.ux-avatar {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ux-elevated);
  border: 1px solid var(--ux-border-2);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--ux-text-2);
}

/* ── Agent mode · conversation column + workbench ──────────── */
.ux-conv { display: flex; flex-direction: column; background: var(--ux-app); min-width: 0; }
.ux-win[data-ux="ide"] .ux-composer { background: var(--ux-elevated); }

.ux-bench {
  background: var(--ux-panel);
  border-left: 1px solid var(--ux-border);
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
}
.ux-benchhead {
  font-family: var(--ux-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ux-text-3);
  padding: 10px 10px 5px;
}
.ux-benchhead.first { padding-top: 1px; }

.ux-benchrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ux-text-2);
}
.ux-benchrow.on { background: var(--ux-elevated); color: var(--ux-text); }
.ux-benchrow .ux-count { margin-left: auto; font-family: var(--ux-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.ux-benchrow .ux-count.g { color: var(--ux-success); }
.ux-benchrow .ux-count.q { color: var(--ux-text-3); }

.ux-file {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 22px;
  font-family: var(--ux-mono);
  font-size: 10.5px;
  color: var(--ux-text-2);
  white-space: nowrap;
}
.ux-file .ux-st { width: 8px; flex: none; }
.ux-file .ux-st.m { color: var(--ux-warning); }
.ux-file .ux-st.a { color: var(--ux-success); }

/* ── Status bar ────────────────────────────────────────────── */
.ux-status {
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: var(--ux-panel);
  border-top: 1px solid var(--ux-border);
  font-family: var(--ux-mono);
  font-size: 10px;
  color: var(--ux-text-3);
}
.ux-status .ux-right { margin-left: auto; display: flex; gap: 14px; }
.ux-status .ux-good { color: var(--ux-success); }

/* ── Motion ────────────────────────────────────────────────── */
@keyframes ux-orb-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ux-accent-dim); }
  50%      { box-shadow: 0 0 0 6px rgba(104, 140, 200, .06); }
}
@keyframes ux-caret-blink {
  0%, 45%   { opacity: 1; }
  55%, 100% { opacity: 0; }
}

.ux-stage .ux-orb { animation: ux-orb-pulse 2.8s ease-in-out infinite; }
.ux-stage .ux-caret { animation: ux-caret-blink 1.15s step-end infinite; }

@media (prefers-reduced-motion: reduce) {
  .ux-stage .ux-orb,
  .ux-stage .ux-caret { animation: none; }
  .ux-stage .ux-caret { opacity: 1; }
}

/* ============================================================
   IDE panel — rebuilt against a screenshot of the shipping app.
   Geometry and colour sampled from it directly:
     columns  284 / 756 / 450 / 245 of 1735  (Explorer/Editor/Chat/Threads)
     surfaces #1C1F25 base, #24272E chat + composer, #15171C active tab
     accent   #688CC8 (sender labels, inline code, LSP)
     selected #343842
   ============================================================ */

/* ── Title bar: icon cluster + remote / folder / branch pills ── */
.ux-win[data-ux="ide"] .ux-titlebar { height: 33px; gap: 7px; padding: 0 8px; background: var(--ux-panel); }
.ux-tb-ico { color: var(--ux-text-3); font-size: 11px; padding: 0 3px; }
.ux-tb-group { display: flex; gap: 2px; margin-right: 4px; }

.ux-tbpill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 21px; padding: 0 8px;
  border-radius: 5px;
  background: var(--ux-elevated);
  color: var(--ux-text-2);
  font-size: 11px;
  white-space: nowrap;
}
.ux-tbpill b { color: var(--ux-text-3); font-weight: 400; font-size: 9px; }
.ux-dot-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--ux-success); flex: none; }
.ux-fold {
  width: 9px; height: 7px; flex: none; border-radius: 1.5px;
  background: #E8C46A;                 /* measured folder gold */
  box-shadow: 0 -2px 0 -0.5px #E8C46A;
}
.ux-wctl { color: var(--ux-text-3); font-size: 10px; padding: 0 5px; }

/* ── Explorer: toolbar strip + breadcrumb + tree ── */
.ux-xtoolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px 4px;
  color: var(--ux-text-3); font-size: 11px;
}
.ux-xtoolbar span { padding: 0 3px; }
.ux-xtoolbar .ux-xt-end { margin-left: auto; }

.ux-crumb {
  padding: 2px 10px 7px;
  font-size: 10.5px;
  color: var(--ux-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ux-crumb b { color: var(--ux-text-3); font-weight: 400; padding: 0 3px; }

.ux-win[data-ux="ide"] .ux-node {
  gap: 6px; padding: 3px 10px; font-size: 12px; border-radius: 5px; margin: 0 4px;
}
.ux-win[data-ux="ide"] .ux-node.sel { background: var(--ux-active); color: var(--ux-text); box-shadow: none; }
.ux-node.i1 { padding-left: 22px; }
.ux-node.i2 { padding-left: 34px; }
.ux-chev { color: var(--ux-text-3); font-size: 9px; width: 7px; flex: none; }

/* file-type marks — the real tree is colour-coded */
.ux-fi {
  width: 12px; flex: none; text-align: center;
  font-family: var(--ux-mono); font-size: 8.5px; font-style: normal; font-weight: 500;
}
.ux-fi.rs   { color: #D9863C; }
.ux-fi.md   { color: #5C8EE6; }
.ux-fi.json { color: #FACC15; }
.ux-fi.toml { color: #9AA4B2; }
.ux-fi.sh   { color: #5AB07A; }
.ux-fi.lock { color: #C86868; font-size: 7px; }

/* ── Editor: tab strip, code, own status strip ── */
.ux-tabstrip {
  height: 34px; flex: none;
  display: flex; align-items: center;
  padding: 0 6px;
  background: var(--ux-panel);
  border-bottom: 1px solid var(--ux-border);
}
.ux-etab {
  display: inline-flex; align-items: center; gap: 10px;
  height: 25px; padding: 0 10px;
  background: var(--ux-app);
  border: 1px solid var(--ux-border);
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--ux-text);
}
.ux-etab b { color: var(--ux-text-3); font-weight: 400; font-size: 10px; }

.ux-estatus {
  height: 24px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: var(--ux-elevated);
  border-top: 1px solid var(--ux-border);
  font-family: var(--ux-mono);
  font-size: 10px;
  color: var(--ux-text-2);
}
.ux-estatus i { width: 1px; height: 10px; background: var(--ux-border-2); flex: none; }
.ux-estatus .ux-es-end { margin-left: auto; color: var(--ux-accent); }

/* ── Chat panel: sender labels, not bubbles ── */
.ux-chat-head {
  height: 30px; flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 11px;
  font-size: 12px;
  color: var(--ux-text);
  border-bottom: 1px solid var(--ux-border);
}
.ux-chat-head .ux-ch-end { margin-left: auto; font-family: var(--ux-mono); font-size: 9.5px; color: var(--ux-text-3); }
.ux-chat-head .ux-ch-ico { color: var(--ux-text-3); font-size: 11px; }

.ux-win[data-ux="ide"] .ux-stream { padding: 11px 0; gap: 11px; }
.ux-win[data-ux="ide"] .ux-col { padding: 0 11px; }

.ux-msg { padding: 0 11px; display: flex; flex-direction: column; gap: 5px; }
.ux-sender {
  display: flex; align-items: center;
  font-size: 11.5px; font-weight: 500;
  color: var(--ux-accent);
}
.ux-sender .ux-ts {
  margin-left: auto;
  font-family: var(--ux-mono); font-size: 9px;
  color: var(--ux-text-3); font-weight: 400;
}
.ux-msg p { margin: 0; font-size: 12px; color: var(--ux-text); }
.ux-msg p.ux-strong { font-weight: 600; }
.ux-msg ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.ux-msg li { font-size: 12px; color: var(--ux-text); }
.ux-msg code {
  font-family: var(--ux-mono); font-size: 10.5px;
  color: var(--ux-accent);
  background: rgba(104, 140, 200, .10);
  border-radius: 3px; padding: 0 3px;
}
.ux-msg b { font-weight: 600; }

/* collapsed reasoning + tool run rows */
.ux-reason, .ux-details {
  margin: 0 11px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--ux-text-2);
  background: var(--ux-panel);
  border: 1px solid var(--ux-border);
  border-left: 2px solid var(--ux-border-2);
  border-radius: 5px;
}
.ux-details { border: none; background: none; padding: 0 10px; color: var(--ux-text-3); font-size: 10.5px; margin-top: -6px; }

.ux-toolrow {
  display: flex; align-items: center; gap: 8px;
  margin: 0 11px;
  font-size: 11.5px;
  color: var(--ux-text-2);
}
.ux-toolrow code {
  font-family: var(--ux-mono); font-size: 10.5px;
  color: var(--ux-text);
}
.ux-toolrow .ux-done { margin-left: auto; color: var(--ux-success); font-size: 10.5px; }

.ux-pathline {
  flex: none;
  display: flex; align-items: center;
  padding: 6px 11px;
  font-family: var(--ux-mono); font-size: 9.5px;
  color: var(--ux-text-3);
}
.ux-pathline .ux-pl-end { margin-left: auto; }

/* ── Threads panel ── */
.ux-threads {
  background: var(--ux-panel);
  border-left: 1px solid var(--ux-border);
  display: flex; flex-direction: column;
  padding: 0 0 6px;
  min-height: 0;
}
.ux-th-head {
  height: 30px; flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border-bottom: 1px solid var(--ux-border);
  font-family: var(--ux-mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ux-text-3);
}
.ux-th-head .ux-th-ico:first-of-type { margin-left: auto; }
.ux-th-ico { color: var(--ux-text-3); font-size: 10.5px; letter-spacing: 0; }

.ux-th-folder {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px 5px;
  font-size: 11.5px;
  color: var(--ux-text);
}
.ux-th-badge {
  margin-left: auto;
  min-width: 15px; height: 15px;
  border-radius: 4px;
  background: var(--ux-elevated);
  color: var(--ux-text-2);
  font-family: var(--ux-mono); font-size: 9px;
  display: grid; place-items: center;
}

.ux-th-item {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 1px 5px;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--ux-text-2);
}
.ux-th-item.sel { background: var(--ux-elevated); box-shadow: inset 2px 0 0 var(--ux-accent); }
.ux-th-item > span { display: flex; flex-direction: column; min-width: 0; }
.ux-th-item b {
  font-size: 11.5px; font-weight: 500; color: var(--ux-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ux-th-item small { font-family: var(--ux-mono); font-size: 9px; color: var(--ux-text-3); }
.ux-th-item .ux-th-ico { margin-left: auto; }
.ux-th-item .ux-mark { margin-top: 2px; }

/* ── Full-width bottom bar ── */
.ux-bottombar {
  height: 20px; flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 10px;
  background: var(--ux-panel);
  border-top: 1px solid var(--ux-border);
  font-family: var(--ux-mono); font-size: 9.5px;
  color: var(--ux-text-3);
}
.ux-bottombar .ux-bb-end { margin-left: auto; display: flex; gap: 14px; }