/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"variable":"--font-ibm-sans","display":"swap","src":[{"path":"../../node_modules/@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-400-normal.woff2","weight":"400","style":"normal"},{"path":"../../node_modules/@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-500-normal.woff2","weight":"500","style":"normal"},{"path":"../../node_modules/@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-600-normal.woff2","weight":"600","style":"normal"},{"path":"../../node_modules/@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-700-normal.woff2","weight":"700","style":"normal"}]}],"variableName":"sans"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'sans';
src: url(/_next/static/media/13a15bcdfeddab65-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'sans';
src: url(/_next/static/media/4cdcd386d2ac59c8-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'sans';
src: url(/_next/static/media/1cdb9a2cbcaafa7e-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'sans';
src: url(/_next/static/media/45cdbe8ded19ae08-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 700;
font-style: normal;
}@font-face {font-family: 'sans Fallback';src: local("Arial");ascent-override: 101.35%;descent-override: 27.19%;line-gap-override: 0.00%;size-adjust: 101.13%
}.__className_f7d05f {font-family: 'sans', 'sans Fallback'
}.__variable_f7d05f {--font-ibm-sans: 'sans', 'sans Fallback'
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"variable":"--font-ibm-mono","display":"swap","src":[{"path":"../../node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff2","weight":"400","style":"normal"},{"path":"../../node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2","weight":"500","style":"normal"},{"path":"../../node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff2","weight":"600","style":"normal"}]}],"variableName":"mono"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'mono';
src: url(/_next/static/media/06ac09dcb8ec7d56-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'mono';
src: url(/_next/static/media/dece0821e8ed059f-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'mono';
src: url(/_next/static/media/422bb7078d9b61dc-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 600;
font-style: normal;
}@font-face {font-family: 'mono Fallback';src: local("Arial");ascent-override: 77.95%;descent-override: 20.91%;line-gap-override: 0.00%;size-adjust: 131.49%
}.__className_1f286a {font-family: 'mono', 'mono Fallback'
}.__variable_1f286a {--font-ibm-mono: 'mono', 'mono Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"variable":"--font-grotesk","display":"swap","weight":"400 900","style":"normal","src":"../../node_modules/@fontsource-variable/schibsted-grotesk/files/schibsted-grotesk-latin-wght-normal.woff2"}],"variableName":"display"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'display';
src: url(/_next/static/media/dae0c9f40ba3b9b7-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400 900;
font-style: normal;
}@font-face {font-family: 'display Fallback';src: local("Arial");ascent-override: 92.54%;descent-override: 24.43%;line-gap-override: 0.00%;size-adjust: 105.53%
}.__className_24a57f {font-family: 'display', 'display Fallback';font-style: normal
}.__variable_24a57f {--font-grotesk: 'display', 'display Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"variable":"--font-inter","display":"swap","src":[{"path":"../../node_modules/@fontsource/inter/files/inter-latin-400-normal.woff2","weight":"400","style":"normal"},{"path":"../../node_modules/@fontsource/inter/files/inter-latin-500-normal.woff2","weight":"500","style":"normal"},{"path":"../../node_modules/@fontsource/inter/files/inter-latin-600-normal.woff2","weight":"600","style":"normal"},{"path":"../../node_modules/@fontsource/inter/files/inter-latin-700-normal.woff2","weight":"700","style":"normal"}]}],"variableName":"inter"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'inter';
src: url(/_next/static/media/ef6d3f52c547a6e3-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'inter';
src: url(/_next/static/media/b7b43acee81d05a8-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'inter';
src: url(/_next/static/media/8fb1a96451cec840-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'inter';
src: url(/_next/static/media/953b7aa585d36a2b-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 700;
font-style: normal;
}@font-face {font-family: 'inter Fallback';src: local("Arial");ascent-override: 89.79%;descent-override: 22.36%;line-gap-override: 0.00%;size-adjust: 107.89%
}.__className_677553 {font-family: 'inter', 'inter Fallback'
}.__variable_677553 {--font-inter: 'inter', 'inter Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"variable":"--font-jbmono","display":"swap","src":[{"path":"../../node_modules/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2","weight":"400","style":"normal"},{"path":"../../node_modules/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-500-normal.woff2","weight":"500","style":"normal"},{"path":"../../node_modules/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-600-normal.woff2","weight":"600","style":"normal"}]}],"variableName":"jbmono"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'jbmono';
src: url(/_next/static/media/db9d659a1acad1e2-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'jbmono';
src: url(/_next/static/media/af2e87f5d61b5665-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'jbmono';
src: url(/_next/static/media/ebeb24f1e7287d3a-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 600;
font-style: normal;
}@font-face {font-family: 'jbmono Fallback';src: local("Arial");ascent-override: 77.57%;descent-override: 22.82%;line-gap-override: 0.00%;size-adjust: 131.49%
}.__className_de88eb {font-family: 'jbmono', 'jbmono Fallback'
}.__variable_de88eb {--font-jbmono: 'jbmono', 'jbmono Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/studio/styles/tokens.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* HarnessRouter app tokens — unified with the marketing landing (paper + accent blue #1a5cf5). */
:root {
  --brand: #1a5cf5;
  --brand-ink: #1447c4;
  --brand-soft: #f7f8fe;
  --brand-50: #f7f8fe;
  --accent-bright: #58A9FF;

  --hot: #b4460f;
  --hot-soft: #FEE4E4;
  --warm: #8a6a3c;
  --warm-soft: #FEF1D6;
  --cold: #a8a29e;
  --cold-soft: #f4f2f0;
  --ok: #15803d;
  --ok-soft: #DFF6EC;
  --info: #0EA5E9;
  --info-soft: #DCF1FB;

  --bg: #EDEEF2;
  --surface: #FFFFFF;
  --surface-2: #F5F7FB;
  --sidebar: #1F2433;
  --sidebar-2: #2A3145;
  --sidebar-mute: #6b6560;
  --sidebar-active: #1a5cf5;

  --ink: #1c1917;
  --ink-2: #57534e;
  --mute: #6b6560;
  --mute-2: #8A8D96;
  --line: #e7e5e4;
  --line-soft: #E9EAEF;

  --r-card: 12px;
  --r-input: 8px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(17,24,39,.04), 0 1px 1px rgba(17,24,39,.03);
  --shadow-2: 0 8px 24px -12px rgba(17,24,39,.12), 0 2px 6px -2px rgba(17,24,39,.06);

  --font: var(--font-ibm-sans), "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: var(--font-ibm-mono), "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-grotesk), var(--font-ibm-sans), "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Pill / chip */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 12px; line-height: 1; font-weight: 500;
  background: var(--line-soft); color: var(--ink-2);
  border: 1px solid transparent;
}
.pill .dot { width:6px; height:6px; border-radius: 999px; background: currentColor; }
.pill.hot   { background: var(--hot-soft);  color: #b4460f; }
.pill.warm  { background: var(--warm-soft); color: #8a6a3c; }
.pill.cold  { background: var(--cold-soft); color: #57534e; }
.pill.ok    { background: var(--ok-soft);   color: #15803d; }
.pill.info  { background: var(--info-soft); color: #075985; }
.pill.brand { background: var(--brand-soft); color: var(--brand-ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r-input);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn:hover { border-color: #CBD0DA; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--mute); }
.btn.ghost:hover { background: var(--line-soft); color: var(--ink-2); }
.btn.sm { height: 26px; padding: 0 8px; font-size: 12px; }
.btn.lg { height: 38px; padding: 0 16px; font-size: 14px; }
/* Disabled state: drop opacity, swap cursor, AND override the :hover
   rules above so a disabled primary doesn't darken to brand-ink on
   mouseover (which made it look interactive even when blocked). */
.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  border-color: var(--line);
}
.btn.primary:disabled,
.btn.primary[disabled] {
  background: var(--brand);
  border-color: var(--brand);
}

/* Inputs */
.input, .select, .textarea {
  width:100%; font-family: inherit; font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 8px 10px;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(40,90,255,.14); }
.input.sm { padding: 6px 8px; font-size: 12px; }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.card-h { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.card-h .sub { color: var(--mute); font-size: 12px; margin-top: 2px; }

/* Intent dots */
.intent-dot { width: 8px; height: 8px; border-radius: 999px; display:inline-block; }
.intent-dot.hot  { background: var(--hot); }
.intent-dot.warm { background: var(--warm); }
.intent-dot.cold { background: var(--cold); }
.intent-dot.new  { background: var(--mute-2); }

/* Avatar circle */
.av {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--brand);
  color: #fff; font-size: 12px; font-weight: 600;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.av.sm { width: 24px; height: 24px; font-size: 10px; }
.av.lg { width: 40px; height: 40px; font-size: 14px; }
.av.client { background: #8a6a3c; }
.av.ai     { background: #15803d; }
.av.me     { background: #1a5cf5; }

/* Striped placeholder backdrop */
.placeholder-stripe {
  background-image: repeating-linear-gradient(135deg, #f4f2f0 0 8px, #fafaf9 8px 16px);
  border-radius: 8px;
}

/* Generic divider line */
.hr { height: 1px; background: var(--line-soft); margin: 12px 0; border: 0; }

/* Tabs */
.tabs { display:flex; gap: 18px; border-bottom: 1px solid var(--line); padding: 0 4px; }
.tab { padding: 10px 2px; font-size: 13px; color: var(--mute); cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* Stat number scale */
.stat-num { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 12px; color: var(--mute); }

/* Mini sparkline placeholder */
.sparkline { height: 28px; width: 100%; }

/* Scrollbars (used inside artboards) */
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #D7DBE3; border-radius: 999px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/studio/styles/chrome.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* Chrome layout — sidebar + topbar + funnel breadcrumb */

.shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  height: 100vh;            /* lock to viewport so nothing escapes */
  overflow: hidden;         /* clip any descendant that tries to grow past */
  background: var(--bg);
}
.shell-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;            /* required for flex children to honor overflow */
  overflow: hidden;
}
.shell-body {
  flex: 1;
  padding: 16px 24px 24px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;         /* fullscreen pages: inner panes scroll */
}
.shell-body-scroll { overflow: auto; }   /* scrollable pages opt in */

/* Sidebar — independent vertical scroll within .side-nav, never on the shell */
.side {
  background: var(--sidebar);
  color: #e7e5e4;
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.side-logo {
  width: 32px; height: 32px; border-radius: 8px; background: rgba(183,172,255,.12);
  display: flex; align-items: center; justify-content: center;
}
.side-brand-1 { font-size: 14px; font-weight: 600; color: #fff; }
.side-brand-2 { font-size: 11px; color: var(--sidebar-mute); margin-top: 1px; }

.side-nav {
  flex: 1; overflow: auto; padding: 8px 0 12px;
  /* Scrollbar darker than the sidebar so it reads as a recessed
     channel instead of a bright light-gray gutter that fights the
     panel. Thumb is a near-black tint of the panel; track is the
     panel itself. */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.45) transparent;
}
.side-nav::-webkit-scrollbar { width: 8px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.45);
  border-radius: 4px;
}
.side-nav::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.6); }
.side-cap {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sidebar-mute); padding: 12px 16px 6px; display:flex; align-items:center; justify-content: space-between;
}
.side-tag {
  font-size: 9px; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: #C0C7D8; font-weight: 500; text-transform: uppercase;
}

.side-scope {
  margin-left: auto;
  height: 16px; padding: 0 5px;
  font-size: 9px; font-weight: 600;
  letter-spacing: .04em;
}
.side-link.locked { opacity: .55; cursor: not-allowed; }
.side-link.locked .ic { opacity: .35; }
.side-link {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 16px; font-size: 13px; color: #e7e5e4;
  cursor: pointer; position: relative;
}
.side-link .ic { display:inline-flex; opacity: .75; }
.side-link .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.side-link.active {
  color: #fff; background: rgba(40,90,255,.22);
}
.side-link.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--sidebar-active); border-radius: 0 3px 3px 0;
}
.side-link.active .ic { color: var(--sidebar-active); opacity: 1; }
.side-badge {
  font-size: 10px; min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 999px; background: var(--hot); color: #fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight: 600;
}

.side-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Topbar — pinned by sitting outside the scroll surface */
.top {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
/* Sidebar show/hide toggle, at the left of the topbar. */
.top-side-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; margin-right: -4px;
  border: none; background: none; cursor: pointer; color: var(--mute);
}
.top-side-toggle:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.top-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); white-space: nowrap; flex-shrink: 0; }
.crumb { color: var(--mute); white-space: nowrap; }
.crumb.active { color: var(--ink); font-weight: 600; }
.crumb-sep { color: var(--mute-2); }
.top-search {
  display: flex; align-items: center; gap: 8px; max-width: 480px;
  padding: 4px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  flex: 1 1 240px; min-width: 0;
}
.top-search input { min-width: 0; flex: 1; }
.top-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.top-right .btn { white-space: nowrap; }

/* Funnel — also pinned (above the scroll surface) */
.funnel {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--mute);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.funnel-step, .funnel-step .ic, .funnel-step .no { white-space: nowrap; }
.funnel-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); color: var(--ink-2);
}
.funnel-step .ic { color: var(--mute-2); display:inline-flex; }
.funnel-step .no { color: var(--mute); }
.funnel-step.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.funnel-step.on .ic, .funnel-step.on .no { color: #fff; opacity: .85; }
.funnel-sep { color: var(--mute-2); display:inline-flex; }
.funnel-hint { margin-left: 8px; }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/studio/styles/page.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/* Shared page styles — page headers, KPI strips, tables, filters */

.page { padding: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }

.page-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px;
}
.page-t { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
.page-sub { font-size: 12px; color: var(--mute); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.kpi-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--mute); }
.kpi-h .ic { color: var(--mute-2); }
.kpi-bar { height: 4px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.kpi-fill { height: 100%; border-radius: 999px; }
.kpi-sub { font-size: 11px; color: var(--mute); }
.kpi-sub.ok { color: var(--ok); }
.kpi-card .stat-num { font-size: 22px; }

/* Filter chips */
.filt-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.filt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; color: var(--ink-2);
  font-family: inherit;
}
.filt-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.filt-chip:hover:not(.active) { border-color: var(--mute-2); }

/* Generic table */
.tbl { display: flex; flex-direction: column; }
.tbl-head, .tbl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  font-size: 12px;
}
.tbl-head {
  color: var(--mute); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.tbl-row {
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-2);
}
.tbl-row:hover { background: var(--surface-2); }
.tbl-head > span, .tbl-row > span { flex: 1; }

.tbl-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; font-size: 12px; color: var(--mute);
  border-top: 1px solid var(--line-soft);
}
.pg { display: flex; gap: 4px; align-items: center; }
.pg-num {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer;
  color: var(--ink-2);
}
.pg-num.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Dispatch banner */
.dispatch { background: #fff; }
.dispatch-row {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.7fr; gap: 18px;
  padding: 14px 20px; align-items: stretch;
}
.dispatch-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dispatch-bar { display: flex; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.dispatch-fill { height: 100%; }
.dispatch-fill.ok { background: var(--ok); }
.dispatch-fill.info { background: var(--info); }
.dispatch-fill.warm { background: var(--warm); }
.dispatch-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: var(--mute); }
.dispatch-legend .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; margin-right: 4px; vertical-align: middle; }

.dispatch-w {
  border-left: 1px dashed var(--line); padding-left: 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.dispatch-w-h { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dispatch-w-meta { display: flex; gap: 12px; font-size: 11px; color: var(--mute); }
.dispatch-w-meta .ok { color: var(--ok); }

.dispatch-eta {
  border-left: 1px dashed var(--line); padding-left: 18px;
  display: flex; flex-direction: column; justify-content: center;
}

/* Empty-state shells used by some pages */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; color: var(--mute); font-size: 12px;
}

/* ── Shared "AI Agent" tag ────────────────────────────────────────────────────
   ONE style for the AI-agent label everywhere (chat sidebar/mentions/messages,
   tasks assignees, calendar people + event popover, org members). On-brand iris
   pill, mixed case. Light surfaces use brand-soft; the dark app rails (.app-side)
   get the lavender tint; inside the brand-soft agent chip it goes solid so it stays
   readable. Single source of truth — don't reintroduce per-page AI tag styles. */
.ai-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 1.6;
  padding: 1.5px 5px; border-radius: 5px; white-space: nowrap; margin-left: 2px;
  background: var(--brand-soft, #f7f8fe); color: var(--brand, #1a5cf5);
}
.app-side .ai-tag { background: rgba(40,90,255, .3); color: #9FC0FF; }
.ch-agent-chip .ai-tag { background: var(--brand, #1a5cf5); color: #fff; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/studio/styles/dialog.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* Shared modal/dialog styles — consumed by both consoles via
 * the @shared alias. Sits on top of tokens.css, so colors come
 * from CSS variables. */

.dlg-root {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.dlg-backdrop {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  animation: dlg-fade-in 120ms ease-out;
}
@keyframes dlg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dlg-card {
  width: min(440px, 92vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15,23,42,.08));
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
  overflow: hidden;
  animation: dlg-pop-in 140ms cubic-bezier(.2,.7,.2,1.05);
}
@keyframes dlg-pop-in {
  from { transform: translateY(8px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);  opacity: 1; }
}

.dlg-card-wide { width: min(540px, 94vw); }

/* create dialog: resource-type picker grid */
.dlg-typegrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 2px 0 8px;
}
.dlg-type {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px 11px;
  border: 1px solid var(--line, rgba(15,23,42,.12));
  border-radius: 11px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .04s;
}
.dlg-type:hover { background: var(--surface-2, #fafaf9); }
.dlg-type.on { border-color: var(--brand, #1a5cf5); box-shadow: 0 0 0 2px rgba(40,90,255,.16); }
.dlg-type:active { transform: translateY(1px); }
.dlg-type-ic {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dlg-type-lbl {
  font-size: 12px; font-weight: 550; color: var(--ink, #1c1917);
  text-align: center; line-height: 1.25;
}

.dlg-h {
  padding: 16px 20px 0;
}
.dlg-title {
  font-size: 15px; font-weight: 600;
  color: var(--ink, #1c1917);
  line-height: 1.4;
}
.dlg-h-destructive .dlg-title { color: #b4460f; }
.dlg-h-error       .dlg-title { color: #b4460f; }
.dlg-h-warning     .dlg-title { color: #B45309; }
.dlg-h-success     .dlg-title { color: #15803d; }

.dlg-b {
  padding: 12px 20px 4px;
  overflow-y: auto;
}
.dlg-msg {
  font-size: 13px; line-height: 1.55;
  color: var(--mute, #57534e);
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.dlg-label {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--mute, #57534e);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 10px 0 6px;
}
.dlg-input {
  width: 100%;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink, #1c1917);
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(15,23,42,.16));
  border-radius: 8px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dlg-input:focus {
  border-color: var(--brand, #1a5cf5);
  box-shadow: 0 0 0 3px rgba(40,90,255,.14);
}
.dlg-input-err {
  border-color: #b4460f;
}
.dlg-input-err:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
textarea.dlg-input { resize: vertical; min-height: 80px; line-height: 1.5; }
.dlg-help {
  font-size: 11px; color: var(--mute, #57534e);
  margin-top: 6px; line-height: 1.5;
}
.dlg-err {
  font-size: 11px; color: #b4460f;
  margin-top: 6px; line-height: 1.5;
}

.dlg-f {
  display: flex; justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 16px;
  border-top: 1px solid transparent;
}

.dlg-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 16px;
  min-width: 76px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink, #1c1917);
  transition: background .12s, border-color .12s, color .12s, transform .04s;
}
.dlg-btn:focus-visible { outline: 2px solid var(--brand, #1a5cf5); outline-offset: 2px; }
.dlg-btn:active { transform: translateY(1px); }

.dlg-secondary {
  border-color: var(--line, rgba(15,23,42,.18));
  color: var(--ink, #1c1917);
  background: var(--surface, #fff);
}
.dlg-secondary:hover { background: var(--surface-2, #fafaf9); }

.dlg-primary {
  background: var(--brand, #1a5cf5);
  border-color: var(--brand, #1a5cf5);
  color: #fff;
}
.dlg-primary:hover {
  background: var(--brand-ink, #5840E0);
  border-color: var(--brand-ink, #5840E0);
}

.dlg-destructive {
  background: #b4460f;
  border-color: #b4460f;
}
.dlg-destructive:hover {
  background: #b4460f;
  border-color: #b4460f;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/studio/styles/traces.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* Traces app — agent run trace viewer. Left session-history rail + right timeline/steps/detail.
   Aligned to the studio deep-iris tokens (var(--brand) #1a5cf5 …); role colors re-skinned. */

/* ── per-role accent palette (dots / badges / timeline segments) ── */
.tr-side, .tr-main {
  --r-user: #1a5cf5; --r-agent: #1a5cf5; --r-tool: #6b6560; --r-bash: #334155;
  --r-write: #B45309; --r-thinking: #7C6FB0; --r-result: #15803D; --r-toolresult: #6b6560;
  --r-error: #b4460f; --r-system: #a8a29e;
}

/* ── LEFT RAIL ── */
.tr-side { display: flex; flex-direction: column; min-height: 0; background: var(--sidebar-2); }
.tr-head { padding: 14px 14px 8px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.tr-head-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.tr-search {
  display: flex; align-items: center; gap: 8px; margin: 0 12px 8px;
  height: 32px; padding: 0 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; color: var(--sidebar-mute); flex-shrink: 0;
}
.tr-search:focus-within { border-color: rgba(183,172,255,.55); background: rgba(255,255,255,.09); }
.tr-search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; color: #e7e5e4; font-family: inherit; }
.tr-search input::-moz-placeholder { color: var(--sidebar-mute); }
.tr-search input::placeholder { color: var(--sidebar-mute); }
.tr-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 8px; }
.tr-empty { padding: 18px 12px; color: var(--sidebar-mute); font-size: 13px; }

/* session cards — dark rail (light-surface tokens are wrong here) */
.tr-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 11px; margin: 4px 0; border: 1px solid transparent; border-radius: 10px;
  background: transparent; transition: background .12s ease;
}
.tr-card:hover { background: rgba(255,255,255,.05); }
.tr-card:focus, .tr-card:focus-visible { outline: none; }
.tr-card.active { background: rgba(255,255,255,.09); }
/* row 1: the user question (2-line clamp); row 2: time (left) + harness + status badges (right) */
.tr-card-q { font-size: 13px; font-weight: 600; color: #e7e5e4; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tr-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.tr-card-ago { font-size: 11px; color: var(--sidebar-mute); }
.tr-card-badges { display: flex; align-items: center; gap: 6px; }
.tr-card-be { font-size: 10.5px; font-weight: 600; color: #c9d5f7; background: rgba(255,255,255,.08);
  padding: 1.5px 8px; border-radius: 999px; text-transform: capitalize; letter-spacing: .01em; }

.tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.tr-pg { font-size: 12px; color: #c9d5f7; background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.tr-pg:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.tr-pg:disabled { color: var(--sidebar-mute); cursor: default; opacity: .45; }
.tr-pg-lbl { font-size: 11px; color: var(--sidebar-mute); }

/* ── STATUS PILLS ── */
/* base pill carries a neutral chip so ANY status (incl. ones we didn't special-case) reads as a
   styled badge, never an unstyled bare word */
.tr-pill { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; text-transform: capitalize;
  color: #c9d5f7; background: rgba(255,255,255,.10); }
.tr-done, .tr-completed { color: #15803D; background: #eaf5ee; }
.tr-running, .tr-starting, .tr-in_progress { color: #1447c4; background: #f7f8fe; }
.tr-failed, .tr-timeout, .tr-error { color: #b4460f; background: #fdf9f4; }
.tr-max_turns, .tr-incomplete { color: #B45309; background: #fdf9f4; }

/* ── RIGHT PANE ── */
.tr-main { display: flex; min-height: 0; height: 100%; }
.tr-blank { align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.tr-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-mhead { padding: 18px 22px 12px; border-bottom: 1px solid var(--line-soft); }
.tr-mtitle { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
.tr-mmeta { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.tr-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); padding: 2.5px 9px; border-radius: 999px; white-space: nowrap; }
.tr-tag svg { color: var(--muted); }

/* timeline — main lane + one stacked lane per subagent, segments coloured by kind */
.tr-strips { margin: 14px 22px 8px; display: flex; flex-direction: column; gap: 3px; }
.tr-strip { position: relative; height: 18px; background: #f4f2f0; border-radius: 5px; overflow: hidden; }
.tr-strip.lane { height: 13px; }
.tr-seg { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; cursor: pointer; opacity: .85; min-width: 3px; }
.tr-seg:hover, .tr-seg.hot { opacity: 1; top: 1px; bottom: 1px; box-shadow: 0 0 0 1px #fff; }
/* idle / waiting gap between events — hatched, behind the segments */
.tr-seg-idle { position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(110,120,140,.12) 5px 10px); }

/* COMPACT event list — one clean line per event (pill | name/param or message | tokens · dur · clock) */
.tr-rows { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 40px; }
.tr-row { display: flex; align-items: center; gap: 12px; padding: 7px 22px; cursor: pointer; border-left: 2px solid transparent; }
.tr-row:hover, .tr-row.hot { background: var(--surface-2); }
.tr-row.active { background: var(--brand-50); border-left-color: var(--brand); }
.tr-row.sub { padding-left: 40px; }
/* the trace read limit: veiled rows hold their content but show it blurred; limited rows are the
   gateway's indicators of a step's kind, with nothing behind them to open */
/* no tracing on the workspace: from the third row on the whole row is veiled, pill and clock
   included, and so are the gaps, the subagent boundaries and the strip's segments */
.tr-row.is-veiled { filter: blur(var(--veil, 5px)); -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; cursor: default; }
.tr-row.is-veiled:hover { background: transparent; }
.tr-idle.is-veiled, .tr-sub-boundary.is-veiled { filter: blur(4px); -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; }
.tr-seg.is-veiled, .tr-seg-idle.is-veiled { filter: blur(2.5px); pointer-events: none; }
.tr-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; line-height: 1.5; letter-spacing: .01em; }
.tr-row-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px; overflow: hidden; white-space: nowrap; }
.tr-tname { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ink); }
.tr-tparam { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tr-rmsg { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--ink-2); }
.tr-errbadge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  color: #b4460f; background: #fdf9f4; padding: 1px 7px; border-radius: 999px; }
.tr-row-stats { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.tr-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tr-stat svg { color: #B6BDC9; }
.tr-rts { font-size: 11.5px; color: #9AA3B2; min-width: 58px; text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* "Session idle" boundary between turns (hatched band, centered label) */
.tr-idle { display: flex; align-items: center; justify-content: center; height: 26px; margin: 8px 22px;
  background: repeating-linear-gradient(45deg, #fafaf9 0 7px, #f4f2f0 7px 14px); border-radius: 7px; }
.tr-idle span { font-size: 11px; color: var(--muted); font-weight: 500; }

/* detail-pane content blocks (NOT shown inline in the list anymore) */
.tr-text { font-size: 13px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.55; word-break: break-word; }
.tr-text.italic { font-style: italic; color: var(--muted); }
.tr-bash { background: #0F1A2B; color: #e7e5e4; padding: 9px 11px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tr-code { background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-2); padding: 9px 11px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.55; }
.tr-code.err { background: #fdf9f4; border-color: #f0e2d4; color: #8a3a10; }
.tr-json { background: var(--surface-2); border: 1px solid var(--line-soft); padding: 10px 12px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.55; color: var(--ink-2); }
.tr-json .j-key { color: #B45309; } .tr-json .j-str { color: #1a5cf5; } .tr-json .j-num { color: #15803D; } .tr-json .j-bool { color: #9333EA; }
.tr-tooldetail + .tr-tooldetail { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.tr-tool-sep { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }

.tr-subgroup { margin-top: 6px; }
.tr-sub-boundary { display: flex; align-items: center; gap: 6px; margin: 8px 22px 2px; padding: 4px 10px;
  font-size: 11.5px; font-weight: 600; color: #0F766E; background: #CCFBF1; border-radius: 7px; }

/* role pills (badge bg+text) + timeline segments + detail header pill */
.tr-seg.tr-user { background: var(--r-user); } .tr-badge.tr-user { color: #6D28D9; background: #EDE9FE; }
.tr-seg.tr-agent { background: var(--r-agent); } .tr-badge.tr-agent { color: #1447c4; background: #f7f8fe; }
.tr-seg.tr-tool { background: var(--r-tool); } .tr-badge.tr-tool { color: #57534e; background: #EEF2F6; }
.tr-seg.tr-bash { background: var(--r-bash); } .tr-badge.tr-bash { color: #e7e5e4; background: #334155; }
.tr-seg.tr-write { background: var(--r-write); } .tr-badge.tr-write { color: #B45309; background: #fdf9f4; }
.tr-seg.tr-thinking { background: var(--r-thinking); } .tr-badge.tr-thinking { color: #6D5BA6; background: #f7f8fe; }
.tr-seg.tr-result { background: var(--r-result); } .tr-badge.tr-result { color: #15803D; background: #eaf5ee; }
.tr-seg.tr-toolresult { background: var(--r-toolresult); } .tr-badge.tr-toolresult { color: #57534e; background: #EEF2F6; }
.tr-seg.tr-error { background: var(--r-error); } .tr-badge.tr-error { color: #b4460f; background: #fdf9f4; }
.tr-seg.tr-system { background: var(--r-system); } .tr-badge.tr-system { color: #6b6560; background: #F1F5F9; }

/* detail panel (click a step / segment) */
.tr-detail { width: 440px; flex: 0 0 440px; border-left: 1px solid var(--line); overflow: auto; padding: 18px 20px 40px; background: #fff; }
.tr-detail-head { display: flex; align-items: center; gap: 9px; }
.tr-detail-title { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-detail-head .tr-x { margin-left: auto; }
.tr-x { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 7px; display: inline-flex; }
.tr-x:hover { background: var(--surface-2); color: var(--ink); }
.tr-detail-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.tr-detail-sub { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); word-break: break-word; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tr-detail-cap { margin-top: 16px; margin-bottom: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* rendered markdown content in the detail pane */
.tr-md { font-size: 13.5px; color: var(--ink); line-height: 1.6; word-break: break-word; }
.tr-md h1, .tr-md h2 { font-size: 16px; font-weight: 700; margin: 16px 0 8px; color: var(--ink); }
.tr-md h3 { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
.tr-md p { margin: 8px 0; }
.tr-md ul, .tr-md ol { margin: 8px 0; padding-left: 20px; }
.tr-md li { margin: 3px 0; }
.tr-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); padding: 1px 5px; border-radius: 5px; }
.tr-md pre, .tr-md .md-pre { background: var(--surface-2); border: 1px solid var(--line-soft); color: #1E293B; padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.tr-md pre code, .tr-md .md-pre code { background: none; border: 0; padding: 0; color: inherit; }
.tr-md strong { font-weight: 700; }
.tr-md table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; display: block; overflow-x: auto; }
.tr-md th, .tr-md td { border: 1px solid var(--line-soft); padding: 5px 9px; text-align: left; }
.tr-md th { background: var(--surface-2); font-weight: 700; }
.tr-md a { color: var(--brand, #1a5cf5); text-decoration: underline; }
.tr-md blockquote { margin: 8px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line-soft); color: var(--ink-2, #57534e); }
.tr-md ul li::marker { color: var(--ink-2, #57534e); }
.tr-md a { color: var(--brand); text-decoration: none; }
@media (max-width: 1200px) { .tr-detail { width: 340px; flex-basis: 340px; } }

/* draggable divider between the event list and the detail pane */
.tr-vresize { flex: 0 0 7px; align-self: stretch; cursor: col-resize; background: transparent; }
.tr-vresize:hover { background: var(--brand-soft, rgba(110,85,255,.18)); }

/* loading skeleton for a session transcript */
@keyframes tr-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.tr-skel { background: linear-gradient(90deg, #f4f2f0 25%, #F6F7FA 37%, #f4f2f0 63%); background-size: 800px 100%;
  animation: tr-shimmer 1.3s ease-in-out infinite; border-radius: 6px; }
.tr-skel-title { height: 20px; width: 46%; margin: 18px 22px 0; }
.tr-skel-pill { height: 20px; width: 84px; border-radius: 999px; }
.tr-mhead .tr-mmeta { margin-left: 22px; }
.tr-skel-strip { height: 18px; border-radius: 5px; }
.tr-skel-rowline { display: flex; align-items: center; gap: 12px; padding: 9px 22px; }
.tr-skel-badge { height: 18px; width: 46px; border-radius: 999px; flex: 0 0 auto; }
.tr-skel-line { height: 12px; }
.tr-flowrun { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--brand, #285AFF); text-decoration: none; }
.tr-flowrun:hover { text-decoration: underline; }


/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/reifyui/styles/chat.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* UI Core — Conversational Agent surface styles.
   Extracted from HarnessRouter's workbench chat (hr.css wbx-*); class names kept so the
   extraction is drop-in. Every color / font / key spacing reads a --uic-* custom property with
   the HarnessRouter light value as fallback, so an unthemed consumer looks exactly like HR.

   Token contract (define on :root or any ancestor of the chat surface):
     --uic-surface        panel / composer background            #FFFFFF
     --uic-line           hairline borders                       #DDDFE6
     --uic-ink            primary text                           #111317
     --uic-ink-2          secondary text                         #3A3D45
     --uic-mute           tertiary / quiet text                  #5B5D66
     --uic-brand          accent (icons, links, live dots)       #285AFF
     --uic-brand-ink      accent pressed / dark                  #1641D8
     --uic-brand-soft     accent border tint                     #E1E9FF
     --uic-brand-faint    accent background tint                 #EFF3FF
     --uic-ok             success (Done check)                   #16a34a
     --uic-mono           monospace stack                        ui-monospace, SFMono-Regular, Menlo, monospace
     --uic-shadow-1       card shadow                            (see below)
     --uic-code-block-bg / --uic-code-block-ink                  #0f1117 / #e6e8ee
     --uic-code-keyword / -string / -comment / -number / -function
                          syntax-highlight palette (CodeBlock)   tuned for the dark block, see below
     --uic-code-lang-ink  language label top-right of the block  #59627288
     --uic-fail-ink/-line/-bg, --uic-cancel-ink/-line/-bg,
     --uic-incomplete-ink/-line/-bg                              terminal badge palettes
     --uic-font-md        message / prose base size              14px
     --uic-turn-pad-x     horizontal padding of a message row    28px
     --uic-bubble-max-w   user bubble max width                  80%
     --uic-working-ink    Working… indicator text color          inherit
   Presets: themes/light.css (.uic-light) and themes/dark.css (.uic-dark) set all of these. */

/* ── message rows ─────────────────────────────────────────────────────────── */
/* A turn fills the column; user right-aligned, assistant stacks timeline above prose. */
.wbx-turn { display: flex; min-width: 0; padding: 0 var(--uic-turn-pad-x, 28px); }
.wbx-turn.user { justify-content: flex-end; }
/* The optional caption above a turn: who said it. In the user turn it shares a column with the
   bubble (`.wbx-turn-body`) so both start at the same left edge; in the assistant turn it is simply
   the first line. Never a percentage flex-basis here: in a column that is 100% of the HEIGHT. */
.wbx-role { flex: none; width: 100%; font-family: var(--uic-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--uic-cap, #a8a29e); margin-bottom: 7px; }
.wbx-turn-body { display: flex; flex-direction: column; min-width: 0; max-width: var(--uic-bubble-max-w, 80%); }
.wbx-turn-body > .wbx-bubble-user { max-width: none; }
/* assistant turn stacks vertically: activity timeline ABOVE the answer (never side by side) */
.wbx-turn.asst { flex-direction: column; gap: 10px; align-items: stretch; }
.wbx-bubble-user { max-width: var(--uic-bubble-max-w, 80%); background: var(--uic-brand-faint, #EFF3FF);
  border: 1px solid var(--uic-brand-soft, #E1E9FF);
  color: var(--uic-ink, #111317); border-radius: 16px 16px 5px 16px; padding: 10px 14px;
  font-size: var(--uic-font-md, 14px); white-space: pre-wrap; line-height: 1.55; }
/* A pasted URL, hash or base64 blob has no break opportunity, so without this it runs straight
   out of its bubble and gets clipped by whatever encloses it. */
.wbx-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── rendered markdown — proper typography, not raw text ─────────────────── */
/* overflow-wrap: anywhere, not normal: agents answer with hashes, URLs, file paths and base64,
   and an unbreakable 200-character token overflows its own box while the box stays the width of
   the pane. Nothing widens, nothing scrolls, the text is simply clipped away and unreachable.
   It bit hardest in a 340px arena column but the same text is lost in any narrow pane. */
.wbx-md { color: var(--uic-ink, #111317); font-size: var(--uic-font-md, 14px); line-height: 1.62;
  min-width: 0; overflow-wrap: anywhere; }
.wbx-md > :first-child { margin-top: 0; }
.wbx-md > :last-child { margin-bottom: 0; }
.wbx-md p { margin: 0 0 10px; }
.wbx-md ul, .wbx-md ol { margin: 0 0 10px; padding-left: 22px; }
.wbx-md li { margin: 3px 0; }
.wbx-md h1, .wbx-md h2, .wbx-md h3 { margin: 14px 0 8px; font-weight: 700; line-height: 1.3; }
.wbx-md h1 { font-size: 18px; } .wbx-md h2 { font-size: 16px; } .wbx-md h3 { font-size: 14.5px; }
.wbx-md code { font-family: var(--uic-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px;
  background: var(--uic-brand-faint, #EFF3FF); border: 1px solid var(--uic-line, #DDDFE6); border-radius: 5px; padding: 1px 5px; }
.wbx-md pre { background: var(--uic-code-block-bg, #0f1117); color: var(--uic-code-block-ink, #e6e8ee);
  border-radius: 10px; padding: 12px 14px; overflow: auto; margin: 0 0 10px; }
.wbx-md pre code { background: none; border: none; color: inherit; padding: 0; font-size: 12.5px; line-height: 1.5;
  overflow-wrap: normal; }
/* ── CodeBlock: language-aware syntax highlighting (components/CodeBlock.jsx) ──
   The block itself carries the same geometry as .wbx-md pre (same padding/radius/font), fully
   styled here so it also works outside .wbx-md. hljs token classes map onto five --uic-code-*
   colors; defaults are tuned to read on the dark --uic-code-block-bg. Light-theme consumers that
   restyle the block re-point these five tokens alongside --uic-code-block-bg/-ink. */
.wbx-code { position: relative; background: var(--uic-code-block-bg, #0f1117); color: var(--uic-code-block-ink, #e6e8ee);
  border-radius: 10px; padding: 12px 14px; overflow: auto; margin: 0 0 10px;
  font-family: var(--uic-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.wbx-code code { background: none; border: none; color: inherit; padding: 0; font-size: 12.5px; line-height: 1.5; }
.wbx-code-lang { position: absolute; top: 8px; right: 12px; font-size: 10px; line-height: 1; letter-spacing: .5px;
  text-transform: uppercase; color: var(--uic-code-lang-ink, rgba(140, 149, 165, .75));
  pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.wbx-code .hljs-comment, .wbx-code .hljs-quote,
.wbx-code .hljs-meta { color: var(--uic-code-comment, #8b949e); }
.wbx-code .hljs-keyword, .wbx-code .hljs-selector-tag, .wbx-code .hljs-literal,
.wbx-code .hljs-doctag, .wbx-code .hljs-built_in, .wbx-code .hljs-operator { color: var(--uic-code-keyword, #c678dd); }
.wbx-code .hljs-string, .wbx-code .hljs-regexp, .wbx-code .hljs-addition,
.wbx-code .hljs-char.escape_ { color: var(--uic-code-string, #98c379); }
.wbx-code .hljs-number, .wbx-code .hljs-symbol, .wbx-code .hljs-bullet,
.wbx-code .hljs-link, .wbx-code .hljs-template-variable, .wbx-code .hljs-variable.language_ { color: var(--uic-code-number, #d19a66); }
.wbx-code .hljs-title, .wbx-code .hljs-section, .wbx-code .hljs-name,
.wbx-code .hljs-selector-id, .wbx-code .hljs-selector-class, .wbx-code .hljs-attr,
.wbx-code .hljs-attribute, .wbx-code .hljs-type { color: var(--uic-code-function, #61afef); }

/* Mermaid diagram: light card, centered, horizontal-scroll for wide graphs (rendered by <Mermaid>). */
.wbx-mermaid { display: block; margin: 0 0 10px; padding: 12px; overflow-x: auto; text-align: center;
  background: var(--uic-surface, #fff); border: 1px solid var(--uic-line, #DDDFE6); border-radius: 10px; }
.wbx-mermaid svg { max-width: 100%; height: auto; }
.wbx-mermaid-fallback { margin: 0 0 10px; }
.wbx-md a { color: var(--uic-brand, #285AFF); text-decoration: underline; }
.wbx-md blockquote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid var(--uic-line, #DDDFE6); color: var(--uic-mute, #5B5D66); }
/* Code and tables cannot wrap without changing their meaning, so a wide one scrolls inside
   itself rather than being squeezed into unreadable columns or clipped at the pane edge. */
.wbx-md table { border-collapse: collapse; margin: 0 0 10px; font-size: 13px;
  display: block; width: -moz-max-content; width: max-content; max-width: 100%; overflow-x: auto; }
.wbx-md th, .wbx-md td { border: 1px solid var(--uic-line, #DDDFE6); padding: 5px 9px; text-align: left; }

/* ── loading skeleton (ChatMessagesSkeleton) ─────────────────────────────────
   Reuses the .wbx-turn / .wbx-bubble-user / .wbx-md geometry above so streamed
   history lands with no layout shift. display:contents hoists the skeleton turns
   into the consumer's message column, so they inherit its inter-turn spacing
   exactly. Bars pulse on a themeable tint (--uic-skel, falls back to the hairline
   --uic-line) — legible on both the white assistant column and the tinted user
   bubble, in light and dark. */
.wbx-skel { display: contents; }
.wbx-skel-turn { cursor: default; }
.wbx-skel-lines { display: flex; flex-direction: column; gap: 11px; }
.wbx-bubble-user.wbx-skel-lines { gap: 8px; }
.wbx-skel-bar { display: block; height: 10px; border-radius: 5px;
  background: var(--uic-skel, var(--uic-line, #DDDFE6));
  animation: wbx-skel-pulse 1.6s ease-in-out infinite; }
@keyframes wbx-skel-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .wbx-skel-bar { animation: none; } }

/* ── agent activity timeline: natural-language summary, typed-icon rows, Request/Result ── */
.wbx-acts { margin: 4px 0 6px; }
.wbx-acts-sum { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--uic-mute, #5B5D66); background: transparent; border: none; padding: 2px 0; }
.wbx-acts-sum:hover { color: var(--uic-ink, #111317); }
.wbx-acts-body { margin: 10px 0 6px; display: flex; flex-direction: column; }
/* Each row owns the connector segment: a vertical line centered on the icon column, drawn from
   below this icon down to the next icon — so the thread runs through the icon centers. */
.wbx-act { display: flex; gap: 11px; align-items: flex-start; position: relative; padding-bottom: 16px; }
.wbx-act:last-child { padding-bottom: 0; }
.wbx-act:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0;
  width: 1.5px; background: var(--uic-line, #DDDFE6); transform: translateX(-50%); }
.wbx-act-ic-t { flex: 0 0 auto; width: 20px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--uic-brand, #285AFF); }
.wbx-act-ic-t.thinking { color: var(--uic-mute, #5B5D66); }
.wbx-act-ic-t.done { color: var(--uic-ok, #16a34a); }
.wbx-act-main { min-width: 0; flex: 1; }
.wbx-act-row { display: flex; align-items: center; gap: 8px; min-height: 22px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 0; }
.wbx-act-row:disabled { cursor: default; }
/* a call the tool reported as failed: said in words, not only in colour */
.wbx-act-failed { font-size: 11.5px; font-weight: 600; color: var(--uic-fail-ink, #b91c1c); }
.wbx-act.is-failed .wbx-act-ic-t { color: var(--uic-fail-ink, #b91c1c); }
.wbx-act-k { font-size: 13.5px; font-weight: 600; color: var(--uic-ink, #111317); }
.wbx-act-chip { font-size: 11.5px; font-family: var(--uic-mono, ui-monospace, Menlo, monospace); color: var(--uic-ink-2, #3A3D45);
  background: var(--uic-brand-faint, #EFF3FF); border-radius: 6px; padding: 1px 7px; }
.wbx-act-exp { color: var(--uic-mute, #5B5D66); display: inline-flex; }
.wbx-act-v { font-size: 12.5px; color: var(--uic-mute, #5B5D66); white-space: pre-wrap; margin-top: 3px; line-height: 1.55; }
.wbx-act-detail { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.wbx-act-block { border: 1px solid var(--uic-line, #DDDFE6); border-radius: 10px; overflow: hidden; }
.wbx-act-block-h { font-size: 11.5px; font-weight: 700; color: var(--uic-ink-2, #3A3D45); padding: 7px 12px 0; }
.wbx-act-pre { margin: 0; padding: 6px 12px 12px; font-family: var(--uic-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px;
  line-height: 1.5; color: var(--uic-ink, #111317); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }

/* ── live "working" indicator: shown below the last row for the WHOLE running turn ── */
.wbx-working { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--uic-working-ink, inherit); font-size: 13px; }
.wbx-working-dots { display: inline-flex; gap: 4px; }
.wbx-working-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--uic-brand, #285AFF); opacity: .4;
  animation: wbxblink 1.4s infinite ease-in-out; }
.wbx-working-dots span:nth-child(2) { animation-delay: .2s; } .wbx-working-dots span:nth-child(3) { animation-delay: .4s; }
.wbx-working-txt { animation: wbxbreath 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .wbx-working-dots span { animation: none; opacity: .6; }
  .wbx-working-txt { animation: none; opacity: .8; }
}
@keyframes wbxblink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }
@keyframes wbxbreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ── terminal-state badges on a turn (never color-only: glyph + text) ── */
.wbx-turnbadge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid; }
.wbx-turnbadge.failed { color: var(--uic-fail-ink, #b91c1c); border-color: var(--uic-fail-line, #fecaca); background: var(--uic-fail-bg, #fef2f2); }
.wbx-turnbadge.cancelled { color: var(--uic-cancel-ink, #52525b); border-color: var(--uic-cancel-line, #e4e4e7); background: var(--uic-cancel-bg, #fafafa); }
.wbx-turnbadge.incomplete { color: var(--uic-incomplete-ink, #92400e); border-color: var(--uic-incomplete-line, #fde68a); background: var(--uic-incomplete-bg, #fffbeb); }

/* ── composer: textarea + bottom action row (attach … accessories … send) ── */
.wbx-composer { flex-shrink: 0; margin: 0 22px 18px; border: 1px solid var(--uic-line, #DDDFE6); border-radius: 16px;
  background: var(--uic-surface, #FFFFFF);
  box-shadow: var(--uic-shadow-1, 0 1px 2px rgba(17,24,39,.04), 0 1px 1px rgba(17,24,39,.03)); padding: 12px 14px 10px; }
.wbx-composer-input { width: 100%; border: none; outline: none; resize: none; font-size: var(--uic-font-md, 14px); font-family: inherit;
  background: transparent; color: var(--uic-ink, #111317); line-height: 1.5; overflow-y: auto;
  /* auto-grows in JS up to ~15 rows, then scrolls */
  max-height: calc(var(--uic-font-md, 14px) * 1.5 * 15); }
.wbx-composer-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* files held over the composer (or over the wider target a product names): the composer says so */
.wbx-composer.is-dropping { outline: 2px solid var(--uic-brand, #285AFF); outline-offset: -2px; }
/* ── pane resizer (useResizablePane + PaneResizer) ── */
.uic-vresize { flex: 0 0 7px; align-self: stretch; cursor: col-resize; background: transparent; touch-action: none; }
/* Stacked split (useResizablePane axis 'y'): the bar is horizontal, the drag is vertical. */
.uic-hresize { flex: 0 0 7px; align-self: stretch; width: 100%; cursor: row-resize; background: transparent; touch-action: none; }
.uic-hresize:hover { background: var(--uic-brand-soft); }
body.uic-resizing-y { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: row-resize; }
body.uic-resizing-y iframe { pointer-events: none; }
.uic-vresize:hover { background: var(--uic-brand-soft, #E1E9FF); }
.uic-vresize:focus-visible { outline: none; background: var(--uic-brand, #285AFF); opacity: .5; }
/* While dragging, neutralize embedded iframes + selection so mouseup always lands. */
body.uic-resizing { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: col-resize; }
body.uic-resizing iframe { pointer-events: none; }

/* default send button (products usually replace via renderSend) */
.uic-send { width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; border: none;
  background: var(--uic-brand, #285AFF); color: var(--uic-on-brand, #fff); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.uic-send:hover:not(:disabled) { background: var(--uic-brand-ink, #1641D8); }
.uic-send:disabled { opacity: .5; cursor: not-allowed; }

/* ══ ChatPanel — the conversation column beside a document ═══════════════════
   Four products shipped this chrome under product-owned class names (.gp-chat, a
   ContextualGraph noun; .cmp; .pane-empty), 139 selectors of it, byte-identical in all four.
   It lives here now under uic-* names.

   The composer skin below is deliberately a SEPARATE class from .wbx-composer rather than a
   rewrite of it: HarnessRouter renders .wbx-composer today and did not ask for a 14px radius and
   a 10px margin. ChatPanel opts in by passing these class names to Composer's classNames — which
   is exactly the escape hatch that prop exists for. */

/* The panel is dense by design (13px, no turn gutter, wider bubbles) — the same three overrides
   all four apps wrote into their :root, where they also changed every OTHER chat surface in the
   app. Scoped to the panel, they stop leaking. */
/* `min-width: 0` is what makes the drag-to-resize actually resize.
 *
 * A flex item defaults to `min-width: auto`, which means it can never be narrower than its
 * content's min-content width. One unbreakable string in the transcript — an agent reporting
 * `/data/workspaces/hsess<32 hex chars>/dashboard.json` is 60 monospace characters with no break
 * opportunity — sets a floor of ~550px on the whole pane. The width the drag computes is applied
 * to flex-basis, the basis is then ignored, and the pane stops moving at that floor while the
 * handle keeps following the pointer. It reads as "the drag broke", and it appears only in
 * conversations that happen to contain a long path. */
.uic-chat { --uic-font-md: 13px; --uic-turn-pad-x: 0px; --uic-bubble-max-w: 88%;
  flex: 0 0 340px; height: 100vh; display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background: var(--uic-surface, #FFFFFF); border-left: 1px solid var(--uic-line, #DDDFE6); }
@media (max-width: 1180px) { .uic-chat { flex: 0 0 300px; } }
.uic-chat.is-collapsed { flex: 0 0 44px; }

.uic-chat-h { height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; border-bottom: 1px solid var(--uic-line-soft, #EFF1F4); }
/* Shrinks with ellipsis but does NOT stretch, so a status mark sits beside the title rather than
   at the far edge of the panel. */
.uic-chat-title { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600;
  color: var(--uic-ink, #111317); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uic-chat-conn { font-size: 12px; color: var(--uic-mute, #5B5D66); }
.uic-panel-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  border: none; background: none; cursor: pointer; color: var(--uic-mute, #5B5D66); }
.uic-panel-toggle:hover { background: var(--uic-hover-wash, rgba(0, 0, 0, .05)); color: var(--uic-ink, #111317); }

.uic-chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.uic-chat-body::-webkit-scrollbar { width: 8px; height: 8px; }
.uic-chat-body::-webkit-scrollbar-thumb { background: var(--uic-line, #DDDFE6); border-radius: 999px; }
.uic-chat-body::-webkit-scrollbar-track { background: transparent; }

/* "Still connecting" — a notice, not an error: the message is held, not lost. */
.uic-chat-note { align-self: center; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--uic-mute, #5B5D66);
  background: var(--uic-brand-faint, #EFF3FF); border: 1px solid var(--uic-brand-soft, #E1E9FF);
  border-radius: var(--uic-r-pill, 999px); padding: 5px 12px; }
.uic-chat-dot { width: 8px; height: 8px; border-radius: 999px;
  background: var(--uic-warn, #F59E0B); animation: uic-chat-blink 1.4s ease-in-out infinite; }
@keyframes uic-chat-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.uic-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 32px; text-align: center;
  font-size: 13px; color: var(--uic-mute, #5B5D66); }
.uic-chat-empty-t { font-size: 14px; font-weight: 600; color: var(--uic-ink-2, #3A3D45); }
.uic-chat-empty svg { color: var(--uic-mute-2, #8E9199); }
/* The turn is running somewhere else: a live mark, never the blank "describe what you want"
   prompt — that reads as a dead end while the agent is visibly working. */
.uic-chat-pulse { width: 14px; height: 14px; border-radius: 50%;
  background: var(--uic-brand, #285AFF); animation: uic-chat-blink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .uic-chat-dot, .uic-chat-pulse { animation: none; }
}

/* ── the panel's composer ── */
.uic-chat-cmp { flex-shrink: 0; margin: 10px; padding: 10px 10px 8px;
  border: 1.5px solid var(--uic-line, #DDDFE6); border-radius: 14px;
  background: var(--uic-surface, #FFFFFF); display: flex; flex-direction: column; gap: 6px; }
.uic-chat-cmp:focus-within { border-color: var(--uic-brand, #285AFF);
  box-shadow: 0 0 0 3px var(--uic-focus-ring, rgba(40, 90, 255, .14)); }
.uic-chat-cmp-input { border: none; outline: none; resize: none; font-family: inherit;
  font-size: 13px; line-height: 1.5; max-height: 120px;
  color: var(--uic-ink, #111317); background: transparent; }
.uic-chat-cmp-input::-moz-placeholder { color: var(--uic-mute-2, #8E9199); }
.uic-chat-cmp-input::placeholder { color: var(--uic-mute-2, #8E9199); }
.uic-chat-cmp-row { display: flex; align-items: center; gap: 6px; }

.uic-chat-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--uic-line, #DDDFE6); background: var(--uic-surface, #FFFFFF);
  color: var(--uic-mute, #5B5D66); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.uic-chat-icon:hover { color: var(--uic-ink, #111317); border-color: var(--uic-line-strong, #CBD0DA); }
.uic-chat-icon:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Listening is a state the person has to be able to SEE, because they cannot hear it. */
.uic-chat-icon.is-on { color: var(--uic-brand, #285AFF); border-color: var(--uic-brand, #285AFF);
  background: var(--uic-brand-faint, #EFF3FF); animation: uic-chat-mic 1.4s ease-in-out infinite; }
@keyframes uic-chat-mic { 50% { box-shadow: 0 0 0 4px var(--uic-focus-ring, rgba(40, 90, 255, .14)); } }
@media (prefers-reduced-motion: reduce) { .uic-chat-icon.is-on { animation: none; } }

.uic-chat-send { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; border: none;
  background: var(--uic-brand, #285AFF); color: var(--uic-on-brand, #fff); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.uic-chat-send:hover:not(:disabled) { background: var(--uic-brand-ink, #1641D8); }
.uic-chat-send:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Staged files above the textarea, and the names echoed inside the sent bubble. */
.uic-chat-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; align-items: center; }
.uic-chat-file-err { font-size: 11.5px; color: var(--uic-fail-ink, #b91c1c); }
.uic-chat-msg-files { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }

/* ── density inside the panel: the 13px conversation ── */
/* `anywhere`, not `break-word`, and the difference is the whole bug above.
 *
 * Both let an unbreakable word break rather than overflow, so both LOOK like they fixed it. Only
 * `anywhere` also reduces the element's min-content width — `break-word` leaves it reporting the
 * full width of the longest word. That reported width is what a flex item's `min-width: auto`
 * floors the pane at, so with `break-word` the text wrapped and the pane still would not shrink.
 * Which is exactly what shipped: the rule was here, and the drag was stuck anyway. */
.uic-chat .wbx-md { overflow-wrap: anywhere; }
.uic-chat .wbx-md h1 { font-size: 16px; }
.uic-chat .wbx-md h2 { font-size: 14.5px; }
.uic-chat .wbx-md h3 { font-size: 13.5px; }
.uic-chat .wbx-md code { background: var(--uic-line-soft, #EFF1F4); border: none; font-size: 12px; }
.uic-chat .wbx-md pre code { font-size: 12px; }
.uic-chat .wbx-md table { font-size: 12.5px; }
.uic-chat .wbx-acts-sum { font-size: 12.5px; font-family: inherit; }
.uic-chat .wbx-act-row { font-family: inherit; }
.uic-chat .wbx-act-k { font-size: 12.5px; }
.uic-chat .wbx-act-chip { font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uic-chat .wbx-act-v { font-size: 12px; }
.uic-chat .wbx-act-block-h { font-size: 11px; }
.uic-chat .wbx-act-pre { font-size: 11px; max-height: 280px; }
.uic-chat .wbx-working { font-size: 12.5px; }
.uic-chat .wbx-turnbadge { align-self: flex-start; }

/* ── narrow: the column becomes a drawer over the document ──
   Below this width a 340px column and a document cannot both be usable, and squeezing the
   document is the worse trade — the conversation is the thing you can dismiss. */
@media (max-width: 900px) {
  /* It starts BELOW the host's app bar, not over it. At top:0 the drawer covered the banner's
     right-hand side, so at 768 the sheet's Run button, Export and the account menu all hit-tested
     to the conversation instead — unreachable unless you happened to know the collapse toggle was
     the way out. The host declares its own bar height once; 0 is correct for a host that has none. */
  .uic-chat:not(.is-collapsed) {
    position: fixed; top: var(--uic-chat-drawer-top, 0); right: 0; bottom: 0; z-index: 90;
    width: min(86vw, 380px);
    flex: none !important;   /* beats the inline drag-width basis */
    box-shadow: var(--uic-shadow-3, -16px 0 40px rgba(15, 23, 42, .22));
  }
  /* Dragging the divider is meaningless once the panel floats over the page. */
  body:has(.uic-chat:not(.is-collapsed)) .uic-vresize { display: none; }
}

/* ── Composer tray (Composer.jsx `tray`) ──
   Inside the card, under the action row, on the SAME surface — no divider band, no tinted
   strip: the wireframe's "one box" reading. Wraps on narrow widths. */
.uic-composer-tray { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 2px 2px 4px; }

/* ── Composer inline line (Composer.jsx `inline`) ── one row: accessories, textarea, send.
   Centered, not flex-end: a single-line textarea's text must sit on the buttons' axis, and
   bottom-pinning left the text visibly below them (measured). Multiline drafts keep the
   buttons centered on the grown box, which is the common chat-input behavior. */
.uic-composer-line { display: flex; align-items: center; gap: 8px; }
.uic-composer-line textarea { flex: 1; min-width: 0; }

/* ChatPanel view="agent": the turns of reifyui/agent-chat (its own styles: agent-chat.css) */
.uic-chat-turns { display: flex; flex-direction: column; gap: 22px; }
.uic-chat .uac-user-b { font-size: 13.5px; }
.uic-chat .uac-md { font-size: 13.5px; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/reifyui/styles/chip.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* Chip + Popover.
   One file because both surfaces that use a chip — the prompt box on a landing page and the
   composer in a conversation panel — need it, and a chip that opens a picker needs the popover
   next to it. Every colour is a --uic-* custom property with the neutral fallback, same contract
   as styles/chat.css. */

/* ── Chip ───────────────────────────────────────────────────────────────────
   Default is a solid neutral token: a file that is attached, a name that is set.
   .is-open (clickable, nothing chosen) is dashed — an empty slot you may fill.
   .is-selected is the brand fill — a choice that is currently in effect. */
.uic-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 26px; padding: 2px 4px 2px 9px; border-radius: var(--uic-r-pill, 999px);
  font-family: inherit; font-size: 12px; line-height: 1.4;
  background: var(--uic-surface, #FFFFFF); color: var(--uic-ink-2, #3A3D45);
  border: 1px solid var(--uic-line, #DDDFE6); }
/* No trailing ✕: the label owns the right edge, so the padding is symmetric. */
.uic-chip:not(:has(.uic-chip-x)) { padding-right: 9px; }
button.uic-chip { cursor: pointer; }
button.uic-chip:hover { border-color: var(--uic-brand, #285AFF); color: var(--uic-brand-ink, #1641D8); }
.uic-chip.is-open { border-style: dashed; color: var(--uic-mute, #5B5D66); }
.uic-chip.is-selected { background: var(--uic-brand-faint, #EFF3FF);
  border-color: var(--uic-brand-soft, #E1E9FF); color: var(--uic-brand-ink, #1641D8); }
.uic-chip-ic { display: inline-flex; flex-shrink: 0; line-height: 0; }
/* The label owns the truncation, so a long file name shortens instead of stretching the row. */
.uic-chip-l { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uic-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uic-chip-meta { flex-shrink: 0; font-size: 11px; color: var(--uic-mute, #5B5D66);
  font-variant-numeric: tabular-nums; }
.uic-chip-press { display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.uic-chip-x { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer; line-height: 0;
  padding: 3px; border-radius: 999px; color: var(--uic-mute, #5B5D66); }
.uic-chip-x:hover { background: var(--uic-hover-wash, rgba(0, 0, 0, .06)); color: var(--uic-ink, #111317); }

/* ── Popover ────────────────────────────────────────────────────────────────
   Positioned in JS (fixed, flipped and clamped to the viewport) — this only paints it. The
   max-height the placement chose lands as an inline style, and the body scrolls inside it, so
   the panel is never taller than the room it was given. */
.uic-pop { position: fixed; z-index: var(--uic-z-overlay, 9000);
  display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow: hidden;
  background: var(--uic-surface, #FFFFFF); border: 1px solid var(--uic-line, #DDDFE6);
  border-radius: 12px; box-shadow: var(--uic-shadow-2, 0 8px 24px -12px rgba(17, 24, 39, .18)); }
.uic-pop-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.uic-pop-note { font-size: 12px; color: var(--uic-mute, #5B5D66); padding: 0 4px; }
.uic-pop-item { display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; font-family: inherit; font-size: 13px; color: var(--uic-ink-2, #3A3D45);
  background: none; border: none; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.uic-pop-item:hover { background: var(--uic-line-soft, #EFF1F4); color: var(--uic-ink, #111317); }
.uic-pop-item.is-on { background: var(--uic-brand-soft, #E1E9FF);
  color: var(--uic-brand-ink, #1641D8); font-weight: 600; }
.uic-pop-check { width: 15px; flex-shrink: 0; display: inline-flex; color: var(--uic-brand, #285AFF); }

/* trailing — the compact control a chip can carry (Chip.jsx `trailing`). The chip supplies
   spacing only; the control keeps its own semantics and focus behavior. */
.uic-chip-tr { display: inline-flex; align-items: center; min-width: 0; }
.uic-chip-tr select { border: none; background: transparent; font: inherit; font-size: 11.5px;
  color: var(--uic-mute, #5B5D66); cursor: pointer; max-width: 160px; }
.uic-chip-tr select:focus { outline: none; color: var(--uic-ink, #111317); }

/* ── CascadeMenu ────────────────────────────────────────────────────────────
   Two columns inside a Popover: items on the left, the highlighted item's options on the right.
   Each column scrolls on its own inside the height the popover was given. Under the stack
   breakpoint (JS) only one column shows at a time and the options column carries a way back. */
.uic-cascade { flex: 1; min-height: 0; display: flex; gap: 0; }
.uic-cascade-col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.uic-cascade-options { border-left: 1px solid var(--uic-line-soft, #EFF1F4); margin-left: 8px; padding-left: 8px; }
.uic-cascade.is-stacked .uic-cascade-options { border-left: 0; margin-left: 0; padding-left: 0; }
.uic-cascade-filter { flex: none; }
.uic-cascade-group { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--uic-mute, #5B5D66); }
.uic-cascade-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px;
  font-size: 13px; font-weight: 600; color: var(--uic-ink, #111317); }
.uic-cascade-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  margin-left: -6px; border: 0; border-radius: 8px; background: none; color: var(--uic-mute, #5B5D66); cursor: pointer; }
.uic-cascade-back:hover { background: var(--uic-line-soft, #EFF1F4); color: var(--uic-ink, #111317); }
.uic-cascade-ic { display: inline-flex; flex-shrink: 0; line-height: 0; }
.uic-cascade-item .uic-chip-t, .uic-cascade-opt .uic-chip-t { flex: 1; }
.uic-cascade-chev { display: inline-flex; flex-shrink: 0; color: var(--uic-mute, #5B5D66); opacity: .6; }
/* The highlighted item is the one whose options show: it reads as "open", not as "chosen". */
.uic-cascade-item.is-active { background: var(--uic-line-soft, #EFF1F4); color: var(--uic-ink, #111317); }
.uic-cascade-note { flex-shrink: 0; font-size: 11px; color: var(--uic-mute, #5B5D66); }
.uic-pop-item:disabled { opacity: .5; cursor: default; }
.uic-pop-item:disabled:hover { background: none; }
.uic-pop-item:focus-visible { outline: 2px solid var(--uic-brand, #285AFF); outline-offset: -2px; }
/* The press target of a split chip (label + trailing control + ✕) answers hover like the
   one-piece button chip does. */
.uic-chip-press:hover { color: var(--uic-brand-ink, #1641D8); }

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/hr.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/* HarnessRouter app chrome — built on AgentStudio tokens (deep iris --brand #1a5cf5). */

/* UI Core token mapping — the shared conversational surface (frontend-ui-core/styles/chat.css,
   the wbx-* chat rules extracted from this file) reads --uic-*; map them onto HR's palette so
   the extracted surface stays pixel-identical. Unmapped tokens (mono stack, code-block, badge
   palettes, sizes) keep the package fallbacks — those fallbacks ARE the HR values. */
:root {
  --uic-surface: var(--surface);
  --uic-line: var(--line);
  --uic-ink: var(--ink);
  --uic-ink-2: var(--ink-2);
  --uic-mute: var(--sidebar-mute);
  --uic-brand: var(--brand);
  --uic-brand-ink: var(--brand-ink);
  --uic-brand-soft: var(--brand-soft);
  --uic-brand-faint: var(--brand-50);
  --uic-shadow-1: var(--shadow-1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

/* ---- top nav (app) ---- */
.hr-nav { height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 28px;
  background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.hr-brand { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: 0; color: var(--ink); display: inline-flex; }
.hr-brand .dot { color: var(--brand); }
.hr-brand-logo { height: 26px; width: auto; display: block; }
.hr-nav-links { display: flex; gap: 22px; margin-left: 24px; flex: 1; }
.hr-nav-links a { font-size: 14px; font-weight: 500; color: var(--mute); padding: 4px 2px; transition: color .16s ease; }
.hr-nav-links a.active, .hr-nav-links a:hover { color: var(--ink); }
.hr-av { width: 34px; height: 34px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid var(--line); }

/* ---- generic ---- */
.hr-wrap { max-width: 1240px; margin: 0 auto; padding: 28px; }
.hr-h2 { font-size: 20px; font-weight: 700; margin: 8px 0 16px; }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.hr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; }
.hr-card.dim { opacity: .55; }
.hr-card-head { display: flex; align-items: center; gap: 12px; }
.hr-logo { width: 42px; height: 42px; border-radius: 11px; background: var(--brand-50); display: grid; place-items: center; flex: 0 0 auto; }
.hr-card-title { font-weight: 700; font-size: 16px; }
.hr-ver { font-size: 11px; color: var(--sidebar-mute); font-weight: 600; }
.hr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.hr-pill { font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--brand-50);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.hr-meta { font-size: 12px; color: var(--sidebar-mute); margin: 2px 0; }
.hr-meta b { color: var(--ink-2); font-weight: 600; }
.hr-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; justify-content: flex-end; }

.hr-btn { font-size: 13px; font-weight: 600; border-radius: 9px; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: opacity .12s, background .12s; }
.hr-btn:hover:not(:disabled) { background: var(--brand-50); }
.hr-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 10px 22px -6px rgba(40,90,255,.40); }
.hr-btn.primary:hover:not(:disabled) { background: var(--brand-ink); box-shadow: 0 12px 26px -6px rgba(40,90,255,.48); }
.hr-btn.danger { color: #b4460f; border-color: #f0e2d4; }
.hr-btn.danger:hover:not(:disabled) { background: #fdf9f4; color: #b4460f; border-color: #FCA5A5; }
.hr-btn.ghost { border-color: transparent; background: transparent; }
/* Disabled state: every .hr-btn (Send while generating, Save when not dirty, etc.) must LOOK
   disabled, not just be inert. Dim + not-allowed cursor + no hover. */
.hr-btn:disabled, .hr-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.hr-add { border: 2px dashed var(--brand-soft); border-radius: 14px; min-height: 150px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; color: var(--brand); cursor: pointer; background: var(--brand-50);
  font-size: 14px; font-weight: 600; transition: background .12s, border-color .12s; }
.hr-add::after { content: 'New harness'; font-size: 13px; font-weight: 600; color: var(--brand); }
.hr-add-plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand); color: #fff; font-size: 26px; line-height: 1; }
.hr-add:hover { border-color: var(--brand); background: var(--brand-100, #EEEAFE); }
.hr-add:hover .hr-add-plus { background: var(--brand-ink); }

/* ---- landing ---- */
.lp-nav { height: 72px; display: flex; align-items: center; padding: 0 40px; gap: 28px; }
.lp-nav .sp { flex: 1; }
.lp-hero { max-width: 1240px; margin: 0 auto; padding: 60px 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.lp-h1 { font-size: 68px; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; margin: 0; color: var(--ink); }
.lp-h1 .accent { color: var(--brand); }
.lp-sub { font-size: 18px; color: var(--ink-2); max-width: 520px; margin: 24px 0 32px; line-height: 1.5; }
.lp-cta { display: flex; gap: 18px; align-items: center; }
.lp-diagram { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-node { border-radius: 14px; padding: 16px 22px; text-align: center; min-width: 220px; }
.lp-node.product { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.lp-node.router { background: #0B0F1A; color: #fff; }
.lp-node .t { font-weight: 700; }
.lp-node .s { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sidebar-mute); }
.lp-node.router .s { color: #8189A1; }
.lp-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lp-leaf { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 13px; box-shadow: var(--shadow-1); }
.lp-dash { color: var(--brand); font-family: ui-monospace, monospace; font-size: 12px; }

/* ---- auth ---- */
/* Auth: a clean centered floating card over a soft, blurred backdrop. */
.hr-auth { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 18% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(50rem 38rem at 110% 110%, color-mix(in srgb, var(--accent-bright) 20%, transparent), transparent 55%),
    var(--bg); }
.hr-auth::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); pointer-events: none; }
.hr-auth-card { position: relative; z-index: 1; width: 380px; max-width: calc(100vw - 32px);
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px; box-shadow: 0 24px 60px -18px rgba(17,19,23,.28), 0 2px 8px rgba(17,19,23,.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hr-auth-card h1 { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.hr-auth-card .sub { color: var(--mute); font-size: 13px; margin-bottom: 20px; }
.hr-field { margin-bottom: 14px; }
.hr-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.hr-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.hr-field input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.hr-err { color: #b4460f; font-size: 13px; margin: 8px 0; }
.hr-gwrap { display: flex; justify-content: center; margin: 4px 0 2px; min-height: 44px; }
.hr-gbtn { display: flex; justify-content: center; }
.hr-or { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 12px; margin: 14px 0; }
.hr-or::before, .hr-or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.hr-auth-switch { font-size: 13px; color: var(--mute); text-align: center; margin: 16px 0 0; }
.hr-auth-switch button { color: var(--brand); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; }
.hr-auth-switch button:hover { text-decoration: underline; }

/* ---- workbench ---- */
.wb { display: grid; grid-template-columns: 380px 240px 1fr; height: calc(100vh - 60px); }
.wb-col { border-right: 1px solid var(--line); overflow: auto; padding: 18px; }
.wb-col:last-child { border-right: none; }
.wb-tabs { display: flex; gap: 4px; background: var(--brand-50); border: 1px solid var(--line); border-radius: 10px; padding: 4px; width: -moz-fit-content; width: fit-content; margin: 0 auto; }
.wb-tab { font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 7px; cursor: pointer; color: var(--sidebar-mute); border: none; background: transparent; }
.wb-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.wb-label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 16px 0 6px; }
.wb-input, .wb-textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 13px; font-family: inherit; }
.wb-textarea { min-height: 160px; resize: vertical; }
.wb-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.wb-toast { font-size: 12px; }
.hr-empty { color: var(--sidebar-mute); font-size: 14px; padding: 40px; text-align: center; }
.hr-soon { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand-ink); background: var(--brand-soft); border-radius: 999px; padding: 2px 8px; margin-left: 8px; }

/* ════════ app shell: fixed nav, content fills (list pages scroll inside main) ════════ */
.hr-nav { height: 52px; gap: 22px; padding: 0 22px; }
.hr-brand { font-size: 17px; }
.hr-nav-links a { font-size: 13px; }
.app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.app-main { flex: 1; min-height: 0; overflow: auto; }

/* ── custom select: chevron never hugs the border (GLOBAL rule — keep ≥30px right pad) ── */
.wbx-select-wrap { position: relative; display: inline-block; }
.wbx-select-wrap.block { display: block; }
.wbx-select { -moz-appearance: none; appearance: none; -webkit-appearance: none; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 34px 7px 12px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--ink);
  cursor: pointer; min-width: 210px; line-height: 1.3;
  /* long harness names must not push the picker into the topbar tabs */
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbx-select:focus { outline: none; border-color: var(--brand); }
.wbx-select.full { width: 100%; min-width: 0; max-width: none; }
.wbx-select.mini { min-width: 0; font-size: 12px; padding: 5px 26px 5px 10px; font-weight: 600; }
.wbx-select-chev { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--sidebar-mute); display: flex; }
.wbx-select-wrap.mini .wbx-select-chev { right: 8px; }

/* ════════ Workbench shell ════════ */
.wbx { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.wbx-bar { height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: transparent; position: relative; }
/* 3-chip toggle dead-centered in the bar (not biased by the left harness selector) */
.wbx-tabs-center { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.wbx-bar-label { font-size: 12px; font-weight: 600; color: var(--sidebar-mute); }
.wbx-body { flex: 1; min-height: 0; overflow: hidden; }
.wbx-scroll { height: 100%; overflow: auto; }

/* rounded-square panel toggle (expand/collapse) */
.wbx-toggle { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.wbx-toggle:hover { background: var(--brand-50); color: var(--ink); border-color: var(--brand-soft); }
.wbx-toggle.as-rail { border: none; background: transparent; }

/* two-area layout: Config | Chat-workspace — each a contained, rounded card on the page bg */
.wbx2 { height: 100%; display: flex; overflow: hidden; gap: 10px; padding: 10px; background: var(--bg); }
.wbx-pane { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); position: relative; }
.wbx-pane-head { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 4px 12px 0 16px; }
.wbx-pane-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
.wbx-pane-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.wbx-config-foot { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px;
  background: var(--surface); }
.wbx-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
.wbx-resizer:hover { background: var(--brand-soft); }
.wbx-note { font-size: 12px; color: var(--sidebar-mute); background: var(--brand-50); border-radius: 8px; padding: 8px 11px; margin-bottom: 4px; }
.wbx-base-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; color: var(--bc);
  background: color-mix(in srgb, var(--bc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc) 26%, transparent); }
.wbx-ro { font-size: 9px; font-weight: 700; color: var(--sidebar-mute); background: var(--line); border-radius: 5px;
  padding: 1px 6px; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.wbx-doc-hint { font-size: 10px; font-weight: 700; color: var(--brand); background: var(--brand-50);
  border-radius: 5px; padding: 1px 7px; margin-left: 7px; vertical-align: middle;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.wbx-sec-head { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }

/* collapsed rail (vertical) */
.wbx-rail { width: 42px; flex-shrink: 0; border: none; border-right: 1px solid var(--line); background: var(--brand-50);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 9px; }
.wbx-rail.wbx-rail-right { border-right: none; border-left: 1px solid var(--line); }
.wbx-rail-txt { writing-mode: vertical-rl; font-size: 12px; font-weight: 700; color: var(--brand-ink); letter-spacing: .03em; }

/* chat workspace = Recents | Conversation — a contained, rounded card */
.wbx-ws { flex: 1; min-width: 0; height: 100%; display: flex; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); }
.wbx-recents { width: 248px; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--line); }
.wbx-recents-head { height: 44px; flex-shrink: 0; display: flex; align-items: center; padding: 0 16px;
  border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink); }
.wbx-recents-list { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.wbx-recent { width: 100%; text-align: left; display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border-radius: 8px; border: none; background: transparent; cursor: pointer; }
.wbx-recent:hover { background: var(--brand-50); }
.wbx-recent.sel { background: var(--brand-soft); }
.wbx-recent-dot { width: 7px; height: 7px; border-radius: 7px; flex-shrink: 0; }
.wbx-recent-title { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wbx-recent-del { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--sidebar-mute); border-radius: 6px; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.wbx-recent:hover .wbx-recent-del { opacity: 1; }
.wbx-recent-del:hover { background: color-mix(in srgb, #b4460f 12%, transparent); color: #b4460f; }

/* conversation */
.wbx-conv { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.wbx-conv-head { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.wbx-conv-title { flex: 1; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbx-conv-msgs { flex: 1; min-height: 0; overflow: auto; padding: 24px 0; display: flex; flex-direction: column; gap: 22px; }
/* .wbx-turn / .wbx-bubble-user / .wbx-md live in UI Core (frontend-ui-core/styles/chat.css). */
.wbx-av-asst { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--brand);
  color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.wbx-asst { min-width: 0; flex: 1; max-width: calc(100% - 90px); display: flex; flex-direction: column; gap: 8px; }
.wbx-sender { font-size: 13px; font-weight: 700; color: var(--ink); }
/* Typing indicator while a turn streams with no text yet (wbxblink keyframes come from UI Core) */
.wbx-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.wbx-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--sidebar-mute); opacity: .4;
  animation: wbxblink 1.2s infinite both; }
.wbx-typing span:nth-child(2) { animation-delay: .2s; } .wbx-typing span:nth-child(3) { animation-delay: .4s; }
.wbx-think { font-size: 12.5px; color: var(--sidebar-mute); }
.wbx-think summary { cursor: pointer; }
.wbx-think > div { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; padding: 6px 0 0 10px; border-left: 2px solid var(--line); margin-top: 5px; }   /* a long unbroken token (a base64 key) wraps instead of running off the card */
.wbx-tool { font-size: 12px; font-family: ui-monospace, monospace; background: var(--brand-50); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; align-self: flex-start; }
.wbx-tool-name { color: var(--brand); font-weight: 600; }
.wbx-tool-args { color: var(--sidebar-mute); }
.wbx-file { font-size: 12.5px; color: var(--brand); align-self: flex-start; }

/* Cowork-style composer chrome lives in UI Core; only the HR-specific hint pill stays here. */
.wbx-composer-hint { font-size: 12px; font-weight: 600; color: var(--sidebar-mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 11px; }

/* traces embed */
.wbx-traces { height: 100%; display: flex; overflow: hidden; }
.wbx-traces-side { width: 300px; flex-shrink: 0; border-right: 1px solid var(--line); overflow: hidden; display: flex; }
.wbx-traces-side > aside { width: 100%; }
.wbx-traces-main { flex: 1; min-width: 0; overflow: hidden; display: flex; }
.wbx-traces-main > * { flex: 1; min-width: 0; }

/* Modal scrim for the harness create/clone/rename dialog */
.hr-modal-scrim { position: fixed; inset: 0; background: rgba(17,24,39,.38); display: grid; place-items: center; z-index: 50; }

/* ════════ Workbench Cowork chat + recents polish (no avatar/name; collapsible timeline) ════════ */
/* Recents: New Task on top, then a quiet "Recents" label (no divider) */
.wbx-recents-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px; }
.wbx-newtask { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--brand); border: none; border-radius: 10px;
  padding: 9px 12px; cursor: pointer; box-shadow: var(--shadow-1); }
.wbx-newtask:hover { background: var(--brand-ink); }
.wbx-recents-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sidebar-mute); padding: 6px 16px 4px; }
.wbx-toggle.sm { width: 28px; height: 28px; }

/* Agent activity timeline (.wbx-acts / .wbx-act-*) lives in UI Core. */

/* Per-message action row (copy, etc.) */
.wbx-actrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wbx-iconbtn { font-size: 12px; color: var(--sidebar-mute); background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 6px; }
.wbx-iconbtn:hover { color: var(--ink); background: var(--brand-50); }
.wbx-act-fail { font-size: 12px; color: #b4460f; font-weight: 600; }

/* "new harness" add card: a single large, vertically-centered + (no label) */
.hr-add { min-height: 168px; display: grid; place-items: center; }
.hr-add-plus { font-size: 46px; line-height: 1; font-weight: 300; }

/* Inline rename: click the card title to edit (no Rename button) */
.hr-card-title.editable { cursor: text; border-radius: 6px; padding: 1px 5px; margin: -1px -5px; }
.hr-card-title.editable:hover { background: var(--brand-50); }
.hr-card-title-edit { font-weight: 700; font-size: 16px; color: var(--ink); border: 1px solid var(--brand);
  border-radius: 7px; padding: 2px 7px; outline: none; width: 100%; font-family: inherit; }

/* ════════ API reference (Swagger-style) ════════ */
.apidoc { max-width: 880px; }
/* inline code reads as quiet monospace, NOT a boxed badge (badges everywhere = visual noise) */
.apidoc code, .apidoc-tok { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  color: var(--brand-ink); background: none; border: none; padding: 0; }
/* elegant code card: quiet header (lang + copy) over a light syntax-highlighted body */
.apidoc-code { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #FBFBFD; box-shadow: var(--shadow-1); }
.apidoc-code-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px;
  border-bottom: 1px solid var(--line); background: var(--bg); }
.apidoc-code-lang { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sidebar-mute); }
.apidoc-code-copy { font-size: 12px; font-weight: 600; color: var(--brand); background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.apidoc-code-copy:hover { background: var(--brand-50); }
.apidoc-kv { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin: 16px 0 4px; box-shadow: var(--shadow-1); }
.apidoc-kv > div { display: flex; align-items: center; gap: 12px; }
.apidoc-kv-k { width: 110px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--sidebar-mute);
  text-transform: uppercase; letter-spacing: .03em; }
.apidoc-h3 { font-size: 16px; font-weight: 700; margin: 30px 0 8px; }
.apidoc-sub { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 14px 0 2px; }
.apidoc-ep { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 14px 0; background: var(--surface); }
.apidoc-ep-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.apidoc-m { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; border-radius: 6px; padding: 3px 8px; }
.apidoc-m-post { background: #15803d; } .apidoc-m-get { background: #1a5cf5; }
.apidoc-m-delete { background: #b4460f; } .apidoc-m-put { background: #d97706; }
.apidoc-path { font-size: 13.5px; font-weight: 700; background: none; border: none; padding: 0; color: var(--ink); }
.apidoc-tbl { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.apidoc-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--sidebar-mute); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.apidoc-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.apidoc-tbl tr:last-child td { border-bottom: none; }
.apidoc-ty { color: var(--sidebar-mute); font-family: ui-monospace, monospace; font-size: 12px; }
.apidoc-req { font-size: 11px; font-weight: 700; color: #b4460f; }
.apidoc-opt { font-size: 11px; color: var(--sidebar-mute); }

/* ════════ Cowork-faithful chat polish ════════ */
.wbx-conv { position: relative; }

/* align the two header chevrons: config head + recents top share a height, centered */
.wbx-pane-head { height: 52px; padding: 0 12px 0 16px; }
.wbx-recents-top { height: 52px; padding: 0 12px; gap: 10px; align-items: center; }

/* Recents: hollow ring (idle/done) vs filled brand dot (active) */
.wbx-recent-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--sidebar-mute); background: transparent; box-sizing: border-box; }
.wbx-recent-dot.on { background: var(--brand); border-color: var(--brand); animation: wbxdotpulse 1.4s ease-in-out infinite; }
@keyframes wbxdotpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110,85,255,.45); } 50% { box-shadow: 0 0 0 4px rgba(110,85,255,0); } }
/* In-conversation "working" indicator (.wbx-working) lives in UI Core. */
.wbx-recents-label { display: flex; align-items: center; }

/* per-message action row (hover-revealed, muted line icons) */
.wbx-actrow { display: flex; align-items: center; gap: 2px; margin-top: 10px; opacity: 0; transition: opacity .12s; }
.wbx-turn.asst:hover .wbx-actrow, .wbx-actrow:focus-within { opacity: 1; }
.wbx-act-ic { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; color: var(--sidebar-mute); background: transparent; border: none; cursor: pointer; }
.wbx-act-ic:hover { background: var(--brand-50); color: var(--ink); }
.wbx-act-txt { height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: var(--sidebar-mute); background: transparent; border: none; cursor: pointer; font-family: inherit; }
.wbx-act-txt:hover { background: var(--brand-50); color: var(--ink); }
.wbx-act-fail { font-size: 12px; color: #b4460f; font-weight: 600; margin-left: 8px; }

/* output file cards (under the answer) */
.wbx-files { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-width: 560px; }
.wbx-files-more { font-size: 12px; color: var(--muted, #6b6560); margin: 2px 0 4px; }
/* One-click "everything from this turn" zip row under the file cards. */
.wbx-zipall { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--brand); padding: 6px 12px;
  border-radius: 9px; border: 1px solid var(--brand-soft); background: var(--brand-50); cursor: pointer; }
.wbx-zipall:hover { border-color: var(--brand); background: var(--brand-100, #EEEAFE); }
/* the archive was refused: the server's sentence, under the row that asked for it */
.wbx-zipall-err { font-size: 12px; line-height: 1.4; color: #b42318; }
.wbx-filecard { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.wbx-filecard:hover { border-color: var(--brand-soft); }
.wbx-filecard-ic { width: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.wbx-filecard-meta { flex: 1 1 auto; min-width: 0; }
.wbx-filecard-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbx-filecard-sub { display: block; font-size: 12px; color: var(--sidebar-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbx-filecard-open { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--brand); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; white-space: nowrap; }

/* composer controls (attach / Ask / model / send) */
.wbx-comp-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wbx-comp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2);
  background: var(--brand-50); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px 3px 9px; }
.wbx-comp-chip-x { border: none; background: none; cursor: pointer; color: var(--sidebar-mute); font-size: 15px; line-height: 1; padding: 0 2px; }
.wbx-comp-ic { width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--sidebar-mute); cursor: pointer; }
.wbx-comp-ic:hover:not(:disabled) { background: var(--brand-50); color: var(--ink); }
.wbx-comp-ic:disabled { opacity: .5; cursor: default; }
.wbx-comp-ask { font-size: 13px; font-weight: 600; color: var(--sidebar-mute); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; }
.wbx-send { padding: 7px 18px; }

/* jump-to-latest floating button */
.wbx-jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; width: 36px; height: 36px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; z-index: 5; }
.wbx-jump:hover { background: var(--brand-50); }

/* ════════ Tools / MCP / Skills row cards (config tab) ════════ */
.wbx-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; }
.wbx-rowcard { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 13px; background: var(--surface); }
.wbx-rowcard.ro { background: var(--brand-50); }
.wbx-rowcard-ic { color: var(--sidebar-mute); flex: 0 0 auto; display: flex; align-items: center; }
.wbx-rowcard-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbx-rowcard-act { font-size: 12.5px; font-weight: 600; color: var(--sidebar-mute); background: none; border: none;
  cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.wbx-rowcard-act:hover { color: var(--ink); background: var(--brand-50); }
.wbx-tgl { width: 38px; height: 22px; border-radius: 999px; border: none; background: var(--line);
  position: relative; cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.wbx-tgl > span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-1); transition: left .15s; }
.wbx-tgl.on { background: var(--brand); }
.wbx-tgl.on > span { left: 18px; }

/* Traces empty-state (harness with no sessions) */
.wbx-traces-empty { flex: 1; position: relative; display: grid; place-items: center; background: var(--bg); overflow: hidden; }
.wbx-empty-art { position: absolute; width: min(560px, 70%); max-height: 60%; opacity: .07; pointer-events: none; }
.wbx-traces-empty-card { position: relative; text-align: center; padding: 32px 40px; max-width: 420px; }
.wbx-traces-empty-h { font-size: 18px; font-weight: 700; color: var(--ink); }
/* done terminal row color lives in UI Core (--uic-ok). */

/* ════════ Output file preview (right split panel) ════════ */
/* container-type lets the float breakpoint below key off the CONVERSATION width, not the viewport:
   the config + recents rails eat horizontal space, so a 1440px window can leave the chat area far
   narrower — a viewport media query misses that and the docked preview clips its close button. */
.wbx-conv { display: flex; flex-direction: row; container-type: inline-size; }
.wbx-conv-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; position: relative; }
.wbx-conv.split .wbx-conv-main { flex: 1 1 auto; }
/* When the file preview is open the chat stays readable via the preview's max-width:62% cap (chat
   always keeps >=38%). Content min-width must be 0 so the preview can honor its dragged width and
   grow — a non-zero floor here blocks resize and pushes the pane (close button) off-screen. */
.wbx-conv.split .wbx-conv-main { min-width: 0; }
/* Preview pane is flex:0 0 auto in the markup (width is authoritative, so drag-to-resize works);
   min-width 280 floor + max-width 62% cap keep it from squeezing the chat or clipping its close
   button. Below 680px conversation width the @container rule floats it as an overlay instead. */
.wbx-preview-pane { min-width: 280px; max-width: 62%; height: 100%; display: flex; position: relative; }
.fp-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--surface); }
/* Narrow CONVERSATION area (rails open on a normal laptop): float the preview over the chat instead
   of squeezing it, so its close button is never pushed off-screen. Keyed to the conversation width via
   the container query above, so it fires correctly regardless of how much the config/recents rails eat. */
@container (max-width: 680px) {
  .wbx-conv.split .wbx-conv-main { min-width: 0; }
  .wbx-conv.split .wbx-preview-pane {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(480px, 92%) !important; max-width: none; flex: none !important;
    z-index: 30; box-shadow: -10px 0 30px rgba(17, 19, 23, 0.14);
  }
  .wbx-conv.split .wbx-vresize { display: none; }
  /* the browser card is not an overlay: it keeps a narrower column of its own and the conversation
     is squeezed to the left of it (Richard, 2026-09-27) */
  .wbx-conv.split .wbx-browser-pane { position: static; width: 46% !important; min-width: 240px; max-width: 62%; box-shadow: none; padding: 12px 12px 12px 0; }
}
.fp-head { height: 50px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); }
.fp-ic { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--brand-50, #f2f0ff); }
.fp-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-dl { font-size: 12.5px; font-weight: 600; color: var(--brand); }
.fp-close { width: 30px; height: 30px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--sidebar-mute); cursor: pointer; border-radius: 8px; }
.fp-close:hover { background: var(--brand-50); color: var(--ink); }
/* the Preview | Source switch of an HTML file, a segmented control in the header */
.fp-seg { flex-shrink: 0; display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.fp-seg-btn { height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sidebar-mute); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.fp-seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.fp-body { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.fp-center { display: grid; place-items: center; min-height: 100%; padding: 16px; }
.fp-img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; border-radius: 8px; }
.fp-pdf { width: 100%; height: 100%; border: none; }
.fp-media { max-width: 100%; }
.fp-text { margin: 0; padding: 18px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; line-height: 1.55; color: var(--ink); }

/* ════════ Skill folder editor (folder tree + md/code editor + upload) ════════ */
.skl-editor { width: min(960px, 92vw); height: min(680px, 88vh); background: var(--surface); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(20,16,50,.28); }
.skl-head { height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); }
.skl-title { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 14px; color: var(--ink); }
.skl-body { flex: 1; min-height: 0; display: flex; }
.skl-tree { width: 230px; flex-shrink: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--bg); }
.skl-tree-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.skl-tree-acts { display: inline-flex; gap: 4px; }
.skl-icbtn { width: 26px; height: 26px; border: none; background: transparent; color: var(--sidebar-mute); cursor: pointer;
  border-radius: 7px; display: grid; place-items: center; }
.skl-icbtn:hover { background: var(--brand-50); color: var(--brand); }
.skl-newfile { padding: 0 10px 8px; }
.skl-newfile input { width: 100%; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--brand); border-radius: 8px; background: var(--surface); color: var(--ink); }
.skl-filelist { flex: 1; overflow: auto; padding: 2px 6px 10px; }
.skl-fileitem { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: 12.5px; }
.skl-fileitem:hover { background: var(--brand-50); }
.skl-fileitem.sel { background: var(--brand-50); color: var(--ink); font-weight: 600; }
.skl-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skl-ic { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--sidebar-mute); }
.skl-del { border: none; background: transparent; color: var(--sidebar-mute); cursor: pointer; font-size: 16px; line-height: 1; width: 18px; }
.skl-del:hover { color: var(--danger, #d23); }
/* per-row hover actions: rename (pencil) + delete (trash), revealed on hover */
.skl-row-acts { display: inline-flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.skl-fileitem:hover .skl-row-acts { opacity: 1; }
.skl-row-acts button { border: none; background: transparent; color: var(--sidebar-mute); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; }
.skl-row-acts button:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.skl-row-acts button:last-child:hover { color: var(--danger, #d23); }
.skl-rename { flex: 1; min-width: 0; font-size: 12.5px; padding: 2px 6px; border: 1px solid var(--brand); border-radius: 6px; background: var(--surface); color: var(--ink); }
/* drag-and-drop dropzone + upload progress */
.skl-tree { position: relative; }
.skl-tree.dragover { outline: 2px dashed var(--brand); outline-offset: -4px; background: var(--brand-50); }
.skl-droptip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; font-size: 12.5px; font-weight: 600; color: var(--brand); background: color-mix(in srgb, var(--brand-50) 88%, transparent);
  pointer-events: none; }
.skl-prog { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--line); }
.skl-prog-bar { height: 5px; border-radius: 999px; background: var(--brand-50); overflow: hidden; }
.skl-prog-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width .15s ease; }
.skl-edit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skl-edit-path { height: 34px; flex-shrink: 0; display: flex; align-items: center; padding: 0 16px; font-size: 12px;
  color: var(--sidebar-mute); border-bottom: 1px solid var(--line); font-family: ui-monospace, Menlo, monospace; }
.skl-textarea { flex: 1; min-height: 0; resize: none; border: none; outline: none; padding: 16px; background: var(--surface);
  color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; }
.skl-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px; border-top: 1px solid var(--line); }
.skl-foot-acts { display: inline-flex; gap: 8px; }

/* ════════ Conversation top bar: single task-history toggle (top-left) ════════ */
/* Floating bar over the scroll surface: translucent fade so content scrolls under it; the toggle
   sits left, the harness name is centered. */
.wbx-conv-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: 48px; display: flex; align-items: flex-start;
  padding: 8px; pointer-events: none;
  background: linear-gradient(to bottom, var(--surface) 60%, color-mix(in srgb, var(--surface) 40%, transparent)); }
.wbx-conv-bar > * { pointer-events: auto; }
/* messages clear the floating bar */
.wbx-conv-msgs { padding-top: 50px; }

/* ════════ MCP modal: test connection + tools list ════════ */
/* Used by the kit dialog and by page-level errors, and styled nowhere until now — a refused
   connection read as ordinary body text. */
.hr-error {
  margin: 12px 0 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: #b91c1c;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px;
}
.mcp-test-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
/* quiet status: a small colored dot + neutral ink text (not a wall of green) */
.mcp-test-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.mcp-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.mcp-test-status.ok .mcp-dot { background: #15803d; }
.mcp-test-status.err { color: #b4460f; } .mcp-test-status.err .mcp-dot { background: #b4460f; }
/* tools as a scrollable list of cards */
.mcp-tools { margin-top: 10px; max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.mcp-tool-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.mcp-tool-card:hover { border-color: var(--brand-soft); }
.mcp-tool-n { font-size: 12.5px; font-weight: 700; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mcp-tool-d { font-size: 12px; color: var(--sidebar-mute); margin-top: 4px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ════════ file cards: type icon + download icon button ════════ */
.wbx-filecard { cursor: pointer; }
.wbx-filecard-dl { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--sidebar-mute); border: 1px solid transparent; flex: 0 0 auto;
  background: transparent; cursor: pointer; }
.wbx-filecard-dl:hover { background: var(--brand-50); color: var(--brand); }
/* preview header icon buttons (download / close) */
.fp-icbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--sidebar-mute); border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
.fp-icbtn:hover { background: var(--brand-50); color: var(--ink); }
/* office / sheet / doc renderers */
.fp-doc { padding: 24px 28px; color: var(--ink); font-size: 14px; line-height: 1.6; max-width: 820px; margin: 0 auto; }
.fp-doc h1, .fp-doc h2, .fp-doc h3 { font-weight: 700; margin: 1em 0 .4em; }
.fp-doc p { margin: 0 0 .7em; } .fp-doc table { border-collapse: collapse; margin: 0 0 1em; }
.fp-doc td, .fp-doc th { border: 1px solid var(--line); padding: 5px 9px; }
.fp-doc img { max-width: 100%; }
.fp-sheet { padding: 16px; overflow: auto; }
.fp-sheet table { border-collapse: collapse; font-size: 12.5px; margin-bottom: 18px; }
.fp-sheet td, .fp-sheet th { border: 1px solid var(--line); padding: 4px 8px; white-space: nowrap; }
.fp-sheet tr:first-child td, .fp-sheet th { background: var(--bg); font-weight: 600; }
.fp-sheet-name { font-size: 13px; font-weight: 700; color: var(--ink); margin: 6px 0 8px; }
/* xlsx interactive grid (SheetJS) with bottom sheet tabs */
.fp-xlsx { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface); }
.fp-xlsx .fp-sheet { flex: 1; min-height: 0; }
.fp-xlsx .fp-sheet table { border-collapse: collapse; font-size: 12.5px; width: -moz-max-content; width: max-content; }
.fp-xlsx .fp-sheet td, .fp-xlsx .fp-sheet th { border: 1px solid var(--line); padding: 4px 10px; white-space: nowrap; min-width: 56px; height: 22px; color: var(--ink-2); }
.fp-sheet-tabs { flex-shrink: 0; display: flex; gap: 2px; padding: 6px 8px; border-top: 1px solid var(--line);
  background: var(--surface-2); overflow-x: auto; }
.fp-sheet-tab { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--mute); background: transparent;
  border: 1px solid transparent; border-radius: 7px 7px 0 0; padding: 5px 12px; cursor: pointer; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-sheet-tab.on { color: var(--brand); background: var(--surface); border-color: var(--line); border-bottom-color: var(--surface); }
.fp-sheet-tab:hover:not(.on) { color: var(--ink); }
.fp-sheet-empty { display: flex; align-items: center; justify-content: center; color: var(--mute);
  font-size: 13px; }
.fp-sheet-tab.empty { opacity: .55; font-weight: 500; }

.fp-fallback { text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center; }

/* inline (flex-item) vertical resize handle — between recents|chat and chat|preview */
.wbx-vresize { flex: 0 0 5px; align-self: stretch; cursor: col-resize; background: transparent; }
.wbx-vresize:hover { background: var(--brand-soft); }

/* ════════ attachment cards (user bubble + composer) ════════ */
.wbx-attach-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.wbx-attach-row.in-composer { margin: 0 0 10px; }
.wbx-attach { position: relative; display: flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px; max-width: 220px; box-shadow: var(--shadow-1); }
.wbx-attach.img { padding: 0; width: 64px; height: 64px; }
.wbx-attach-thumb { width: 64px; height: 64px; -o-object-fit: cover; object-fit: cover; display: block; border-radius: 11px; }
.wbx-attach-ic { flex: 0 0 auto; display: flex; }
.wbx-attach-meta { min-width: 0; display: flex; flex-direction: column; }
.wbx-attach-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.wbx-attach-ext { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--sidebar-mute); margin-top: 2px; }
.wbx-attach-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--surface);
  background: var(--ink); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(20,16,50,.3); z-index: 3; }
.wbx-attach:hover .wbx-attach-x { display: flex; }

/* While dragging a resizer, neutralize embedded iframes + selection so mouseup always lands. */
body.hr-resizing { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: col-resize; }
body.hr-resizing iframe { pointer-events: none; }
.wbx-vresize { flex-basis: 7px; }

/* ════════ API Keys page ════════ */
.keys-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.keys-create-btn { flex: 0 0 auto; white-space: nowrap; }
.keys-list { margin-top: 22px; }
.keys-empty { display: flex; align-items: center; gap: 12px; padding: 28px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-2); }
.keys-empty-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; }
.keys-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); }
.keys-thead, .keys-row { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr auto; align-items: center; gap: 16px; padding: 12px 18px; }
.keys-thead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sidebar-mute); background: var(--bg); border-bottom: 1px solid var(--line); }
.keys-row + .keys-row { border-top: 1px solid var(--line); }
.keys-row:hover { background: var(--bg); }
.keys-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.keys-name-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; }
.keys-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--sidebar-mute); }
.keys-date { font-size: 13px; color: var(--ink-2); }
.keys-revoke { justify-self: end; }
/* reveal-once secret */
.keys-secret { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.keys-secret code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--ink); }
.keys-copy { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.keys-copy:hover { background: var(--brand-50); }

/* API Reference header: title + Copy-to-Agent / Download-SKILL actions */
.apidoc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 14px; flex-wrap: wrap; }
.apidoc-top-acts { display: inline-flex; gap: 8px; }

/* ── AGENTS.md doc page ─────────────────────────────────────────────────────── */
.hr-page { max-width: 920px; margin: 0 auto; padding: 28px 28px 80px; }
.hr-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.hr-doc-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); }
.hr-doc-sub { margin: 0; max-width: 620px; font-size: 14px; line-height: 1.6; color: var(--mute); }
.hr-doc-actions { display: inline-flex; gap: 8px; flex-shrink: 0; }
.hr-doc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); padding: 28px 32px; }
.hr-doc h1 { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 4px 0 14px; color: var(--ink); }
.hr-doc h2 { font-size: 16px; font-weight: 700; margin: 28px 0 10px; color: var(--ink); }
.hr-doc h3 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; color: var(--ink); }
.hr-doc p, .hr-doc li { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.hr-doc ul, .hr-doc ol { padding-left: 22px; margin: 8px 0; }
.hr-doc li { margin: 4px 0; }
.hr-doc a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.hr-doc strong { color: var(--ink); font-weight: 700; }
.hr-doc hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.hr-doc blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--brand); background: var(--brand-50); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.hr-doc code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--brand-ink); }
.hr-doc pre { background: #0f1320; border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 12px 0; }
.hr-doc pre code { font-family: var(--mono); font-size: 12.5px; background: transparent; border: 0; padding: 0; color: #d6deeb; }
.hr-doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.hr-doc th, .hr-doc td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.hr-doc th { background: var(--surface-2); font-weight: 600; color: var(--ink); }

/* ── auth: forgot-password link + reset note ── */
.hr-field-row { display: flex; align-items: center; justify-content: space-between; }
.hr-link-sm { background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; }
.hr-link-sm:hover { text-decoration: underline; }
.hr-note { font-size: 13.5px; color: var(--ink); line-height: 1.55; background: var(--brand-50, #eef1ff); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }

/* terminal-state badges (.wbx-turnbadge) live in UI Core. */

/* recents filter */
.wbx-recents-flt { padding: 0 10px 6px; display: flex; flex-direction: column; gap: 6px; }
.wbx-recents-search { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font-size: 12px; font-family: inherit; }
.wbx-recents-chips { display: flex; gap: 4px; }
.wbx-fltchip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--sidebar-mute); cursor: pointer; }
.wbx-fltchip.on { background: var(--brand-50); color: var(--brand); border-color: var(--brand); }

/* Additional Headers — preview gear (upper-right of the conversation bar) + values popup */
.wbx-hdr-gear { margin-left: auto; position: relative; width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 8px; border: none; background: transparent;
  color: var(--sidebar-mute); cursor: pointer; }
.wbx-hdr-gear:hover { background: var(--brand-50); color: var(--ink); }
.wbx-hdr-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: #d97706; border: 1.5px solid #fff; }
.wbx-hdr-pop { background: #fff; border-radius: 14px; padding: 18px 20px; width: 380px; max-width: 92vw;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22); }
.wbx-hdr-pop-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

/* MCP auth kind chips: explicit "per-request header" ($headers ref) vs stored "token" */
.mcp-authkind { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mcp-authkind.hdr { color: #1447c4; background: #eff6ff; border: 1px solid #bfdbfe; }

/* MCP modal: one-click insert chips for declared Additional Headers */
.mcp-hdr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mcp-hdr-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--brand-50); color: var(--brand); cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mcp-hdr-chip:hover { border-color: var(--brand); }

/* API reference embedded in the AGENTS.md doc card: same column as the prose, and its
   section heads sit one rank below the doc's h2s (no equal-weight heading soup). */
.hr-doc .apidoc { max-width: none; }
.hr-doc .apidoc-h3 { font-size: 14.5px; margin: 26px 0 8px; }

/* ── Tasks revamp: detail column with Conversation | Trace tabs ─────────────────── */
.wbx-detail-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.wbx-detail-tabs { flex-shrink: 0; display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.wbx-detail-tabs .wb-tab { padding: 10px 2px; }
.wbx-detail-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wbx-detail-fill > .wbx-conv { height: 100%; }
.wbx-trace-pane { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 28px; background: var(--surface); }
.wbx-trace-row { display: grid; grid-template-columns: 44px 10px minmax(120px, 240px) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-soft, #f0f0f3); font-size: 12.5px; }
.wbx-trace-time { color: var(--sidebar-mute); font-variant-numeric: tabular-nums; }
.wbx-trace-dot { width: 8px; height: 8px; border-radius: 99px; align-self: center; }
.wbx-trace-label { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbx-trace-label em { font-style: normal; font-weight: 400; color: var(--sidebar-mute); }
.wbx-trace-text { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbx-bar-title { font-size: 15px; font-weight: 700; margin-right: 14px; }

/* ---- Tasks on narrow screens: list and detail alternate as full-width views ---- */
.wbx-mob-back { display: none; }
@media (max-width: 820px) {
  .wbx2 { padding: 6px; }
  .wbx-bar { padding: 0 10px; gap: 8px; }
  .wbx-bar .wbx-select { max-width: calc(100vw - 160px); }
  .wbx-ws:not(.m-detail) .wbx-detail-col, .wbx-ws:not(.m-detail) .wbx-vresize { display: none; }
  .wbx-ws:not(.m-detail) .wbx-recents { width: 100% !important; flex: 1 1 auto !important; }
  .wbx-ws.m-detail .wbx-recents, .wbx-ws.m-detail .wbx-vresize { display: none; }
  .wbx-mob-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; flex-shrink: 0;
    margin: 8px 0 2px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
    padding: 5px 10px 5px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
  .wbx-mob-back:hover { background: var(--brand-50); }
  .wbx-asst { max-width: 100%; }
}

/* signup terms clickwrap */
.hr-consent { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 2px; font-size: 13px; color: var(--ink-2, #4b4b55); cursor: pointer; line-height: 1.45; }
.hr-consent input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--brand); flex: 0 0 auto; cursor: pointer; }
.hr-consent a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }


/* ── self-hosted sign-in ───────────────────────────────────────────────────────
   Self-contained on purpose: /login sits outside the (app) route group, so revamp.css — where
   .field and .button live — is not loaded here. Depending on it produced a form with inline
   labels and bare inputs. */
.sh-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #fbfbfc;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
.sh-login-card {
  width: 100%; max-width: 380px; padding: 32px;
  background: #fff; border: 1px solid #e7e7eb; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(20, 20, 40, .08);
}
.sh-login-mark { display: block; height: 26px; width: auto; }
.sh-login-sub { margin: 14px 0 24px; color: #6f6f78; font-size: 13.5px; }

.sh-login .field { display: block; }
.sh-login .field + .field { margin-top: 14px; }
.sh-login .field label {
  display: block; margin-bottom: 6px;
  color: #55555f; font-size: 12px; font-weight: 650;
}
.sh-login .field input {
  width: 100%; min-height: 40px; padding: 0 11px;
  border: 1px solid #d8d8df; border-radius: 8px;
  background: #fff; color: #17171a; font: inherit; font-size: 13px;
}
.sh-login .field input:focus {
  outline: none; border-color: #285aff; box-shadow: 0 0 0 3px rgba(40, 90, 255, .14);
}

.sh-login-go {
  width: 100%; min-height: 40px; margin-top: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #285aff; border-radius: 8px;
  background: #285aff; color: #fff;
  font: inherit; font-size: 13px; font-weight: 620; cursor: pointer;
}
.sh-login-go:hover:not(:disabled) { background: #1641d8; }
.sh-login-go:disabled { opacity: .45; cursor: default; }

.sh-login .notice {
  display: block; margin-bottom: 16px; padding: 10px 12px;
  border: 1px solid #f3c9cd; border-radius: 9px;
  background: #fff0f1; color: #8d1b24; font-size: 13px; line-height: 1.5;
}

.sh-login-hint { margin: 18px 0 0; color: #9696a0; font-size: 11.5px; line-height: 1.5; }
.sh-login-hint code { font-size: 11px; }


/* ── Starter Kits (Richard's console design, 2026-09-28) ───────────────────────────────────
   A white head with the title, a search box and two tabs; below it a shelf of cards, two across
   on a wide screen, one on a narrow one. Each card: the product's own screenshot as its cover,
   its mark in a tile hung over the cover's edge (the accent when the kit is running), name,
   tagline, description, what it runs on as chips, and the one action its state calls for. */
.kits-head { padding: 30px 36px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.kits-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.kits-head-copy { min-width: 0; }
.kits-head h1 { margin: 0 0 7px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.kits-head p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 640px; text-wrap: pretty; }
.kits-search { display: flex; align-items: center; gap: 9px; width: 280px; flex: none; box-sizing: border-box; padding: 9px 12px; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--muted); }
.kits-search:focus-within { border-color: var(--accent); }
.kits-search input { flex: 1; min-width: 0; padding: 0; font: inherit; font-size: 13.5px; background: transparent; border: 0; outline: none; color: var(--ink); }
.kits-search input::-moz-placeholder { color: var(--muted); }
.kits-search input::placeholder { color: var(--muted); }
.kits-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kits-tabs { display: flex; gap: 22px; margin-top: 22px; }
.kits-tab { display: flex; align-items: center; gap: 7px; padding: 0 0 13px; margin-bottom: -1px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.kits-tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.kits-tab-count { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--line-strong); }
.kits-tab.is-on .kits-tab-count { color: var(--accent); }
.kits-body { padding: 24px 36px 34px; }
.kits-empty { font-size: 13.5px; color: var(--muted); padding: 8px 0; }
.kits-empty code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

.kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .kit-grid { grid-template-columns: minmax(0, 1fr); } }

.kit-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.kit-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 30px -20px rgba(28, 25, 23, .35); transform: translateY(-1px); }
/* the cover: the product's screenshot, its top edge first, filling 150px */
.kit-cover { position: relative; height: 150px; background: var(--surface-subtle); border-bottom: 1px solid var(--line); overflow: hidden; }
.kit-cover img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; }
.kit-pill { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, #fff); color: var(--green); }
.kit-pill.is-busy { background: color-mix(in srgb, var(--accent) 8%, #fff); color: var(--accent); }
.kit-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kit-body { position: relative; padding: 0 22px 20px; display: flex; flex-direction: column; flex: 1; }
/* the tile: the kit's mark, hung over the cover's edge; the accent while the kit runs */
.kit-tile { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; flex: none; border-radius: 10px; box-sizing: border-box;
  border: 3px solid var(--surface); box-shadow: 0 4px 12px -6px rgba(28, 25, 23, .35); background: var(--ink); color: #fff; font-size: 20px; }
.kit-card.is-running .kit-tile { background: var(--accent); }
.kit-name { margin: 12px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.kit-tagline { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.kit-text { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kit-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.kit-chip { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ink);
  padding: 4px 9px; border-radius: 999px; background: var(--surface-subtle); }
.kit-chip > span { color: var(--muted); }
.kit-chip.is-warn { color: var(--amber); }
.kit-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.kit-foot-gap { flex: 1; }
.kit-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.kit-btn:hover { border-color: var(--muted); }
.kit-btn.is-primary { padding: 11px 18px; border-color: var(--accent); background: var(--accent); color: #fff; }
.kit-btn.is-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); border-color: color-mix(in srgb, var(--accent) 85%, #000); }
.kit-btn:disabled { opacity: .7; cursor: default; }
.kit-btn-glyph { font-size: 12px; }
@media (max-width: 720px) {
  .kits-head { padding: 22px 16px 0; }
  .kits-head-row { flex-direction: column; gap: 14px; }
  .kits-search { width: 100%; margin-top: 0; }
  .kits-body { padding: 16px 0 24px; }
  .kit-body { padding: 0 16px 16px; }
}

/* ── Launch dialog: pick the agent + model before provisioning ─────────────────────── */
.kit-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 24px; background: rgba(16, 18, 26, .5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.kit-dialog {
  position: relative; width: min(100%, 460px); max-height: calc(100vh - 48px);
  overflow: auto; padding: 26px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 30px 60px -18px rgba(15, 23, 42, .34);
}
.kit-dialog h2 { margin: 0 0 4px; font-size: 18px; font-weight: 650; color: var(--ink); }
.kit-dialog-sub { margin: 0 0 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.kit-dialog-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: grid;
  place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  cursor: pointer;
}
.kit-dialog-x:hover { background: var(--surface-subtle); color: var(--ink); }

.kit-choices { display: flex; flex-direction: column; gap: 8px; }
.kit-choice {
  display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 11px; cursor: pointer; transition: border-color .12s, background .12s;
}
.kit-choice:hover:not(.is-off) { border-color: var(--accent); background: var(--surface-subtle); }
.kit-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Still readable, still explains itself — just not selectable. */
.kit-choice.is-off { opacity: .55; cursor: default; }
.kit-choice input { margin-top: 3px; accent-color: var(--accent); }
.kit-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kit-choice-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.kit-choice-model { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kit-choice-why { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 4px 0 0; }
.kit-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px;
}

.kit-custom { display: flex; flex-direction: column; gap: 16px; }
.kit-field { display: flex; flex-direction: column; gap: 5px; }
.kit-field > span { font-size: 12px; font-weight: 600; color: var(--ink); }
.kit-field select, .kit-field input {
  width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid #e0dcd9; border-radius: 8px; outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.kit-field input::-moz-placeholder { color: #b8b2ad; }
.kit-field input::placeholder { color: #b8b2ad; }
.kit-field input:focus, .kit-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 92, 245, .12); }
.kit-field > span { font-size: 13px; }
.kit-custom .env-help { margin: -4px 0 0; }

.kit-dialog-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.kit-dialog-spacer { flex: 1; }

/* The database step of a launch dialog — the only place a connection string is typed. Its fields
   borrow the .hr-field vocabulary so this step reads like the rest of the console's forms. */
.kit-db { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.kit-db-title { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--ink); }
.kit-db .kit-choice-why { margin-bottom: 12px; }
.kit-db .mcp-test-row { flex-wrap: wrap; }
/* A connection string is read character by character — monospace, and it may wrap the field. */
.hr-field input.db-conn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.hr-field select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
}
.hr-field select:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.db-sample { display: flex; gap: 9px; margin-top: 14px; cursor: pointer; }
.db-sample input { margin-top: 3px; accent-color: var(--brand); flex: none; }
.db-sample span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-sample strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.db-sample em { font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--sidebar-mute); }

@media (max-width: 720px) {
  .kit-grid { grid-template-columns: 1fr; }
  .kit-dialog { padding: 20px; }
  /* Stack so the primary action never gets squeezed off the edge. */
  .kit-dialog-actions { flex-wrap: wrap; }
  .kit-dialog-spacer { display: none; }
  .kit-dialog-actions .button { flex: 1 1 auto; justify-content: center; }
  .kit-db .mcp-test-row .hr-btn { flex: 1 1 auto; justify-content: center; }
}


/* Why an incomplete turn is incomplete — one quiet line under the neutral badge, only when the
   record actually knows the cause. */
.wbx-incomplete-why { font-size: 12.5px; color: var(--mut, #6b7280); margin: 4px 0 0 2px; }

/* ── the task's browser: one floating card ──────────────────────────────────────────────────
   The right slot holds a rounded card lifted off the page; its top row carries every action and
   the vendor's live view fills the rest. The card's edge glows the brand blue while the agent has
   the browser and the tint breathes faster while the agent acts; the person's card has a calm green
   edge. Reduced motion keeps the colours and drops the animation. The card also fills the window
   (full). */
/* the column the docked card sits in is invisible (no surface, no edge, no shadow) and lets the
   page beneath be used around the card, which floats in it, centred (Richard, 2026-09-27). The
   conversation keeps at least half the width: at 686 px the 62% a file preview may take left a
   254 px conversation with a crushed composer (hr-test rc.13). */
.wbx-browser-pane { background: transparent; padding: 12px 12px 12px 0; align-items: center; pointer-events: none; max-width: 50%; }
.wbx-browser-pane > * { pointer-events: auto; }
.wbx-browser-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1 1 auto;
  border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(17, 19, 23, .06), 0 12px 32px rgba(17, 19, 23, .12), 0 0 0 1px var(--line);
  overflow: visible; transition: box-shadow .4s ease; }
.wbx-browser-card.is-full { position: fixed; inset: 12px; z-index: 80; }
/* the card's edge says who has the browser, quietly: a thin blue or green line, no motion outside */
.wbx-browser-card.is-agent { box-shadow: 0 12px 32px rgba(17, 19, 23, .12), 0 0 0 1.5px var(--brand); }
.wbx-browser-card.is-user { box-shadow: 0 12px 32px rgba(17, 19, 23, .12), 0 0 0 1.5px #1f9d63; }
/* inside the screen: the edges tint blue and breathe, the middle stays clear; while the agent acts
   the breathing quickens (Richard, 2026-09-27: the tint, no rings) */
.wbx-browser-veil { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
  background: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 0%, transparent 60%, color-mix(in srgb, var(--brand) 9%, transparent) 84%, color-mix(in srgb, var(--brand) 26%, transparent) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 0 36px color-mix(in srgb, var(--brand) 22%, transparent);
  animation: wbx-veil 3.2s ease-in-out infinite; }
.wbx-browser-veil.is-acting { animation-duration: 1.9s; }
@keyframes wbx-veil { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* the ghost cursor: where the agent last acted, gliding there along an arc; a ring on a click */
.wbx-ghost { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(17, 19, 23, .35)); }
.wbx-ghost svg { display: block; margin: -3px 0 0 -4px; }
.wbx-ghost-ring { position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--brand);
  opacity: 0; animation: wbx-ghost-ring .7s ease-out 1; }
@keyframes wbx-ghost-ring { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
/* the action row */
.wbx-browser-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; min-height: 46px; border-bottom: 1px solid var(--line);
  border-radius: 16px 16px 0 0; background: var(--surface); }
.wbx-browser-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wbx-browser-title b { font-size: 13px; font-weight: 600; color: var(--ink); }
.wbx-browser-status { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbx-browser-bar-gap { flex: 1 1 auto; }
.wbx-browser-btn { flex: 0 0 auto; height: 30px; padding: 0 12px; margin-left: 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wbx-browser-btn:hover { background: var(--brand-50); }
.wbx-browser-btn.is-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.wbx-browser-btn.is-primary:hover { background: var(--brand-hover); }
.wbx-browser-btn:disabled { opacity: .6; cursor: default; }
.wbx-browser-ic { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.wbx-browser-ic:hover { background: var(--brand-50); color: var(--ink); }
/* the screen: the browser's own shape (landscape, whatever the card's), fitted inside the card and
   centred; the card's surface, never black, is what shows around it. Beside the conversation the
   card takes only the height the screen needs; full screen fits the screen to the card. */
.wbx-browser-stream { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 0 0 16px 16px; overflow: hidden; background: var(--surface);
  display: flex; align-items: center; justify-content: center; }
.wbx-browser-screen { position: relative; width: 100%; aspect-ratio: var(--sw, 16) / var(--sh, 10); overflow: hidden; background: var(--line); }
.wbx-browser-stream.is-fit { container-type: size; }
.wbx-browser-stream.is-fit .wbx-browser-screen { width: min(100cqw, calc(100cqh * var(--sw, 16) / var(--sh, 10))); }
.wbx-browser-card.is-docked { align-self: center; }
/* the grip: the card's own left edge resizes its column (Richard, 2026-09-27: the drag range is the
   card's border, not a strip the height of the column); a short bar shows on hover and while dragging */
.wbx-browser-grip { position: absolute; left: -7px; top: 10px; bottom: 10px; width: 14px; cursor: col-resize; z-index: 3; }
.wbx-browser-grip::after { content: ''; position: absolute; left: 5px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 2px;
  background: var(--brand); opacity: 0; transition: opacity .15s ease; }
.wbx-browser-grip:hover::after, body.hr-resizing .wbx-browser-grip::after { opacity: .7; }
.wbx-browser-view, .wbx-browser-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.wbx-browser-view[inert] iframe { pointer-events: none; }
.wbx-browser-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #aab1bd; font-size: 13px; }
.wbx-browser-takeover { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; padding: 0; }
.wbx-browser-takeover:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
/* the empty state: a small window on a soft glow */
.wbx-browser-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px 28px; color: var(--muted); font-size: 13px; line-height: 1.5; gap: 6px; }
.wbx-browser-empty p { margin: 0; max-width: 380px; }
.wbx-browser-empty-title { color: var(--ink); font-weight: 600; font-size: 14px; margin-top: 8px !important; }
.wbx-browser-empty-art { position: relative; margin-bottom: 4px; }
.wbx-browser-empty-art::before { content: ''; position: absolute; inset: -30px -40px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%); }
.wbx-browser-empty-art svg { position: relative; }
.wbx-browser-empty-art .art-window { fill: var(--surface); stroke: color-mix(in srgb, var(--brand) 55%, var(--line)); stroke-width: 1.5; }
.wbx-browser-empty-art .art-line { stroke: var(--line); stroke-width: 1.5; }
.wbx-browser-empty-art .art-dot { fill: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.wbx-browser-empty-art .art-bar { fill: var(--brand-50); }
.wbx-browser-empty-art .art-text { fill: color-mix(in srgb, var(--ink) 18%, var(--surface)); }
.wbx-browser-empty-art .art-text.is-light { fill: color-mix(in srgb, var(--ink) 9%, var(--surface)); }
.wbx-browser-empty-art .art-cursor { fill: var(--brand); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
/* the live dot: blue and pulsing while the agent acts, green when the person has the browser */
.wbx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.wbx-live-dot.is-idle { background: var(--brand); opacity: .55; }
.wbx-live-dot.is-on { background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); animation: wbx-dot 1.4s ease-out infinite; }
.wbx-live-dot.is-user { background: #1f9d63; }
@keyframes wbx-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
/* the header's Browser control */
.wbx-browser-hbtn { position: relative; }
.wbx-browser-hbtn .wbx-live-dot { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; background: transparent; }
.wbx-browser-hbtn.is-on { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
@media (prefers-reduced-motion: reduce) {
  .wbx-browser-veil, .wbx-ghost-ring, .wbx-live-dot.is-on { animation: none; }
}
/* phones: the card is a sheet under the conversation, full width at the height the screen needs,
   and the conversation keeps the rest of the screen above it */
@media (max-width: 720px) {
  .wbx-conv.split:has(.wbx-browser-pane) { flex-direction: column; }
  .wbx-conv.split .wbx-browser-pane { position: static; width: 100% !important; min-width: 0; max-width: none; height: auto; flex: 0 0 auto !important; padding: 0 8px 8px; }
  .wbx-browser-card.is-docked { width: 100%; }
  .wbx-browser-grip { display: none; }
  .wbx-browser-btn { padding: 0 10px; }
}

/* ── Environments (Richard's console design, 2026-09-28) ─────────────────────────────────────
   The shelf: one row per environment. The page: a white head (back link, name, status, actions,
   facts), then a card with two tabs; the files tab is a tree beside the open file. */
.env-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.env-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(100px, 1fr) minmax(140px, 1.6fr) auto; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.env-row:first-child { border-top: 0; }
.env-row-head { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface-subtle); padding-top: 9px; padding-bottom: 9px; }
.env-row:hover { background: color-mix(in srgb, var(--surface-subtle) 55%, transparent); }
.env-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-name:hover { color: var(--accent); }
.env-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.env-row-actions .button { margin-left: 6px; }
.env-row .env-mono { color: var(--muted); font-size: 12.5px; }
.env-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.env-mono em { font-style: normal; color: var(--muted); }
.env-dim { color: var(--muted); font-size: 12.5px; }
/* Empty states: one column, centred, the hierarchy in size and weight; numbered steps, one accent action. */
/* the shelf with nothing on it: the design's flow strip, then the one thing to do */
.env-landing { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.env-flow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.env-flow > div { min-width: 0; }
.env-flow-k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.env-flow-t { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 5px; }
.env-flow-m { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 3px; text-wrap: pretty; }
.env-flow-arrow { color: #c4beba; font-size: 14px; text-align: center; }
/* a button's label never breaks into two rows: the header squeezed "New environment" onto two lines at a narrow width */
.page-actions .button { white-space: nowrap; flex: none; }
.env-onboard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 560px; margin: 56px auto; padding: 0 16px; }
.env-onboard h2 { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.env-onboard p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.env-onboard .button { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }
.env-onboard-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-subtle); color: var(--ink); font-size: 22px; }
.env-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; text-align: left; width: 100%; }
.env-steps li { display: flex; flex-direction: column; gap: 3px; }
.env-steps li span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--accent); }
.env-steps li strong { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.env-steps li em { font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.env-onboard.is-files { margin: 64px auto; max-width: 620px; }
.env-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; }
.env-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.env-choice:hover { border-color: var(--line-strong); background: var(--surface-subtle); }
.env-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.env-choice iconify-icon { font-size: 20px; color: var(--ink); margin-bottom: 4px; }
.env-choice strong { font-size: 13.5px; font-weight: 650; }
.env-choice em { font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.env-onboard-note { font-size: 12.5px; color: var(--muted); }
.env-onboard.is-packages { margin: 40px auto; }
.env-manifests { margin: 8px 0 0; width: 100%; display: flex; flex-direction: column; text-align: left; border-top: 1px solid var(--line); }
.env-manifests > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.env-manifests dt { margin: 0; color: var(--ink); }
.env-manifests dt code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.env-manifests dd { margin: 0; color: var(--muted); }
@media (max-width: 720px) {
  .env-steps, .env-choices { grid-template-columns: minmax(0, 1fr); }
  .env-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .env-flow-arrow { display: none; }
  .env-onboard, .env-onboard.is-files { margin: 32px auto; }
}
@media (max-width: 900px) {
  .env-row { grid-template-columns: minmax(140px, 1.4fr) auto; }
  .env-row > :nth-child(2), .env-row > :nth-child(3) { display: none; }
}

/* The page is the viewport: the head, then the card filling what is left with one margin on all four
   sides; the tree, the open file and the packages scroll inside the card, never the page. */
.env-root { display: flex; flex-direction: column; height: 100vh; min-width: 0; }
.env-head { flex: none; padding: 22px 36px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.env-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-decoration: none; }
.env-back:hover { color: var(--ink); }
.env-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.env-title-row h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.env-actions { display: flex; align-items: center; gap: 8px; }
.env-actions .button { display: inline-flex; align-items: center; gap: 5px; }
.env-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.env-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.env-status.is-ready i { background: var(--green); }
.env-status.is-building i { background: var(--amber); }
.env-status.is-failed i { background: var(--red, #d04040); }
.env-menu-wrap { position: relative; display: inline-flex; }
.env-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .35); display: flex; flex-direction: column; }
.env-menu.is-right { left: auto; right: 0; }
.env-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; }
.env-menu button:hover { background: var(--surface-subtle); }
.env-menu button iconify-icon { font-size: 15px; color: var(--muted); }
.env-menu button.is-danger, .env-menu button.is-danger iconify-icon { color: var(--red, #d04040); }
.env-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.env-sub code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--ink); background: var(--surface-subtle); padding: 2px 7px; border-radius: 6px; }
.env-sub a { color: var(--accent); text-decoration: none; }
.env-sep { width: 1px; height: 12px; background: var(--line); }
.env-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); font-size: 13px; color: var(--ink); }
.env-rename { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; }
.env-rename input { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; min-width: 160px; }
.env-help { margin: -4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.env-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 24px; }
.env-body > .hr-error { flex: none; }
.env-card { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.env-card-head { flex: none; }
.env-card > .env-files, .env-card > .env-packages { border-top: 1px solid var(--line); }
.env-card-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.env-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--surface-subtle); }
/* the Packages toolbar, as the design draws it: manager segments, the runtime, and Add at the right */
.env-segments { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-subtle); }
.env-segment { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }
.env-segment span { font-size: 11px; color: var(--muted); }
.env-segment.is-on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--line); }
.env-segment.is-on span { color: var(--accent); }
.env-segment:disabled { opacity: .5; cursor: default; }
.env-runtime { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.env-runtime select { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 6px 28px 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.env-add { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.env-add input { width: 260px; max-width: 100%; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); }
.env-add input::-moz-placeholder { color: var(--muted); }
.env-add input::placeholder { color: var(--muted); }
.env-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.env-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--line); }
.env-tab span { color: var(--muted); }
.env-tab.is-on span { color: var(--accent); }
.env-tab span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--accent); }
.env-files { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.env-tree-pane { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.env-tree-tools { display: flex; align-items: center; gap: 4px; padding: 12px 10px 8px; }
.env-find { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--muted); min-width: 0; }
.env-find input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--ink); }
.env-newpath { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; }
.env-newpath input { flex: 1; min-width: 0; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; }
.env-tree { flex: 1; overflow: auto; padding: 4px 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.env-node { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.env-node:hover { background: var(--surface-subtle); }
.env-node.is-selected { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.env-node iconify-icon { font-size: 14px; color: var(--muted); flex: none; }
.env-node.is-selected iconify-icon { color: var(--accent); }
.env-chev { width: 12px; font-size: 12px !important; flex: none; }
.env-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.env-node-count { color: var(--muted); font-size: 11px; }
.env-node-x { display: none; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 12px; }
.env-node:hover .env-node-x { display: inline-flex; }
.env-tree-empty { padding: 16px 14px; color: var(--muted); font-family: var(--font-sans, -apple-system, 'Inter', system-ui, sans-serif); font-size: 13px; line-height: 1.5; white-space: normal; }
.env-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.env-view-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.env-view-head code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.env-view-empty { padding: 40px 16px; color: var(--muted); font-size: 13px; }
.env-binary { padding: 24px 16px; color: var(--muted); font-size: 13px; }
.env-code { flex: 1; min-width: 0; overflow: auto; cursor: text; }
.env-code pre { margin: 0 !important; }
.env-editor { flex: 1; min-height: 0; margin: 0; padding: 14px 16px; border: 0; outline: none; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.7; color: var(--ink); background: transparent; }
.env-packages { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.env-pkg { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.env-pkg-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-pkg-version { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--muted); }
.env-pkg-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.env-pkg-x:hover { background: var(--surface-subtle); color: var(--ink); }
.env-pkg-empty { padding: 20px; font-size: 13px; color: var(--muted); }
.env-pkg-empty code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.env-build-failed { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.env-build-dialog { width: min(100%, 760px); }
/* the build's log as a terminal: dark, monospace, the command lines in the prompt's colour */
.env-term { margin: 0; padding: 14px 16px; min-height: 160px; max-height: 60vh; overflow: auto; background: #0f1320; color: #e6e9f2; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; }
.env-term-cmd { color: #9ecbff; }
.env-term-cursor { display: inline-block; width: 8px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #e6e9f2; animation: env-term-blink 1s steps(1) infinite; }
@keyframes env-term-blink { 50% { opacity: 0; } }
.env-add-error { padding: 10px 20px; font-size: 13px; color: #b91c1c; background: #fef2f2; border-bottom: 1px solid var(--line); }
.env-pkg-note { margin-left: 10px; font-style: normal; color: var(--muted); opacity: .75; }
@media (max-width: 768px) {
  .env-root { height: calc(100vh - var(--v2-mobilebar-h)); }   /* under the mobile bar, which exists at this width only */
}
@media (max-width: 900px) {
  .env-head { padding: 18px 16px 14px; }
  .env-title-row h1 { font-size: 24px; }
  .env-add { margin-left: 0; width: 100%; }
  .env-add input { flex: 1; width: auto; }
  .env-body { padding: 16px; }
  .env-files { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .env-tree-pane { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40%; }
  .env-ln { width: 40px; padding-right: 10px; }
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/hr-billing.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* Billing pages — HR design system (blue), layered on hr.css primitives. */

.hrb-content { display: flex; flex-direction: column; gap: 20px; max-width: 960px; margin: 0 auto; padding: 28px 24px 40px; }
.hrb-notice { padding: 10px 14px; border: 1px solid var(--brand-soft); background: var(--brand-50); color: var(--brand-ink); border-radius: 10px; font-size: 13px; }

.hrb-balance { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px; gap: 16px; }
.hrb-balance-value { font-size: 36px; font-weight: 680; color: var(--ink); line-height: 1.1; }
.hrb-balance-low { border-color: #E3B341; background: #fdf9f4; }
.hrb-balance-deficit { border-color: #DA1E28; background: #FFF1F2; }
.hrb-alert { margin-top: 10px; font-size: 13px; border-radius: 8px; padding: 8px 12px; }
.hrb-alert-low { background: #fdf9f4; color: #8a6a3c; }
.hrb-alert-deficit { background: #fdf9f4; color: #8a3a10; }

/* ── Subscription plans: three vertical pricing cards ─────────────────────────── */
.hrb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: 860px; margin: 4px 0 8px; align-items: stretch; }
.hrb-plan { position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.hrb-plan:hover { border-color: #cbd8ff; box-shadow: 0 8px 26px rgba(40, 90, 255, .09); transform: translateY(-2px); }
.hrb-plan.popular { border-color: var(--brand); box-shadow: 0 10px 30px rgba(110, 85, 255, .13); }
/* The CURRENT plan must read differently at a glance from the "Most popular" pitch: a green
   double ring + green tinted wash — unmistakably "you are here", not another sales card. */
.hrb-plan.current { border-color: #0E8C6A; box-shadow: 0 0 0 2px rgba(14, 140, 106, .28), 0 10px 26px rgba(14, 140, 106, .12);
  background: linear-gradient(180deg, #ECFDF5 0%, #fff 52%); }
.hrb-plan-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.hrb-plan-flag.on { background: #0E8C6A; }
.hrb-plan-flag iconify-icon { font-size: 13px; }
.hrb-plan-sub-state { margin-top: auto; display: flex; align-items: center; gap: 6px;
  padding: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: #0E8C6A; }
.hrb-plan-sub-state iconify-icon { font-size: 15px; flex: 0 0 auto; }
.hrb-plan-cancel { margin-top: 8px; color: #b4460f; border-color: #f0e2d4; }
.hrb-plan-cancel:hover { background: #fdf9f4; border-color: #FCA5A5; }
.hrb-plan.current .hrb-plan-cta.hrb-plan-cancel { margin-top: 8px; }
.hrb-plan.current .hrb-plan-feats + .hrb-plan-sub-state { margin-top: auto; }
.hrb-plan-name { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand-ink, var(--brand)); }
.hrb-plan-price { font-size: 30px; font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
.hrb-plan-price small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.hrb-plan-credits { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hrb-plan-feats { list-style: none; margin: 10px 0 14px; padding: 12px 0 0; display: grid; gap: 7px;
  border-top: 1px solid var(--line); }
.hrb-plan-feats li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.hrb-plan-feats iconify-icon { color: var(--brand); font-size: 15px; flex: 0 0 auto; }
.hrb-plan-cta { margin-top: auto; width: 100%; justify-content: center; }
.hrb-plan-cta:disabled { opacity: .65; }
.hrb-plan-note { margin-top: 8px; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.4; }
@media (max-width: 860px) { .hrb-plans { grid-template-columns: 1fr; max-width: 440px; } }

/* ── Gift stack: welcome banner, full width ──────────────────────────────────── */
.hrb-gift-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; }
.hrb-gift-row > * { margin-bottom: 0; }   /* children carry their own bottom margins otherwise */

.hrb-table-card { padding: 8px 0 12px; }
.hrb-table-scroll { overflow-x: auto; }
.hrb-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 13px; }
.hrb-table th { text-align: left; padding: 10px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute, #6b6560); font-weight: 600; }
.hrb-table td { padding: 10px 16px; color: var(--ink); }
.hrb-table tbody tr:hover { background: var(--brand-50); }
.hrb-table-empty { text-align: center; color: var(--mute, #6b6560); padding: 28px 0 !important; }
.hrb-row-overdraft td { color: #8a3a10; }
.hrb-link { color: var(--brand-ink); text-decoration: none; }
.hrb-link:hover { text-decoration: underline; }
.hrb-pager { display: flex; gap: 6px; padding: 12px 16px 4px; align-items: center; }

.hrb-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.hrb-pill-ok { background: #E7F6EC; color: #1F7A3D; }
.hrb-pill-mute { background: #EDEEF2; color: #6b6560; }
.hrb-pill-warn { background: #fdf9f4; color: #8a6a3c; }
.hrb-pill-danger { background: #fdf9f4; color: #8a3a10; }


.hrb-skeleton { background: var(--brand-50); border-radius: 8px; animation: hrbPulse 1.4s ease-in-out infinite; }
.hrb-skeleton-balance { width: 140px; height: 36px; }
.hrb-skeleton-card { height: 130px; border: 1px solid var(--line); border-radius: 12px; }
@keyframes hrbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.hr-input { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-input, 8px); font-size: 13px; background: var(--surface); color: var(--ink); }
.hr-input:focus { outline: none; border-color: var(--brand); }

/* current subscription strip + cancel flow */
.hrb-sub-current { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.hrb-sub-current > div { display: grid; gap: 2px; }
.hrb-sub-current strong { font-size: 14px; }
.hrb-sub-current span { font-size: 12.5px; color: var(--muted); }
.hrb-cancel-reasons { display: grid; gap: 8px; }
/* The native radio is HIDDEN (same pattern as .base-choice in revamp.css) — the shell's
   `.field label { display:block }` / `.field input { width:100%; min-height:40px }` rules
   otherwise inflate it into a giant block circle. The visible control is our own dot span,
   so alignment and spacing are fully ours and immune to global input styling. */
.field label.hrb-cancel-reason { display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 13px; font-weight: 550; color: var(--ink); cursor: pointer; line-height: 1.35;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.field label.hrb-cancel-reason:hover { border-color: var(--brand); }
.field label.hrb-cancel-reason.on { border-color: var(--brand); background: var(--brand-50);
  box-shadow: 0 0 0 1px var(--brand) inset; }
.field .hrb-cancel-reason input[type='radio'] { position: absolute; width: 1px; height: 1px;
  min-height: 0; opacity: 0; pointer-events: none; margin: 0; }
.hrb-cancel-dot { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box;
  border: 1.6px solid var(--line-strong, #C9CBD3); background: #fff;
  transition: border-color .14s ease, border-width .14s ease; }
.hrb-cancel-reason.on .hrb-cancel-dot { border: 5.5px solid var(--brand); }
.hrb-cancel-label { flex: 1; min-width: 0; }

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/v2.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/* ── v2 design system (harness_router_v2_design/CLAUDE.md is the source of truth) ──────────────
   Loaded LAST from the root layout so its :root remaps win. Two jobs:
   1. Retheme the whole app by remapping the token variables every existing surface already
      reads (fonts, inks, lines, accent) — un-migrated pages inherit the v2 look without edits.
   2. Style the v2 chrome (sidebar shell) and re-skin the shared primitives (menus, modals).
   Palette discipline per the spec: four ink steps, three status colors, three radii. Never add
   a fifth grey. */

:root {
  /* type — Inter for prose/UI, JetBrains Mono for machine values. The old IBM Plex/Grotesk
     variables are REMAPPED (not removed) so every existing rule that reads them flips over. */
  --v2-sans: var(--font-inter), 'Inter', system-ui, sans-serif;
  --v2-mono: var(--font-jbmono), 'JetBrains Mono', ui-monospace, monospace;
  --font-ibm-sans: var(--v2-sans);
  --font-ibm-mono: var(--v2-mono);
  --font-grotesk: var(--v2-sans);

  /* ink, four steps only */
  --v2-ink: #1c1917;
  --v2-body: #57534e;
  --v2-sec: #6b6560;
  --v2-cap: #a8a29e;
  --v2-dis: #c4beba;
  /* lines */
  --v2-line: #e7e5e4;
  --v2-row: #f4f2f0;
  --v2-div: #f0eeec;
  /* surfaces */
  --v2-desk: #eeecea;
  --v2-bg: #fafaf9;
  --v2-card: #ffffff;
  /* accent + status */
  --v2-accent: #1a5cf5;
  --v2-accent-hover: #1447c4;
  --v2-tint: #f7f8fe;
  --v2-tint-border: #c9d5f7;
  --v2-green: #15803d;
  --v2-green-bg: #eaf5ee;
  --v2-green-border: #cfe4d6;
  --v2-orange: #b4460f;
  --v2-warn-bg: #fdf9f4;
  --v2-warn-border: #f0e2d4;
  --v2-warn-ink: #8a6a3c;

  /* remap the legacy token names the existing pages read (studio tokens + revamp) */
  /* reifyui components read --uic-*; point them at the v2 palette so Chip/SearchField/
     Composer render on-theme without forking the library. */
  --uic-brand: var(--v2-accent);
  --uic-brand-ink: var(--v2-accent-hover);
  --uic-brand-faint: var(--v2-tint);
  --uic-ink: var(--v2-ink);
  --uic-ink-2: var(--v2-body);
  --uic-mute: var(--v2-sec);
  --uic-mute-2: var(--v2-cap);
  --uic-line: var(--v2-line);
  --uic-line-soft: var(--v2-row);
  --uic-surface: var(--v2-card);
  --brand: var(--v2-accent);
  --brand-hover: var(--v2-accent-hover);
  --accent: var(--v2-accent);
  --ink: var(--v2-ink);
  --muted: var(--v2-sec);
  --faint: var(--v2-cap);
  --line: var(--v2-line);
  --paper: var(--v2-bg);
  --card: var(--v2-card);
}

body {
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-family: var(--v2-sans);
}

/* ── v2 shell ─────────────────────────────────────────────────────────────────────────────── */
.v2-side {
  position: fixed; inset: 0 auto 0 0; width: var(--v2-navw, 268px);
  background: #fff; border-right: 1px solid var(--v2-line);
  display: flex; flex-direction: column; z-index: 60;
  transition: width .12s ease;
}
.v2-side.is-dragging { transition: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
/* drag handle: invisible 7px strip on the right edge */
.v2-resize {
  position: absolute; top: 0; right: -4px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 61;
}
.v2-resize:hover, .v2-side.is-dragging .v2-resize { background: var(--v2-tint-border); opacity: .5; }

.v2-title {
  display: flex; align-items: center; gap: 9px;
  padding: 18px 16px 14px; flex: none; overflow: hidden;
}
/* The wordmark sits in a clipping box: when the nav is dragged narrower than the mark, the mark
   is cropped on its right and the toggle keeps its place inside the nav. */
.v2-title .v2-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.v2-title .v2-brand-full { height: 20px; width: auto; max-width: none; flex: none; }   /* the pack's lettering at 20px reads as the 14.5px title; 28px read as 21px (Richard, 2026-09-26) */
.v2-title .v2-brand-icon { width: 22px; height: 22px; display: none; }
.v2-title .v2-searchbtn {
  margin-left: auto; border: 0; background: none; color: var(--v2-cap); cursor: pointer;
  display: inline-flex; padding: 4px; border-radius: 6px;
}
.v2-title .v2-searchbtn:hover { color: var(--v2-body); background: var(--v2-bg); }

.v2-wscard {
  margin: 0 14px 14px; padding: 9px 11px; text-align: left;
  border: 1px solid #e0dcd9; border-radius: 8px; background: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: calc(100% - 28px);
}
.v2-wscard .v2-wschev { margin-left: auto; flex: none; color: var(--v2-cap); font-size: 14px; }
.v2-wscard:hover { border-color: var(--v2-tint-border); }
.v2-wscard .v2-wsavatar {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--v2-tint); color: var(--v2-accent);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.v2-wscard .v2-wsmeta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v2-wscard .v2-wskicker {
  font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--v2-cap);
}
.v2-wscard .v2-wsname {
  font-size: 13px; font-weight: 600; color: var(--v2-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Groups are full-width bands separated by hairlines, and a row's highlight runs edge to edge
   with the accent bar on the sidebar's own edge (the design), not an inset pill. */
.v2-nav { flex: 1; overflow-y: auto; padding: 0 0 12px; }
.v2-group { padding: 14px 0 10px; border-top: 1px solid var(--v2-div); }
.v2-group:first-child { padding-top: 0; border-top: 0; }
.v2-group-label {
  font-size: 12px; color: var(--v2-cap); margin: 0 18px 7px; font-weight: 500;
}
.v2-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 18px; border-radius: 0; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; color: var(--v2-body); text-decoration: none; position: relative;
}
.v2-item:hover { background: var(--v2-bg); color: var(--v2-ink); text-decoration: none; }
.v2-item[aria-current='page'] { background: var(--v2-tint); color: var(--v2-ink); font-weight: 600; }
.v2-item[aria-current='page']::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2.5px; border-radius: 0 2px 2px 0; background: var(--v2-accent);
}
.v2-item iconify-icon { font-size: 16px; color: inherit; flex: none; }
.v2-item .v2-item-end {
  margin-left: auto; font-family: var(--v2-mono); font-size: 11.5px; color: var(--v2-cap);
}
.v2-item.is-soon { color: var(--v2-dis); cursor: default; }
.v2-item.is-soon:hover { background: none; color: var(--v2-dis); }
.v2-soon-pill {
  margin-left: auto; font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--v2-cap); background: #f5f5f4; border-radius: 999px; padding: 2px 7px;
}

/* The sidebar footer, as the hosted console has it: the repository as a bordered pill with its
   live star count, the places we live as a row of marks under it, then the account. */
.v2-foot { display: flex; flex-direction: column; gap: 8px; flex: none; border-top: 1px solid var(--v2-div); padding: 12px 14px 10px; position: relative; }
.v2-starpill { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--v2-line); border-radius: 8px; text-decoration: none; color: var(--v2-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.v2-starpill:hover { border-color: #c4beba; color: var(--v2-ink); text-decoration: none; }
.v2-starpill > iconify-icon { font-size: 16px; flex: none; color: inherit; }
.v2-star { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--v2-mono); font-size: 11.5px; color: var(--v2-sec); }
.v2-star iconify-icon { font-size: 12px; color: inherit; }
.menu-item-star { display: flex; align-items: center; }
.v2-foot .v2-account { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--v2-div); border-radius: 0; }
.v2-account {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer;
}
.v2-account:hover { background: var(--v2-bg); }
.v2-account .v2-avatar {
  width: 26px; height: 26px; border-radius: 999px; flex: none; overflow: hidden;
  background: #f5f5f4; color: var(--v2-sec); display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
}
.v2-account .v2-avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.v2-account .v2-email {
  font-size: 13px; color: var(--v2-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* collapsed rail: icons only */
.v2-side.is-rail .v2-title .v2-brand-full,
.v2-side.is-rail .v2-wscard .v2-wsmeta, .v2-side.is-rail .v2-group-label,
.v2-side.is-rail .v2-item span, .v2-side.is-rail .v2-item .v2-item-end,
.v2-side.is-rail .v2-soon-pill, .v2-side.is-rail .v2-account .v2-email { display: none; }
.v2-side.is-rail .v2-title .v2-brand-icon { display: inline-block; }
.v2-side.is-rail .v2-title { justify-content: center; padding-left: 0; padding-right: 0; }
.v2-side.is-rail .v2-title .v2-brand { flex: none; overflow: visible; }
.v2-side.is-rail .v2-wscard { justify-content: center; padding: 5px; margin: 0 auto 14px; width: auto; border-color: transparent; }
.v2-side.is-rail .v2-wscard .v2-wschev { display: none; }
.v2-side.is-rail .v2-item { justify-content: center; padding: 8px 0; }
.v2-side.is-rail .v2-group-label { display: none; }
/* The workspace menu: a real width in both modes, and in the rail it flies out to the right
   instead of squeezing into a 64px column where every name wraps. */
.v2-side .workspace-menu { top: 46px; left: 14px; width: calc(100% - 28px); min-width: 236px; }
.v2-side .workspace-menu-item > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-side.is-rail .workspace-menu { left: calc(100% + 8px); top: 0; width: 236px; }
.v2-side.is-rail .v2-account { justify-content: center; }

/* main content sits right of the sidebar */
.v2-main { margin-left: var(--v2-navw, 268px); min-height: 100vh; transition: margin-left .12s ease; }

/* mobile top bar (≤768): the sidebar becomes an overlay drawer. Its height is one number,
   --v2-mobilebar-h, that the shell's main area and every viewport-high page root subtract from the
   viewport; a root that guessed the bar's height was 6px short and the page scrolled by the bar. */
:root { --v2-mobilebar-h: 47px; }
.v2-mobilebar { display: none; }
@media (max-width: 768px) {
  .v2-mobilebar {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: var(--v2-mobilebar-h);
    position: sticky; top: 0; z-index: 55;
    background: #fff; border-bottom: 1px solid var(--v2-line); padding: 10px 14px;
  }
  .v2-main { min-height: calc(100vh - var(--v2-mobilebar-h)); }
  .v2-mobilebar img { width: 20px; height: 20px; }
  .v2-mobilebar strong { font-size: 14px; }
  .v2-mobilebar button {
    margin-left: auto; border: 0; background: none; font-size: 20px;
    color: var(--v2-body); cursor: pointer; display: inline-flex; padding: 4px;
  }
  .v2-side { transform: translateX(-100%); transition: transform .15s ease; width: 268px !important; }
  .v2-side .v2-collapsebtn { display: none; }
  .v2-side.is-open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(28,25,23,.28); }
  .v2-resize { display: none; }
  .v2-main { margin-left: 0; }
}
/* tablet (769–1024): keep the sidebar but default narrower via JS-set width */

/* ── re-skin shared primitives the old chrome classes still render ────────────────────────── */
.account-menu, .workspace-menu, .connect-menu, .search-panel {
  border: 1px solid var(--v2-line); border-radius: 10px; background: #fff;
  box-shadow: 0 8px 28px rgba(28,25,23,.10);
}
.modal { border-radius: 12px; }
.button.primary, .btn-primary { background: var(--v2-accent); border-radius: 8px; }
.button.primary:hover, .btn-primary:hover { background: var(--v2-accent-hover); }

/* v2 search overlay (⌘K) */
.v2-search-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(28,25,23,.30);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.v2-search-box {
  width: min(640px, calc(100vw - 32px)); background: #fff; border-radius: 12px;
  border: 1px solid var(--v2-line); box-shadow: 0 16px 48px rgba(28,25,23,.18); overflow: hidden;
}
.v2-search-box .global-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--v2-div); }
.v2-search-box .global-search input { flex: 1; border: 0; outline: none; font-size: 14.5px; font-family: var(--v2-sans); background: none; }
.v2-search-box .global-search iconify-icon { color: var(--v2-cap); font-size: 17px; }
.v2-search-box .search-key { font-family: var(--v2-mono); font-size: 10.5px; color: var(--v2-cap); }
.v2-search-box .search-panel { position: static; border: 0; box-shadow: none; border-radius: 0; max-height: 48vh; overflow-y: auto; }

/* title-row actions: search + the collapse toggle (the design's panel icon). In the rail the
   toggle stays visible, stacked under the logo, so expansion never requires finding the 7px
   drag edge; search hides (Cmd+K still works). */
.v2-title-actions { margin-left: auto; display: inline-flex; gap: 2px; }
.v2-collapsebtn {
  border: 0; background: none; color: var(--v2-cap); cursor: pointer;
  display: inline-flex; padding: 4px; border-radius: 6px; font-size: 16px;
}
.v2-collapsebtn:hover { color: var(--v2-body); background: var(--v2-bg); }
.v2-side.is-rail .v2-title { flex-direction: column; gap: 12px; padding-top: 16px; }
.v2-side.is-rail .v2-title-actions { margin-left: 0; }
.v2-side.is-rail .v2-collapsebtn { display: inline-flex; }

/* ── Scrollbars: thin pill thumbs, no painted track, everywhere ─────────────────────────────
   Chrome/Safari draw these through the -webkit pseudo-elements; Firefox through the standard
   properties. The standard properties are scoped to engines WITHOUT the pseudo-elements on
   purpose: Chrome ignores ::-webkit-scrollbar on any element that sets scrollbar-width, so a
   bare `scrollbar-width: thin` anywhere would switch that element back to the stock bar. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(28,25,23,.22) transparent; }
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: rgba(28,25,23,.18); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(28,25,23,.34); }

/* ── Usage: where the credits went, by day and by harness ─────────────────────────────────
   Header block on white with the period control, four summary numbers, then a scroll body
   with the chart card, the by-harness table and the price list (the v2 design's Usage page). */
.us-root { display: flex; flex-direction: column; height: 100vh; min-width: 0; background: var(--v2-bg); }
.us-head { flex: none; padding: 30px 36px 16px; background: #fff; border-bottom: 1px solid var(--v2-line); }
.us-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.us-head h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.us-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.us-seg { display: flex; align-items: center; gap: 2px; padding: 3px; background: #f5f5f4; border-radius: 8px; flex: none; }
.us-seg button { font: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 13px; border: 0; border-radius: 6px;
  background: transparent; color: var(--v2-sec); cursor: pointer; }
.us-seg button[aria-pressed="true"] { background: #fff; color: var(--v2-accent); font-weight: 600; box-shadow: 0 1px 2px rgba(28,25,23,.1); }
.us-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--v2-sec); }
.us-custom input { font: inherit; font-size: 12.5px; padding: 7px 10px; border: 1px solid #e0dcd9; border-radius: 8px; background: #fff; color: var(--v2-ink); }
.us-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px; margin-top: 22px; }
.us-stat-k { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); }
.us-stat-v { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; min-width: 0; }
.us-stat-v b { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--v2-ink); font-variant-numeric: tabular-nums; }
.us-delta { font-family: var(--v2-mono); font-size: 11.5px; }
.us-delta.up { color: var(--v2-orange); }
.us-delta.down { color: var(--v2-green); }
.us-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 36px 34px; display: flex; flex-direction: column; gap: 16px; }
.us-card { border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; }
.us-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 18px 22px 14px; }
.us-card-title { font-size: 15px; font-weight: 600; color: var(--v2-ink); display: inline-flex; align-items: center; gap: 12px; }
/* In-card mode chips: mono 10/600 in a track, the design's in-row tab style, never page tabs. */
.us-mode { display: inline-flex; gap: 2px; padding: 2px; background: #f5f5f4; border-radius: 6px; }
.us-mode button { font-family: var(--v2-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--v2-sec); cursor: pointer; }
.us-mode button[aria-pressed="true"] { background: #fff; color: var(--v2-ink); box-shadow: 0 1px 2px rgba(28,25,23,.1); }
.us-legend { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.us-legend-i { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--v2-body); }
.us-legend-i i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.us-legend-i b { font-family: var(--v2-mono); font-weight: 400; font-size: 11.5px; color: var(--v2-cap); }
.us-chart { height: 232px; margin: 4px 22px 18px; }
.us-empty { padding: 26px 22px; font-size: 13.5px; color: var(--v2-sec); line-height: 1.5; }
.us-empty a { color: var(--v2-accent); }
.us-skel { margin: 4px 22px 18px; height: 232px; border-radius: 8px; background: linear-gradient(90deg, #f5f5f4, #fafaf9, #f5f5f4); background-size: 200% 100%; animation: us-shimmer 1.2s linear infinite; }
@keyframes us-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .us-skel { animation: none; } }
/* The by-harness table: a grid, so the header and the rows share one set of columns. */
.us-thead, .us-row { display: grid; grid-template-columns: minmax(200px, 1fr) 208px 70px 82px 88px 168px; align-items: center; gap: 14px; padding: 13px 22px; }
.us-thead { padding: 10px 22px; background: var(--v2-bg); border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line);
  font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); }
.us-row { border-bottom: 1px solid #f4f2f0; }
.us-row:last-child { border-bottom: 0; }
.us-row-name { min-width: 0; }
.us-row-name b { display: block; font-size: 14px; font-weight: 600; color: var(--v2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-cfg { font-family: var(--v2-mono); font-size: 11.5px; color: var(--v2-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.us-num { font-family: var(--v2-mono); font-size: 12.5px; color: var(--v2-body); font-variant-numeric: tabular-nums; }
.us-num.ink { color: var(--v2-ink); }
.us-share { display: flex; align-items: center; gap: 9px; min-width: 0; }
.us-bar { flex: 1; height: 5px; border-radius: 3px; background: #f0eeec; overflow: hidden; }
.us-bar i { display: block; height: 100%; background: var(--v2-accent); }
.us-share span { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); width: 34px; text-align: right; flex: none; }
/* Price list: a card that opens. */
.us-prices-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 22px;
  background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; border-radius: 10px; }
.us-prices-btn:hover { background: var(--v2-bg); }
.us-prices-t { font-size: 14.5px; font-weight: 600; color: var(--v2-ink); }
.us-prices-k { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); flex: none; }
.us-prices { border-top: 1px solid #f0eeec; }
.us-price-g { padding: 12px 22px 4px; font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); }
.us-price { display: grid; grid-template-columns: 1fr 200px; align-items: center; gap: 16px; padding: 10px 22px; border-bottom: 1px solid #f7f5f4; }
.us-price span:first-child { font-size: 13.5px; color: var(--v2-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-price span:last-child { font-family: var(--v2-mono); font-size: 12.5px; color: var(--v2-body); }
@media (max-width: 1100px) {
  .us-thead, .us-row { grid-template-columns: minmax(150px, 1fr) 150px 56px 72px 72px; }
  .us-share, .us-thead .us-th-share { display: none; }
}
@media (max-width: 1024px) {
  .us-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .us-root { height: calc(100vh - var(--v2-mobilebar-h)); }
  .us-head { padding: 20px 16px 14px; }
  .us-body { padding: 16px 16px 24px; }
  .us-stat-v b { font-size: 22px; }
}
@media (max-width: 600px) {
  .us-thead, .us-row { grid-template-columns: minmax(120px, 1fr) 56px 72px; gap: 10px; padding-left: 16px; padding-right: 16px; }
  .us-cfg, .us-thead .us-th-cfg, .us-cpt, .us-thead .us-th-cpt { display: none; }
  .us-row-name b { white-space: normal; }
  .us-card-head, .us-thead, .us-price, .us-prices-btn, .us-price-g { padding-left: 16px; padding-right: 16px; }
  .us-chart { margin: 4px 12px 0; } .us-empty { margin-left: 16px; margin-right: 16px; }
  .us-price { grid-template-columns: 1fr auto; }
}

/* ── API keys ───────────────────────────────────────────────────────────────────────────────
   Header block (title, primary action, search, the stale note, the shown-once note), then one
   card: a grid table whose header and rows share the same columns. A key that was never used
   since it was made sits on a warm row with the reason spelled out. */
.ak-root { display: flex; flex-direction: column; height: 100vh; min-width: 0; background: var(--v2-bg); }
.ak-head { flex: none; padding: 30px 36px 18px; background: #fff; border-bottom: 1px solid var(--v2-line); }
.ak-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.ak-head h1 { margin: 0 0 7px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.ak-sub { margin: 0; font-size: 14px; color: var(--v2-sec); }
.ak-primary { flex: none; font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 18px; border: 0; border-radius: 8px;
  background: var(--v2-accent); color: #fff; cursor: pointer; }
.ak-primary:hover { background: var(--v2-accent-hover, #1447c4); }
.ak-primary:disabled { opacity: .5; cursor: default; }
.ak-secondary { font: inherit; font-size: 13px; font-weight: 500; padding: 10px 16px; background: transparent; border: 1px solid #e0dcd9; border-radius: 8px; cursor: pointer; color: var(--v2-body); }
.ak-secondary:hover { border-color: var(--v2-cap); }
.ak-danger { font: inherit; font-size: 13px; font-weight: 600; padding: 10px 18px; background: var(--v2-orange); border: 0; border-radius: 8px; cursor: pointer; color: #fff; }
.ak-tools { display: flex; align-items: center; gap: 12px 16px; margin-top: 20px; flex-wrap: wrap; }
.ak-search { width: 260px; max-width: 100%; font: inherit; font-size: 13.5px; padding: 9px 12px; background: #fff; border: 1px solid #e0dcd9; border-radius: 8px; color: var(--v2-ink); }
.ak-search:focus { outline: none; border-color: var(--v2-accent); }
.ak-once { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--v2-cap); }
.ak-once iconify-icon { font-size: 15px; color: var(--v2-dis, #b8b2ad); }
.ak-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 36px 34px; }
.ak-err { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #f0e2d4; border-radius: 8px; background: #fdf9f4; color: #8a6a3c; font-size: 13px; }
.ak-card { border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; overflow: hidden; }
.ak-thead, .ak-row { display: grid; grid-template-columns: minmax(190px, 1fr) 152px 132px 92px 30px; align-items: center; gap: 14px; padding: 13px 20px; }
.ak-thead { padding: 11px 20px; background: var(--v2-bg); border-bottom: 1px solid var(--v2-line);
  font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); }
.ak-row { border-bottom: 1px solid #f4f2f0; }
.ak-row:last-child { border-bottom: 0; }
.ak-name { min-width: 0; }
.ak-name b { display: block; font-size: 14px; font-weight: 600; color: var(--v2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-key { font-family: var(--v2-mono); font-size: 12.5px; color: var(--v2-body); white-space: nowrap; }
.ak-last.none { color: var(--v2-cap); }
.ak-last { font-family: var(--v2-mono); font-size: 12px; color: var(--v2-body); white-space: nowrap; }
.ak-created { font-family: var(--v2-mono); font-size: 12px; color: var(--v2-cap); white-space: nowrap; }
.ak-dots { justify-self: end; background: transparent; border: 0; border-radius: 6px; padding: 4px 6px; cursor: pointer; color: var(--v2-cap); font-size: 16px; line-height: 0; }
.ak-dots:hover, .ak-dots[aria-expanded="true"] { background: #f5f5f4; color: var(--v2-ink); }
.ak-menu .uic-pop-item.danger { color: var(--v2-orange); }
.ak-empty { padding: 34px 20px; text-align: center; font-size: 13.5px; color: var(--v2-sec); line-height: 1.6; }
.ak-skel { height: 18px; margin: 15px 20px; border-radius: 6px; background: linear-gradient(90deg, #f5f5f4, #fafaf9, #f5f5f4); background-size: 200% 100%; animation: us-shimmer 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ak-skel { animation: none; } }
/* Dialogs, the design's 520px sheet: title, body, a footer bar. */
.ak-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(28,25,23,.34); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ak-modal { width: 520px; max-width: 100%; max-height: 100%; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 30px 70px -30px rgba(28,25,23,.5); }
.ak-modal-body { padding: 24px 26px 20px; }
.ak-modal h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--v2-ink); }
.ak-modal-sub { font-size: 13px; color: var(--v2-sec); margin-top: 6px; line-height: 1.5; }
.ak-field { margin-top: 20px; }
.ak-field-k { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); margin-bottom: 7px; }
.ak-field input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 11px 13px; background: #fff; border: 1px solid #e0dcd9; border-radius: 8px; color: var(--v2-ink); }
.ak-field input:focus { outline: none; border-color: var(--v2-accent); }
.ak-field select { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 11px 13px; background: #fff; border: 1px solid #e0dcd9; border-radius: 8px; color: var(--v2-ink); }
.ak-field select:focus { outline: none; border-color: var(--v2-accent); }
.ak-field-help { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--v2-cap); }
.ak-warn { display: flex; gap: 11px; margin-top: 18px; padding: 13px 15px; border: 1px solid #f0e2d4; border-radius: 8px; background: #fdf9f4; }
.ak-warn i { font-style: normal; color: var(--v2-orange); font-size: 13px; line-height: 1.5; flex: none; font-weight: 700; }
.ak-warn span { font-size: 12.5px; line-height: 1.6; color: #8a6a3c; }
.ak-secret { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--v2-line); border-radius: 8px; background: var(--v2-bg); }
.ak-secret code { flex: 1; min-width: 0; font-family: var(--v2-mono); font-size: 13px; color: var(--v2-ink); word-break: break-all; }
.ak-copy { flex: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: 1px solid #e0dcd9; background: #fff; color: var(--v2-ink); }
.ak-copy.is-copied { border-color: var(--v2-green-border); background: var(--v2-green-bg); color: var(--v2-green); }
.ak-modal-note { font-size: 12.5px; color: var(--v2-cap); margin-top: 12px; }
.ak-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 26px; border-top: 1px solid #f0eeec; background: var(--v2-bg); }
@media (max-width: 820px) {
  .ak-thead, .ak-row { grid-template-columns: minmax(140px, 1fr) 130px 110px 30px; gap: 12px; }
  .ak-created, .ak-th-created { display: none; }
}
@media (max-width: 768px) {
  .ak-root { height: calc(100vh - var(--v2-mobilebar-h)); }
  .ak-head { padding: 20px 16px 14px; }
  .ak-body { padding: 16px 16px 24px; }
  .ak-search { width: 100%; }
  .ak-once { margin-left: 0; }
}
@media (max-width: 480px) {
  .ak-thead, .ak-row { grid-template-columns: minmax(100px, 1fr) 118px 30px; gap: 10px; padding-left: 14px; padding-right: 14px; }
  .ak-last, .ak-th-last { display: none; }
  .ak-name b { white-space: normal; }
}

/* ── Agent harnesses (终版): panel of harnesses with their tasks, plus one main area ────────
   Full-bleed like Arena: the page owns everything right of the nav. The panel is 288px on
   white; the main area is a white header block over a scrolling body. */
.hx-root { display: flex; height: 100vh; min-width: 0; background: var(--v2-bg); }
.hx-side { width: 288px; flex: none; background: #fff; border-right: 1px solid var(--v2-line); display: flex; flex-direction: column; min-height: 0; }
.hx-side-head { flex: none; padding: 18px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.hx-side-title { font-size: 14.5px; font-weight: 600; color: var(--v2-ink); padding: 0 4px; }
.hx-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid #e0dcd9; border-radius: 8px; background: #fff; color: var(--v2-cap); }
.hx-search:focus-within { border-color: var(--v2-accent); }
.hx-search iconify-icon { font-size: 15px; flex: none; }
.hx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--v2-ink); }
.hx-side-fixed { flex: none; padding-top: 4px; }
.hx-side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 14px; }
.hx-index { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 18px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--v2-body); text-align: left; }
.hx-index iconify-icon { font-size: 16px; color: var(--v2-cap); }
.hx-index b { margin-left: auto; font-family: var(--v2-mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: #f5f5f4; color: var(--v2-cap); }
.hx-index.is-on { background: var(--v2-tint); color: var(--v2-ink); font-weight: 600; }
.hx-index.is-on::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2.5px; border-radius: 0 2px 2px 0; background: var(--v2-accent); }
.hx-div { height: 1px; margin: 8px 0 6px; background: var(--v2-div); }
/* the tree's two groups: yours first, the system's below; a quiet header with a count */
.hx-group { padding: 4px 0 2px; }
.hx-group + .hx-group { margin-top: 6px; border-top: 1px solid var(--v2-line); padding-top: 8px; }
.hx-group-btn { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 12px 6px 14px; border: 0; background: none; cursor: pointer; color: var(--v2-sec); font: inherit; text-align: left; }
.hx-group-btn:hover { color: var(--v2-ink); }
.hx-group-row { display: flex; align-items: center; padding-right: 8px; }
.hx-group-row .hx-group-btn { flex: 1; min-width: 0; }
.hx-group-row .hx-group-add { opacity: 0; }
.hx-group-row:hover .hx-group-add, .hx-group-add:focus-visible { opacity: 1; }
.hx-group-btn .hx-caret { font-size: 14px; color: var(--v2-cap); flex: none; }
.hx-group-label { font-size: 13px; font-weight: 500; }
.hx-group-count { font-family: var(--v2-mono); font-size: 10.5px; color: var(--v2-cap); }
.hx-group-empty { padding: 2px 18px 8px 34px; font-size: 12px; color: var(--v2-cap); line-height: 1.5; }
.hx-proj-row { display: flex; align-items: center; gap: 2px; padding: 2px 8px 2px 10px; }
.hx-proj-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--v2-ink); }
.hx-caret { font-size: 14px; color: var(--v2-cap); flex: none; }
.hx-proj-name { font-size: 13px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-proj-badge { flex: none; font-family: var(--v2-mono); font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: var(--v2-tint); color: var(--v2-accent); }
.hx-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--v2-cap); cursor: pointer; font-size: 14px; opacity: 0; }
.hx-proj-row:hover .hx-ic, .hx-ic:focus-visible, .hx-proj.is-current .hx-ic { opacity: 1; }
.hx-ic:hover { background: #f5f5f4; color: var(--v2-ink); }
.hx-tasks { position: relative; padding: 0 0 4px; }
/* The tree guide: a hairline under the caret, so the tasks read as the harness's children. */
.hx-tasks::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 6px; width: 1px; background: var(--v2-line); }
.hx-tasks-empty { padding: 5px 14px 6px 34px; font-size: 12px; color: var(--v2-cap); }
.hx-tasks-skel .hx-task-row { gap: 9px; padding: 8px 14px 8px 34px; }
.hx-skel-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hx-skel-bar { height: 11px; border-radius: 5px; }
.hx-task { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 14px 6px 32px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; }
.hx-task span { font-size: 13px; color: var(--v2-body); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-task.is-on { background: var(--v2-tint); }
.hx-task.is-on span { color: var(--v2-ink); font-weight: 600; }
.hx-task.is-on::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2.5px; border-radius: 0 2px 2px 0; background: var(--v2-accent); }
.hx-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--v2-cap); }
.hx-dot.is-done { background: var(--v2-green); } .hx-dot.is-running { background: var(--v2-accent); } .hx-dot.is-failed { background: var(--v2-orange); }
.hx-empty { padding: 18px 16px; font-size: 13px; color: var(--v2-cap); }

.hx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.hx-head { flex: none; padding: 16px 28px 0; background: #fff; border-bottom: 1px solid var(--v2-line); }
/* With tabs, the header's bottom line is the tabs' baseline: the tabs row (rendered by the
   conversation below) carries the one line, so the header itself draws none. */
.hx-head.has-tabs { border-bottom: 0; }
.hx-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 14px; }
.hx-head.has-tabs .hx-head-row { padding-bottom: 0; }
.hx-head-lead { min-width: 0; }
.hx-back { display: none; }
.hx-crumb { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--v2-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-crumb-cfg { font-family: var(--v2-mono); font-size: 11px; }
.hx-crumb-sep { color: #d6d3d1; }
.hx-title-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; min-width: 0; }
.hx-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--v2-ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-pill { flex: none; font-family: var(--v2-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #f5f5f4; color: var(--v2-sec); }
.hx-pill.is-done { background: rgba(21, 128, 61, .08); color: #15803d; }
.hx-pill.is-running { background: rgba(26, 92, 245, .08); color: #1a5cf5; }
.hx-pill.is-failed { background: rgba(180, 70, 15, .08); color: #b4460f; }
.hx-more { display: block; margin: 2px 0 4px 26px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; color: var(--v2-accent); cursor: pointer; }
.hx-more:hover { background: var(--v2-row, #f3f2f0); }
.hx-more:disabled { color: var(--v2-cap); cursor: default; }
/* ── the conversation, per the design: captions above turns, a tinted user bubble, the agent's
      reply as plain text (no card), file cards with an extension badge and a plain Preview link ── */
.run-layout.is-embedded .wbx-conv-main { background: var(--v2-bg); }
.run-layout.is-embedded .wbx-browser-pane { background: var(--v2-bg); }   /* the browser card's column: no seam beside the conversation */
.run-layout.is-embedded .wbx-conv-msgs { --uic-cap: var(--v2-cap); --uic-mono: var(--v2-mono); --uic-bubble-max-w: 640px; gap: 20px; }
.run-layout.is-embedded .wbx-turn.user .wbx-bubble-user { background: #f0f3fe; color: var(--v2-ink); border-radius: 12px; padding: 13px 17px; font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.run-layout.is-embedded .wbx-turn.asst > * { max-width: 640px; }
.run-layout.is-embedded .wbx-turn.asst .wbx-md { font-size: 15px; line-height: 1.65; color: var(--v2-ink); text-wrap: pretty; }
.run-layout.is-embedded .wbx-files { max-width: 640px; margin-top: 10px; gap: 10px; }
.run-layout.is-embedded .wbx-filecard { gap: 12px; padding: 11px 13px; border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; transition: border-color 110ms, background 110ms; }
.run-layout.is-embedded .wbx-filecard:hover { border-color: #c9d5f7; background: var(--v2-tint); }
.run-layout.is-embedded .wbx-filecard-ic { width: 30px; flex: none; }
.run-layout.is-embedded .wbx-filecard-name { font-size: 13.5px; font-weight: 600; color: var(--v2-ink); }
.run-layout.is-embedded .wbx-filecard-sub { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); margin-top: 2px; }
.run-layout.is-embedded .wbx-filecard-dl { color: var(--v2-cap); }
.run-layout.is-embedded .wbx-filecard-open { border: 0; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--v2-accent); }
/* the tabs, per the design, with the Trace count: the row sits in the white header band and its
   one line is the header's bottom line */
.run-layout.is-embedded .task-detail-shell { background: #fff; padding: 0 28px; border-bottom: 1px solid var(--v2-line); }
.run-layout.is-embedded .tabs { display: flex; gap: 24px; margin: 14px 0 0; border-bottom: 0; }
.run-layout.is-embedded .tabs .tab { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 10px 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; color: #8a827c; }
.run-layout.is-embedded .tabs .tab[aria-selected="true"] { color: var(--v2-ink); border-color: var(--v2-accent); }
.hx-badges { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.hx-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--v2-row, #f3f2f0);
  font-family: var(--v2-mono); font-size: 11px; color: var(--v2-sec); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-badge iconify-icon { font-size: 12px; color: var(--v2-cap); }
.hx-head-actions { flex: none; display: flex; gap: 8px; }
.hx-primary { font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--v2-accent); color: #fff; cursor: pointer; }
.hx-primary:hover { background: var(--v2-accent-hover, #1447c4); }
.hx-head-actions .hx-secondary, .hx-secondary { font: inherit; font-size: 13px; font-weight: 500; line-height: normal; padding: 8px 14px; border: 1px solid #e0dcd9; border-radius: 8px; background: #fff; color: var(--v2-body); cursor: pointer; }
.hx-secondary:hover { border-color: var(--v2-cap); }
.hx-secondary { font: inherit; font-size: 13px; font-weight: 500; padding: 9px 14px; border: 1px solid #e0dcd9; border-radius: 8px; background: #fff; color: var(--v2-body); cursor: pointer; }
.hx-secondary:hover { border-color: var(--v2-cap); }
.hx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 28px 30px; }
.hx-body.is-chat { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--v2-bg); }
.hx-empty-main { padding: 34px 20px; text-align: center; font-size: 13.5px; color: var(--v2-sec); line-height: 1.6; }

/* The embedded task conversation fills the body; the Tasks page card chrome is gone. */
.hx-body.is-chat .run-layout.is-embedded { height: 100%; max-height: none; min-height: 0; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); }
.hx-body.is-chat .run-layout.is-embedded .task-detail-shell { padding: 0 28px; }
.hx-body.is-chat .run-layout.is-embedded .task-detail-shell .tabs { margin: 14px 0 0; }
/* Embedded in the unified page, the settings action bar belongs to the settings pane: white,
   pinned to the pane's bottom edge from first paint, spanning it edge to edge — never fixed
   across the viewport (the old standalone rule overlaid the task panel and clipped Delete under
   the nav). Three parts make that true: the pane's padding moves onto .page so the bar can
   escape it with matching negative margins; .page stops being an overflow context so the sticky
   scrollport is .hx-body, the thing that actually scrolls; and the bar itself sits OUTSIDE the
   980px form in the markup, so its box is the pane, not the form. */
#view-harnesses .hx-body:has(#view-harness) { padding: 0; }
#view-harnesses #view-harness .page { overflow: visible; padding: 22px 28px 0; max-width: none; }
#view-harnesses #view-harness .settings-form { padding-bottom: 0; }
#view-harnesses #view-harness .settings-footer-sticky { position: sticky; left: auto; right: auto;
  bottom: 0; margin: 18px -28px 0; padding: 12px 28px; background: #fff;
  border-top: 1px solid var(--v2-line); z-index: 5; }
@media (max-width: 1024px) {
  #view-harnesses #view-harness .page { padding: 14px 16px 0; }
  #view-harnesses #view-harness .settings-footer-sticky { margin: 14px -16px 0; padding: 12px 16px; }
}
/* The embedded settings drop the page frame: no back link, no detail header, the host has both. */
#view-harness.is-embedded .page { padding: 0; max-width: none; }

/* The index table. */
.hx-index-note { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); margin: 0 0 12px 2px; }
.hx-card { border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; overflow: hidden; }
.hx-thead, .hx-row { display: grid; grid-template-columns: minmax(200px, 1.6fr) 168px 92px 150px 56px 68px 62px 70px 84px 14px; align-items: center; gap: 14px; padding: 12px 20px; }
.hx-thead { padding: 11px 20px; background: var(--v2-bg); border-bottom: 1px solid var(--v2-line); font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); }
.hx-row { width: 100%; border: 0; border-bottom: 1px solid #f4f2f0; background: #fff; cursor: pointer; font: inherit; text-align: left; color: inherit; }
.hx-row:last-child { border-bottom: 0; }
.hx-row:hover { background: var(--v2-bg); }
.hx-row-name { min-width: 0; }
.hx-row-name b { display: block; font-size: 13.5px; font-weight: 600; color: var(--v2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-row-name small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--v2-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-row-id { min-width: 0; display: flex; font-family: var(--v2-mono); font-size: 11.5px; color: var(--v2-sec); }
.hx-row-id .mono-id { max-width: 100%; min-width: 0; }   /* the chip shrinks to its column and truncates; never past it */
.hx-health { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--v2-green); }
.hx-health i { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); flex: none; }
.hx-health.is-idle { color: var(--v2-cap); } .hx-health.is-idle i { background: #c4beba; }
.hx-health.is-degraded { color: var(--v2-orange); } .hx-health.is-degraded i { background: var(--v2-orange); }
.hx-row-rt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hx-row-rt > span { min-width: 0; display: flex; flex-direction: column; }
.hx-row-rt b { font-size: 12.5px; font-weight: 600; color: var(--v2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-row-rt small { font-family: var(--v2-mono); font-size: 10.5px; color: var(--v2-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-num { font-family: var(--v2-mono); font-size: 12.5px; color: var(--v2-body); font-variant-numeric: tabular-nums; }
.hx-num.is-bad { color: var(--v2-orange); }
.hx-row-chev { color: var(--v2-cap); }

/* Add harness sheet extras (on the keys page's sheet). */
.hx-add { width: 560px; }
.hx-add-help { font-size: 12px; color: var(--v2-cap); margin-top: 7px; line-height: 1.5; }
.hx-bases { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.hx-base { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid #eceae9; border-radius: 8px; background: #fff;
  cursor: pointer; font: inherit; text-align: left; color: var(--v2-ink); }
.hx-base.is-on { background: var(--v2-tint); border-color: var(--v2-tint-border); }
.hx-base-copy { min-width: 0; display: flex; flex-direction: column; }
.hx-base-copy b { font-size: 13.5px; font-weight: 600; } .hx-base.is-on .hx-base-copy b { color: var(--v2-accent); }
.hx-base-copy small { font-size: 11.5px; line-height: 1.45; color: var(--v2-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-base-def { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); flex: none; }
.hx-add-select { width: 100%; font: inherit; font-size: 14px; padding: 10px 38px 10px 12px; border: 1px solid #e0dcd9; border-radius: 8px; color: var(--v2-ink); -moz-appearance: none; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center; }
.hx-add-next { flex: 1; font-size: 12px; color: var(--v2-cap); }

/* The nav's image icon sits like an iconify glyph. */
.v2-item .v2-item-img { width: 16px; height: 16px; flex: none; -o-object-fit: contain; object-fit: contain; opacity: .9; }
.v2-item[aria-current='page'] .v2-item-img { opacity: 1; }

/* The table sheds columns by the width it actually has (the main area, which depends on the nav
   and the panel), never by the viewport: container queries on the index wrap. */
.hx-index-wrap { container-type: inline-size; }
@container (max-width: 1140px) {   /* the full grid needs 1130px; shed the id column before it can overflow */
  .hx-thead, .hx-row { grid-template-columns: minmax(170px, 1.6fr) 92px 130px 56px 68px 62px 70px 78px 14px; gap: 12px; }
  .hx-th-id { display: none; }
}
@container (max-width: 900px) {
  .hx-thead, .hx-row { grid-template-columns: minmax(170px, 1.6fr) 92px 130px 56px 68px 62px 70px 14px; }
  .hx-th-last { display: none; }
}
@container (max-width: 780px) {
  .hx-thead, .hx-row { grid-template-columns: minmax(160px, 1.6fr) 92px 56px 68px 62px 70px 14px; }
  .hx-th-rt { display: none; }
}
@container (max-width: 620px) {
  .hx-thead, .hx-row { grid-template-columns: minmax(140px, 1.6fr) 92px 56px 68px 14px; gap: 10px; }
  .hx-th-p95, .hx-th-cpt { display: none; }
}
@container (max-width: 440px) {
  .hx-thead, .hx-row { grid-template-columns: minmax(120px, 1fr) 84px 44px 14px; padding-left: 14px; padding-right: 14px; }
  .hx-th-success { display: none; }
}
.hx-icbtn { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #e0dcd9; border-radius: 8px; background: #fff; color: var(--v2-body); cursor: pointer; font-size: 15px; }
.hx-icbtn:hover { border-color: var(--v2-cap); color: var(--v2-ink); }
@media (max-width: 1024px) {
  .hx-side { width: 250px; }
}
@media (max-width: 820px) {
  .hx-root { height: calc(100vh - var(--v2-mobilebar-h)); }
  .hx-root:not(.m-detail) .hx-main { display: none; }
  .hx-root.m-detail .hx-side { display: none; }
  .hx-side { width: 100%; border-right: 0; }
  .hx-back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px -6px; border: 0; background: none; color: var(--v2-sec); font: inherit; font-size: 13px; cursor: pointer; }
  .hx-head { padding: 14px 16px 0; }
  .hx-body { padding: 14px 16px 24px; }
  .hx-ic { opacity: 1; }
  .hx-add { width: 100%; }
}

/* A fresh task draft: the harness, named under its base's mark, above a centered composer. */
.wbx-conv-main.is-hero { display: flex; flex-direction: column; justify-content: center; }
.wbx-conv-main.is-hero .wbx-conv-msgs { flex: 0 0 auto; padding: 0 0 6px; overflow: visible; align-items: center; }
.wbx-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; }
.wbx-hero h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--v2-ink); min-width: 0; }
.wbx-hero h1 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbx-conv-main.is-hero .wbx-composer { margin: 0 auto; }
/* One measure for the whole conversation: the message rows and the composer share a 760px
   column, centered, whether the thread is a fresh draft or long. The scroll container itself
   stays full width so the scrollbar sits at the pane edge; each row centers inside it. Rows
   inset their text 16px so it lines up with the text inside the composer's frame. */
.wbx-conv-main .wbx-composer { width: min(780px, calc(100% - 56px)); margin: 10px auto 20px; }
.wbx-conv-msgs { --uic-turn-pad-x: 0px; padding: 24px 0 12px; gap: 20px; }
.wbx-conv-msgs > * { box-sizing: border-box; width: min(780px, calc(100% - 56px)); margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
  .wbx-hero h1 { font-size: 22px; }
  .wbx-conv-main .wbx-composer, .wbx-conv-msgs > * { width: calc(100% - 24px); }
}

/* ── Arena v2: hero-to-run layout, full-bleed ─────────────────────────────────────────────────
   First principles on sizing: the page owns the full space right of the nav (no .page gutters,
   no max-height card) — .v2-main supplies the left margin that tracks the rail, and this root
   fills the rest, so collapsing the sidebar simply gives the columns more room. */
.ar2-root { display: flex; height: 100vh; min-width: 0; background: var(--v2-bg); }

.ar2-side { width: 250px; flex: none; background: #fff; border-right: 1px solid var(--v2-line);
  display: flex; flex-direction: column; min-height: 0; }
.ar2-side-head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--v2-div); }
/* SearchField (reifyui) sized to fill the header row */
.ar2-search { flex: 1; min-width: 0; height: 32px; }
.ar2-search input { width: 100%; font-size: 13px; }
.ar2-new { flex: none; width: 32px; border: 1px solid #e0dcd9; border-radius: 8px; background: #fff;
  color: var(--v2-body); cursor: pointer; display: grid; place-items: center; font-size: 15px; }
.ar2-new:hover { border-color: var(--v2-tint-border); color: var(--v2-accent); }
.ar2-side-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.ar2-foreign { margin: 10px 10px 4px; padding: 9px 11px; border: 1px solid #f0e2d4; border-radius: 8px; background: #fdf9f4;
  color: #8a6a3c; font-size: 12px; line-height: 1.5; }
.ar2-foreign b { font-weight: 600; }
.ar2-foreign button { display: block; margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--v2-accent); cursor: pointer; }
.ar2-foreign button:hover { text-decoration: underline; }
/* Flat rows, no card margins: the list IS the panel. */
.ar2-row { position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-bottom: 1px solid var(--v2-row); }
.ar2-row.active { background: var(--v2-tint); box-shadow: inset 2.5px 0 0 var(--v2-accent); }
.ar2-row-hit { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; }
.ar2-row-name { font-size: 13.5px; font-weight: 600; color: var(--v2-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; pointer-events: none; }
.ar2-row-meta { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); pointer-events: none; }
.ar2-row-del { position: absolute; right: 6px; top: 8px; display: none; border: 0; background: none;
  color: var(--v2-cap); cursor: pointer; padding: 4px; border-radius: 6px; }
.ar2-row:hover .ar2-row-del, .ar2-row-del:focus-visible { display: inline-flex; }
.ar2-row-del:hover { color: var(--v2-orange); background: #fff; }

.ar2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; }
.ar2-back { display: none; }

/* HERO: dead-center composer with the route list under it. */
.ar2-hero { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 32px 24px; }
.ar2-hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 22px; text-align: center; }
/* THE chat box — one card for both states (task on top, tray below, per the design). */
/* One width in both states: a reading-width box, centered, so a long route list wraps inside it
   instead of stretching the box across a wide screen. */
.ar2-box { width: min(760px, 100%); margin: 0 auto; background: #fff; border: 1px solid var(--v2-line);
  border-radius: 20px; box-shadow: 0 10px 34px rgba(28,25,23,.07); overflow: hidden; }
/* One inset for everything in the box: the + button, the text, and the route chips under them
   all start on the same left edge, 10px in. The tray gets its own breathing room above. */
.ar2-box .wbx-composer, .ar2-box .uic-composer { border: 0; box-shadow: none; border-radius: 0; margin: 0; max-width: none;
  padding: 8px 10px 10px; }
.ar2-box .uic-composer-line { padding: 0; }
.ar2-box .uic-composer-tray { margin-top: 8px; padding: 0; }

/* A route chip: harness, then its model in mono, then a chevron that says "this opens". The whole
   chip is the press target for the model menu; the ✕ stays its own control. */
.ar2-route-model { font-family: var(--v2-mono); font-size: 11.5px; color: var(--v2-sec);
  min-width: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar2-route-chev { font-size: 13px; color: var(--v2-cap); align-self: center; line-height: 0; }
.ar2-chip.is-menu-open { border-color: var(--v2-accent); }
.ar2-chip:disabled { opacity: .5; cursor: default; }
.ar2-chip:disabled:hover { border-color: var(--v2-line); color: var(--v2-sec); }
.ar2-chip .uic-chip-press:hover .ar2-route-model, .ar2-chip .uic-chip-press:hover .ar2-route-chev { color: inherit; }

/* RUN: columns fill everything above the bottom composer.
   Sizing is one rule, not a media matrix: every column is `flex: 1 1 0` with a minimum width.
   While N × min + gaps fits the row, flex shares the width evenly (one column takes it all);
   past that, min-width stops the shrink and the row scrolls sideways at exactly min each.
   The gutters are margins on the first and last column rather than padding on the scroller,
   because a scroller's end padding is not part of its scrollable overflow in every engine. */
.ar2-cols { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 12px 0 8px;
  overflow-x: auto; overflow-y: hidden; }
.ar2-cols[hidden] { display: none; }
.ar2-cols .arena-col { flex: 1 1 0; min-width: 400px; height: 100%;
  margin: 0; display: flex; flex-direction: column; min-height: 0; }
.ar2-cols .arena-col:first-child { margin-left: 12px; }
.ar2-cols .arena-col:last-child { margin-right: 12px; }

.ar2-bottom { flex: none; padding: 6px 12px 12px; background: var(--v2-bg); }
.ar2-bottom .ar2-box { box-shadow: 0 4px 18px rgba(28,25,23,.06); }

/* Tablet: narrower history. */
@media (max-width: 1024px) {
  .ar2-side { width: 220px; }
  .ar2-cols .arena-col { min-width: 340px; }
}
/* Phone: list and detail alternate, same as Tasks; the root sits under the mobile top bar. */
@media (max-width: 768px) {
  .ar2-root { height: calc(100vh - var(--v2-mobilebar-h)); }
  .ar2-root:not(.m-detail) .ar2-main { display: none; }
  .ar2-root.m-detail .ar2-side { display: none; }
  .ar2-side { width: 100%; border-right: 0; }
  .ar2-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    margin: 8px 12px 0; border: 0; background: none; color: var(--v2-sec); font-size: 13px; cursor: pointer; }
  .ar2-cols { padding: 8px 0 6px; gap: 8px; }
  .ar2-cols .arena-col { min-width: 86vw; }
  .ar2-cols .arena-col:first-child { margin-left: 8px; }
  .ar2-cols .arena-col:last-child { margin-right: 8px; }
  .ar2-bottom { padding: 6px 8px 10px; }
  .ar2-hero h1 { font-size: 22px; }
}

/* ── the task composer: the Arena box and layout (attach square left, Send pill right, the route
      chip in the tray) so the two chat surfaces are one thing ── */
.run-layout.is-embedded .wbx-composer { padding: 14px 16px; background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; box-shadow: 0 10px 34px rgba(28,25,23,.07); overflow: hidden; }
.run-layout.is-embedded .uic-composer-line { padding: 0; }
.run-layout.is-embedded .uic-composer-tray { margin-top: 8px; padding: 0; }
.run-layout.is-embedded .wbx-attach-row.in-composer { margin: 0 0 10px; }
.wbx-model-pop { background: #fff; border: 1px solid var(--v2-line); border-radius: 10px; padding: 6px; box-shadow: 0 -14px 36px -16px rgba(28, 25, 23, .3); }
.wbx-model-head { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); padding: 6px 10px 5px; }
.wbx-model-opt { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; font-size: 13.5px; color: var(--v2-ink); }
.wbx-model-opt:hover { background: #f5f5f4; }
.wbx-model-opt.is-on { color: var(--v2-accent); font-weight: 600; }
.wbx-model-opt:disabled { color: var(--v2-cap); cursor: default; }
.wbx-model-meta { font-family: var(--v2-mono); font-size: 10.5px; color: var(--v2-cap); }

/* the community marks above the account row (expanded sidebar only) */
.v2-socials { display: flex; align-items: center; gap: 2px; padding: 0 8px 4px; }
.v2-social { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--v2-cap); font-size: 16px; text-decoration: none; }
.v2-social:hover { background: var(--v2-row); color: var(--v2-ink); }
button.v2-social { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
button.v2-social:hover { background: var(--v2-row); }
/* Book a call: the homepage's dialog (harnessrouter.ai globals.css, .book-demo-*), the Calendly page in a
   frame with our mark until it is running. */
.book-demo-dialog { margin: auto; width: min(720px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 48px));
  padding: 0; border: none; border-radius: 16px; overflow: hidden; background: #fff; position: relative; }
.book-demo-dialog::backdrop { background: rgba(12, 14, 20, 0.55); }
.book-demo-close { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center;
  justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(12, 14, 20, 0.06);
  color: var(--v2-ink); font-size: 18px; cursor: pointer; }
.book-demo-close:hover { background: rgba(12, 14, 20, 0.12); }
.book-demo-frame { width: 100%; height: 100%; border: none; display: block; }
.book-demo-loading { z-index: 2; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; background: #fff; text-align: center; padding: 24px; opacity: 1; transition: opacity 320ms ease-out; }
.book-demo-loading-done { opacity: 0; pointer-events: none; }
.book-demo-loading-mark { margin-bottom: 16px; animation: book-demo-pulse 1.6s ease-in-out infinite; }
.book-demo-loading-title { max-width: 360px; margin: 0; font-size: 22px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em;
  color: var(--v2-ink); text-wrap: balance; }
.book-demo-loading-title em { color: var(--v2-accent); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.book-demo-loading-subtitle { margin: 10px 0 0; font-size: 13px; color: var(--v2-cap); }
@keyframes book-demo-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .book-demo-loading-mark { animation: none; } }

/* ── Quickstart, per the design: four steps on a rail ── */
.qs { display: flex; flex-direction: column; min-height: 100%; }
.qs-head { padding: 30px 36px 18px; background: #fff; border-bottom: 1px solid var(--v2-line); }
.qs-head h1 { margin: 0 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--v2-ink); }
.qs-head p { margin: 0; font-size: 14px; color: var(--v2-sec); max-width: 640px; }
.qs-progress { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.qs-progress-label { font-family: var(--v2-mono); font-size: 11.5px; color: var(--v2-sec); }
.qs-bar { flex: 1; height: 4px; border-radius: 2px; background: #f0eeec; overflow: hidden; max-width: 260px; }
.qs-bar-fill { display: block; height: 100%; background: var(--v2-accent); transition: width 160ms; }
.qs-bar-fill.is-done { background: #15803d; }
.qs-reset { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); }
.qs-reset:hover { color: var(--v2-ink); }
.qs-body { flex: 1; min-height: 0; padding: 24px 36px 34px; }
.qs-grid { display: grid; grid-template-columns: 44px 1fr; -moz-column-gap: 0; column-gap: 0; }
.qs-railcell { position: relative; }
.qs-rail { position: absolute; left: 12.5px; top: 22px; bottom: -14px; width: 1.5px; background: #f0eeec; }
.qs-marker { position: absolute; left: 0; top: 22px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--v2-mono); font-size: 11px; font-weight: 600; background: var(--v2-accent); color: #fff; }
.qs-marker.is-done { background: #15803d; }
.qs-card { padding: 22px 24px 24px; margin-bottom: 14px; border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(28, 25, 23, .05); min-width: 0; }
.qs-card.is-done { border-color: #dfe6dd; box-shadow: none; }
.qs-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.qs-title { font-size: 16px; font-weight: 600; color: var(--v2-ink); }
.qs-sub { font-size: 13.5px; color: var(--v2-sec); margin-top: 5px; max-width: 560px; }
.qs-link { font-size: 12.5px; flex: none; color: var(--v2-accent); }
.qs-doc { margin-top: 16px; border: 1px solid var(--v2-line); border-radius: 8px; background: var(--v2-bg); overflow: hidden; }
.qs-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #f0eeec; }
.qs-doc-name { font-family: var(--v2-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--v2-cap); }
.qs-doc-meta { font-family: var(--v2-mono); font-size: 10.5px; color: #c4beba; }
.qs-doc-body { margin: 0; padding: 14px 16px; font-family: var(--v2-mono); font-size: 12px; line-height: 1.7; color: var(--v2-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.qs-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.qs-copy { font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 18px; border: 0; border-radius: 8px; cursor: pointer; background: var(--v2-accent); color: #fff; }
.qs-copy:hover { background: var(--v2-accent-hover, #1447c4); }
.qs-copy.is-done { background: #eaf5ee; color: #15803d; }
/* Copying the guide is the one thing this page is asking for, so the button pulses until it has
   been done and then stops — the same beat and shape as the Copy AGENTS.md button on the docs
   site (agentCopyPulse there), in the console's own accent. */
.qs-copy:not(.is-done) { animation: qsCopyPulse 1150ms ease-in-out infinite; }
@keyframes qsCopyPulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(26, 92, 245, .16); transform: translateY(0); }
  35% { box-shadow: 0 0 0 8px rgba(26, 92, 245, .12), 0 14px 30px rgba(26, 92, 245, .24); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) { .qs-copy:not(.is-done) { animation: none; } }
/* The agent picker sits in step 02, above the mock it changes, so it needs its own top margin
   rather than the gap it used to get from .qs-actions. */
.qs-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.qs-chip { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 12px 6px 7px; border-radius: 999px; cursor: pointer; border: 1px solid var(--v2-line); background: #fff; color: var(--v2-sec); }
.qs-chip.is-on { font-weight: 600; border-color: #c9d5f7; background: var(--v2-tint); color: var(--v2-ink); }
.qs-chip-mark { width: 17px; height: 17px; border-radius: 5px; flex: none; -o-object-fit: contain; object-fit: contain; }
.qs-confirm { font: inherit; font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 8px; cursor: pointer; border: 1px solid #e0dcd9; background: transparent; color: var(--v2-body); }
.qs-confirm:disabled { cursor: not-allowed; border-color: #f0eeec; color: var(--v2-cap); }
.qs-confirm.is-done { border-color: #cfe4d6; background: #eaf5ee; color: #15803d; }
.qs-kicker { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); margin: 16px 0 9px; }
.qs-mock { border: 1px solid #e0dcd9; border-radius: 10px; background: #fff; padding: 14px; }
.qs-mock-file { display: inline-flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid #f0eeec; border-radius: 8px; max-width: 100%; }
.qs-mock-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--v2-tint); }
.qs-mock-mark img { width: 18px; height: 18px; -o-object-fit: contain; object-fit: contain; }
.qs-mock-file-name { font-size: 13px; font-weight: 600; color: var(--v2-ink); }
.qs-mock-file-meta { font-size: 11.5px; color: var(--v2-cap); margin-top: 2px; }
.qs-mock-x { color: #c4beba; font-size: 13px; margin-left: 6px; }
.qs-mock-prompt { font-size: 15px; line-height: 1.5; margin-top: 14px; color: var(--v2-ink); }
.qs-mock-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.qs-mock-plus { color: #c4beba; font-size: 15px; }
.qs-mock-badge { margin-left: auto; font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #f5f5f4; color: var(--v2-sec); }
.qs-mock-send { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--v2-ink); color: #fff; font-size: 14px; }
.qs-keyrow { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.qs-keybtn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 8px; cursor: pointer; border: 1px solid #e0dcd9; background: #fff; color: var(--v2-ink); }
.qs-keybtn:hover { border-color: var(--v2-cap); }
.qs-keybtn.is-done { border-color: #cfe4d6; background: #eaf5ee; color: #15803d; }
.qs-keybtn:disabled { cursor: default; color: var(--v2-cap); }
.qs-keynote { font-family: var(--v2-mono); font-size: 11.5px; color: var(--v2-cap); }
.qs-err { margin: 10px 0 0; font-size: 12.5px; color: #b4460f; }
.qs-reveal { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid #e0dcd9; border-radius: 8px; background: var(--v2-bg); }
.qs-reveal code { flex: 1; min-width: 0; font-family: var(--v2-mono); font-size: 13px; color: var(--v2-ink); overflow-wrap: anywhere; }
.qs-reveal .qs-confirm { flex: none; }
.qs-warn { display: flex; gap: 11px; margin-top: 14px; padding: 13px 15px; border: 1px solid #f0e2d4; border-radius: 8px; background: #fdf9f4; }
.qs-warn > span:first-child { color: #b4460f; font-size: 13px; line-height: 1.5; flex: none; }
.qs-warn > span:last-child { font-size: 12.5px; line-height: 1.6; color: #8a6a3c; }
.qs-flow { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 18px 20px; border: 1px solid #c9d5f7; border-radius: 10px; background: var(--v2-tint); }
.qs-flow-box { flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--v2-line); border-radius: 8px; background: #fff; font-size: 13.5px; font-weight: 500; text-align: center; color: var(--v2-ink); }
.qs-flow-box.is-cloud { border-color: #c9d5f7; font-weight: 600; color: var(--v2-accent); }
.qs-flow-arrow { color: var(--v2-accent); font-size: 15px; flex: none; }
.qs-flow-note { font-size: 12.5px; color: var(--v2-cap); margin-top: 9px; }
.qs-actions-last { gap: 14px; margin-top: 18px; }
.qs-open { font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 8px; background: var(--v2-accent); color: #fff; text-decoration: none; }
.qs-open:hover { background: var(--v2-accent-hover, #1447c4); }
.qs-ce { font-size: 12.5px; color: var(--v2-cap); }
.qs-done { margin-top: 26px; padding: 22px 24px; border: 1px solid #cfe4d6; border-radius: 10px; background: #fbfdfb; }
.qs-done-kicker { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--v2-cap); margin-bottom: 8px; }
.qs-done-title { font-size: 17px; font-weight: 600; color: var(--v2-ink); }
.qs-next { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.qs-next-card { display: flex; flex-direction: column; gap: 4px; min-width: 220px; padding: 14px 16px; text-align: left; background: #fff; border: 1px solid var(--v2-line); border-radius: 8px; text-decoration: none; color: inherit; }
.qs-next-card:hover { border-color: var(--v2-accent); }
.qs-next-title { font-size: 14px; font-weight: 600; color: var(--v2-ink); }
.qs-next-body { font-size: 12.5px; color: var(--v2-sec); }
.v2-item-badge { margin-left: auto; font-family: var(--v2-mono); font-size: 9.5px; font-weight: 600; min-width: 18px; text-align: center; padding: 2px 6px; border-radius: 999px; background: var(--v2-ink); color: #fff; }
.v2-side.is-rail .v2-item-badge { display: none; }
@media (max-width: 768px) {
  .qs-head { padding: 20px 16px 14px; }
  .qs-head h1 { font-size: 22px; }
  .qs-body { padding: 16px 12px 24px; }
  .qs-grid { grid-template-columns: 34px 1fr; }
  .qs-marker { width: 22px; height: 22px; font-size: 10px; top: 20px; }
  .qs-rail { left: 10.5px; }
  .qs-card { padding: 16px 16px 18px; }
  .qs-card-head { flex-direction: column; gap: 6px; }
  .qs-confirm { width: 100%; }
  .qs-flow { flex-direction: column; }
  .qs-flow-box { width: 100%; box-sizing: border-box; }
  .qs-flow-arrow { transform: rotate(90deg); }
  .qs-next-card { min-width: 0; flex: 1 1 100%; }
}

/* ── active-work billing (v2) preview on Billing, staging only ── */
.b2 { margin: 18px 0 22px; padding: 20px 22px 8px; border: 1px solid #c9d5f7; border-radius: 12px; background: #fff; }
.b2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.b2-kicker { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); }
.b2-title { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: var(--v2-ink); }
.b2-pill { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.b2-pill.is-bad { background: rgba(180, 70, 15, .08); color: #b4460f; }
.b2-wallets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.b2-wallet { padding: 14px 16px; border: 1px solid var(--v2-line); border-radius: 10px; background: var(--v2-bg); min-width: 0; }
.b2-wallet-k { font-size: 12.5px; color: var(--v2-sec); }
.b2-wallet-v { margin-top: 4px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--v2-ink); font-variant-numeric: tabular-nums; }
.b2-wallet-s { margin-top: 3px; font-size: 12px; color: var(--v2-cap); }
.b2-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--v2-sec); }
.b2-rate b { color: var(--v2-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.b2-rate span { font-family: var(--v2-mono); font-size: 10.5px; color: var(--v2-cap); }
.b2-receipts { margin-top: 18px; overflow-x: auto; }
.b2-th, .b2-tr { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(88px, 1fr)); gap: 12px; align-items: center; padding: 9px 4px; min-width: 640px; }
.b2-th { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); border-bottom: 1px solid var(--v2-line); }
.b2-tr { border-bottom: 1px solid #f4f2f0; }
.b2-tr:last-child { border-bottom: 0; }
.b2-task b { display: block; font-family: var(--v2-mono); font-size: 12px; font-weight: 600; color: var(--v2-ink); }
.b2-task small { display: block; font-size: 11.5px; color: var(--v2-cap); margin-top: 2px; }
.b2-n { font-family: var(--v2-mono); font-size: 12px; color: var(--v2-body); font-variant-numeric: tabular-nums; }
.b2-n small { display: block; font-size: 10.5px; color: var(--v2-cap); }
.b2-n.is-total { font-weight: 600; color: var(--v2-ink); }
.b2-empty { padding: 14px 4px; font-size: 13px; color: var(--v2-cap); }
@media (max-width: 768px) { .b2-wallets { grid-template-columns: 1fr; } .b2 { padding: 16px 14px 6px; } }

.b2-notice { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #eaf5ee; color: #15803d; font-size: 13px; }
.b2-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.b2-plans, .b2-prepaid, .b2-tracing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.b2-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border: 0; border-radius: 8px; background: var(--v2-accent); color: #fff; cursor: pointer; }
.b2-btn:disabled { cursor: default; opacity: .55; }
.b2-btn.is-current { background: #eaf5ee; color: #15803d; opacity: 1; }
.b2-btn.is-secondary { background: #fff; color: var(--v2-body); border: 1px solid #e0dcd9; font-weight: 500; }
.b2-btn.is-secondary:hover:not(:disabled) { border-color: var(--v2-cap); }
.b2-link { font: inherit; font-size: 12.5px; background: none; border: 0; color: var(--v2-cap); cursor: pointer; text-decoration: underline; }
.b2-amt { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid #e0dcd9; border-radius: 8px; background: #fff; font-size: 13px; color: var(--v2-cap); }
.b2-amt input { width: 72px; border: 0; outline: 0; font: inherit; font-size: 13.5px; padding: 9px 0; color: var(--v2-ink); background: transparent; }
.b2-fee { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-cap); }
.tc-gate { position: relative; min-height: 320px; overflow: hidden; }
.tc-gate-blur { filter: blur(6px); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: .8; }
.tc-gate-card { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); padding: 22px 24px; background: #fff; border: 1px solid var(--v2-line); border-radius: 12px; box-shadow: 0 10px 34px rgba(28, 25, 23, .1); text-align: center; }
.tc-gate-kicker { font-family: var(--v2-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-cap); }
.tc-gate-title { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--v2-ink); }
.tc-gate-body { margin: 8px 0 14px; font-size: 13px; line-height: 1.55; color: var(--v2-sec); }
.b2-notice.is-error { background: #fdf3ec; color: #b4460f; }

/* ── cloud upload (self-hosted only): the publish dialog and the uploaded chip. These classes
   are this distribution's own; the hosted tree has no such surface, which is why they live
   here and not in the shared revamp.css. ── */
.cloud-includes { margin-top: -2px; }
.cloud-keyrow { display: flex; gap: 8px; }
.cloud-keyrow input { flex: 1; min-width: 0; }
.cloud-rows { max-height: 44vh; overflow-y: auto; }
.cloud-rows td { padding: 10px 12px; }
.cloud-note { color: var(--v2-body, #57534e); font-size: 12px; }
.cloud-remove { text-align: right; }
#cloudTo { width: 100%; }
.cloud-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--v2-body, #57534e); font-size: 12px; white-space: nowrap; }
.cloud-chip iconify-icon { flex: 0 0 auto; font-size: 14px; }
.cloud-chip.changed { color: var(--v2-ink, #1c1917); }
.cloud-select-hint { margin: 10px 2px 0; }

/* a task row in the tree: the task, and a delete that appears on hover or focus */
.hx-task-row { position: relative; display: flex; align-items: center; }
.hx-task-row .hx-task { flex: 1; min-width: 0; }
.hx-task-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--v2-cap); cursor: pointer; opacity: 0; transition: opacity 110ms; }
.hx-task-row:hover .hx-task-x, .hx-task-x:focus-visible, .hx-task-row.is-on .hx-task-x { opacity: 1; }
.hx-task-x:hover { background: var(--v2-row, #f3f2f0); color: var(--v2-orange, #b4460f); }
.hx-task-x iconify-icon { font-size: 14px; }


/* ── Plugins, per the console design: header with tabs, the Installed table, the Browse catalog by
   category, the detail sheet. Sizes and colours are the design's. ───────────────────────────── */
.pl { display: flex; flex-direction: column; height: 100vh; min-width: 0; overflow: hidden; }
.pl-head { padding: 30px 36px 0; background: var(--v2-bg, #fff); border-bottom: 1px solid var(--v2-line, #e7e5e4); flex: none; }
.pl-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.pl-head h1 { margin: 0 0 7px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.pl-head p { margin: 0; font-size: 14px; color: var(--v2-muted, #6b6560); max-width: 660px; }
.pl-tabs { display: flex; gap: 22px; margin-top: 22px; }
.pl-tab { display: flex; align-items: center; gap: 7px; padding: 0 0 13px; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--v2-muted, #6b6560); cursor: pointer; }
.pl-tab.is-on { color: var(--v2-ink, #1c1917); border-bottom-color: var(--v2-accent, #1a5cf5); }
.pl-count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #c4beba; }
.pl-tab.is-on .pl-count { color: var(--v2-accent, #1a5cf5); }
.pl-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 36px 32px; }
.pl-table { border: 1px solid var(--v2-line, #e7e5e4); border-radius: 10px; background: var(--v2-bg, #fff); overflow: hidden; }
.pl-table-head, .pl-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 92px 140px; gap: 14px; align-items: center; }
.pl-table-head { padding: 10px 20px; background: #fafaf9; border-bottom: 1px solid var(--v2-line, #e7e5e4); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #a8a29e; }
.pl-row { padding: 12px 20px; border-bottom: 1px solid #f4f2f0; }
.pl-row:last-child { border-bottom: none; }
.pl-right { text-align: right; }
.pl-cell-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-tile { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: #f5f5f4; color: var(--v2-muted, #6b6560); font-size: 12.5px; font-weight: 700; }
.pl-copy { min-width: 0; display: block; }
.pl-name { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-blurb { display: block; font-size: 12.5px; color: var(--v2-muted, #6b6560); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-meta { display: block; font-size: 11.5px; color: #a8a29e; margin-top: 4px; }
.pl-source { font-size: 13px; color: var(--v2-muted, #6b6560); }
.pl-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--v2-muted, #6b6560); }
.pl-cell-status { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pl-pill { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border: none; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.pl-pill.is-connected { color: #15803d; background: #eaf5ee; }
.pl-pill.is-needs_auth { color: #b4460f; background: #fdf9f4; }
.pl-pill.is-disabled { color: #a8a29e; background: #f5f5f4; }
.pl-x { display: grid; place-items: center; width: 22px; height: 22px; flex: none; padding: 0; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: #a8a29e; font-size: 14px; }
.pl-x:hover { background: #f5f5f4; color: var(--v2-ink, #1c1917); }
.pl-x-lg { width: 28px; height: 28px; border-radius: 8px; font-size: 16px; }
.pl-empty { padding: 26px 20px; font-size: 13.5px; color: var(--v2-muted, #6b6560); }
.pl-foot { font-size: 12.5px; color: #a8a29e; margin-top: 16px; }
.pl-link { background: none; border: none; padding: 0; font: inherit; color: var(--v2-accent, #1a5cf5); cursor: pointer; }
.pl-search { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--v2-bg, #fff); border: 1px solid #e0dcd9; border-radius: 8px; color: #a8a29e; }
.pl-search input { flex: 1; min-width: 0; padding: 0; font: inherit; font-size: 13.5px; background: transparent; border: none; outline: none; color: var(--v2-ink, #1c1917); }
.pl-section { margin-top: 30px; }
.pl-section:first-of-type { margin-top: 22px; }
.pl-section-title { font-size: 18px; font-weight: 700; }
.pl-hr { height: 1px; background: var(--v2-line, #e7e5e4); margin: 12px 0 6px; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 26px; column-gap: 26px; }
.pl-card { display: flex; align-items: center; gap: 13px; padding: 11px 12px; margin: 0 -12px; border-radius: 10px; cursor: pointer; transition: background 110ms; min-width: 0; }
.pl-card:hover { background: #fafaf9; }
.pl-card .pl-tile { width: 34px; height: 34px; font-size: 13px; }
.pl-tile img { display: block; width: 16px; height: 16px; }
.pl-card .pl-tile img { width: 18px; height: 18px; }
.pl-tile-lg img { width: 22px; height: 22px; }
.pl-tile.is-app { background: none; overflow: hidden; }
.pl-tile.is-app img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: inherit; }
.pl-card .pl-copy { flex: 1; }
.pl-plus { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; font-size: 16px; font-weight: 500; color: #57534e; }
.pl-card.has .pl-plus { color: #15803d; }
.pl-sheet { width: 560px; max-width: 100%; padding: 0; }
.pl-sheet-head { display: flex; align-items: center; gap: 14px; padding: 24px 26px 20px; border-bottom: 1px solid var(--v2-line, #e7e5e4); }
.pl-tile-lg { width: 42px; height: 42px; border-radius: 10px; color: #57534e; font-size: 16px; }
.pl-sheet-name { display: block; font-size: 18px; font-weight: 700; }
.pl-sheet-meta { display: block; font-size: 13px; color: var(--v2-muted, #6b6560); margin-top: 3px; }
.pl-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 26px; }
.pl-about { font-size: 13.5px; line-height: 1.65; color: #57534e; }
.pl-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #a8a29e; margin: 24px 0 10px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: #57534e; padding: 4px 9px; border-radius: 999px; background: #f5f5f4; }
.pl-note { border: 1px solid #f0e2d4; border-radius: 10px; background: #fdf9f4; padding: 13px 15px; margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: #6b5a48; }
.pl-btn { flex: none; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; background: var(--v2-accent, #1a5cf5); color: #fff; }
.pl-btn.is-installed { cursor: default; border-color: #cfe4d6; background: #eaf5ee; color: #15803d; }
.pl-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.pl-actions-split { justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
/* the connect form: the plugin's own fields, from the server (a credential, the names beside it) */
.pl-form { display: flex; flex-direction: column; gap: 14px; }
.pl-field { display: flex; flex-direction: column; gap: 5px; }
.pl-field label { font-size: 13px; font-weight: 600; color: #1c1917; }
.pl-field input { width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit; font-size: 13.5px; color: #1c1917; background: #fff; border: 1px solid #e0dcd9; border-radius: 8px; outline: none; transition: border-color .12s, box-shadow .12s; }
.pl-field input::-moz-placeholder { color: #b8b2ad; }
.pl-field input::placeholder { color: #b8b2ad; }
.pl-field input:focus { border-color: var(--v2-accent, #1a5cf5); box-shadow: 0 0 0 3px rgba(26, 92, 245, .12); }
.pl-hint { display: block; font-size: 12.5px; line-height: 1.5; color: #6b6560; }
.pl-hint-form { margin-top: 14px; }
.pl-form-err { margin-top: 14px; border: 1px solid #f0e2d4; border-radius: 10px; background: #fdf9f4; padding: 11px 13px; font-size: 12.5px; line-height: 1.55; color: #b4460f; }
.pl-alt { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pl-btn-quiet { background: #fff; color: #1c1917; border-color: #e0dcd9; }
.pl-btn-quiet:hover { background: #f4f2f0; }
.pl-btn.is-attention { border-color: #f0e2d4; background: #fdf9f4; color: #b4460f; }
.pl-signin { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid #e7e5e4; border-radius: 10px; background: #fafaf9; }
.pl-signin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13.5px; line-height: 1.5; color: #57534e; }
.pl-signin-row strong { color: #1c1917; }
@media (max-width: 720px) { .pl-signin-row { flex-direction: column; align-items: flex-start; } }
.pl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 16px; }
.pl-facts div { display: contents; }
.pl-facts dt { font-size: 12.5px; color: #6b6560; }
.pl-facts dd { margin: 0; font-size: 13.5px; color: #1c1917; overflow-wrap: anywhere; }
@media (max-width: 720px) { .pl-facts { grid-template-columns: 1fr; gap: 4px; } .pl-alt { flex-direction: column; align-items: flex-start; } .pl-actions-split { flex-wrap: wrap; } }
.pl-consent { width: 480px; max-width: 100%; padding: 0; }
.pl .field { margin-top: 10px; }
@media (max-width: 1024px) {
  .pl-head { padding: 24px 24px 0; }
  .pl-body { padding: 20px 24px 28px; }
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pl { height: calc(100vh - var(--v2-mobilebar-h)); }
  .pl-head { padding: 20px 16px 0; }
  .pl-body { padding: 16px 16px 24px; }
  .pl-head h1 { font-size: 24px; }
  .pl-table-head, .pl-row { grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
  .pl-table-head span:nth-child(2), .pl-table-head span:nth-child(3), .pl-row > .pl-source, .pl-row > .pl-mono { display: none; }
  .pl-row { padding: 12px 14px; }
  .pl-card { margin: 0; padding: 11px 6px; }
}