/* ORM Coach POC — layout + component styles (layered on style.css). */

/* Swiss Re corporate typeface — same faces the productive OneORM app ships. */
@font-face {
  font-family: SwissReSanRegu;
  src: url("fonts/SwissReSan-Regu.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: SwissReSanRegu;
  src: url("fonts/SwissReSan-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: SwissReSanRegu;
  src: url("fonts/SwissReSan-Ligh.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: SwissReSanRegu;
  src: url("fonts/SwissReSan-Ital.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Swiss Re OneORM palette — primary is the productive Material blue
     (primary-40 / -30); green is reserved for positive/success status only. */
  --orm-teal: #1e5bba;         /* primary blue (mat primary-40) */
  --orm-teal-dark: #004397;    /* darker blue hover (mat primary-30) */
  --orm-bg: #fafafa;
  --orm-surface: #ffffff;
  --orm-border: #d9d9d9;
  --orm-text: #3c4150;         /* Swiss Re slate */
  --orm-muted: #6b7280;
  --orm-accent: #246293;       /* secondary blue */
  --orm-err: #d32f2f;          /* mat error red */
  --orm-ok: #00aa91;           /* green 500 — success/positive only */
  /* Extended tokens for the guided workflow surface. */
  --orm-teal-20: #d8e2ff;      /* primary-90 (soft blue fills) */
  --orm-warn: #ce8d2c;         /* highlight / quality-gate amber */
  --orm-warn-bg: #fdf3e3;
  --orm-chip: #dce6f5;         /* Swiss Re chip blue */
  --orm-field: #e4e9f3;        /* form-field fill */
  /* Soft blue tints (replace the former mint/teal wash). */
  --orm-soft: #eef3fc;         /* very light primary wash */
  --orm-soft-2: #e4ecfb;       /* light primary wash */
  --orm-soft-3: #dbe6fb;       /* stepper/step done */
  --orm-soft-border: #c3d5f4;  /* soft primary border */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: SwissReSanRegu, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--orm-text);
  background: var(--orm-bg);
}

/* Header ------------------------------------------------------------------ */
.orm-header {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px;
  background: var(--orm-surface);
  border-bottom: 1px solid var(--orm-border);
  position: sticky; top: 0; z-index: 10;
}
.orm-brand { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; }
.orm-logo { font-weight: 700; font-size: 18px; color: var(--orm-teal); }
.orm-sub { font-size: 11px; color: var(--orm-muted); }
.orm-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.orm-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  text-decoration: none; color: var(--orm-text);
  font-size: 14px; font-weight: 500;
}
.orm-tab:hover { background: #eef2f9; }
.orm-tab.is-active { background: var(--orm-teal); color: #fff; }

/* Tech dropdown in the top nav (hover / keyboard focus reveals the menu). */
.orm-tab-drop { position: relative; }
.orm-tab-drop-btn { border: none; background: none; cursor: pointer; font: inherit; }
.orm-tab-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 180px; margin-top: 4px; padding: 6px;
  background: var(--orm-surface); border: 1px solid var(--orm-border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.orm-tab-drop:hover .orm-tab-menu,
.orm-tab-drop:focus-within .orm-tab-menu { display: block; }
.orm-tab-menu-item {
  display: block; padding: 8px 12px; border-radius: 6px;
  text-decoration: none; color: var(--orm-text); font-size: 14px;
}
.orm-tab-menu-item:hover { background: #eef2f9; color: var(--orm-teal-dark); }
.orm-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 999px;
  background: #e4ecfb; color: var(--orm-teal-dark);
}
.orm-tab.is-active .orm-badge { background: rgba(255,255,255,.25); color: #fff; }
.orm-badge--lg { font-size: 12px; padding: 3px 10px; }
.orm-user { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--orm-muted); margin-left: auto; }

/* Header menu button + slide-in drawer ------------------------------------ */
.orm-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--orm-border);
  background: var(--orm-surface); border-radius: 8px; cursor: pointer;
}
.orm-menu-btn:hover { background: #eef2f9; }
.orm-menu-icon, .orm-menu-icon::before, .orm-menu-icon::after {
  display: block; width: 18px; height: 2px; background: var(--orm-text);
  border-radius: 2px; position: relative;
}
.orm-menu-icon::before, .orm-menu-icon::after { content: ""; position: absolute; left: 0; }
.orm-menu-icon::before { top: -6px; }
.orm-menu-icon::after { top: 6px; }

.orm-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .4);
  opacity: 0; transition: opacity .2s ease; z-index: 40;
}
.orm-drawer-backdrop.is-open { opacity: 1; }
.orm-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 82vw;
  background: var(--orm-surface); border-right: 1px solid var(--orm-border);
  box-shadow: 2px 0 16px rgba(15, 23, 42, .12);
  transform: translateX(-100%); transition: transform .2s ease; z-index: 41;
  display: flex; flex-direction: column;
}
.orm-drawer.is-open { transform: translateX(0); }
.orm-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--orm-border);
}
.orm-drawer-title { font-weight: 700; font-size: 14px; color: var(--orm-muted); letter-spacing: .04em; text-transform: uppercase; }
.orm-drawer-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--orm-muted); }
.orm-drawer-close:hover { color: var(--orm-text); }
.orm-drawer-nav { display: flex; flex-direction: column; padding: 12px; gap: 4px; }
.orm-drawer-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-radius: 8px; text-decoration: none;
  color: var(--orm-text); font-size: 15px; font-weight: 500;
}
.orm-drawer-link:hover { background: #eef2f9; }
.orm-drawer-link.is-active { background: var(--orm-teal); color: #fff; }
.orm-drawer-link.is-active .orm-badge { background: rgba(255,255,255,.25); color: #fff; }
.orm-drawer-section {
  margin: 14px 14px 4px; padding-top: 12px; border-top: 1px solid var(--orm-border);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orm-muted);
}
.orm-drawer-link--tech { font-size: 14px; color: var(--orm-teal-dark); }

.orm-btn {
  background: var(--orm-teal); color: #fff; border: none;
  padding: 8px 16px; border-radius: 8px; font-size: 14px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.orm-btn:hover { background: var(--orm-teal-dark); }
.orm-btn--ghost { background: transparent; color: var(--orm-teal); border: 1px solid var(--orm-border); }
.orm-btn:disabled { opacity: .5; cursor: default; }

.orm-main { max-width: 1200px; margin: 0 auto; padding: 20px; }

/* Home landing page ------------------------------------------------------- */
.home { max-width: 960px; margin: 48px auto; padding: 0 20px; text-align: center; }
.home-poc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; margin: 0 0 18px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--orm-accent); background: var(--orm-teal-20);
  border: 1px solid rgba(30, 91, 186, .25);
}
.home-title { font-size: 34px; font-weight: 700; color: var(--orm-teal-dark); margin: 0 0 14px; }
.home-lead { font-size: 17px; line-height: 1.6; color: var(--orm-muted); margin: 0 auto 40px; max-width: 680px; }
.home-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  text-align: left;
}
.home-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 30px 28px; border: 1px solid var(--orm-border); border-radius: 16px;
  background: var(--orm-surface); text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.home-card:hover {
  border-color: var(--orm-teal); box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
  transform: translateY(-3px);
}
.home-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  color: var(--orm-teal); background: var(--orm-teal-20);
}
.home-card-label { font-size: 20px; font-weight: 700; color: var(--orm-text); }
.home-card-blurb { font-size: 14.5px; line-height: 1.55; color: var(--orm-muted); flex: 1 1 auto; }
.home-card-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 14px; font-weight: 600; color: var(--orm-teal);
}
a.home-card:hover .home-card-cta { color: var(--orm-teal-dark); }
a.home-card:hover .home-card-cta svg { transform: translateX(3px); }
.home-card-cta svg { transition: transform .15s ease; }
.home-foot { margin: 40px auto 0; max-width: 620px; font-size: 13px; color: var(--orm-muted); }

