/* DreamerUX shell — [ux-shell-v1]
   Dark, warm, boardroom identity: near-black coffee surfaces, amber accent.
   Every color routes through the variables below; the light theme in a
   later patch only swaps this block. */

:root {
  --bg:        #141210;
  --dr-bg:      #141210;
  --dr-surface: #1f1b17;
  --dr-border:  #2c2620;
  --dr-text:    #ece7df;
  --dr-dim:     #a89e90;
  --dr-faint:   #6e665c;
  --dr-accent:  #ef9f27;
  --dr-code-bg: #0f0d0b;
  --dr-f:       21px;
  --dr-f-sm:    18px;
  --dr-f-code:  17.5px;
  --dr-f-h1:    27.5px;
  --dr-f-h2:    23.5px;
  --dr-f-h3:    21px;
  --panel:     #1a1714;
  --panel-2:   #201c18;
  --surface:   #262119;
  --border:    #2c2620;
  --border-2:  #3a322a;
  --text:      #ece7df;
  --dim:       #a89e90;
  --faint:     #6e665c;
  --accent:    #ef9f27;
  --accent-ink:#412402;
  --good:      #4cc38a;
  --bad:       #e05252;
  --user-bub:  #2a2419;
  --rail-w:    52px;
  --conv-w:    236px;
  --radius:    8px;
  --f:         21px;
  --f-sm:      18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg) !important;
  color: var(--text);
  font: 400 var(--f)/1.6 "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  margin: 0 !important; padding: 0 !important;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

#shell { display: flex; height: 100vh; }

/* ------------------------------------------------------------- rail */
#rail {
  width: var(--rail-w);
  background: #100e0c;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; gap: 6px; flex: none;
}
#logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; user-select: none; overflow: hidden;
}
#logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
#logo img + span { display: none; }
#logo img[hidden] + span { display: inline; }
.rail-btn {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); transition: background .12s, color .12s;
}
.rail-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { background: var(--panel-2); color: var(--text); }
.rail-btn.active { background: #33270f; color: var(--accent); }
.rail-spacer { flex: 1; }

/* ------------------------------------------------- conversations panel */
#convpanel {
  width: var(--conv-w);
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 12px 10px; gap: 10px; flex: none;
}
#newchat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
#newchat svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#newchat:hover { filter: brightness(1.07); }
/* [ux-newchat-header-v1] header twin of #newchat: always reachable even
   when the conversations pane is collapsed or squeezed. */
#newchat2 { width: 26px; height: 26px; flex: none; border-radius: 8px;
  border: 1px solid var(--border-2); color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center; }
#newchat2 svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; }
#newchat2:hover { color: var(--accent); border-color: var(--accent); }
.panel-label {
  font-size: 14.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); padding: 2px 6px 0;
}
#convlist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.conv {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--radius);
  color: var(--dim); font-size: var(--f-sm);
  cursor: pointer; user-select: none;
}
.conv:hover { background: var(--panel-2); color: var(--text); }
.conv.active { background: var(--surface); color: var(--text); border: 1px solid var(--border-2); }
.conv .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .del { visibility: hidden; color: var(--faint); font-size: 19.5px; line-height: 1; padding: 2px 4px; border-radius: 5px; }
.conv:hover .del { visibility: visible; }
.conv .del:hover { color: var(--bad); background: rgba(224,82,82,.12); }

/* ------------------------------------------------------------- stage */
#stage { flex: 1; min-width: 0; display: flex; }
.view { display: none; flex: 1; min-width: 0; }
.view.active { display: flex; flex-direction: column; }
.placeholder { margin: auto; text-align: center; max-width: 420px; }
.placeholder h2 { font-size: 27.5px; font-weight: 600; margin-bottom: 10px; letter-spacing: -.01em; }
.placeholder h2::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--accent); border-radius: 2px; margin: 12px auto 0; opacity: .7;
}
.placeholder p { color: var(--dim); font-size: var(--f-sm); line-height: 1.65; }

/* -------------------------------------------------------------- chat */
#chathead {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; border-bottom: 1px solid var(--border);
}
#convtitle { font-size: 19.5px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ctxpill {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--dim); font-size: 15.5px;
  cursor: pointer; user-select: none; max-width: 520px;   /* [ux-pill-tooltip-v1] room for org+fn+agent before ellipsis */
}
#ctxpill:hover { color: var(--text); border-color: var(--faint); }
#ctxpill.on { border-color: var(--accent); color: var(--accent); background: #33270f; }
#ctxpill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
#ctxlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ctxcount {
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; font-size: 13px; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  padding: 0 4px; flex: none;
}
#chathead { position: relative; }
#ctxpop {
  position: absolute; top: calc(100% + 6px); right: 44px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 12px 14px; min-width: 340px; z-index: 40;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
#ctxpop .pop-l { width: 66px; }
.pop-tools { margin-top: 2px; }
.pop-refresh {
  color: var(--dim); font-size: 19.5px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid transparent;
}
.pop-refresh:hover { color: var(--text); border-color: var(--border-2); }

/* ------------------------------------------ [ux-workflows-page-v1] ----
   Workflows takeover: list | structure pane | builder conversation. */