/* Coming-soon (not yet demo-ready) cards — non-clickable. */
.home-card.is-soon { border-style: dashed; background: #fbfbfc; cursor: default; }
.home-card.is-soon .home-card-icon { color: var(--orm-muted); background: #f0f1f3; }
.home-card.is-soon .home-card-label { color: var(--orm-muted); }
.soon-tag {
  display: inline-flex; align-items: center; margin-top: 4px;
  padding: 3px 12px; border-radius: 999px; line-height: 1;
  font-size: 12px; font-weight: 600;
  color: var(--orm-muted); background: #eef0f2; border: 1px solid var(--orm-border);
}

/* Coming-soon header tabs — shown but non-clickable. */
.orm-tab.is-soon { cursor: default; opacity: .6; }
.orm-tab.is-soon:hover { color: inherit; }
.orm-tab-soon {
  padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600;
  color: var(--orm-muted); background: #eef0f2; border: 1px solid var(--orm-border);
}

/* "Under construction" marker (use-case header banner) -------------------- */
.wip-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1;
  color: #92580a; background: #fdf1d6; border: 1px solid #f2d492;
}

/* Admin — user notes table ------------------------------------------------ */
.admin { max-width: 1200px; margin: 24px auto; padding: 0 20px; }
.admin-head { margin-bottom: 18px; }
.admin-title { font-size: 26px; font-weight: 700; color: var(--orm-teal-dark); margin: 0 0 6px; }
.admin-sub { font-size: 14px; color: var(--orm-muted); margin: 0; max-width: 640px; }
.admin-denied {
  padding: 16px 18px; border-radius: 12px; font-size: 14px;
  color: #92580a; background: #fdf1d6; border: 1px solid #f2d492;
}
.admin-denied strong { display: block; margin-bottom: 2px; }
.admin-controls {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.admin-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--orm-muted);
}
.admin-field--grow { flex: 1 1 260px; }
.admin-field select, .admin-field input {
  padding: 7px 10px; border: 1px solid var(--orm-border); border-radius: 8px;
  font-size: 14px; color: var(--orm-text); background: var(--orm-surface);
}
.admin-count { margin-left: auto; font-size: 13px; color: var(--orm-muted); }
.admin-table-wrap {
  border: 1px solid var(--orm-border); border-radius: 12px; overflow: auto;
  background: var(--orm-surface);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  position: sticky; top: 0; text-align: left; font-weight: 600; color: var(--orm-muted);
  padding: 10px 14px; background: #f7f8fa; border-bottom: 1px solid var(--orm-border);
  white-space: nowrap;
}
.admin-table td { padding: 10px 14px; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-when { white-space: nowrap; color: var(--orm-muted); }
.admin-note { min-width: 280px; color: var(--orm-text); }
.admin-muted { color: var(--orm-muted); font-size: 11px; }
.admin-empty { text-align: center; color: var(--orm-muted); padding: 24px 14px; }
.admin-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; color: var(--orm-accent); background: var(--orm-teal-20);
  border: 1px solid rgba(30, 91, 186, .2); white-space: nowrap;
}
.admin-cat {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  color: var(--orm-muted); background: #eef0f2; border: 1px solid var(--orm-border);
}
.admin-cat--bug { color: #b42318; background: #fdeceb; border-color: #f6c9c4; }
.admin-cat--data { color: #92580a; background: #fdf1d6; border-color: #f2d492; }

/* Use-case chat shell ----------------------------------------------------- */
.uc-shell { display: flex; flex-direction: column; height: calc(100vh - 120px); }
.uc-shell--split { --chat-w: 60%; }
.uc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.uc-title { font-size: 20px; margin: 0 8px 0 0; display: inline; }

.uc-body { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; align-items: stretch; }

/* Guide/history side drawer ---------------------------------------------- */
.uc-drawer-open {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--orm-surface); border: 1px solid var(--orm-border);
  border-radius: 999px; padding: 6px 14px; color: var(--orm-teal-dark);
  font-family: inherit; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; transition: background .15s, border-color .15s;
}
.uc-drawer-open:hover { background: #eef3fc; border-color: var(--orm-teal); }
.uc-drawer-scrim {
  position: fixed; inset: 0; background: rgba(15, 23, 23, .32);
  z-index: 40; animation: uc-scrim-in .18s ease;
}
@keyframes uc-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.uc-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 88vw;
  background: var(--orm-surface); border-left: 1px solid var(--orm-border);
  box-shadow: -8px 0 28px rgba(15, 23, 23, .16); z-index: 41;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.uc-drawer.is-open { transform: translateX(0); }
.uc-drawer-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--orm-border);
  background: linear-gradient(180deg, #eef3fc, var(--orm-surface));
}
.uc-drawer-title { font-size: 14px; font-weight: 700; color: var(--orm-teal-dark); }
.uc-drawer-close {
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--orm-muted); padding: 4px; border-radius: 6px; line-height: 0;
  display: inline-flex; transition: background .15s, color .15s;
}
.uc-drawer-close:hover { background: #e2e8e7; color: var(--orm-text); }
.uc-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; }

/* Use-case purpose panel (now lives inside the drawer) -------------------- */
.uc-intro-body { margin-top: 0; }
.uc-intro-tagline { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--orm-teal-dark); }
.uc-intro-summary { margin: 0 0 10px; font-size: 13px; color: var(--orm-muted); line-height: 1.5; }
.uc-intro-caps { margin: 0 0 10px; padding-left: 18px; }
.uc-intro-caps li { font-size: 13px; margin: 3px 0; }
.uc-intro-src { margin: 0; font-size: 12px; color: var(--orm-muted); }

/* Use-case body: session sidebar is a fixed rail on the window's left edge so
   collapsing/expanding it never reflows the centered workspace. */
.uc-sidebar {
  position: fixed; left: 0; top: 54px; bottom: 0; z-index: 8;
  width: 260px; display: flex; flex-direction: column; min-height: 0;
  background: var(--orm-surface); border-right: 1px solid var(--orm-border);
  overflow: hidden;
}
.uc-sidebar.is-collapsed { width: 48px; }
.uc-sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--orm-border);
}
.uc-sidebar-title {
  flex: 1 1 auto;
  font-size: 12px; font-weight: 700; color: var(--orm-muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.uc-sidebar-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--orm-border);
  border-radius: 8px; background: #fff; color: var(--orm-teal-dark); cursor: pointer;
}
.uc-sidebar-toggle:hover { background: #eef3fc; border-color: var(--orm-teal); }
/* Collapsed: keep only the toggle so the sidebar can be reopened. */
.uc-sidebar.is-collapsed .uc-sidebar-head { border-bottom: none; }
.uc-sidebar.is-collapsed .uc-sidebar-title,
.uc-sidebar.is-collapsed .uc-session-new,
.uc-sidebar.is-collapsed .uc-session-list,
.uc-sidebar.is-collapsed .uc-session-empty,
.uc-sidebar.is-collapsed .uc-sidebar-foot { display: none; }
.uc-sidebar-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--orm-border); }
.uc-guide-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--orm-border); border-radius: 8px;
  background: #fff; color: var(--orm-teal-dark); font-size: 13px; font-weight: 600; cursor: pointer;
}
.uc-guide-btn:hover { background: #eef3fc; border-color: var(--orm-teal); }

/* Guide popup (centered dialog) ------------------------------------------ */
.uc-guide-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 40; }
.uc-guide-scrim[hidden] { display: none; }
.uc-guide-pop {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 41;
  width: min(520px, calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--orm-surface); border: 1px solid var(--orm-border);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
}
.uc-guide-pop[hidden] { display: none; }
.uc-guide-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--orm-border);
  background: linear-gradient(180deg, #eef3fc, var(--orm-surface));
}
.uc-guide-pop-title { font-size: 14px; font-weight: 700; color: var(--orm-teal-dark); }
.uc-guide-pop-body { padding: 16px; overflow-y: auto; }