.wfp { display: flex; height: 100%; min-height: 0; }
.wfp-list { width: 300px; flex: none; border-right: 1px solid var(--border); padding: 22px 14px; overflow-y: auto; }
.wfp-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wfp-list-head h2 { font-size: 22px; font-weight: 600; }
.wfp-row {
  padding: 9px 11px; border-radius: 9px; cursor: pointer; margin-bottom: 3px;
  border: 1px solid transparent;
}
.wfp-row:hover { background: var(--surface); }
.wfp-row.sel { border-color: var(--accent); background: #2a2013; }
.wfp-row .t { font-size: var(--f-sm); font-weight: 600; }
.wfp-row .m { font-size: 16px; color: var(--dim); margin-top: 2px; }
.wfp-main { flex: 1; min-width: 0; overflow-y: auto; padding: 26px 30px; position: relative; }
/* [ux-wfp-split-v1] the divider between the list pane and the detail pane
   on the Workflows / Agents / Projects pages — same affordance as
   #convsplit in chat: drag to resize, push left or double-click to
   collapse. */
.wfpsplit { width: 6px; flex: none; cursor: col-resize; position: relative; }
.wfpsplit::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px;
  width: 1px; background: var(--border); }
.wfpsplit:hover::after { left: 1px; width: 3px; background: var(--accent); }
.wfp.listcollapsed .wfp-list { display: none; }
.wfp-struct-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wfp-struct-head h3 { font-size: 24.5px; font-weight: 600; }
.wfp-badge { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border-2); color: var(--dim); margin-left: 6px; }
.wfp-badge.ed { color: var(--accent); border-color: var(--accent); }
#wfp-stages { margin-top: 14px; max-width: 760px; }
.wfps {
  border: 1px solid var(--border-2); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 9px; background: var(--panel-2);
}
.wfps .h { display: flex; align-items: center; gap: 9px; font-size: var(--f-sm); font-weight: 600; }
/* [ux-font-scale-130-v1] every px font size and sizing variable in this
   file is the pre-scale value x1.3 (rounded to 0.5px) -- one file sizes
   the whole app, shell and chat renderer alike (renderer.css consumes
   the --dr-f* variables defined here). Layout paddings untouched.
/* [ux-preview-typography-v1] preview/detail text matches the rendered
   role-instructions block -- same size, colour and rhythm -- on Agents,
   Workflows and Projects alike. */
.wfps .n { color: var(--text); font-weight: 400; font-size: var(--f-sm); line-height: 1.6; }
.wfps .conns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.wfps .cchip { font-size: 17px; border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 11px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }   /* [ux-preview-typography-v1] was 11px dim */
.wfps .cchip .dot { width: 6px; height: 6px; }
.wfp-builder { max-width: 780px; }
/* [ux-builder-fill-v1] the builder pane fills the page: the log grows and
   scrolls, the composer stays pinned at the bottom -- no mid-screen
   composer, no capped response window. :not([hidden]) keeps the `hidden`
   attribute working (a bare display:flex would defeat it). */
.wfp-builder:not([hidden]) { display: flex; flex-direction: column;
  height: 100%; min-height: 0; }
.wfpb-composer { flex: none; }
.wfp-builder-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wfp-builder-head h3 { font-size: 23.5px; font-weight: 600; }
/* [ux-builder-fill-v1] wfpb/agpb logs were capped at 100vh minus 340px --
   the response window stopped growing while space sat empty below. flex:1
   inside the filled builder pane takes ALL remaining height instead. */
#wfpb-log, #agpb-log, #pjpb-log { flex: 1 1 auto; min-height: 120px;
  overflow-y: auto; padding: 4px 2px 12px; }
.wfpb-msg { margin-bottom: 14px; }
.wfpb-msg.user { display: flex; justify-content: flex-end; }
.wfpb-msg.user .bubble {
  background: var(--user-bub); border: 1px solid var(--border-2);
  border-radius: 14px 14px 4px 14px; padding: 10px 14px;
  max-width: 82%; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 19px;
}
.wfpb-composer { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--border); padding-top: 12px; }
.wfpb-composer textarea {
  flex: 1; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 10px 12px; color: var(--text);
  font: inherit; font-size: 19px; line-height: 1.5;
  resize: vertical; min-height: 44px;
}
.wfpb-composer textarea:focus { border-color: var(--accent); outline: none; }
.wfpb-thinking { color: var(--dim); font-style: italic; font-size: 17.5px; }

/* ---------------------------------- [ux-takeover-fullpage-v1] ----
   Takeover views own the WHOLE surface: the conversations panel belongs
   to chat, not to Workflows/Agents/Projects/Settings — runs and chats
   come back via the X. */
body.takeover #convpanel { display: none; }
#viewclose {
  position: absolute; top: 14px; right: 18px; z-index: 50;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--dim); font-size: 28.5px; line-height: 1;
  border: 1px solid var(--border-2); background: var(--panel-2);
}
#viewclose:hover { color: var(--text); border-color: var(--faint); }
.wfp-runform { display: flex; gap: 10px; margin: 12px 0 4px; max-width: 760px; }
.wfp-runform input {
  flex: 1; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 9px; padding: 9px 12px; color: var(--text); font-size: var(--f-sm);
}
/* [ux-btn-glyphs-v1] tinted icon glyphs on action buttons ([panel-icons-v1]
   twin): mask-tinted to currentColor, text stays, missing asset = no-op. */
.btn-ic {
  width: 15px; height: 15px; display: inline-block; vertical-align: -2px;
  margin-right: 7px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: currentColor;
}

/* additions: [ux-wf-page-actions-v1] */
.wfp-filter { margin-bottom: 12px; }
.wfp-filter .pop-l { width: 64px; }
.wfps-out { margin-top: 5px; font-size: 17px; color: var(--dim); }
.wfps-inputs { border-style: dashed; }

/* [ux-wf-sources-v1] inline Sources & Tools editor under a stage card */
.wfps-gear { margin-left: auto; }
.wfps-src { margin-top: 10px; border-top: 1px solid var(--border-2); padding-top: 9px; }
.wfps-src .src-note { font-size: 15.5px; color: var(--dim); margin: 0 0 8px; }
.wfps-src .src-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.wfps-src .src-row label { display: inline-flex; align-items: center; gap: 7px;
  font-size: 16px; color: var(--text); cursor: pointer; min-width: 0; }
/* [wf-sources-tristate-v1] narrowed connector: accent name + live count */
.wfps-src .src-row label.partial { color: var(--accent); }
.wfps-src .src-count { color: var(--accent); font-size: 14.5px; font-weight: 700;
  border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; }
.wfps-src input[type="checkbox"] { accent-color: var(--accent); }
.wfps-src .src-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.wfps-src .src-exp { background: transparent; border: none; color: var(--dim);
  font-size: 17px; padding: 6px 12px; cursor: pointer; }
.wfps-src .src-exp:hover { color: var(--text); }
.wfps-src .src-tools { margin: 2px 0 6px 26px; display: flex; flex-direction: column; gap: 3px; }
/* [wf-sources-collapse-fix-v1] the author display:flex above BEAT the
   hidden attribute's UA display:none — every tool panel rendered open,
   the exact wall of checkboxes [wf-sources-collapse-v1] exists to kill */
.wfps-src .src-tools[hidden] { display: none; }
.wfps-src .src-tools label { display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; color: var(--faint); cursor: pointer; }
.wfps-src .src-tools .src-all { color: var(--dim); font-weight: 600; }
.wfps-src .src-foot { display: flex; align-items: center; gap: 8px;
  justify-content: flex-end; margin-top: 9px; }