/* Session history list inside the sidebar -------------------------------- */
.uc-session-new {
  border: 1px solid var(--orm-border); background: #fff; color: var(--orm-teal-dark);
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.uc-session-new:hover { background: #eef3fc; border-color: var(--orm-teal); }
.uc-session-list {
  list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.uc-session-item {
  display: flex; align-items: stretch; gap: 2px; border-radius: 8px;
  border: 1px solid transparent;
}
.uc-session-item:hover { background: #f1f5f4; }
.uc-session-item.is-active { background: #eef3fc; border-color: var(--orm-soft-border); }
.uc-session-open {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  background: none; border: none; text-align: left; cursor: pointer; padding: 7px 8px;
}
.uc-session-name {
  font-size: 13px; color: var(--orm-text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc-session-when { font-size: 11px; color: var(--orm-muted); }
.uc-session-del {
  flex: 0 0 auto; width: 26px; border: none; background: none; cursor: pointer;
  color: var(--orm-muted); font-size: 18px; line-height: 1; border-radius: 6px;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.uc-session-item:hover .uc-session-del { opacity: 1; }
.uc-session-del:hover { color: var(--orm-err); background: #fdecec; }
.uc-session-empty { font-size: 12px; color: var(--orm-muted); margin: 4px 0 0; }

/* Prompt suggestions in the chat area (empty state only, above composer). */
.uc-examples { display: none; }
.uc-chat-col.is-empty .uc-examples {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 0 0 14px; padding: 0 8px;
}
.uc-examples-label { font-size: 12px; font-weight: 600; color: var(--orm-muted); text-transform: uppercase; letter-spacing: .04em; }
.uc-chip {
  font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--orm-teal-dark); border: 1px solid var(--orm-border);
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc-chip:hover { background: #e4ecfb; border-color: var(--orm-teal); }
.uc-chip--ask { background: var(--orm-teal); color: #fff; border-color: var(--orm-teal); font-weight: 600; }
.uc-chip--ask:hover { background: var(--orm-teal-dark); }

/* Transcript (chat message list) ----------------------------------------- */
.transcript {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  background: var(--orm-surface); border: 1px solid var(--orm-border);
  border-radius: 12px;
}
.transcript::-webkit-scrollbar { width: 10px; }
.transcript::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.transcript:hover::-webkit-scrollbar-thumb { background: #d1d5db; }

.msg { display: flex; gap: 14px; margin: 16px 0; animation: msg-in .25s ease-out; }
.msg:first-child { margin-top: 4px; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.msg-body { flex: 1 1 auto; min-width: 0; }
.msg-content {
  font-size: 13.5px; line-height: 1.55; color: var(--orm-text);
  word-wrap: break-word; overflow-wrap: anywhere;
}
/* Override github-markdown-css's default 16px. */
.msg-content.markdown-body { font-size: 13.5px; line-height: 1.55; }
.msg-content.markdown-body h1 { font-size: 1.5em; }
.msg-content.markdown-body h2 { font-size: 1.3em; }
.msg-content.markdown-body h3 { font-size: 1.15em; }
.msg-content.markdown-body h4,
.msg-content.markdown-body h5,
.msg-content.markdown-body h6 { font-size: 1em; }
.msg-content p { margin: 0 0 10px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content > *:first-child { margin-top: 0; }
.msg-content > *:last-child { margin-bottom: 0; }
.msg-content ul, .msg-content ol { padding-left: 22px; }
.msg-content code { background: #f1f5f4; padding: 1px 6px; border-radius: 4px; font-size: .92em; }
.msg-content pre {
  background: #0f172a; color: #e2e8f0; border-radius: 8px;
  padding: 14px 16px; font-size: 12.5px; line-height: 1.55;
  overflow-x: auto; margin: 12px 0; border: none;
}
.msg-content pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.msg-content blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid #cbd5d3; color: var(--orm-muted); }
.msg-content table { font-size: 13px; margin: 10px 0; border-collapse: collapse; }
.msg-content th, .msg-content td { padding: 6px 10px; border: 1px solid var(--orm-border); }
.msg-content th { background: #f1f5f4; }

/* User bubble: tinted card, right-aligned. */
.msg-user { justify-content: flex-end; }
.msg-user .msg-body { flex: 0 1 auto; max-width: 80%; }
.msg-user .msg-content {
  background: #e4ecfb; border: 1px solid #bcd0f2;
  border-radius: 12px; padding: 10px 14px; display: inline-block;
  white-space: pre-wrap;
}
/* Assistant message: markdown inside a soft card. */
.msg-assistant .msg-content.markdown-body {
  background: var(--orm-surface); border: 1px solid var(--orm-border);
  border-radius: 12px; padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.msg-assistant .msg-content.markdown-body:empty { display: none; }

/* Composer (rounded card + toolbar, mirrors the reference app) ------------ */
.composer-wrap {
  flex: 0 0 auto; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.composer {
  background: var(--orm-surface); border: 1px solid #cbd5d3;
  border-radius: 22px; padding: 14px 18px 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 6px;
}
.composer:focus-within {
  border-color: var(--orm-teal);
  box-shadow: 0 0 0 4px rgba(30, 91, 186, .12), 0 4px 14px rgba(15, 23, 42, .08);
}
.composer textarea {
  width: 100%; border: none; background: transparent; outline: none; resize: none;
  padding: 4px 4px 6px; margin: 0;
  font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--orm-text);
  min-height: 24px; max-height: 220px; overflow-y: auto;
}
.composer textarea::placeholder { color: #9ca3af; }
.composer-toolbar { display: flex; align-items: center; gap: 6px; }
.composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }

.chip-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: #f1f5f4; border: 1px solid transparent;
  border-radius: 999px; font-family: inherit; font-size: 12px; color: var(--orm-muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.chip-btn:hover { background: #e2e8e7; color: var(--orm-text); }
.chip-btn-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Composer chip mirroring the active workflow step (chat <-> left-panel link). */
.chip-btn--step { background: #eef3fc; border-color: #c3d5f4; color: var(--orm-teal-dark); }
.chip-btn--step:hover { background: #e2ecfb; color: var(--orm-teal-dark); }
.chip-btn--step .chip-btn-label { text-transform: none; letter-spacing: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-step-ctx-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--orm-teal); box-shadow: 0 0 0 3px rgba(30, 91, 186, .16);
}

/* Round mic (Dictate) button — sits just left of the send button. */
.composer-mic {
  flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: #eef1f5; color: var(--orm-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .05s, box-shadow .15s;
}
.composer-mic:hover { background: #e2e8e7; color: var(--orm-text); }
.composer-mic:active { transform: scale(.96); }
.composer-mic.is-recording {
  background: #fde2e1; color: #b91c1c;
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.composer-mic.is-recording:hover { background: #fbcfcd; color: #b91c1c; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(185, 28, 28, .18); }
}
@media (prefers-reduced-motion: reduce) {
  .composer-mic.is-recording { animation: none; }
}

/* Attachment preview strip inside the composer (images + PDFs). */
.composer-attach-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.attach-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  max-width: 200px; padding: 5px 24px 5px 9px; border: 1px solid var(--orm-border);
  border-radius: 8px; background: #f1f5f4; font-size: 12px; color: var(--orm-text);
}
.attach-chip--img { padding: 0 20px 0 0; overflow: hidden; }
.attach-chip--img img {
  display: block; width: 46px; height: 46px; object-fit: cover; border-radius: 8px 0 0 8px;
}
.attach-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip-x {
  position: absolute; top: 2px; right: 3px; width: 16px; height: 16px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(15, 23, 42, .55); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.attach-chip-x:hover { background: rgba(15, 23, 42, .8); }

/* Attachments rendered inside a sent user message. */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.msg-image {
  max-width: 220px; max-height: 220px; border-radius: 10px; border: 1px solid var(--orm-border);
  object-fit: cover;
}
.msg-file {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--orm-border); border-radius: 8px; background: #f1f5f4;
  font-size: 12px; color: var(--orm-text); max-width: 220px;
}
.msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Round send / stop button */
.composer-send {
  flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--orm-teal); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .05s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(30, 91, 186, .35);
}
.composer-send:hover { background: var(--orm-teal-dark); }
.composer-send:active { transform: scale(.96); }
.composer-send .icon-stop { display: none; }
.composer-send.is-sending {
  background: var(--orm-muted); box-shadow: 0 2px 6px rgba(107, 114, 128, .25);
  animation: send-pulse 1.4s ease-in-out infinite;
}
.composer-send.is-sending .icon-send { display: none; }
.composer-send.is-sending .icon-stop { display: block; }
@keyframes send-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107, 114, 128, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(107, 114, 128, 0); }
}

.composer-status { display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: 12px; min-height: 22px; }
.composer-spacer { flex: 1 1 auto; }
.status-text { color: var(--orm-muted); font-variant-numeric: tabular-nums; }

/* Session LLM usage widget: donut (context fullness) + label + popup menu. */
.usage-widget { position: relative; display: inline-flex; }
.session-usage {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--orm-muted); font-variant-numeric: tabular-nums; font-size: 11.5px;
  padding: 2px 9px 2px 6px; border: 1px solid var(--orm-border);
  border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: var(--orm-surface); transition: border-color .15s, background .15s;
}
.session-usage:hover { border-color: var(--orm-teal); background: #f1f4f9; }
.session-usage[hidden] { display: none; }
.session-usage[aria-expanded="true"] { border-color: var(--orm-teal); }
.usage-donut { flex: 0 0 auto; }
.usage-donut-track { stroke: #d5dedc; }
.usage-donut-fill { transition: stroke-dashoffset .35s ease, stroke .35s ease; }
.session-usage-label { line-height: 1; }

/* Popup menu anchored above the donut (breakdown + clear). */
.usage-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 224px; display: flex; flex-direction: column; gap: 1px; padding: 4px;
  background: #ffffff; border: 1px solid #b3c1bf; border-radius: 10px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .22);
}
.usage-menu[hidden] { display: none; }
.usage-menu-item {
  display: flex; align-items: center; gap: 8px; appearance: none; background: none;
  border: none; padding: 6px 8px; margin: 0; border-radius: 6px; cursor: pointer;
  text-align: left; font: inherit; font-size: 12.5px; color: var(--orm-text);
  transition: background .12s;
}
.usage-menu-item:hover { background: #f1f5f4; }
.usage-menu-item svg { flex: 0 0 auto; color: var(--orm-muted); }
.usage-menu-details {
  display: flex; flex-direction: column; gap: 1px; padding: 2px 4px 4px;
  font-variant-numeric: tabular-nums;
}
.usage-stat-head {
  margin-top: 6px; font-size: 9px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--orm-muted);
}
.usage-stat-head:first-child { margin-top: 0; }
.usage-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 1px 4px; font-size: 10.5px; color: var(--orm-text);
}
.usage-stat-k { color: var(--orm-muted); }
.usage-stat-empty { color: var(--orm-muted); font-style: italic; }
.usage-menu-sep { height: 1px; margin: 5px 2px; background: var(--orm-border); }

/* Workflow steps and chat side by side; the guide lives in a popup. */
.uc-workspace { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.uc-workspace--split { flex-direction: row; gap: 14px; align-items: stretch; }
/* Side-by-side fills the full width (no centering) so the panes can use every
   pixel to the left of the right edge; the resizers redistribute it. */
.orm-main:has(.uc-shell--split) {
  max-width: none; margin: 0;
}
/* Reserve a constant gutter for the fixed session rail (open or collapsed) so
   the centered content never shifts when the rail is toggled. */
.orm-main:has(.uc-sidebar) { padding-left: 288px; }
/* Collapsed rail: hand most of the gutter back to the panes. */
.orm-main:has(.uc-sidebar.is-collapsed) { padding-left: 64px; }
/* Chat column: fills its half; transcript scrolls, composer stays pinned. */
.uc-chat-col { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* Side by side: the chat is the resizable pane (form fills whatever is left).
   Chat starts fairly narrow so the form is wide by default; drag the divider
   to widen the chat. Clamped so neither pane collapses. */
.uc-workspace--split .uc-chat-col { flex: 0 0 clamp(380px, var(--chat-w, 500px), 62%); }
/* Once a divider is dragged the form owns an explicit width; the chat fills
   whatever is left (so widening the chat shrinks the form, not a dead gap). */
.uc-workspace--split.has-form-w .uc-chat-col { flex: 1 1 auto; }
/* Form collapsed: let the chat reclaim the full row. */
.uc-workspace--split:has(.uc-form-col.is-hidden) .uc-chat-col { flex: 1 1 auto; }
/* Single-column use cases (no form): the chat fills the row. */
.uc-workspace:not(.uc-workspace--split) .uc-chat-col { flex: 1 1 auto; }
/* Empty state: no transcript yet, so centre the composer vertically. */
.uc-chat-col.is-empty { justify-content: center; }
.uc-chat-col.is-empty .transcript { display: none; }
.uc-chat-col.is-empty .composer-wrap { margin-top: 0; }

/* Form-less progress rail: a read-only vertical stepper (built from the linked
   triage nodes) shown left of the chat for coaching use cases with no form. */
.uc-progress-col {
  flex: 0 0 clamp(200px, 22vw, 280px); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; background: var(--orm-surface);
  border: 1px solid var(--orm-border); border-radius: 12px; overflow: hidden;
}
/* Chat reclaims the rest of the row (the rail is a fixed-width companion). */
.uc-workspace--split:has(.uc-progress-col) .uc-chat-col { flex: 1 1 auto; }
/* Design snapshot and chat share the space next to the rail; the divider
   (#dg-rz) redistributes it and the width persists via --design-w. */
.uc-workspace--split .uc-design-panel { flex: 0 0 var(--design-w, clamp(320px, 42%, 560px)); min-width: 320px; }
.uc-workspace--split:has(.uc-design-panel) .uc-chat-col { flex: 1 1 0; min-width: 320px; }
.uc-progress-head {
  flex: 0 0 auto; padding: 12px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--orm-muted);
  background: linear-gradient(180deg, #eef3fc, var(--orm-surface));
  border-bottom: 1px solid var(--orm-border);
}
.uc-progress-col .uc-stepper { flex: 1 1 auto; border-right: none; background: transparent; }
/* Only steps already reached are clickable; later steps stay locked. */
.uc-progress-col .uc-stepper-item { cursor: default; }
.uc-progress-col .uc-stepper-item:hover { background: transparent; color: var(--orm-muted); }
.uc-progress-col .uc-stepper-item.is-reachable { cursor: pointer; }
.uc-progress-col .uc-stepper-item.is-reachable:hover { background: #eef4f3; color: var(--orm-text); }
.uc-progress-col .uc-stepper-item:focus-visible { outline: 2px solid var(--orm-teal-dark); outline-offset: -2px; }
.uc-progress-col .uc-stepper-item.is-active,
.uc-progress-col .uc-stepper-item.is-active:hover { color: var(--orm-teal-dark); background: #eef3fc; }
.uc-design-panel { gap: 12px; }
.uc-design-current { color: var(--orm-teal-dark); font-size: .84rem; font-weight: 600;
  line-height: 1.35; margin: 0 16px; padding: .65rem .7rem; background: #eef3fc; border-radius: 7px; }
.uc-design-info { overflow: auto; flex: 1 1 auto; min-height: 0; padding: 0 16px 14px; }
.uc-design-group { padding: .2rem 0 .55rem; }
.uc-design-group + .uc-design-group { border-top: 1px solid #dce6e2; padding-top: .8rem; }
.uc-design-group-title { color: var(--orm-text); font-size: .76rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: .2rem; }
.uc-design-entry { padding: .7rem 0; border-bottom: 1px solid #e3eae7; }
.uc-design-entry:last-child { border-bottom: 0; }
.uc-design-label { color: var(--orm-teal-dark); font-size: .73rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; margin-bottom: .25rem; }
.uc-design-value { color: var(--orm-text); font-size: .86rem; line-height: 1.45; white-space: pre-wrap; }
.uc-design-value.is-empty { color: var(--orm-muted); font-style: italic; }
.uc-design-input { display: block; width: 100%; box-sizing: border-box; font: inherit;
  font-size: .86rem; line-height: 1.4; color: var(--orm-text); background: #fff;
  border: 1px solid #cbd5d1; border-radius: 6px; padding: .4rem .5rem; }
textarea.uc-design-input { resize: vertical; min-height: 4.2em; }
.uc-design-input:focus { outline: none; border-color: #1e5bba;
  box-shadow: 0 0 0 2px rgba(30,91,186,.15); }
.uc-design-input::placeholder { color: var(--orm-muted); font-style: italic; }
.uc-design-empty { color: var(--orm-muted); font-size: .84rem; line-height: 1.45; margin: .25rem 0; }
/* Draggable divider: resizes the chat width only; the form fills the rest. */
.uc-split-resizer {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 8px; cursor: col-resize; touch-action: none;
}
.uc-split-resizer.is-hidden { display: none; }
.uc-split-resizer span {
  width: 4px; height: 46px; border-radius: 3px; background: var(--orm-border);
  transition: background .15s;
}
.uc-split-resizer:hover span, body.is-col-resizing .uc-split-resizer span { background: var(--orm-teal); }
body.is-col-resizing { cursor: col-resize; user-select: none; }
/* Absorbs the space freed when the form is narrowed from its left edge, so it
   floats right against the chat divider instead of leaving the row unbalanced. */
.uc-split-spacer { flex: 0 0 0; min-width: 0; }
.uc-workspace--split.has-form-w .uc-split-spacer { flex: 0 0 var(--form-gap, 0px); }
.uc-workspace--split:has(.uc-form-col.is-hidden) .uc-split-spacer { flex: 0 0 0; }

/* Inline agent-activity panel (iterations / tools / tokens) inside a turn.
   Collapsed by default; the header toggles it open. */
.msg-activity {
  border: 1px solid var(--orm-border); border-radius: 10px;
  background: #f8fafa; margin-bottom: 8px; overflow: hidden;
}
.msg-activity-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--orm-muted); text-align: left;
}
.msg-activity-head:hover { background: #eef4f3; }
.msg-activity-label { font-weight: 600; letter-spacing: .02em; flex: 0 0 auto; }
.msg-activity-summary {
  color: #9ca3af; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-activity-chevron { transition: transform .15s; flex: 0 0 auto; }
.msg-activity.is-open .msg-activity-chevron { transform: rotate(90deg); }
.msg-activity-log {
  display: none; padding: 6px 10px 8px;
  border-top: 1px solid var(--orm-border);
  font-family: "Cascadia Code", Consolas, monospace; font-size: 11px;
  max-height: 260px; overflow-y: auto;
}
.msg-activity.is-open .msg-activity-log { display: block; }

/* --- Per-iteration foldable groups ------------------------------------- */
.uc-iter { border-radius: 8px; margin: 3px 0; background: #ffffff;
  border: 1px solid var(--orm-border); overflow: hidden; }
.uc-iter.is-live { border-color: var(--orm-accent); }
.uc-iter-sum {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 9px; list-style: none; font-size: 11px; color: var(--orm-text);
}
.uc-iter-sum::-webkit-details-marker { display: none; }
.uc-iter-chev { display: inline-flex; color: #9ca3af; transition: transform .15s; flex: 0 0 auto; }
.uc-iter[open] .uc-iter-chev { transform: rotate(90deg); }
.uc-iter-badge { font-weight: 700; color: var(--orm-teal-dark); flex: 0 0 auto; }
.uc-iter-label { color: #9ca3af; flex: 0 0 auto; }
.uc-iter.is-answer .uc-iter-label { color: var(--orm-teal); }
.uc-iter-tool { flex: 1 1 auto; min-width: 0; display: inline-flex;
  align-items: center; gap: 5px; overflow: hidden; }
.uc-iter-tool-name { font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.uc-iter-arg { color: #6b7280; font-weight: 400; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.uc-iter-tool-count { color: #9ca3af; flex: 0 0 auto; }
.uc-iter-think { color: #9ca3af; font-style: italic; }
.uc-iter-time { color: #9ca3af; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.uc-iter-dots { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.uc-iter-dots i { width: 4px; height: 4px; border-radius: 50%;
  background: var(--orm-accent); opacity: .35; animation: uc-dot 1s infinite; }
.uc-iter-dots i:nth-child(2) { animation-delay: .15s; }
.uc-iter-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes uc-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.uc-iter-check { color: #15803d; font-weight: 700; flex: 0 0 auto; display: none; }
.uc-iter.is-done .uc-iter-dots { display: none; }
.uc-iter.is-done .uc-iter-check { display: inline; }
.uc-iter-body { padding: 4px 9px 7px 24px; border-top: 1px solid #f1f5f4; }

.uc-log { padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.uc-log-ic { display: inline-block; width: 1em; }
.uc-log-preview { color: #6b7280; }
.uc-kw { color: #0369a1; }
.uc-val { color: #b45309; }
.uc-log--iter { color: #0369a1; }
.uc-log--tool { color: #b45309; }
.uc-log--ok { color: #15803d; }
.uc-log--err { color: #b91c1c; }
.uc-log--usage { color: #6b7280; }
.uc-log--form { color: var(--orm-teal-dark); font-weight: 600; }
.uc-empty-answer { color: #b45309; font-style: italic; margin: 0; }

/* Application UI form (schema-driven) ------------------------------------- */
/* Fixed height when stacked (mobile) so it can't shove the chat; side by side
   it stretches to fill the row instead (overridden below). */
.uc-form-col {
  flex: 0 0 auto; width: 100%; min-width: 0; height: 46vh; position: relative;
  display: flex; flex-direction: column;
  min-height: 0; background: var(--orm-surface);
  border: 1px solid var(--orm-border); border-radius: 12px; overflow: hidden;
  transition: flex-basis .34s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, box-shadow .3s;
}
/* Side by side: the form fills whatever the (resizable) chat leaves on the left. */
.uc-workspace--split .uc-form-col { flex: 1 1 auto; width: auto; height: auto; }
/* Once the user drags the form's left edge, it takes an explicit width instead. */
.uc-workspace--split.has-form-w .uc-form-col { flex: 0 0 var(--form-w); }
/* Collapsed via the hide button: slide/fade the left column away. */
.uc-form-col.is-hidden { height: 0; opacity: 0; border-width: 0; pointer-events: none; }
.uc-workspace--split .uc-form-col.is-hidden {
  flex-basis: 0; width: 0; height: auto; opacity: 0; border-width: 0; pointer-events: none;
}
/* No transition while the user is actively dragging the divider. */
body.is-col-resizing .uc-form-col { transition: box-shadow .3s; }
.uc-form-col.is-flash { box-shadow: 0 0 0 3px rgba(30, 91, 186, .35); }
.uc-form-head {
  flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid var(--orm-border);
  background: linear-gradient(180deg, #eef3fc, var(--orm-surface));
}
.uc-form-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.uc-form-title { font-size: 14px; font-weight: 700; color: var(--orm-teal-dark); }
.uc-form-x {
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--orm-muted); padding: 3px; border-radius: 6px; line-height: 0;
  display: inline-flex; transition: background .15s, color .15s;
}
.uc-form-x:hover { background: #e2e8e7; color: var(--orm-text); }
.uc-form-toggle { display: inline-flex; background: #eef4f3; border-radius: 999px; padding: 3px; gap: 2px; }
.uc-form-toggle button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--orm-muted);
  padding: 5px 14px; border-radius: 999px; transition: background .15s, color .15s;
}
.uc-form-toggle button.is-active { background: var(--orm-teal); color: #fff; box-shadow: 0 1px 3px rgba(30,91,186,.3); }

.uc-form-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.uc-form-section { border: none; margin: 0 0 14px; padding: 0; }
.uc-form-section legend {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--orm-teal-dark); padding: 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--orm-border); width: 100%; padding-bottom: 4px;
}
.uc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.uc-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uc-field--wide { grid-column: 1 / -1; }
.uc-field-label { font-size: 11.5px; font-weight: 600; color: var(--orm-text); }
.uc-field-src {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .01em; vertical-align: middle;
  text-transform: none; border: 1px solid transparent; white-space: nowrap;
}
.uc-field-src--authored { color: #7a3b00; background: #fff1e0; border-color: #ffd9ad; }
.uc-field-src--lookup   { color: var(--orm-teal-dark); background: #e4ecfb; border-color: #bcd0f2; }
.uc-field-src--person   { color: #3949ab; background: #e8ecfb; border-color: #c5cef4; }
.uc-field-src--entity   { color: #6a1b9a; background: #f3e6fa; border-color: #e0c2f2; }
.uc-field-src--amount   { color: #1b5e20; background: #e6f5e9; border-color: #bfe4c6; }
.uc-field-src--date     { color: #455a64; background: #eceff1; border-color: #cfd8dc; }
.uc-field-src--role     { color: #5d4037; background: #efebe9; border-color: #d7ccc8; }
.uc-field-input {
  font-family: inherit; font-size: 12.5px; color: var(--orm-text);
  padding: 7px 9px; border: 1px solid #cbd5d3; border-radius: 7px;
  background: #fff; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .5s;
}
.uc-field-input:focus { border-color: var(--orm-teal); box-shadow: 0 0 0 3px rgba(30,91,186,.12); }
textarea.uc-field-input { resize: vertical; min-height: 58px; line-height: 1.45; }
.uc-field-help { font-size: 10.5px; color: var(--orm-muted); line-height: 1.35; }
.uc-field-input.is-filled { animation: field-flash 1.2s ease-out; }
@keyframes field-flash {
  0% { background: #dbe6fb; border-color: var(--orm-teal); }
  100% { background: #fff; }
}

/* Multi-select fixed-list picker (Impacted units): grouped checkbox chips the
   user multi-selects; the coach may pre-tick a subset. */
.uc-ms {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid #cbd5d3; border-radius: 8px; background: #fff; overflow: hidden;
}
.uc-ms-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-bottom: 1px solid var(--orm-border); background: #fbfdfc;
}
.uc-ms-search {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 12px;
  color: var(--orm-text); padding: 5px 8px; border: 1px solid #cbd5d3;
  border-radius: 6px; background: #fff; outline: none;
}
.uc-ms-search:focus { border-color: var(--orm-teal); box-shadow: 0 0 0 2px rgba(30,91,186,.12); }
.uc-ms-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--orm-teal-dark); }
.uc-ms-list { max-height: 210px; overflow-y: auto; padding: 6px 8px; scrollbar-width: thin; }
.uc-ms-empty { font-size: 11.5px; color: var(--orm-muted); padding: 8px 4px; }
.uc-ms-group { margin-bottom: 8px; }
.uc-ms-group:last-child { margin-bottom: 0; }
.uc-ms-group-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--orm-muted); margin: 0 0 5px; padding-bottom: 3px;
  border-bottom: 1px dashed var(--orm-border);
}
.uc-ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-ms-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px 4px 8px; border: 1px solid #cbd5d3; border-radius: 999px;
  background: #fff; font-size: 11.5px; color: var(--orm-text); line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s;
}
.uc-ms-chip:hover { background: #eef4f3; }
.uc-ms-chip input { accent-color: var(--orm-teal); margin: 0; cursor: pointer; }
.uc-ms-chip.is-on { background: #eef3fc; border-color: var(--orm-teal); color: var(--orm-teal-dark); font-weight: 600; }
.uc-ms-chip-note { font-size: 9.5px; color: var(--orm-muted); font-weight: 400; }
/* Coach certainty on the whole picker (the hidden input carries no border). */
.uc-field.is-confirmed .uc-ms { border-color: #7cc199; }
.uc-field.is-proposed  .uc-ms { border-color: #e0a94a; }
.uc-field.is-uncertain .uc-ms { border-color: #d98a8a; border-style: dashed; }

/* Structured, repeatable Action items (Resolution approach step). Each item is
   a small card of sub-fields the coach pre-generates; the user adds/edits/removes. */
.uc-ai { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uc-ai-bar { display: flex; align-items: center; gap: 10px; }
.uc-ai-add {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--orm-teal-dark); background: #eef3fc; border: 1px solid #cbd5d3;
  border-radius: 7px; padding: 5px 11px; transition: background .15s, border-color .15s;
}
.uc-ai-add:hover { background: #e2ecfb; border-color: var(--orm-teal); }
.uc-ai-count { font-size: 10.5px; font-weight: 600; color: var(--orm-muted); }
.uc-ai-cards { display: flex; flex-direction: column; gap: 8px; }
.uc-ai-empty {
  font-size: 11.5px; color: var(--orm-muted); padding: 10px 12px;
  border: 1px dashed var(--orm-border); border-radius: 8px; background: #fbfdfc;
}
.uc-ai-card {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid #cbd5d3; border-radius: 8px; background: #fff; padding: 10px 10px;
}
.uc-ai-grid {
  flex: 1 1 auto; min-width: 0; display: grid; gap: 8px 10px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.uc-ai-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Action title and Details span the full card width; the rest sit inline. */
.uc-ai-cell--textarea, .uc-ai-card > .uc-ai-grid > .uc-ai-cell:first-child { grid-column: 1 / -1; }
.uc-ai-cell-lbl {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--orm-muted);
}
.uc-ai-input {
  font-family: inherit; font-size: 12.5px; color: var(--orm-text);
  padding: 6px 8px; border: 1px solid #cbd5d3; border-radius: 6px;
  background: #fff; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.uc-ai-input:focus { border-color: var(--orm-teal); box-shadow: 0 0 0 2px rgba(30,91,186,.12); }
textarea.uc-ai-input { resize: vertical; min-height: 40px; line-height: 1.4; }
.uc-ai-del {
  flex: 0 0 auto; cursor: pointer; font-size: 12px; line-height: 1;
  color: var(--orm-muted); background: transparent; border: none; padding: 4px 2px;
  border-radius: 6px; transition: color .15s, background .15s;
}
.uc-ai-del:hover { color: #b3261e; background: #fbeceb; }
.uc-field.is-confirmed .uc-ai-card { border-color: #7cc199; }
.uc-field.is-proposed  .uc-ai-card { border-color: #e0a94a; }
.uc-field.is-uncertain .uc-ai-card { border-color: #d98a8a; border-style: dashed; }

/* Structured coach certainty, set per field from orm_fill_form `confidence`. */
.uc-field.is-confirmed > .uc-field-input { border-color: #7cc199; }
.uc-field.is-proposed  > .uc-field-input { border-color: #e0a94a; background: #fffdf6; }
.uc-field.is-uncertain > .uc-field-input {
  border-color: #d98a8a; background: #fdf5f5; border-style: dashed;
}
.uc-field-label .uc-conf {
  margin-left: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px; text-transform: uppercase; vertical-align: middle;
}
.uc-field.is-confirmed .uc-conf { color: #1b5e20; background: #e6f5e9; }
.uc-field.is-proposed  .uc-conf { color: #8a5a00; background: #fbeecf; }
.uc-field.is-uncertain .uc-conf { color: #9b1c1c; background: #f8dede; }
.uc-form-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 16px; border-top: 1px solid var(--orm-border); background: #f8fafa;
}
.uc-form-note { font-size: 11px; color: var(--orm-muted); }
.uc-form-btn {
  appearance: none; border: 1px solid var(--orm-border); background: #fff; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--orm-muted);
  padding: 6px 14px; border-radius: 999px; transition: background .15s, color .15s;
}
.uc-form-btn:hover { background: #eef4f3; color: var(--orm-text); }

/* Guided workflow: vertical step rail (left) + step content (right) ------
   Mirrors the production OneORM wizard (mat-vertical-stepper in a 2-col grid). */
.uc-form-main {
  flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
/* oe_reporting step rail: the wizard stepper detached into its own column so
   the reporting use case shares the rail + form + chat layout. Its open/closed
   state mirrors the form (revealed together, collapsed together via :has). */
.uc-steps-col {
  flex: 0 0 clamp(190px, 18vw, 240px); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; background: var(--orm-surface);
  border: 1px solid var(--orm-border); border-radius: 12px; overflow: hidden;
  transition: flex-basis .34s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.uc-steps-col .uc-stepper { flex: 1 1 auto; border-right: none; background: transparent; }
.uc-workspace--split:has(#uc-form-col.is-hidden) .uc-steps-col {
  flex-basis: 0; width: 0; opacity: 0; border-width: 0; pointer-events: none;
}
.uc-form-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }

.uc-stepper {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; list-style: none;
  margin: 0; padding: 12px 8px; overflow-y: auto; border-right: 1px solid var(--orm-border);
  background: #fbfdfc; scrollbar-width: thin;
}
.uc-stepper-item {
  position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  color: var(--orm-muted); font-size: 12px; white-space: normal;
  transition: background .15s, color .15s;
}
/* Connector line down the rail between consecutive step dots. */
.uc-stepper-item:not(:last-child)::before {
  content: ""; position: absolute; left: 19px; top: 30px; bottom: -2px;
  width: 2px; background: var(--orm-border);
}
.uc-stepper-item.is-done:not(:last-child)::before { background: #b6e3d9; }
.uc-stepper-item:hover { background: #eef4f3; color: var(--orm-text); }
.uc-stepper-dot {
  display: inline-flex; align-items: center; justify-content: center; z-index: 1;
  width: 19px; height: 19px; border-radius: 50%; font-size: 10.5px; font-weight: 700;
  background: #e2e8e7; color: var(--orm-muted); flex: 0 0 auto;
  border: 1px solid transparent; transition: background .15s, color .15s;
}
.uc-stepper-item.is-done .uc-stepper-dot { background: #dbe6fb; color: var(--orm-teal-dark); font-size: 0; }
.uc-stepper-item.is-done .uc-stepper-dot::after { content: "✓"; font-size: 11px; }
.uc-stepper-item.is-active { color: var(--orm-teal-dark); font-weight: 600; background: #eef3fc; }
.uc-stepper-item.is-active .uc-stepper-dot {
  background: var(--orm-teal); color: #fff; box-shadow: 0 1px 4px rgba(30,91,186,.35);
}
.uc-stepper-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }

.uc-step { display: none; }
.uc-step.is-active { display: block; animation: uc-step-in .3s cubic-bezier(.22, .61, .36, 1); }
@keyframes uc-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.uc-step-guide {
  margin: 0 0 14px; padding: 9px 12px; font-size: 12px; line-height: 1.5;
  color: var(--orm-teal-dark); background: #eef3fc;
  border: 1px solid #c3d5f4; border-left: 3px solid var(--orm-teal); border-radius: 8px;
}

/* Per-step AI posture — the coach's dynamic-context contribution, badged. */
.uc-step-head { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.uc-step-head .uc-step-guide { flex: 1; margin: 0; }
.uc-ai-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent;
}
.uc-ai-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.uc-ai-badge--recommend { color: var(--orm-teal-dark); background: var(--orm-teal-20); border-color: #aec6ff; }
.uc-ai-badge--assess    { color: #8a5a12; background: var(--orm-warn-bg); border-color: #eccf9a; }
.uc-ai-badge--user_only { color: #3949ab; background: var(--orm-chip); border-color: #bcccec; }
/* Quality-gate marker on assess steps. */
.uc-ai-gate { position: relative; }
.uc-ai-gate::after {
  content: "⚑"; margin-left: 3px; font-size: 11px; color: var(--orm-warn); line-height: 1;
}

/* Tiny AI-mode dot on the stepper rail so the whole journey is legible. */
.uc-ai-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; margin-left: 1px;
  background: var(--orm-border);
}
.uc-ai-dot--recommend { background: var(--orm-accent); }
.uc-ai-dot--assess    { background: var(--orm-warn); }
.uc-ai-dot--user_only { background: #3949ab; }

/* Non-blocking quality-gate warning shown when advancing an assess step. */
.uc-warn-banner {
  display: flex; align-items: flex-start; gap: 9px; margin: 10px 16px 0;
  padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45;
  color: #8a5a12; background: var(--orm-warn-bg);
  border: 1px solid #eccf9a; border-left: 3px solid var(--orm-warn);
  animation: uc-step-in .25s ease-out;
}
.uc-warn-banner strong { color: #6f4710; }
.uc-warn-banner .uc-warn-x {
  margin-left: auto; flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: #8a5a12; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.uc-warn-banner .uc-warn-x:hover { background: #f4e3c6; }

.uc-choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.uc-choose-card {
  appearance: none; cursor: pointer; text-align: center; font-family: inherit;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 18px 22px; border: 1px solid var(--orm-border); border-radius: 12px;
  background: #fff; transition: border-color .15s, box-shadow .15s, background .15s;
}
.uc-choose-card:hover { border-color: var(--orm-teal); box-shadow: 0 2px 10px rgba(30,91,186,.12); }
.uc-choose-card.is-active { border-color: var(--orm-teal); background: #eef3fc; box-shadow: 0 0 0 2px rgba(30,91,186,.15); }
/* Real radio, top-left, like the productive wizard's selectable cards. */
.uc-choose-radio {
  position: absolute; top: 14px; left: 14px; margin: 0;
  width: 18px; height: 18px; accent-color: var(--orm-teal, #1e5bba); cursor: pointer;
}
/* Wizard illustration — swap non-selected/selected variant like the prod app. */
.uc-choose-media { display: block; width: 100%; }
.uc-choose-img { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.uc-choose-img--on { display: none; }
.uc-choose-card.is-active .uc-choose-img--off { display: none; }
.uc-choose-card.is-active .uc-choose-img--on { display: block; }
.uc-choose-title { font-size: 15px; font-weight: 700; color: var(--orm-teal-dark); }
.uc-choose-desc { font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--orm-muted); max-width: 300px; }

/* Non-blocking data-handling acknowledgement under the Issue/Event cards. */
.uc-data-ack {
  display: flex; align-items: flex-start; gap: 9px; margin: 16px 2px 2px;
  padding: 11px 13px; border: 1px solid var(--orm-border); border-radius: 9px;
  background: #fbfaf6; cursor: pointer;
}
.uc-data-ack-box { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--orm-teal, #1e5bba); cursor: pointer; flex: none; }
.uc-data-ack-text { font-size: 11.5px; line-height: 1.45; color: var(--orm-muted); }

.uc-field-input--entity { background: #faf6fe; border-style: dashed; color: #6a1b9a; }
.uc-field-input--entity::placeholder { color: #9b6bbd; }

/* Busy overlay — dims and locks the report form while the coach streams. */
.uc-form-busy {
  display: none; position: absolute; inset: 0; z-index: 30;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(247, 249, 253, .74); backdrop-filter: blur(1.5px);
  border-radius: inherit; cursor: progress;
}
.uc-form-col.is-busy .uc-form-busy { display: flex; }
.uc-form-busy-spin {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3.5px solid var(--orm-soft-border, #c3d5f4);
  border-top-color: var(--orm-teal, #1e5bba);
  animation: uc-busy-spin .8s linear infinite;
}
.uc-form-busy-text {
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--orm-teal-dark, #004397);
  max-width: 30ch; text-align: center; line-height: 1.35; min-height: 2.7em;
}
.uc-form-busy-text.is-swap { animation: uc-busy-fade .4s ease; }
@keyframes uc-busy-spin { to { transform: rotate(360deg); } }
@keyframes uc-busy-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .uc-form-busy-spin { animation-duration: 1.6s; } }
@media (prefers-reduced-motion: reduce) { .uc-form-busy-text.is-swap { animation: none; } }

/* Coach action banner — the agent's on-form message (recommended action). */
.uc-form-notice {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.4; font-weight: 600;
  border: 1px solid var(--orm-soft-border, #c3d5f4);
  background: var(--orm-soft, #eef3fc); color: var(--orm-teal-dark, #004397);
}
.uc-form-notice[hidden] { display: none; }
.uc-form-notice-ic { flex: 0 0 auto; line-height: 1.4; }
.uc-form-notice-ic::before { content: "◈"; }
.uc-form-notice[data-kind="warning"] {
  border-color: #e6c98f; background: #fdf6e7; color: #7a5310;
}
.uc-form-notice[data-kind="warning"] .uc-form-notice-ic::before { content: "⚠"; }
.uc-form-notice[data-kind="info"] .uc-form-notice-ic::before { content: "ℹ"; }
.uc-form-notice-text { flex: 1 1 auto; min-width: 0; }
.uc-form-notice-x {
  flex: 0 0 auto; appearance: none; border: 0; background: transparent;
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
  color: inherit; opacity: .6;
}
.uc-form-notice-x:hover { opacity: 1; }
.uc-form-notice.is-flash { animation: uc-notice-flash .9s ease; }
@keyframes uc-notice-flash {
  0% { box-shadow: 0 0 0 0 rgba(30,91,186,.35); }
  100% { box-shadow: 0 0 0 6px rgba(30,91,186,0); }
}/* Lookup fields with no fixed enum: a data-driven picker the coach resolves.
   Given a caret so it reads as "pick from a list", matching its source badge. */
.uc-field-input--lookup {
  background:
    #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")
    no-repeat right 10px center;
  padding-right: 30px; cursor: default;
}
.uc-field-input--lookup::placeholder { color: #6a8f88; }

.uc-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.uc-review-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--orm-border); border-radius: 8px; background: #fff;
  font-size: 12.5px; color: var(--orm-text);
}
.uc-review-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  background: #fdecec; color: var(--orm-err); font-size: 11px; font-weight: 700;
}
.uc-review-tick::after { content: "!"; }
.uc-review-item.is-done { border-color: #bfe4c6; background: #f4fbf5; }
.uc-review-item.is-done .uc-review-tick { background: #d7f0dc; color: var(--orm-ok); }
.uc-review-item.is-done .uc-review-tick::after { content: "✓"; }
.uc-review-item.is-done .uc-review-lbl { color: var(--orm-muted); }

/* Step nav footer + secondary foot */
.uc-step-counter { font-size: 11px; color: var(--orm-muted); font-variant-numeric: tabular-nums; text-align: center; flex: 1 1 auto; }
.uc-step-btn { flex: 0 0 auto; }
.uc-form-btn--primary { background: var(--orm-teal); color: #fff; border-color: var(--orm-teal); }
.uc-form-btn--primary:hover { background: var(--orm-teal-dark); color: #fff; }
.uc-form-btn--primary:disabled, .uc-step-btn:disabled { opacity: .45; cursor: default; }
.uc-form-btn--primary.is-hidden { visibility: hidden; }
.uc-form-btn--sm { padding: 4px 11px; font-size: 11px; }
.uc-form-subfoot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 16px; border-top: 1px solid var(--orm-border); background: #f8fafa;
}

@media (max-width: 1000px) {
  /* Stacked: let the page scroll instead of crushing everything into one screen. */
  .uc-shell { height: auto; }
  .orm-main:has(.uc-sidebar) { padding-left: 20px; }
  .uc-body { flex-direction: column; padding-left: 0; }
  .uc-sidebar { position: static; width: auto; flex: 0 0 auto; max-height: 260px; }
  .uc-sidebar.is-collapsed { width: auto; }
  .uc-workspace--split { flex-direction: column; }
  .uc-workspace--split .uc-form-col { flex: 0 0 auto; width: 100%; height: auto; max-height: none; transition: none; }
  .uc-form-col.is-hidden { height: 0; max-height: 0; opacity: 1; border-width: 0; }
  .uc-workspace--split .uc-progress-col { flex: 0 0 auto; width: 100%; max-height: 30vh; }
  .uc-workspace--split .uc-steps-col { flex: 0 0 auto; width: 100%; max-height: 26vh; }
  .uc-workspace--split:has(#uc-form-col.is-hidden) .uc-steps-col { max-height: 0; width: 100%; }
  .uc-workspace--split .uc-chat-col { flex: 0 0 auto; width: 100%; min-width: 0; min-height: 420px; }
  .uc-workspace--split:has(.uc-design-panel) .uc-chat-col { flex: 0 0 auto; min-width: 0; }
  .uc-workspace--split .uc-design-panel { flex: 0 0 auto; width: 100%; min-width: 0; max-height: 40vh; }
  .uc-split-resizer { display: none; }
}

/* Architecture page ------------------------------------------------------- */
.arch h1 { font-size: 24px; }
.arch-lead { color: var(--orm-muted); max-width: 780px; line-height: 1.6; }
.arch-h2 { margin-top: 28px; font-size: 18px; }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.arch-card {
  background: var(--orm-surface); border: 1px solid var(--orm-border);
  border-radius: 12px; padding: 16px;
}
.arch-card h2 { font-size: 15px; margin: 0 0 8px; color: var(--orm-teal-dark); }
.arch-card p { font-size: 13px; color: var(--orm-muted); line-height: 1.5; min-height: 72px; }
.arch-soon {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--orm-muted);
  background: #eef0f2; border: 1px solid var(--orm-border);
}
.mermaid {
  background: var(--orm-surface); border: 1px solid var(--orm-border);
  border-radius: 12px; padding: 20px; overflow-x: auto;
}
.arch-list { max-width: 780px; line-height: 1.6; }
.arch-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.arch-table th, .arch-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--orm-border); }
.arch-table th { color: var(--orm-muted); font-weight: 600; }

/* ---- Sign-in gate (full-screen overlay when auth is required) ---------- */
.auth-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--orm-bg);
  font-family: inherit;
}
.auth-gate[hidden] { display: none; }
.auth-gate-card {
  width: 100%; max-width: 380px; text-align: center;
  padding: 40px 36px; background: var(--orm-surface);
  border: 1px solid var(--orm-border); border-radius: 18px;
  box-shadow: 0 4px 6px rgba(15, 23, 42, .04), 0 24px 48px rgba(15, 23, 42, .08);
}
.auth-gate-logo {
  width: 56px; height: 56px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--orm-teal); color: #fff;
  font-weight: 700; font-size: 18px; letter-spacing: .5px;
}
.auth-gate-title { margin: 0 0 8px; font-size: 20px; font-weight: 650; color: var(--orm-text); }
.auth-gate-sub { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: var(--orm-muted); }
.auth-gate-btn {
  display: inline-block; width: 100%; box-sizing: border-box;
  padding: 11px 18px; border-radius: 8px;
  background: var(--orm-teal); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .12s ease; cursor: pointer;
}
.auth-gate-btn:hover { background: var(--orm-teal-dark); }
.auth-gate-btn[hidden] { display: none; }
.auth-gate-access { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--orm-muted); }