.wfps-src .src-err { flex: 1; font-size: 15.5px; color: #ef4444; }

/* [ux-agents-page-v1] Agents takeover page */
.agp-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.agp-tabs button { flex: 1; background: transparent; border: 1px solid var(--border-2);
  border-radius: 8px; color: var(--dim); font-size: 16px; padding: 6px 0; cursor: pointer; }
.agp-tabs button:hover { color: var(--text); }
.agp-tabs button.on { color: var(--accent); border-color: var(--accent); background: #2a2013; }
/* [ux-builder-fill-v1] #agpb-log sizing merged into the shared rule above */
/* [ux-readable-details-v1] the role prompt is prose, not code: chat font,
   readable size, full text color. was <pre>-default monospace 12px dim. */
.agp-role { margin-top: 8px; font: 400 var(--f-sm)/1.6 "Segoe UI", system-ui, sans-serif;
  color: var(--text); background: var(--dr-code-bg);
  border: 1px solid var(--border-2); border-radius: 8px; padding: 10px 12px;
  white-space: pre-wrap; max-height: 300px; overflow-y: auto; }
.agp-srcbox { margin-top: 12px; }
/* [ux-plain-preview-v1] plain-English purview lines; the role text is now a
   RENDERED markdown document behind a toggle, so pre-wrap no longer applies */
.agp-purview { margin-top: 6px; }
.agp-purview p { margin: 3px 0; }
.agp-role.md { white-space: normal; }
.agp-role-toggle { margin-top: 8px; }

/* [ux-projects-page-v1] contract key/value rows on the Projects page */
.pjp-kv { display: flex; gap: 10px; padding: 3px 0; font-size: 17.5px; }
.pjp-kv .k { flex: none; width: 120px; color: var(--faint); }
.pjp-kv .v { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
#wfp-preview.on { border-color: var(--accent); color: var(--accent); }
.wfp-rename-input {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: 8px; padding: 4px 10px; color: var(--text);
  font-size: 22px; font-weight: 600; width: 320px;
}

/* -------------------------------------------- [ux-attachments-v1] ---- */
#attachbtn {
  color: var(--dim); padding: 8px; border-radius: 8px;
  border: 1px solid transparent; flex: none;
}
#attachbtn:hover { color: var(--text); border-color: var(--border-2); }
#attachbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#attchips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 4px 8px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 15.5px;
}
.att-chip .sz { color: var(--faint); font-size: 14.5px; }
.att-chip button { color: var(--faint); font-size: 17px; padding: 0 5px; }
.att-chip button:hover { color: var(--bad); }
/* [ux-project-sources-v1] Project Builder paperclip + Standing sources */
#pjpb-atts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 4px 8px; }
#pjpb-attach { padding: 4px 8px; }
#pjpb-attach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pjp-src-row { display: flex; gap: 8px; margin: 8px 0; }
.pjp-src-row input { flex: 1; }
.cchip .x { color: var(--faint); padding: 0 4px; cursor: pointer; }
.cchip .x:hover { color: var(--bad); }
#pjp-src-tables { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; }
#pjp-src-tables label { display: inline-flex; gap: 6px; align-items: center; font-size: 14.5px; }
#pjp-src-tables .rows { color: var(--faint); font-size: 13px; }

/* --------------------------------------------- [ux-run-cards-v1] ----
   Inline expandable workflow run cards (Option A2). */
.wf-card {
  border: 1px solid var(--border-2); border-radius: 12px;
  background: var(--panel-2); padding: 12px 14px; max-width: 720px;
}
.wf-card.done { opacity: .92; }
.wf-head { display: flex; align-items: center; gap: 10px; }
.wf-label { font-weight: 700; }
.wf-state { color: var(--dim); font-size: var(--f-sm); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-stop, .wf-pause, .wf-resume {
  color: var(--bad); border: 1px solid var(--bad); border-radius: 7px;
  padding: 3px 12px; font-size: 15.5px;
}
.wf-stop:hover { background: #3a1512; }
/* [ux-wf-pause-resume-v1] pause/resume are neutral holds, not destructive */
.wf-pause, .wf-resume { color: var(--dim); border-color: var(--dim); margin-right: 6px; }
.wf-pause:hover, .wf-resume:hover { background: #1c2430; }
/* [ux-pause-honesty-v1] restart-after-pause pill on stage rows */
.wf-sbadge { font-size: 12.5px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1px 8px; margin-right: 6px; opacity: .85; white-space: nowrap; }
.wf-stages { margin-top: 10px; }
.wf-stage {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 6px 2px; cursor: pointer; border-top: 1px solid var(--border);
}
.wf-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
.wf-stage[data-status="running"] .wf-dot { background: var(--accent); animation: actpulse 1.2s infinite; }
.wf-stage[data-status="complete"] .wf-dot { background: #22c55e; }
.wf-stage[data-status="failed"] .wf-dot { background: var(--bad); }
.wf-sname { font-size: var(--f-sm); font-weight: 600; }
.wf-sstate { font-size: 15px; color: var(--faint); }
.wf-stage .act-chev { margin-left: auto; }
.wf-sbody { display: none; flex-basis: 100%; padding: 4px 0 6px 18px; cursor: default; }
.wf-stage.open .wf-sbody { display: block; }
.wf-prog { margin-top: 8px; font-size: 15.5px; color: var(--dim); font-style: italic; }
.wf-decide { flex-basis: 100%; display: flex; gap: 10px; justify-content: flex-end; padding: 8px 0 4px; }
.wf-retry {
  color: var(--text); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 7px 16px; font-size: var(--f-sm);
}
.wf-retry:hover { border-color: var(--faint); }

/* ---------------------------------------------- [ux-settings-v1] ----
   Settings takeover page: gateway, API keys with live gateway dots,
   Ollama model management. BOARD open question resolved: web view. */
.set-page { max-width: 640px; margin: 40px auto; padding: 0 24px 60px; overflow-y: auto; height: 100%; }
.set-title { font-size: 28.5px; font-weight: 600; margin-bottom: 20px; letter-spacing: -.01em; }
.set-card {
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
}
.set-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.set-sub { font-size: 14.5px; color: var(--faint); font-weight: 400; }
.set-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.set-l { width: 128px; flex: none; font-size: var(--f-sm); color: var(--dim); display: flex; align-items: center; gap: 7px; }
.set-row input {
  flex: 1; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: var(--f-sm);
}
.set-row input:focus { border-color: var(--accent); outline: none; }
.set-hint { font-size: 17px; color: var(--dim); margin-top: 2px; }
/* [ux-preview-typography-v1] descriptions inside a structure pane read at
   the role block's size and colour; list-pane hints stay small and dim. */
.wfp-structure .set-hint { font-size: var(--f-sm); color: var(--text); line-height: 1.6; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #555; flex: none; display: inline-block; }
.dot.on { background: #22c55e; }
.set-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.set-status { flex: 1; font-size: 15.5px; color: var(--dim); }
.set-status.ok { color: #22c55e; }
.set-status.err { color: var(--bad); }
.btn-accent {
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
  border-radius: 8px; padding: 8px 18px; font-size: var(--f-sm);
}
.btn-accent:disabled { opacity: .5; }
.ol-list { margin-bottom: 12px; }
.ol-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.ol-row:last-child { border-bottom: none; }
.ol-name { font-size: var(--f-sm); }
.ol-size { font-size: 15px; color: var(--faint); }
.ol-run { font-size: 13px; font-weight: 700; color: #22c55e; border: 1px solid #22c55e55; border-radius: 999px; padding: 1px 7px; }
.ol-del { margin-left: auto; color: var(--faint); font-size: 15.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid transparent; }
.ol-del:hover { color: var(--bad); border-color: var(--border-2); }
.ol-del.confirm { color: var(--bad); border-color: var(--bad); }
/* [ux-uniform-actions-v1] page-toolbar Delete gets the same box as
   .wf-retry (Duplicate/Edit/Rename) so every action button matches.
   The compact .ol-del above stays for list rows. [ux-del-instant-v1] */
#wfp-del, #agp-del, #pjp-del { margin-left: auto; color: var(--text);
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 7px 16px; font-size: var(--f-sm); }
#wfp-del:hover, #agp-del:hover, #pjp-del:hover { color: var(--bad); border-color: var(--bad); }
#wfp-del.confirm, #agp-del.confirm, #pjp-del.confirm { color: var(--bad); border-color: var(--bad); }
.ol-pull-row { margin-top: 6px; }
.ol-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ol-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.ol-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
#ol-prog-label { font-size: 15px; color: var(--dim); min-width: 130px; text-align: right; }

/* ---------------------------------------- [ux-custom-select-v1] ----
   In-DOM dropdowns replacing native <select> popups (QtWebEngine draws
   those in a separate native window that clips/mispositions here). */
.dd { position: relative; flex: 1; min-width: 0; }
.dd-native {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; overflow: hidden;
}
.dd-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 7px 10px; color: var(--text);
  font-size: var(--f-sm); text-align: left; cursor: pointer;
}
.dd-btn:hover { border-color: var(--faint); }
.dd.disabled .dd-btn { opacity: .45; cursor: default; }
.dd.disabled .dd-btn:hover { border-color: var(--border-2); }
.dd.open .dd-btn { border-color: var(--accent); }
.dd-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-arr { color: var(--faint); flex: none; font-size: 15.5px; }
.dd-menu {
  position: absolute; left: 0; right: 0; z-index: 60;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 4px;
  max-height: 320px; overflow-y: auto;   /* [ux-model-picker-v2] */
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.dd-opt {
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: var(--f-sm); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-opt:hover { background: var(--surface); }
.dd-opt .dot, .dd-btn .dot { margin-right: 8px; }   /* [ux-model-dots-v1] */
.dd-opt { display: flex; align-items: center; }
.dd-opt.sel { color: var(--accent); font-weight: 600; }
.dd-group {
  padding: 8px 10px 3px; font-size: 13.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
/* [ux-dd-typeahead-v1] filter box + empty state inside the dropdown menu */
.dd-filter {
  display: block; width: calc(100% - 8px); margin: 4px 4px 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 7px;
  padding: 6px 9px; font: inherit; font-size: var(--f-sm); outline: none;
}
.dd-filter:focus { border-color: var(--accent); }
.dd-empty { padding: 8px 10px; color: var(--faint); font-size: var(--f-sm); }
#gwdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#gwdot.on  { background: var(--good); box-shadow: 0 0 6px rgba(76,195,138,.7); }
#gwdot.off { background: var(--bad); }

#messages {
  flex: 1; overflow-y: auto;
  padding: 26px max(6%, 24px) 16px;
  scroll-behavior: smooth;
}
#empty { margin-top: 18vh; text-align: center; }
.empty-title { font-size: 28.5px; font-weight: 600; letter-spacing: -.01em; }
.empty-sub { color: var(--faint); font-size: var(--f-sm); margin-top: 10px; max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.65; }

.msg { max-width: 860px; margin: 0 auto 20px; }
.msg.user { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.msg.user .bubble {
  background: var(--user-bub); border: 1px solid var(--border-2);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 14px; max-width: 78%; white-space: pre-wrap;
}
.msg.assistant .md { color: var(--text); }
.msg.assistant.streaming .md::after {
  content: "▌"; color: var(--accent); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.thinking { display: inline-flex; gap: 6px; align-items: center; padding: 4px 0; }
.thinking i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  animation: shape 1.2s ease-in-out infinite;
}
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes shape {
  0%, 100% { transform: scale(.6) translateY(0); opacity: .35; border-radius: 50%; }
  50%      { transform: scale(1) translateY(-4px); opacity: 1; border-radius: 30%; }
}
.msg.assistant.streaming.thinking-on .md::after { content: none; }
/* ---------------------------------------- [ux-live-activity-v1] ----
   Grouped, expandable tool-activity rows (port of DreamerApp's
   ToolCallBubble) inside a quiet container: indent + left rule, so the
   user bubble / activity block / answer rhythm reads as three registers. */
.live-activity {
  margin: 2px 0 12px 2px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--border-2);
}
.act-row { margin: 0; }
.act-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; cursor: pointer; user-select: none;
  font-size: var(--f-sm); color: var(--dim); min-width: 0;
}
.act-hdr:hover { color: var(--text); }
.act-label { font-weight: 600; color: var(--text); flex: none; }
.act-sum {
  color: var(--dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.act-chev { margin-left: auto; color: var(--faint); font-size: 17px; flex: none; }
.act-detail { display: none; padding: 0 0 6px 25px; }
.act-row.open > .act-detail { display: block; }
.act-detail > div {
  font-size: 15.5px; color: var(--text); line-height: 1.55;
  overflow-wrap: anywhere;
}
.act-detail .k { color: var(--faint); }
/* [ux-sql-plain-english-v1] (UX-0047) plain-English SQL summary. Source
   chips WRAP freely -- no clamp, no "+n more": the reader sees every
   source that was read. */
.sqlsum { margin: 2px 0 4px; }
.sqlsum-l { font-size: 15.5px; color: var(--text); line-height: 1.55; }
.sqlsum-l b { font-weight: 600; }
.sqlsum-chips {
  display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 5px;
}
.sqlsum-chip {
  font-size: 13.5px; line-height: 1.5; color: var(--dim);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
.act-row.live .act-label { color: var(--accent); }
.act-row.live .conn-badge, .act-row.live .conn-ic { animation: actpulse 1.4s ease-in-out infinite; }
@keyframes actpulse { 50% { opacity: .45; } }

/* connector identity: tinted SVG (mask) with letter-badge fallback */
.conn-ic-holder { display: inline-flex; align-items: center; flex: none; }
.conn-badge {
  width: 16px; height: 16px; border-radius: 5px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-style: normal;
}
.conn-ic {
  width: 16px; height: 16px; display: inline-block; flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* the "working" visual between tool phases: light wave + connector + verb */
.live-work {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 12px 2px; padding: 8px 12px 8px 14px;
  border-left: 2px solid var(--accent);
  background: rgba(239,159,39,.05);
  border-radius: 0 8px 8px 0;
  font-size: var(--f-sm);
}
.lw-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; flex: none; }
.lw-wave i {
  width: 3px; height: 5px; border-radius: 2px;
  background: var(--accent); display: inline-block;
  animation: lwave 1.1s ease-in-out infinite;
}
.lw-wave i:nth-child(2) { animation-delay: .12s; }
.lw-wave i:nth-child(3) { animation-delay: .24s; }
.lw-wave i:nth-child(4) { animation-delay: .36s; }
.lw-wave i:nth-child(5) { animation-delay: .48s; }
@keyframes lwave {
  0%, 100% { height: 5px; opacity: .45; }
  50%      { height: 14px; opacity: 1; }
}
.lw-label { font-weight: 700; flex: none; }
.lw-verb { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.error .md { color: var(--bad); }

/* markdown — [ux-live-activity-v1] ownership split: renderer.css owns ALL
   message typography (headings, p, lists, code, pre, tables, blockquote,
   links, hr) via its element selectors, which also style the marked()
   fallback path since renderer.css is loaded unconditionally. app.css keeps
   only shell-specific message chrome — no .md primitive rules here, so no
   doubled borders/margins. */

/* ---------------------------------------------------------- composer */
#composer {
  flex: none; padding: 10px max(6%, 24px) 16px;
  border-top: 1px solid var(--border);
}
#inputwrap {
  max-width: 860px; margin: 0 auto;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 4px 6px;
}
#inputwrap:focus-within { border-color: var(--accent); }
#input {
  width: 100%; max-height: 180px; resize: none;
  background: none; border: none; outline: none;
  color: var(--text); font: inherit; padding: 8px 10px;
}
#input::placeholder { color: var(--faint); }
#composebar {
  max-width: 860px; margin: 8px auto 0;
  display: flex; align-items: center; gap: 8px;
  position: relative;
}
.chip {
  font-size: 15.5px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--dim);
}
.chip:hover { color: var(--text); }
.chip.on { background: #33270f; border-color: var(--accent); color: var(--accent); }
.modeltag {
  font-size: 15.5px; color: var(--dim); padding: 4px 10px;
  border: 1px solid transparent; border-radius: 999px;
}
.modeltag:hover { border-color: var(--border-2); color: var(--text); }
#modelpop {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 8px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 12px 14px; z-index: 30;
  min-width: 560px; max-width: calc(100vw - 48px);   /* [ux-model-picker-v2] wider Neural/Oracle boxes */
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.pop-h { font-size: 14.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.pop-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pop-l { width: 56px; font-size: 15.5px; font-weight: 600; flex: none; }
.pop-l.neural { color: #b794f4; }
.pop-l.oracle { color: var(--accent); }
.pop-row select {
  flex: 1; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 7px 8px; font: inherit; font-size: 17px; outline: none;
}
.pop-row select:focus { border-color: var(--accent); }
.pop-note { font-size: 14.5px; color: var(--faint); margin-top: 6px; }
.flex { flex: 1; }
#sendbtn {
  padding: 7px 22px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
#sendbtn:hover { filter: brightness(1.07); }
#sendbtn:disabled { opacity: .45; cursor: default; filter: none; }
.ghost {
  padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--border-2); color: var(--dim); font-size: 17px;
}
.ghost:hover { color: var(--bad); border-color: var(--bad); }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }
::-webkit-scrollbar-track { background: transparent; }

/* [ux-connectors-dashboard-v1] Connectors + Dashboard takeover views */
.dashv { max-width: 900px; padding: 4px 6px; }
.dashv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dashv-head h2 { font-size: 26px; font-weight: 600; }
.db-sub { font-size: 19.5px; font-weight: 600; margin: 18px 0 6px; }
.db-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.db-card { flex: 1 1 150px; min-width: 150px; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 14px; }
.db-card .db-k { font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.db-card .db-v { font-size: 22px; font-weight: 600; margin-top: 4px; overflow-wrap: anywhere; }
.db-card .db-s { font-size: 16px; color: var(--dim); margin-top: 3px; }
.db-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.cn-chip { font-size: 15.5px; font-weight: 600; border-radius: 999px; padding: 4px 12px;
  border: 1px solid; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: transparent; }
.cn-chip .dot { width: 7px; height: 7px; }
.cn-chip.on { color: #22c55e; border-color: #22c55e40; }
.cn-chip.on .dot { background: #22c55e; }
.cn-chip.off { color: #f59e0b; border-color: #f59e0b55; }      /* D11 amber: you switched it off */
.cn-chip.off .dot { background: #f59e0b; }
.cn-chip.down { color: #ef4444; border-color: #ef444440; }
.cn-chip.down .dot { background: #ef4444; }
.cn-chip:hover { filter: brightness(1.25); }

/* [ux-overlay-badges-v1] floating results overlay + rail badges */
.rail-btn { position: relative; }
.rail-badge { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px;
  border-radius: 999px; background: var(--accent); color: #1a1408; font-size: 12.5px;
  font-weight: 800; line-height: 15px; text-align: center; padding: 0 3px; pointer-events: none; }
.rail-badge.run { background: #22c55e; color: #06130a; }

/* [ux-dashboard-value-v1] ValueDashboard port pieces */
.db-card.db-wide { flex: 2 1 320px; }
.db-card .db-v.good { color: #38a169; }
.db-card .db-v.dim { color: var(--dim); }
.db-2col { display: flex; gap: 24px; margin-top: 6px; }
.db-bar { height: 6px; border-radius: 999px; background: var(--border-2); margin: 10px 0 6px; overflow: hidden; }
.db-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width .5s ease; }
#db-l0-bar { background: #63b3ed; }

/* [ux-polish-pass-v1] rail hover labels — big, clean, no native tooltip */
.rail-btn::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  background: var(--panel-2, var(--surface)); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 6px 12px; font-size: 18px; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); z-index: 80;
}
.rail-btn:hover::after { opacity: 1; }

/* [ux-model-health-v1] combined Neural·Oracle health dot states */
.dot.amber { background: #f59e0b; }
.dot.bad { background: #ef4444; }
.modeltag { display: inline-flex; align-items: center; gap: 7px; }

/* [ux-conv-splitter-v1] draggable/collapsible divider for the chat sidebar */
#convsplit { width: 6px; flex: none; cursor: col-resize; position: relative; }
#convsplit::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px;
  width: 1px; background: var(--border); transition: background .12s, width .12s; }
#convsplit:hover::after { left: 1px; width: 3px; background: var(--accent); }
body.takeover #convsplit { display: none; }
body.convcollapsed #convpanel { display: none; }

/* [brain-v2-canvas-v1] the WaitingCanvas port — one canvas hosts the
   traveling brain AND the pinned connector halo at the extreme right */
.live-work .lw-row { display: flex; align-items: center; gap: 9px; }
.live-work.brand .lw-ic, .live-work.brand .lw-label { display: none; }
.lw-stage { display: none; }
.live-work.brand .lw-stage { display: block; width: 100%; height: 110px;
  margin: 8px 0 2px; overflow: hidden; }
.lw-canvas { display: block; width: 100%; height: 100%; }
}
}

/* [wf-stage-save-v1] per-stage Save on run cards;
   [ux-stage-view-v1] View shares the exact same styling */
.wf-ssave, .wf-sview { font-size: 15.5px; padding: 2px 10px; margin-right: 6px; }

/* [ux-reconcile-save-v1] conflict resolution cards */
.bconf { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.bconf-card { border: 1px solid var(--line, #3a3a3a); border-radius: 8px;
  padding: 10px 12px; background: rgba(255,255,255,0.03); }
.bconf-topic { font-weight: 600; margin: 0 0 4px; }
.bconf-detail { opacity: 0.75; font-size: 0.9em; margin: 0 0 8px;
  white-space: pre-wrap; }
.bconf-opt { display: block; width: 100%; text-align: left; margin: 4px 0;
  padding: 6px 10px; border: 1px solid var(--line, #3a3a3a);
  border-radius: 6px; background: transparent; cursor: pointer; }
.bconf-opt:hover { background: rgba(255,255,255,0.06); }
.bconf-opt.on { border-color: var(--brand, #e8722a);
  background: rgba(232,114,42,0.15); }
.bconf-save { align-self: flex-end; padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--brand, #e8722a); background: var(--brand, #e8722a);
  color: #fff; cursor: pointer; }
.bconf-save:disabled { opacity: 0.45; cursor: default; }

/* [ux-sessions-panel-v1] (dbr-0006) Browser Sessions panel */
.brsv { max-width: 900px; padding: 4px 6px; }
.brsv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.brsv-head h2 { font-size: 26px; font-weight: 600; }
.rail-badge.warn { background: var(--bad); color: #fff; }   /* needs_login count */
.brs-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border-2); border-radius: 10px; margin: 8px 0; }
.brs-row .t { font-size: var(--f-sm); font-weight: 600; }
.brs-row .m { font-size: 16px; color: var(--dim); margin-top: 2px;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brs-row .grow { flex: 1 1 auto; min-width: 0; }
.brs-badge { font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--border-2); border-radius: 999px; padding: 2px 9px;
  color: var(--dim); text-transform: uppercase; }
.brs-pill { font-size: 13.5px; font-weight: 700; border-radius: 999px;
  padding: 3px 11px; white-space: nowrap; }
.brs-pill.connected { color: var(--good); border: 1px solid var(--good); }
.brs-pill.needs_login { color: var(--accent); border: 1px solid var(--accent); }
.brs-pill.dead { color: var(--bad); border: 1px solid var(--bad); }
.brs-tab { display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: 1px solid var(--border-2); border-radius: 10px; margin: 6px 0;
  color: var(--text); }
.brs-tab:hover { border-color: var(--accent); }
/* [connect-ux-v1] (UX-0019) internal (chrome://) rows: visibly dead */
.brs-tab.internal { opacity: .45; cursor: default; }
.brs-tab.internal:hover { border-color: var(--border-2); }
.brs-tab .u { display: block; font-size: 15px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#brs-tabs { margin-top: 14px; }

/* ---------------------------------------------------------------------- */
/* [dreamer-media-v1] UX-0024 -- media editor pane                          */
/* ---------------------------------------------------------------------- */
#med-overlay { position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 8, 6, .72); display: flex;
  align-items: center; justify-content: center; }
/* UX-0025: an author display rule outranks the UA [hidden] rule, so
   the pane painted from app start and medClose() could not hide it.
   Same trap .wfp-builder documents; #med-vargrid rides the same fix. */
#med-overlay[hidden], #med-vargrid[hidden] { display: none; }
#med-pane { width: min(1180px, 94vw); height: min(760px, 92vh);
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 12px; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); }
#med-head { display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-2); }
#med-title { font-weight: 600; }
#med-id { font-size: var(--f-sm); user-select: text; }
#med-spacer { flex: 1; }
.med-dim { color: var(--dim); }
/* UX-0027: compliance block -- reference for the human reviewer */
#med-compliance ul { margin: 2px 0 8px; padding-left: 18px; }
#med-compliance li { font-size: 12px; line-height: 1.45; }
#med-compliance .med-comp-h { font-weight: 600; font-size: 12px;
  margin-top: 4px; color: var(--dim); }
#med-back, #med-close, #med-download { background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 7px;
  padding: 4px 10px; cursor: pointer; }
#med-back:hover, #med-close:hover { border-color: var(--accent); }
#med-body { flex: 1; display: flex; min-height: 0; }
#med-stage { flex: 1; display: flex; flex-direction: column;
  min-width: 0; padding: 14px; gap: 10px; }
#med-preview { flex: 1; min-height: 0; display: flex;
  align-items: center; justify-content: center;
  background: var(--panel-2); border-radius: 10px; overflow: hidden; }
#med-preview img, #med-preview video { max-width: 100%; max-height: 100%;
  object-fit: contain; }
#med-vargrid { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; }
#med-vargrid figure { margin: 0; cursor: pointer; text-align: center; }
#med-vargrid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border-2); }
#med-vargrid img:hover { border-color: var(--accent); }
#med-vargrid figcaption { font-size: 14px; color: var(--dim);
  margin-top: 3px; }
#med-status { min-height: 20px; font-size: var(--f-sm);
  color: var(--dim); }
#med-status.err { color: #e06a5a; }
#med-status.ok { color: #7fbf7f; }
#med-side { width: 320px; border-left: 1px solid var(--border-2);
  overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 12px; }
.med-sec h4 { margin: 0 0 8px; font-size: var(--f-sm);
  text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
#med-prov-rows { display: grid; grid-template-columns: auto 1fr;
  gap: 3px 10px; font-size: var(--f-sm); }
#med-prov-rows .k { color: var(--dim); white-space: nowrap; }
#med-prov-rows .v { user-select: text; overflow-wrap: anywhere; }
#med-prov-rows .v button { background: none; border: none;
  color: var(--accent); cursor: pointer; padding: 0;
  font-size: inherit; text-decoration: underline; }
#med-adjust label { display: grid;
  grid-template-columns: 84px 1fr; align-items: center; gap: 8px;
  font-size: var(--f-sm); color: var(--dim); margin-bottom: 5px; }
#med-adjust input[type="range"] { width: 100%; accent-color: var(--accent); }
#med-adj-apply { margin-top: 6px; width: 100%; }
#med-crop-presets, #med-xform { display: flex; flex-wrap: wrap; gap: 6px; }
#med-xform { margin-top: 8px; }
#med-crop-presets button, #med-xform button, #med-cutset,
#med-replay { background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 7px;
  padding: 5px 9px; cursor: pointer; font-size: var(--f-sm); }
#med-crop-presets button:hover, #med-xform button:hover,
#med-cutset:hover, #med-replay:hover { border-color: var(--accent); }
#med-cutset { width: 100%; }
#med-recipe-list { margin: 0 0 8px; padding-left: 18px;
  font-size: var(--f-sm); color: var(--dim); max-height: 110px;
  overflow-y: auto; }
#med-replay-row { display: flex; gap: 6px; }
#med-replay-target { flex: 1; min-width: 0; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border-2);
  border-radius: 7px; padding: 5px 8px; font-size: 14px; }
#med-decide { margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--border-2); display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
#med-decide button[disabled] { opacity: .45; cursor: default; }
#med-reject { background: var(--panel-2); color: #e06a5a;
  border: 1px solid var(--border-2); border-radius: 7px;
  padding: 6px 12px; cursor: pointer; }
#med-decide-note { font-size: 14px; flex-basis: 100%; }
.med-busy { opacity: .55; pointer-events: none; }

/* [ux-refresh-feedback-v1] (UX-0029) a clicked refresh always answers:
   the glyph spins while the fetch is out and the button disarms. */
@keyframes ux-spin { to { transform: rotate(360deg); } }
.pop-refresh.spin, .wf-retry.spin { pointer-events: none; opacity: .75; }
.pop-refresh.spin { animation: ux-spin .9s linear infinite; }
.wf-retry.spin { animation: ux-spin .9s linear infinite; }