/* Usage dashboard */
#usageDialog { width: 100%; max-width: none; max-height: none; padding: 12px; overflow: visible; background: transparent; border: 0; }
#usageDialog::backdrop { background: rgba(10, 12, 14, .55); }
#usageDialog .usage-card { width: min(1240px, calc(100vw - 24px)); min-width: 0; max-width: none; max-height: calc(100dvh - 24px); margin: auto; gap: 10px; padding: 16px 18px; overflow-y: auto; overflow-x: hidden; background: var(--panel); }
.usage-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.usage-title { display: grid; min-width: 0; }
.usage-title h2 { margin: 0; }
.usage-heading > .usage-close { flex: none; }
.usage-heading > .usage-status-row { flex: 1 1 260px; justify-content: flex-end; }
.usage-status-row[hidden] { display: none; }
.usage-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.usage-tabs button { padding: 5px 12px; font-size: 13px; }
.usage-tabs button[aria-pressed="true"] { background: var(--text); color: var(--panel); }
#usageDialog [data-usage-panel][hidden] { display: none !important; }
#usageDialog [data-usage-panel] { min-width: 0; }
.usage-overview, .usage-compare { display: grid; min-width: 0; align-content: start; gap: 10px; }
.usage-status-row { display: flex; align-items: center; gap: 8px 12px; min-width: 0; color: var(--muted); font-size: 12px; }
.usage-status-row > [role="status"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-status-row > button { flex: none; padding: 4px 10px; font-size: 12.5px; }
#usageNotice { flex: 0 1 auto; min-width: 0; }
#usageNotice:empty { display: none; }
#usageDialog .usage-source { max-width: none; margin: 0; color: var(--muted); font-size: 11.5px; }
.usage-warning, .usage-error { min-width: 0; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-warning strong { color: var(--amber); font-weight: 600; }
.usage-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--text); white-space: normal; }
.usage-partial { display: inline-block; flex: none; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.usage-cost { color: var(--muted); font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; }

/* One row of compact filters, shared by Overview and Compare. */
.usage-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.usage-toolbar > label, .usage-toolbar > .usage-cluster-field { flex: 0 1 168px; min-width: 120px; }
.usage-toolbar > .usage-period-field { flex-basis: 140px; }
.usage-toolbar select, .usage-toolbar input, .usage-toolbar .multi-select-trigger { width: 100%; min-height: 32px; padding: 5px 28px 5px 10px; border-radius: var(--radius-ctl); background-position: right 9px center; color: var(--text); font-size: 12.5px; font-weight: 400; }
.usage-toolbar input[type="date"] { padding-right: 8px; }
.usage-toolbar .multi-select-trigger.empty { color: var(--text); }
.usage-toolbar .multi-select-trigger:not(.empty), .usage-toolbar select:has(option:checked:not([value=""], [value="month"])) { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.usage-toolbar.comparing > .usage-period-field, .usage-toolbar.comparing > .usage-date-range { display: none; }
.usage-date-range { display: flex; flex: 0 1 290px; align-items: center; gap: 4px; min-width: 0; color: var(--muted); }
.usage-date-range[hidden] { display: none; }
.usage-date-range label { flex: 1; min-width: 0; }
.usage-cluster-field[hidden] { display: none; }
.usage-cluster-select .searchable-select-popover { right: auto; width: max-content; min-width: 100%; max-width: min(360px, calc(100vw - 48px)); }
.usage-cluster-select .multi-select-option { grid-template-rows: auto auto; min-height: 0; padding: 6px 8px; }
.usage-cluster-select :is(.multi-select-option-label, .searchable-select-option-detail) { overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.usage-cluster-select .searchable-select-options { max-height: 260px; }
.usage-more-filters { position: relative; flex: none; }
.usage-more-filters > summary { padding: 6px 8px; border-radius: var(--radius-ctl); color: var(--muted); font-size: 12.5px; cursor: pointer; list-style: none; }
.usage-more-filters > summary::-webkit-details-marker { display: none; }
.usage-more-filters > summary::after { content: " ▾"; font-size: 10px; }
.usage-more-filters > summary:hover { background: var(--field); color: var(--text); }
.usage-more-popover { position: absolute; z-index: 4; top: calc(100% + 4px); right: 0; display: grid; gap: 8px; width: 240px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); box-shadow: var(--shadow-soft); }
.usage-more-popover label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.usage-more-popover input { width: 100%; min-height: 30px; padding: 5px 8px; font-size: 12.5px; }
.usage-clear-filters { flex: none; padding: 5px 10px; font-size: 12.5px; }

.usage-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-width: 0; min-height: 62px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.usage-strip > p { grid-column: 1 / -1; margin: 0; padding: 12px 14px; color: var(--muted); }
.usage-stat { display: grid; align-content: start; min-width: 0; gap: 1px; padding: 9px 14px; border-left: 1px solid var(--line); }
.usage-stat:first-child { border-left: 0; }
.usage-stat > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-stat > span { color: var(--muted); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.usage-stat > strong { font-size: 17px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.usage-stat > small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.usage-ledger { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: clip; }
.usage-ledger-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; min-height: 50px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.usage-ledger-label { flex: none; color: var(--muted); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.usage-dimensions { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.usage-dimension { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 4px 10px; border: 0; border-radius: var(--radius-ctl); background: transparent; color: var(--muted); font-size: 13px; box-shadow: none; }
.usage-dimension:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.usage-dimension[aria-pressed="true"] { background: var(--field); color: var(--text); font-weight: 600; }
.usage-dimension small { color: var(--muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.usage-trend { display: flex; flex: 1 1 380px; align-items: center; gap: 12px; min-width: 0; height: 38px; padding: 0 4px 0 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.usage-trend:empty { display: none; }
.usage-trend-label, .usage-trend-value { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.usage-trend-line { flex: 1; min-width: 40px; height: 32px; }
.usage-trend-line path { fill: none; stroke: var(--usage-series-0); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.usage-focus-head { display: grid; flex: 0 1 170px; min-width: 0; line-height: 1.3; }
.usage-focus-name { min-width: 0; overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.usage-focus-close { flex: none; padding: 4px 10px; font-size: 12px; }
.usage-table-host { min-width: 0; min-height: 0; overflow: hidden; }
.usage-table-host > p { margin: 0; padding: 14px; color: var(--muted); }
.usage-breakdown { min-width: 0; }
.usage-breakdown table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.usage-breakdown th { height: 32px; padding: 0 8px; background: var(--header); color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-align: right; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line-strong); }
.usage-breakdown td { height: 40px; padding: 0 8px; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.usage-breakdown :is(th, td):first-child { width: 30%; padding-left: 12px; text-align: left; }
.usage-breakdown :is(th, td):nth-child(2) { width: 12%; }
.usage-breakdown :is(th, td):nth-child(3) { width: 14%; }
.usage-breakdown :is(th, td):nth-child(4) { width: 9%; }
.usage-breakdown :is(th, td):nth-child(5) { width: 8%; }
.usage-breakdown :is(th, td):nth-child(6) { width: 10%; }
.usage-breakdown :is(th, td):nth-child(7) { width: 8%; }
.usage-breakdown :is(th, td):last-child { width: 9%; padding-right: 12px; }
.usage-breakdown td[colspan] { width: auto; }
.usage-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; box-shadow: none; }
.usage-sort:hover { color: var(--text); }
.usage-breakdown th[aria-sort] { color: var(--text); }
.usage-breakdown th[aria-sort="descending"] .usage-sort::after { content: " ↓"; color: var(--accent); }
.usage-breakdown th[aria-sort="ascending"] .usage-sort::after { content: " ↑"; color: var(--accent); }
.usage-breakdown tbody tr:hover td { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.usage-breakdown tr.selected td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.usage-breakdown tr.selected td:first-child { box-shadow: inset 2px 0 var(--accent); }
.usage-cost-cell { font-weight: 600; }
.usage-share-cell { color: var(--muted); font-size: 12px; }
td.usage-share-cell { display: table-cell; }
.usage-share { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.usage-share > span { flex: none; }
.usage-share-track { display: block; flex: 0 1 90px; min-width: 16px; height: 6px; border-radius: 999px; background: var(--field); overflow: hidden; }
.usage-share-track b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.usage-select { display: grid; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; box-shadow: none; }
button.usage-select:hover .usage-name { text-decoration: underline; text-decoration-color: var(--line-strong); }
.usage-name-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.usage-name, .usage-name-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-name.mono { font-family: var(--mono); font-size: 12.5px; }
.usage-name-detail { display: block; color: var(--muted); font-size: 11px; line-height: 1.25; }
.usage-harness { flex: none; padding: 0 6px; border-radius: 5px; font: 600 10px/16px var(--mono); }
.usage-harness.claude { background: color-mix(in srgb, var(--claude) 18%, transparent); color: var(--claude); }
.usage-harness.fork { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.usage-empty { color: var(--muted); text-align: left !important; }
.usage-split { display: grid; flex: 1; gap: 4px; min-width: 0; }
.usage-split-empty { flex: 1; margin: 0; color: var(--muted); font-size: 12px; }
.usage-split-bar { display: flex; gap: 2px; height: 6px; border-radius: 4px; overflow: hidden; }
.usage-split-bar i { display: block; height: 100%; min-width: 2px; }
.usage-split-legend { display: flex; flex-wrap: nowrap; gap: 4px 16px; margin: 0; padding: 0; overflow: hidden; list-style: none; font-size: 11.5px; white-space: nowrap; }
.usage-split-legend li { display: flex; flex: none; align-items: center; gap: 5px; }
.usage-split-legend i { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.usage-split-legend span { color: var(--muted); font-family: var(--mono); }
.usage-split-legend strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.usage-split-legend em { color: var(--muted); font-style: normal; }
#usageDialog [data-series="0"] { background: var(--usage-series-0); }
#usageDialog [data-series="1"] { background: var(--usage-series-1); }
#usageDialog [data-series="2"] { background: var(--usage-series-2); }
#usageDialog [data-series="3"] { background: var(--usage-series-3); }
#usageDialog [data-series="4"] { background: var(--usage-series-4); }
#usageDialog [data-series="5"] { background: var(--usage-series-5); }
.usage-ledger-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; min-height: 40px; padding: 4px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.usage-pagination { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.usage-pagination button { padding: 3px 10px; font-size: 12px; }

/* Compare periods */
.usage-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; min-width: 0; }
.usage-compare-card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.usage-compare-card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.usage-compare-card h3 { margin: 0; font-size: 14px; }
.usage-compare-card header p { margin: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.usage-compare-hero { display: grid; gap: 2px; }
.usage-compare-hero > strong { font-size: 30px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.usage-compare-delta { margin: 0; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.usage-delta { color: var(--text); font-weight: 600; }
.usage-delta-arrow { margin-right: 3px; font-size: 10px; }
.usage-delta.up .usage-delta-arrow { color: var(--amber); }
.usage-delta.down .usage-delta-arrow { color: var(--accent); }
.usage-compare-plot { position: relative; min-width: 0; height: 200px; }
.usage-compare-chart { display: block; overflow: visible; }
.usage-compare-gridline { stroke: var(--line); stroke-width: 1; }
.usage-compare-axis { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.usage-compare-today { stroke: var(--line-strong); stroke-width: 1; }
.usage-compare-crosshair { stroke: var(--muted); stroke-width: 1; }
.usage-compare-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.usage-compare-line[data-period="0"] { stroke: var(--usage-series-0); stroke-width: 2.5; }
.usage-compare-line[data-period="1"] { stroke: var(--usage-past-1); }
.usage-compare-line[data-period="2"] { stroke: var(--usage-past-2); }
.usage-compare-line[data-period="3"] { stroke: var(--usage-past-3); }
.usage-compare-dot { fill: var(--usage-series-0); stroke: var(--surface); stroke-width: 2; }
.usage-compare-end { fill: var(--text); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.usage-compare-tooltip { position: absolute; top: 4px; z-index: 2; display: grid; gap: 2px; min-width: 150px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); box-shadow: var(--shadow-soft); font-size: 11.5px; font-variant-numeric: tabular-nums; pointer-events: none; }
.usage-compare-tooltip span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.usage-compare-tooltip i, .usage-compare-key { flex: none; width: 12px; height: 3px; border-radius: 2px; }
#usageDialog :is(.usage-compare-tooltip i, .usage-compare-key, .usage-compare-bar b)[data-period="0"] { background: var(--usage-series-0); }
#usageDialog :is(.usage-compare-tooltip i, .usage-compare-key, .usage-compare-bar b)[data-period="1"] { background: var(--usage-past-1); }
#usageDialog :is(.usage-compare-tooltip i, .usage-compare-key, .usage-compare-bar b)[data-period="2"] { background: var(--usage-past-2); }
#usageDialog :is(.usage-compare-tooltip i, .usage-compare-key, .usage-compare-bar b)[data-period="3"] { background: var(--usage-past-3); }
.usage-compare-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.usage-compare-list li { display: grid; grid-template-columns: 12px minmax(0, 190px) minmax(40px, 1fr) 76px 116px; align-items: center; gap: 10px; min-height: 30px; font-size: 12.5px; }
.usage-compare-list li:first-child { font-weight: 600; }
.usage-compare-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-compare-name small { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 400; }
.usage-compare-bar { height: 8px; border-radius: 0 4px 4px 0; background: var(--field); overflow: hidden; }
.usage-compare-bar b { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.usage-compare-list strong { font-variant-numeric: tabular-nums; text-align: right; }
.usage-compare-total { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

.usage-subscriptions, #subscriptionList, .subscription-harness-group { display: grid; min-width: 0; gap: 12px; }
.subscription-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.subscription-card .subscription-price { display: block; font-size: 18px; }
.subscription-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; padding-top: 12px; }
.subscription-form label { display: grid; min-width: 0; gap: 4px; }
.subscription-form :is(input, select, button, fieldset) { min-width: 0; max-width: 100%; width: 100%; }
.subscription-form fieldset, .subscription-form .dialog-actions, .subscription-form > p, .subscription-form > details { grid-column: 1 / -1; min-width: 0; }
.subscription-more[open] { display: grid; gap: 10px; }
.quota-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 8px; align-items: end; margin-top: 8px; min-width: 0; }
#usageDialog .dialog-actions { flex-wrap: wrap; }

/* Fit the window: the card never scrolls; the table pages and the panels share the height. */
@media (min-width: 701px) and (min-height: 560px) {
  #usageDialog .usage-card { height: calc(100dvh - 24px); grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
  #usageDialog .usage-card:has(.usage-toolbar[hidden]) { grid-template-rows: auto minmax(0, 1fr); }
  .usage-overview { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
  .usage-compare { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
  .usage-compare-grid { align-content: start; min-height: 0; overflow: hidden; }
  .usage-subscriptions { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1040px) {
  .usage-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .usage-stat:nth-child(3n + 1) { border-left: 0; }
  .usage-stat:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .usage-ledger-label { display: none; }
}
@media (max-width: 700px) {
  #usageDialog { padding: 6px; }
  #usageDialog .usage-card { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 14px; }
  .usage-toolbar > label, .usage-toolbar > .usage-cluster-field { flex: 1 1 calc(50% - 6px); }
  .usage-date-range { flex-basis: 100%; }
  .usage-status-row { flex-wrap: wrap; }
  .usage-warning { white-space: normal; }
  .usage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-stat, .usage-stat:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .usage-stat:nth-child(odd) { border-left: 0; }
  .usage-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .subscription-form { grid-template-columns: minmax(0, 1fr); }
  .usage-trend { flex-wrap: wrap; flex-basis: 100%; height: auto; padding: 8px 2px 2px; border-top: 1px solid var(--line); border-left: 0; }
  .usage-trend-line { flex-basis: 100%; order: 3; }
  .usage-breakdown table, .usage-breakdown tbody { display: block; }
  .usage-breakdown thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .usage-breakdown tbody { display: grid; gap: 8px; padding: 10px; }
  .usage-breakdown tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; padding: 8px; gap: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
  .usage-breakdown td, .usage-breakdown :is(th, td):nth-child(n), td.usage-share-cell { display: block; width: auto; height: auto; min-width: 0; padding: 2px; text-align: left; border: 0; background: none !important; }
  .usage-breakdown td:first-child { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .usage-breakdown td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .usage-breakdown td[colspan] { grid-column: 1 / -1; padding: 2px; border: 0; }
  .usage-breakdown td[colspan]::before { content: none; }
  .usage-share { justify-content: flex-start; }
  .usage-share-track { flex-basis: 48px; }
  .usage-compare-list li { grid-template-columns: 12px minmax(0, 1fr) 76px; }
  .usage-compare-bar, .usage-compare-total { display: none; }
  .quota-row { grid-template-columns: minmax(0, 1fr); }
}

/* Joint Bob interface.
   Monochrome ink/paper surfaces, hairline borders, mono micro-labels.
   Engine hues (Pi teal, Claude violet) appear only as small marks. */

[hidden] { display: none !important; }

:root {
  color-scheme: light;
  --bg: #e8e8e6;
  --panel: #ffffff;
  --header: #f6f6f4;
  --surface: #ffffff;
  --field: #eeeeec;
  --line: #e0e0dc;
  --line-strong: #c9c9c4;
  --raise: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --hue: var(--accent);
  --text: #17191b;
  --muted: #71767b;
  --ink: #191b1d;
  --on-ink: #fafafa;
  --btn-bg: #191b1d;
  --btn-fg: #fafafa;
  --btn-border: transparent;
  --btn-bg-hover: #2e3134;
  --accent: #0e8a74;
  --claude: #7053c9;
  --kiro: #8e48ff;
  --live: #148a52;
  --amber: #9a7410;
  --danger: #cf4238;
  --code-bg: #101215;
  --code-text: #e6e8ea;
  --code-line: #26292e;
  --focus-ring: color-mix(in srgb, var(--accent) 40%, transparent);
  --shadow: 0 16px 48px rgba(20, 22, 24, 0.16);
  --shadow-soft: 0 4px 16px rgba(20, 22, 24, 0.08);
  --radius: 16px;
  --radius-card: 12px;
  --radius-ctl: 10px;
  --nav-height: 68px;
  --panel-header-height: 66px;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --heading: #0c0e10;
  --usage-series-0: var(--accent); --usage-series-1: #7053c9; --usage-series-2: #9a7410; --usage-series-3: #2f7fc1; --usage-series-4: #c4554a; --usage-series-5: #8a9096;
  --usage-past-1: #5f656c; --usage-past-2: #8a9097; --usage-past-3: #a7acb2;
  --heading-soft: #0e7a68;
  --read: 15.5px;
  --read-leading: 1.72;
  --measure: 68ch;
  font-family: var(--sans);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090b;
  --panel: #101215;
  --header: #171a1e;
  --surface: #191c20;
  --field: #212529;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.17);
  --raise: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --text: #ebeced;
  --muted: #94999e;
  --ink: #ebeced;
  --on-ink: #141618;
  --btn-bg: #24272b;
  --btn-fg: #ebeced;
  --btn-border: rgba(255, 255, 255, 0.13);
  --btn-bg-hover: #2c3035;
  --accent: #37cfab;
  --claude: #b39bff;
  --kiro: #b788ff;
  --live: #3cb474;
  --amber: #d0a63c;
  --danger: #e0564e;
  --code-bg: #0a0b0d;
  --code-text: #dcdee0;
  --code-line: #222529;
  --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.4);
  --heading: #f1f4f3;
  --usage-series-0: #25a385; --usage-series-1: #977de6; --usage-series-2: #b38726; --usage-series-3: #478ecb; --usage-series-4: #d2635a; --usage-series-5: #5d636a;
  --usage-past-1: #c9cdd1; --usage-past-2: #8b9197; --usage-past-3: #5a6066;
  --heading-soft: #7fdcc6;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
.resource-paths-input { min-height: 88px; resize: vertical; font-family: var(--mono); }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
h1, h2, p { margin: 0; }
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--heading);
}
strong { font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 19px; line-height: 1.25; word-break: break-word; }
h2 { font-size: 17px; line-height: 1.25; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Mono micro-label — the console signature */
.eyebrow, .section-title, .status-pill, .chat-badge, .task-engine,
.board-count, .model-dialog-group, .credential-state {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.section-title { color: var(--muted); }

/* Boot gate: theme first, slow project and session discovery afterward. The ink is pinned rather
   than themed, because the manifest splash Android paints first has no dark variant to follow. */
.app-boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: #141618;
}
.app-boot-inner { display: grid; justify-items: center; }
.app-boot-mark { width: 192px; height: 192px; filter: drop-shadow(0 18px 28px rgba(20, 22, 24, 0.18)); }
.boot-tile { fill: #141618; }
.boot-smoke {
  stroke: #37cfab;
  transform-box: fill-box;
  transform-origin: center;
  animation: boot-smoke-rise 2.4s ease-out infinite;
}
.boot-smoke-right { animation-delay: 280ms; }
.boot-joint {
  transform-box: fill-box;
  transform-origin: center;
}
.boot-joint rect { fill: #f7f3e8; }
.boot-joint path { stroke: #d8d2c4; stroke-width: 12; }
.boot-joint-left { animation: boot-joint-left 700ms cubic-bezier(0.22, 0.9, 0.28, 1) both; }
.boot-joint-right { animation: boot-joint-right 700ms cubic-bezier(0.22, 0.9, 0.28, 1) both; }
.boot-ember {
  fill: #37cfab;
  stroke: #141618;
  stroke-width: 12;
  transform-box: fill-box;
  transform-origin: center;
  animation: boot-ember-pulse 1.4s ease-in-out 600ms infinite;
}
.boot-ember-core { fill: #f7f3e8; stroke: none; }
.app-boot-wordmark {
  margin-top: 16px;
  color: #f7f3e8;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
}
.app-boot-tagline {
  margin-top: 9px;
  color: #94999e;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@keyframes boot-joint-left {
  from { opacity: 0; transform: translate(-34px, 18px) rotate(-31deg); }
  to { opacity: 1; transform: rotate(-22deg); }
}
@keyframes boot-joint-right {
  from { opacity: 0; transform: translate(34px, 18px) rotate(31deg); }
  to { opacity: 1; transform: rotate(22deg); }
}
@keyframes boot-smoke-rise {
  0%, 24% { opacity: 0; transform: translateY(14px) scale(0.92); }
  48% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-16px) scale(1.04); }
}
@keyframes boot-ember-pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-smoke, .boot-joint, .boot-ember { animation: none; }
}
body:not(.booting) .app-boot,
html.by-the-way-pane .app-boot { display: none; }
body.booting :is(.shell, .mobile-nav) { visibility: hidden; }
html.by-the-way-pane body.booting :is(.shell, .mobile-nav) { visibility: visible; }

/* ---- App shell: mobile-first, one full-screen panel at a time ---- */
.shell {
  height: 100dvh;
  padding: 8px 8px calc(var(--nav-height) + 12px + env(safe-area-inset-bottom, 0px));
}
.view-panel {
  display: none;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
body.view-projects #projectsPanel,
body.view-sessions #chatsPanel,
body.view-board #boardPanel,
body.view-chat #chatPanel {
  display: flex;
  animation: screen-in 340ms cubic-bezier(0.22, 0.9, 0.28, 1) both;
}
/* Header settles first, then the list body lifts in behind it. */
body.view-projects #projectsPanel :is(.panel-bar, .chat-topbar),
body.view-sessions #chatsPanel :is(.panel-bar, .chat-topbar),
body.view-board #boardPanel :is(.panel-bar, .chat-topbar),
body.view-chat #chatPanel :is(.panel-bar, .chat-topbar) {
  animation: header-in 300ms cubic-bezier(0.22, 0.9, 0.28, 1) 40ms both;
}
body.view-projects #projectsPanel :is(.panel-scroll, .board-columns, .messages),
body.view-sessions #chatsPanel :is(.panel-scroll, .board-columns, .messages),
body.view-board #boardPanel :is(.panel-scroll, .board-columns, .messages),
body.view-chat #chatPanel :is(.panel-scroll, .board-columns, .messages) {
  animation: body-in 380ms cubic-bezier(0.22, 0.9, 0.28, 1) 90ms both;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px) scale(0.994); }
  to { opacity: 1; transform: none; }
}
@keyframes header-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes body-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.panel { padding: 0; }
/* Headers are neutral chrome; the accent is reserved for state and engine marks. */
.panel-bar, .chat-topbar { position: relative; }
.panel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Every panel header is exactly one height so the three columns line up. */
  height: calc(var(--panel-header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 14px 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--header);
}
.panel-title { min-width: 0; flex: 1; }
.panel-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-title p { margin-top: 3px; color: var(--muted); font-size: 10.5px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  gap: 2px;
  grid-auto-rows: max-content;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.list-loading {
  position: relative;
  height: 2px;
  flex: 0 0 auto;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.list-loading[hidden] { display: none; }
/* Two beams at different speeds: a bright head and a slower ghost trailing it. */
.list-loading::before, .list-loading span {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
}
.list-loading span {
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent) 62%, #ffffff);
  animation: beam-head 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.list-loading::before {
  width: 22%;
  opacity: 0.4;
  background: linear-gradient(90deg, transparent, var(--accent));
  animation: beam-ghost 1.15s cubic-bezier(0.65, 0, 0.35, 1) 0.28s infinite;
}
/* Distances are multiples of each beam's own width so the sweep fills any panel. */
@keyframes beam-head {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(300%); }
}
@keyframes beam-ghost {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(465%); }
}
@media (prefers-reduced-motion: reduce) {
  .list-loading span { width: 100%; opacity: 0.7; background: var(--accent); animation: none; }
  .list-loading::before { display: none; }
}

/* ---- Brand ---- */
.brand { display: flex; gap: 11px; align-items: center; flex: 1; min-width: 0; }
/* Project tools mirror the conversations controls: title row first, controls below. */
.project-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 12px 12px 0; }
.project-actions .icon-button { min-width: 31px; width: 31px; min-height: 31px; font-size: 14px; }
.project-actions .icon-button svg { width: 22px; height: 22px; }
/* The key badge costs no layout: it hangs under its control, and only while the
   command modifiers are held (app/shortcut-hints.js adds the body class). Sitting
   below rather than over the button keeps the label readable, so the badge and the
   control it belongs to are legible at the same time. A button therefore keeps the
   square it had before shortcuts existed, and holding Control+Option labels the whole
   toolbar. The badge still carries the full chord as a title. */
[data-shortcut-hint] { position: relative; }
.shortcut-hint {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  place-items: center;
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--header);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  z-index: 6;
}
body.shortcuts-revealed .shortcut-hint { display: grid; }
.brand-mark, .orb, .install-banner-mark { flex: 0 0 auto; }
.brand-mark { width: 32px; height: 32px; }
.brand-mark img, .orb img, .install-banner-mark img { display: block; width: 100%; height: 100%; }
.brand-copy { display: grid; min-width: 0; }
.brand-copy strong, .brand-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy strong { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; color: var(--heading); }
.brand-copy span { margin-top: 3px; color: var(--muted); font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.eyebrow { color: var(--accent); font-size: 10px; }

/* ---- Buttons ---- */
.primary, .ghost, .send {
  border: 0;
  border-radius: var(--radius-ctl);
  min-height: 40px;
  padding: 0 15px;
  font-weight: 550;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 100ms ease;
}
.primary, .send { color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border); }
.primary:hover:not(:disabled), .send:hover:not(:disabled) { background: var(--btn-bg-hover); }
.primary:active, .send:active, .ghost:active { transform: scale(0.98); }
.primary:disabled, .send:disabled { opacity: 0.35; cursor: not-allowed; }
.ghost { color: var(--text); border: 1px solid transparent; background: transparent; }
.ghost:hover:not(:disabled) { background: var(--field); }
.ghost:disabled { opacity: 0.4; cursor: not-allowed; }
/* Toolbar and panel actions read as buttons rather than as bare words: they carry the
   same field surface as the selects standing next to them. The outline is drawn as an
   inset ring rather than a border, because the toolbar zeroes its buttons' block
   borders to keep the shortcut badges on one line. */
.chat-toolbar .ghost, .panel-toolbar .ghost, .project-actions .ghost, .canvas-page-strip .ghost {
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
}
.chat-toolbar .ghost:hover:not(:disabled), .panel-toolbar .ghost:hover:not(:disabled),
.project-actions .ghost:hover:not(:disabled), .canvas-page-strip .ghost:hover:not(:disabled) {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.danger { color: var(--danger); }
.primary.destructive { color: #ffffff; background: var(--danger); border-color: var(--danger); }
.primary.destructive:hover:not(:disabled) { background: var(--danger); filter: brightness(1.1); }
.wide { margin: 12px 14px 0; }

/* New conversation controls come from the harness registry. */
.new-chat-row { margin: 12px 12px 0; }
.new-chat-harnesses { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px; }
.quick-note-mobile, .projects-quick-note-mobile { display: none; }
.new-chat-harness-button { display: inline-grid; place-items: center; padding: 0; }
.new-chat-harness-icon { width: 19px; height: 19px; }
.new-chat-harness-icon.pi { color: var(--accent); }
.new-chat-harness-icon.claude { color: var(--claude); }
.new-chat-harness-icon.kiro { color: var(--kiro); }
.new-chat-mobile { display: none; width: 100%; }
.choice-option-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.choice-option-icon.pi { color: var(--accent); }
.choice-option-icon.claude { color: var(--claude); }
.choice-option-icon.kiro { color: var(--kiro); }

.engine-toggle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 2px; background: var(--field); }
.engine-toggle button {
  border: 0;
  border-radius: calc(var(--radius-ctl) - 3px);
  min-height: 28px;
  padding: 0 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}
.engine-toggle button.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.engine-toggle button[data-engine="pi"].active { color: var(--accent); }
.engine-toggle button[data-engine="claude"].active { color: var(--claude); }
.effort-select { width: auto; min-height: 30px; border-radius: var(--radius-ctl); padding: 2px 10px; font-size: 12px; font-weight: 550; color: var(--text); }

.compact { min-height: 34px; padding: 0 12px; border-radius: var(--radius-ctl); font-size: 12.5px; flex: 0 0 auto; }
.icon-button { display: inline-grid; place-items: center; min-width: 36px; width: 36px; min-height: 36px; padding: 0; border-radius: var(--radius-ctl); font-size: 16px; flex: 0 0 auto; }
.back-button { font-size: 22px; }
.row-action-button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 2; min-height: 28px; min-width: 28px; width: 28px; font-size: 12.5px; background: var(--field); }
.credential-state { float: right; color: var(--accent); font-size: 10px; }
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 16px 4px;
  font-size: 10px;
}
/* Hairline that runs out to the panel edge — turns a bare label into a real divider. */
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.live-row { display: flex; align-items: center; gap: 8px; }
.live-dot { position: relative; width: 6px; height: 6px; border-radius: 999px; background: var(--live); }
.live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1.5px solid var(--live);
  animation: ring-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ring-pulse {
  0% { opacity: 0.55; transform: scale(0.7); }
  70%, 100% { opacity: 0; transform: scale(1.9); }
}
.live-dot[hidden] { display: none; }

/* `order: 1` puts the action after the .section-title hairline, so the label keeps the left edge. */
.mark-all-reviewed-button {
  order: 1;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
}
.mark-all-reviewed-button:hover:not(:disabled) { color: var(--text); background: var(--field); }
.mark-all-reviewed-button:disabled { opacity: 0.4; cursor: not-allowed; }

.conversation-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px 12px 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); }
.conversation-tabs button { min-height: 32px; border: 0; border-radius: calc(var(--radius-ctl) - 3px); background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.conversation-tabs button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 0.16); }
.conversation-list-pane { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.conversation-list-pane[hidden] { display: none; }
/* Long worktree names must not size the list's implicit grid column. */
.session-list { grid-template-columns: minmax(0, 1fr); }
.quick-notes-section { display: flex; flex-direction: column; flex: 1; min-height: 0; background: color-mix(in srgb, var(--field) 28%, transparent); }
.quick-notes-section .section-title { min-height: 34px; margin-top: 10px; gap: 6px; }
.quick-notes-filter { width: min(150px, 45%); min-height: 28px; margin-left: auto; padding: 3px 24px 3px 7px; font-size: 11px; }
.quick-note-add { display: inline-grid; place-items: center; width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 7px; color: var(--accent); font-size: 18px; }
.quick-note-add:hover, .quick-note-add:focus-visible { background: var(--surface); color: var(--text); }
.quick-note-search { margin: 8px 10px 2px; }
.quick-note-queue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 10px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.quick-note-queue-toggle { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; font-weight: 550; }
.quick-note-queue-toggle input { width: 15px; height: 15px; min-width: auto; accent-color: var(--ink); }
.quick-note-queue-parallel { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.quick-note-queue-parallel input { width: 58px; min-height: 26px; padding: 2px 6px; font-size: 12px; }
.quick-note-queue-running { color: var(--accent); font-size: 11.5px; font-weight: 600; }
.quick-note-queue-hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.quick-note-list { flex: 1; min-height: 0; overflow: auto; padding: 0 10px 10px; }
.quick-note-group-title { margin: 14px 8px 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.quick-note-row-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 8px; }
.quick-note-row-wrap:hover, .quick-note-row-wrap:focus-within { background: var(--surface); }
.quick-note-row { display: grid; width: 100%; min-width: 0; min-height: 0; padding: 9px 8px 9px 10px; border: 0; background: transparent; color: var(--text); text-align: left; }
.quick-note-row strong, .quick-note-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-note-row strong { font-size: 12.5px; font-weight: 650; }
.quick-note-row span { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.quick-note-row small { margin-top: 5px; color: var(--muted); font-family: var(--mono); font-size: 9.5px; }
.quick-note-status.failed { color: var(--danger); }
.quick-note-schedule-badge { justify-self: start; margin-top: 5px; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; color: var(--accent); font-family: var(--mono); font-size: 9px; }
.quick-note-row-actions { display: flex; gap: 2px; padding-right: 5px; }
.quick-note-action { display: grid; place-items: center; width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; opacity: 0.55; }
.quick-note-action:hover, .quick-note-action:focus-visible { background: var(--panel); color: var(--text); opacity: 1; }
.quick-note-open { width: auto; max-width: 100px; padding: 4px 6px; color: var(--accent); font-size: 11px; opacity: 1; }
.quick-note-start:hover, .quick-note-start:focus-visible { color: var(--accent); }
.quick-note-remove:hover, .quick-note-remove:focus-visible { color: var(--danger); }
.quick-note-empty { margin: 8px 6px; color: var(--muted); font-size: 12px; }

/* ---- Search + inputs ---- */
.search-shell { display: block; margin: 12px 12px 2px; }
/* The add-project button rides the search field's lane, so the row owns the inset margin. */
.project-search-row { display: flex; align-items: center; gap: 6px; margin: 12px 12px 2px; }
.project-search-row .search-shell { flex: 1; min-width: 0; margin: 0; }
.project-search-row .icon-button { min-width: 40px; width: 40px; min-height: 40px; flex: none; }
input, textarea, select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--text);
  outline: none;
  border-radius: var(--radius-ctl);
  padding: 11px 13px;
}
select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%238b9198' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
}
.effort-select { padding-right: 30px; background-position: right 9px center; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.search-shell input { min-height: 40px; padding: 0 13px; background-color: var(--field); border-color: transparent; }
textarea:focus, input:focus, select:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--focus-ring); }

.conversation-search { margin-top: 8px; }
/* Filter dropdowns under the list searches: labels and clusters sit side by side. */
.list-filter-row { display: flex; gap: 6px; margin: 8px 12px 2px; font-size: 12px; }
/* Each filter takes an equal share of the lane; on a wide screen a filter stays compact. */
.list-filter-row > * { flex: 1 1 0; min-width: 0; max-width: 280px; }
.list-filter-row[hidden], .list-filter-row > [hidden] { display: none; }
.list-filter-row .searchable-select-trigger { min-height: 32px; padding: 6px 28px 6px 10px; background-position: right 9px center; font-size: 12px; }
.list-filter-row .searchable-select-trigger:not(.empty) { border-color: color-mix(in srgb, var(--hue, var(--accent)) 42%, transparent); color: var(--text); }
.list-filter-row .searchable-select-popover { min-width: 220px; }
.classification-filter { font-size: 12px; }
.done-filter { display: flex; align-items: center; gap: 6px; margin: 4px 12px 2px; font-size: 12px; color: var(--muted); }
.done-filter input { width: 14px; height: 14px; margin: 0; flex: 0 0 auto; }
.chat-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 8px 12px 2px; }
.chat-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 4px;
  font-size: 12px;
  font-weight: 550;
}
.chat-filters button > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.chat-filters button:hover { color: var(--text); background: var(--field); }
.chat-filters button.active {
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 15%, transparent);
  border-color: color-mix(in srgb, var(--hue) 42%, transparent);
}
.chat-filters [data-filter-count] {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font: 650 10px/1 var(--mono);
}
.chat-badge { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 9.5px; border-radius: 4px; padding: 2px 6px; }
.chat-badge b { font: inherit; }
.chat-badge-active { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); }
.chat-badge-background { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.chat-badge-review { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.chat-badge-done { color: var(--muted); background: var(--field); }
/* A closed-out conversation is still readable, just visibly retired. */
.session-done-badge {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 9.5px;
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--muted);
  background: var(--field);
}
.list-row.done .session-card strong { text-decoration: line-through; text-decoration-color: var(--muted); }
.list-row.done .session-card { opacity: 0.68; }
.list-row.done .session-card:hover, .list-row.done .session-card.active { opacity: 1; }
/* The ticket mark shares the badge anatomy but carries the accent, like the board cards' engine chips. */
.session-ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.session-ticket-badge svg { width: 10px; height: 10px; }
.project-card .project-sync-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 0;
}
.project-card .project-sync-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.project-sync-status, .session-agent-label {
  display: inline-block;
  margin-left: 5px;
  font: 600 9.5px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.04em;
}
.session-classification {
  display: inline-block;
  max-width: 100%;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font: 500 11px/1.4 var(--mono);
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.project-sync-status-synced { color: var(--live); }
.project-sync-status-syncing { color: var(--accent); }
.project-sync-status-paused { color: var(--amber); }
.project-sync-status-error { color: var(--danger); }
.project-sync-status-unavailable, .session-agent-label { color: var(--muted); }
/* The mark carries the agent's own colour; the label beside it stays quiet. */
.session-agent-icon { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1.5px; }
.session-agent-icon.pi { color: var(--accent); }
.session-agent-icon.claude { color: var(--claude); }
.session-agent-icon.kiro { color: var(--kiro); }
.chat-status-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.chat-badge-active .chat-status-dot { animation: dot-breathe 1.2s ease-in-out infinite; }

/* ---- Lists ---- */
.list-row { position: relative; min-width: 0; }
/* The action lanes are positioned against this wrapper, not the whole row, so an
   agent run list under the card never pulls them below the card. */
.list-row-main { position: relative; min-width: 0; }
.list-row[data-session-depth="1"] { margin-left: 18px; }
.list-row[data-session-depth="1"]::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  width: 10px;
  height: 28px;
  border-left: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0 0 0 6px;
}
.list-row[data-session-depth="1"] .session-card { min-height: 50px; }
.project-card, .session-card {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
  /* The right pad is the menu button's lane, so a long title never runs under it. */
  padding: 10px 46px 10px 12px;
  overflow: hidden;
  transition: background-color 120ms ease;
}


.project-card:hover, .session-card:hover { background: var(--field); }
.project-card.active, .session-card.active {
  background: color-mix(in srgb, var(--hue) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--hue) 55%, var(--line-strong));
  border-radius: 3px var(--radius-ctl) var(--radius-ctl) 3px;
  box-shadow: inset 4px 0 0 var(--hue), var(--raise);
}
.project-card.active strong, .session-card.active strong { color: var(--heading); }
.list-row.active .row-action-button { background: var(--surface); }
.project-card strong, .session-card strong { display: block; margin-bottom: 3px; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.project-card span, .session-card span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.project-card span { font-family: var(--mono); font-size: 10px; }

.agent-run-toggle {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 8px 2px 18px;
  padding: 1px 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
}
.agent-run-toggle:hover { color: var(--text); }
.agent-run-toggle.has-failed { color: var(--danger); }
.agent-run-list { grid-column: 1 / -1; display: grid; gap: 2px; margin: 0 8px 5px 18px; padding-left: 9px; border-left: 1px solid var(--line); }
.agent-run-task { color: var(--muted); font-family: var(--mono); font-size: 10px; line-height: 1.35; }
.agent-run-task-running, .agent-run-task-succeeded { color: var(--accent); }
.agent-run-task-failed { color: var(--danger); }
.agent-run-task-reason {
  margin: 1px 0 3px;
  color: var(--danger);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.agent-run-task-output { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.agent-run-task-output summary { cursor: pointer; }
.agent-run-task-output pre { margin: 2px 0 4px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; }

/* Projects are grouped by type; the header is a <summary> so the browser handles collapsing. */
.project-group { display: grid; gap: 2px; }
.project-group-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.project-group:first-child > .project-group-summary { margin-top: 0; }
/* A hairline between projects of the same node, so adjacent rows don't run together. */
.project-group > .list-row + .list-row { border-top: 1px solid var(--line); }
/* Each node's group is set off from the one above it. */
.project-group + .project-group { border-top: 1px solid var(--line-strong); margin-top: 6px; padding-top: 4px; }
.project-group-summary::-webkit-details-marker { display: none; }
.project-group-summary::before {
  content: "▸";
  display: inline-block;
  font-size: 9px;
  transition: transform 140ms ease;
}
.project-group[open] > .project-group-summary::before { transform: rotate(90deg); }
.project-group-summary:hover { color: var(--text); background: var(--field); }
.project-group-count {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  font-size: 9.5px;
  text-align: center;
}

/* ---- Kanban board ---- */
.board-columns {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.board-column {
  flex: 0 0 min(82vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
}
.board-column-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.board-column-header strong { flex: 1; font-size: 13px; }
.board-count { min-width: 22px; text-align: center; border-radius: 6px; padding: 1px 6px; font-size: 10.5px; background: var(--field); color: var(--muted); }
.board-add { min-width: 30px; width: 30px; min-height: 30px; font-size: 15px; }
.status-in_progress .board-count { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.status-planning .board-count { background: color-mix(in srgb, var(--claude) 12%, transparent); color: var(--claude); }
.status-review .board-count { background: color-mix(in srgb, var(--amber) 13%, transparent); color: var(--amber); }
.status-done .board-count { background: color-mix(in srgb, var(--live) 12%, transparent); color: var(--live); }
.board-column-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding: 10px; }
.board-empty { font-size: 12px; text-align: center; padding: 12px 0; }

.task-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--surface);
  box-shadow: var(--raise);
  overflow: hidden;
  transition: border-color 150ms ease;
}
.task-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.task-card-body {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 11px 12px 10px;
}
.task-card-title { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.task-card-title strong { flex: 1; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.task-engine { flex: 0 0 auto; margin-top: 1px; font-size: 9px; border-radius: 4px; padding: 2px 6px; }
.task-engine.engine-pi { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.task-engine.engine-claude { color: var(--claude); background: color-mix(in srgb, var(--claude) 11%, transparent); }
.task-engine.task-plan { color: var(--claude); background: color-mix(in srgb, var(--claude) 11%, transparent); }
.task-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.task-card-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 10.5px; }
.task-node {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--field);
  border-radius: 5px;
  padding: 2px 6px;
}
.task-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-transform: capitalize; color: var(--muted); }
.task-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.task-state-running { color: var(--live); }
.task-state-running i { animation: task-state-pulse 1.4s ease-in-out infinite; }
.task-state-handoff_pending { color: var(--amber); }
@keyframes task-state-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.task-card-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--field) 45%, transparent);
}
.task-card-actions-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.task-action { min-width: 30px; width: 30px; min-height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.task-action:disabled { opacity: 0.32; }
.task-card-icon { width: 17px; height: 17px; flex: none; }
/* The arrows only move a ticket, so they stay quiet next to the two controls
   that open something. */
.task-move { color: var(--muted); }
.task-open-chat { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.task-open-chat:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.task-start { color: var(--live); }

.task-card.dragging { opacity: 0.5; }
@keyframes task-card-focus { 0%, 100% { box-shadow: var(--raise); } 50% { box-shadow: 0 0 0 2px var(--accent); } }
.task-card-focus { border-color: var(--accent); animation: task-card-focus 800ms ease-in-out 2; }
.board-column.drop-target { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }

@media (prefers-reduced-motion: reduce) {
  .task-state-running i { animation: none; }
  .task-card-focus { animation: none; }
}

/* ---- Chat ---- */
.chat { background: var(--panel); }
.chat-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: calc(var(--panel-header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 14px 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--header);
}
.chat-title-block { min-width: 0; flex: 1; }
.chat-topbar h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; line-height: 1.25; }
.chat-title-meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.chat-project-name {
  display: block;
  flex: 0 1 38%;
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.turn-timer { flex: 0 0 auto; color: var(--muted); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.task-backlink {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 10px;
  padding: 3px 7px;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease;
}
.task-backlink:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* The traffic light and Stop ride the meta row, so they line up with the ticket
   chip instead of floating between the title and the meta line. */
.chat-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; padding-left: 8px; }
.chat-actions .icon-button { min-width: 24px; width: 24px; min-height: 24px; }
.chat-actions .icon-button svg { width: 15px; height: 15px; }
.panel-toolbar, .chat-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--header);
}
.panel-toolbar { overflow-x: auto; scrollbar-width: none; }
.panel-toolbar::-webkit-scrollbar { display: none; }
/* The actions wrap to a second row rather than being clipped by the panel edge. */
.chat-toolbar { overflow: visible; flex-wrap: wrap; row-gap: 8px; }
.panel-toolbar[hidden], .chat-toolbar[hidden] { display: none; }
/* Desktop-only line break: the selects keep row 1, the action buttons take row 2. */
.chat-toolbar-break { display: none; }
.chat-session-controls { display: flex; align-items: end; gap: 8px; flex: 0 0 auto; }
.chat-control { display: grid; gap: 4px; flex: 0 0 auto; }
.chat-control > span {
  color: var(--muted);
  font: 600 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chat-toolbar-control {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  /* background-color, not the shorthand: the shorthand would drop the select chevron. */
  background-color: var(--field);
  color: var(--text);
  font: 11.5px var(--mono);
}
select.chat-toolbar-control {
  max-width: min(34vw, 240px);
  padding: 0 28px 0 10px;
  background-position: right 10px center;
  text-overflow: ellipsis;
}
.chat-session-controls select:disabled { opacity: 0.72; }
#chatNodeSelect { max-width: min(28vw, 170px); color: var(--live); }
#chatHarnessSelect { max-width: min(24vw, 120px); }
.chat-model-control, .chat-mode-control { align-self: stretch; }
#chatsRecentSessionsButton, #chatRecentSessionsButton { display: none; }
#chatsRunningConversationsButton { display: none; }
.chat-toolbar-icon { width: 17px; height: 17px; flex: none; }
.chat-recents-button, .chat-more > summary {
  min-height: 32px;
  min-width: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted);
}
.chat-recents-button:hover:not(:disabled), .chat-more > summary:hover { color: var(--text); }
.chat-more[open] > summary { color: var(--text); border-color: var(--line-strong); }
.model-shortcuts-empty { color: var(--muted); font-size: 11px; white-space: nowrap; }
.model-button { display: flex; align-items: center; gap: 7px; max-width: 44vw; min-width: 0; overflow: hidden; white-space: nowrap; padding: 0 28px 0 12px; }
/* The model button opens a picker, so it carries the same chevron as the selects beside it. */
.model-button.chat-toolbar-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%238b9198' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; }
#modelButtonName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-auto-label { flex: none; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--live) 55%, transparent); border-radius: 999px; color: var(--live); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.model-button.auto { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); background-color: color-mix(in srgb, var(--live) 8%, var(--field)); }
.model-button.claude { color: var(--claude); border-color: color-mix(in srgb, var(--claude) 30%, transparent); background-color: transparent; }
.chat-more, .chat-more-actions { display: contents; }
/* A closed <details> hides its content in current browsers, so flattening it
   into the toolbar needs the content box flattened too. */
.chat-more::details-content { display: contents; content-visibility: visible; }
.chat-more > summary { display: none; }
/* The inline action row shows icons only; the name lives in the tooltip and aria-label,
   and the dropdown layouts below bring the label back beside the icon. */
.chat-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 34px; padding: 0; }
.chat-action[hidden] { display: none; }
.chat-action-label { display: none; }
/* No inner scroll area — the dialog card is the single scroll region. */
.model-dialog-list { display: grid; gap: 4px; min-width: 0; }
.model-dialog-group { color: var(--muted); font-size: 10px; margin-top: 8px; }
.model-dialog-group:first-child { margin-top: 0; }
.model-option {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
  padding: 9px 13px;
  padding-left: 36px;
  font-size: 13px;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}
.model-option:hover { background: var(--field); }
.model-option.active { background: var(--btn-bg); border-color: var(--btn-border); color: var(--btn-fg); }
.model-dialog-list.claude .model-option.active { background: var(--btn-bg); }
/* Same 24-unit box as every other brand mark, so the heading text sits level with it. */
.model-group-icon { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1.5px; color: var(--text); }
/* Traffic light: red idle, amber connecting, green live. The text stays as the
   element's accessible name and is clipped out of the 12px dot. */
.status-pill {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: 999px;
  background: var(--danger);
  overflow: hidden;
  text-indent: -999em;
  white-space: nowrap;
}
.status-pill.live { border-color: color-mix(in srgb, var(--live) 45%, transparent); background: var(--live); animation: dot-breathe 1.4s ease-in-out infinite; }
@keyframes dot-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.status-pill.connecting { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber); animation: dot-breathe 1.1s ease-in-out infinite; }
/* Context gauge: how full the model's context window is, for whichever harness
   drives the conversation. Amber past 75%, red past 90%, so a conversation that
   is about to compact says so before it does. */
.context-usage {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.context-usage-bar { display: block; width: 34px; height: 5px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.context-usage-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--live); transition: width 240ms ease; }
.context-usage.warn > .context-usage-bar > i { background: var(--amber); }
.context-usage.warn { color: var(--amber); }
.context-usage.danger > .context-usage-bar > i { background: var(--danger); }
.context-usage.danger { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .context-usage-bar > i { transition: none; } }

#notifyButton.active, #notificationToggleButton.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* The scroll box stays full width so the scrollbar hugs the edge; the inline
   padding grows on a wide screen to hold the transcript in a centred column. */
/* The transcript sits in a positioned wrapper so the jump button can float over
   its bottom edge without joining the scrolling column. */
.messages-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jump-to-bottom {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  background: var(--field);
  box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.jump-to-bottom:hover { color: var(--accent); border-color: var(--accent); }
.jump-to-bottom[hidden] { display: none; }
.messages { flex: 1; min-height: 0; overflow: auto; overflow-anchor: none; background: transparent; padding-block: 18px; padding-inline: max(clamp(12px, 2.5vw, 40px), calc((100% - 1100px) / 2)); display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.empty-state { margin: auto; max-width: 480px; text-align: center; display: grid; gap: 14px; place-items: center; padding: 12px; }
.empty-state h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.empty-state p { color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 44ch; }
.orb { width: 56px; height: 56px; border-radius: 16px; }

.reconnect-banner { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 12px; border-top: 1px solid var(--line); color: var(--amber); background: color-mix(in srgb, var(--amber) 7%, transparent); font-size: 12px; font-weight: 550; }
.reconnect-banner[hidden] { display: none; }
.reconnect-dots { display: inline-flex; gap: 4px; }
.reconnect-dots i { width: 5px; height: 5px; border-radius: 999px; background: currentColor; animation: reconnect-dot 1.05s ease-in-out infinite; }
.reconnect-dots i:nth-child(2) { animation-delay: 0.15s; }
.reconnect-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes reconnect-dot { 0%, 100% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .reconnect-dots i, .chat-badge-active .chat-status-dot { animation: none; opacity: 0.8; }
  .status-pill.live, .status-pill.connecting { animation: none; }
}

.message { flex: 0 0 auto; max-width: 94%; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px 13px; font-size: var(--read); line-height: var(--read-leading); animation: message-in 260ms cubic-bezier(0.22, 0.9, 0.28, 1) both; }
@keyframes message-in {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: none; }
}
.message-content { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; line-height: var(--read-leading); }
.message-content.md { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.message-content.md > *:first-child { margin-top: 0; }
.message-content.md > *:last-child { margin-bottom: 0; }
.message-content.md p { margin: 0 0 14px; max-width: var(--measure); }
.message-content.md :is(h1, h2, h3, h4, h5, h6) {
  margin: 30px 0 10px;
  font-family: var(--serif);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--heading);
  max-width: var(--measure);
}
.message-content.md :is(h4, h5, h6) { font-family: var(--sans); font-weight: 650; color: var(--heading-soft); }
.message-content.md :is(h1, h2, h3):first-child { margin-top: 4px; }
.message-content.md h1 { padding-bottom: 9px; border-bottom: 1px solid var(--line-strong); }
.message-content.md h2 {
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--accent);
  line-height: 1.3;
}
/* h3 keeps the same accent language at a smaller rank: a short leading rule. */
.message-content.md h3::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 2px;
  margin-inline-end: 10px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: 0.3em;
}
.message-content.md h1 { font-size: 1.5em; }
.message-content.md h2 { font-size: 1.3em; }
.message-content.md h3 { font-size: 1.14em; margin-top: 26px; color: var(--heading-soft); }
.message-content.md :is(h4, h5, h6) { font-size: 0.95em; text-transform: none; }
.message-content.md ul, .message-content.md ol { margin: 0 0 14px; padding-inline: 1.35em; max-width: var(--measure); }
.message-content.md li { margin: 5px 0; padding-inline-start: 2px; }
.message-content.md li > ul, .message-content.md li > ol { margin: 5px 0; }
.message-content.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.message-content.md code { font-family: var(--mono); font-size: 0.85em; color: var(--heading-soft); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1.5px 5px; border-radius: 5px; }
.message-content.md pre { margin: 0; padding: 10px 12px; background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 0 0 9px 9px; overflow-x: auto; }
.message-content.md pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.5; white-space: pre; color: var(--code-text); }
.message-content.md .code-block { margin: 0 0 16px; border: 1px solid var(--code-line); border-radius: var(--radius-ctl); overflow: hidden; background: var(--code-bg); box-shadow: var(--shadow-soft); }
.message-content.md .code-block-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; background: color-mix(in srgb, var(--code-bg) 75%, #ffffff 8%); border-bottom: 1px solid var(--code-line); }
.message-content.md .code-block-bar .code-lang { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--accent); }
.message-content.md .code-copy { min-height: 24px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; background: transparent; color: var(--code-text); font-size: 11px; font-weight: 550; }
.message-content.md blockquote { margin: 0 0 14px; padding: 3px 14px; border-inline-start: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--muted); font-style: italic; max-width: var(--measure); }
.message-content.md blockquote > *:last-child { margin-bottom: 0; }
.message-content.md hr { margin: 20px 0; border: 0; border-top: 1px solid var(--line); }
.message-content.md .table-scroll { margin: 0 0 11px; overflow-x: auto; }
.message-content.md table { width: 100%; border-collapse: collapse; font-size: 13px; }
.message-content.md th, .message-content.md td { padding: 6px 10px; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.message-content.md th { background: var(--field); font-weight: 600; }

.message.user {
  align-self: flex-end;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 11%, var(--field));
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
.message.user .message-content.md code { background: color-mix(in srgb, var(--text) 8%, transparent); }
.message-image-gallery { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 9px; }
.message-image-thumbnail { width: 112px; height: 84px; min-height: 84px; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); cursor: zoom-in; }
.message-image-thumbnail:hover, .message-image-thumbnail:focus-visible { border-color: var(--accent); }
.message-image-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.message-image-viewer { width: auto; max-width: calc(100vw - 24px); height: auto; max-height: calc(100dvh - 24px); padding: 0; overflow: visible; border: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.message-image-viewer::backdrop { background: rgb(8 9 11 / 82%); backdrop-filter: blur(8px); }
.message-image-viewer img { display: block; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; object-fit: contain; box-shadow: 0 18px 60px rgb(0 0 0 / 50%); }
.message-image-viewer-close { position: absolute; top: -12px; right: -12px; z-index: 1; display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; background: #17191d; color: #fff; font-size: 23px; line-height: 1; }
/* Sent, but not yet handed to the agent. It stays on the conversation across a
   reload, so it must read as pending rather than as an ordinary sent message. */
.message.user.queued { background: var(--field); border-style: dashed; border-color: var(--line-strong); }
.message.user.queued .message-content { opacity: 0.72; }
.queued-batch-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 6px; padding: 7px 9px; border: 1px dashed var(--line-strong); border-radius: 7px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.queued-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.queued-badge { margin-right: auto; color: var(--muted); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.routed-note { margin-top: 6px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; }
.routing-config-editor { display: grid; gap: 10px; }
.routing-config-editor-title { margin: 4px 0 0; color: var(--text); font-size: 15px; }
.routing-harness-picker { margin-top: 4px; }
.routing-harness { display: grid; gap: 8px; }
.routing-level-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px; gap: 8px; align-items: center; }
.routing-description { grid-column: 2 / -1; min-width: 0; }
@media (max-width: 600px) {
  .routing-level-row { grid-template-columns: 52px minmax(0, 1fr) 96px; }
}
.queued-select { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.queued-controls button, .queued-editor button, .queued-batch-controls button { min-height: 26px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; }
.queued-controls button:hover, .queued-controls button:focus-visible, .queued-editor button:hover, .queued-editor button:focus-visible, .queued-batch-controls button:hover, .queued-batch-controls button:focus-visible { border-color: var(--line-strong); color: var(--text); }
.queued-controls .queued-force-start { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.queued-controls .queued-force-start:hover, .queued-controls .queued-force-start:focus-visible { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.queued-controls button:disabled, .queued-batch-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.queued-force-spinner { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); border-radius: 50%; vertical-align: -1px; animation: queued-force-spin 0.7s linear infinite; }
@keyframes queued-force-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .queued-force-spinner { animation-duration: 2.4s; } }
.queued-error { margin: 6px 0 0; color: var(--danger); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.queued-editor { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; margin-top: 8px; }
.queued-editor[hidden], .queued-controls[hidden] { display: none; }
.queued-editor-hints { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.queued-settings { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.queued-settings select { max-width: 100%; }
.queued-editor textarea { grid-column: 1 / -1; width: min(520px, 70vw); min-height: 80px; resize: vertical; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel); color: var(--text); font: inherit; }
.queued-editor button:first-of-type { grid-column: 2; }
.message.error { align-self: flex-start; max-width: 100%; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); color: var(--danger); }
.message.error .message-content { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.message.assistant { align-self: flex-start; width: 100%; max-width: 100%; padding: 12px 15px; border-color: var(--line); background: var(--panel); }
/* A sibling of the bubble, not a child, so the control sits outside the card.
   The .messages column already supplies 10px of gap, hence the negative margin. */
.message-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.message.user .message-meta { justify-content: flex-end; }
.message-time { color: var(--muted); font-family: var(--mono); font-size: 10.5px; opacity: 0.75; }
.conversation-start { align-self: center; color: var(--muted); font: 10.5px/1.4 var(--mono); }
.conversation-start .message-time { font-size: inherit; }
.message-receipt { color: var(--muted); font-family: var(--mono); font-size: 10.5px; opacity: 0.75; }
.message-receipt[data-read="true"] { color: var(--accent); opacity: 1; }
.message-unread-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--danger); }
.message-actions { display: flex; align-items: center; gap: 4px; align-self: flex-end; justify-content: flex-end; min-width: 0; margin-top: -4px; }
.message.assistant + .message-actions { align-self: flex-start; justify-content: flex-start; max-width: calc(100% - 18px); margin-left: 9px; }
.message-attribution { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: min(520px, calc(100vw - 100px)); height: 24px; padding: 0 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--field) 62%, transparent); color: var(--muted); font-family: var(--mono); font-size: 10px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.message-attribution-icon { width: 12px; height: 12px; flex: none; color: var(--text); }
.message-attribution-icon.pi { color: var(--accent); }
.message-copy { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); opacity: 0.6; transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease; }
.message-copy:hover, .message-copy:focus-visible { opacity: 1; color: var(--text); background: var(--field); }
.message-copy.copied { opacity: 1; color: var(--accent); }
.message-copy-icon { width: 15px; height: 15px; }
.message.tool { align-self: center; color: var(--amber); font-family: var(--mono); font-size: 11px; padding: 6px 11px; border-radius: 999px; border-color: transparent; background: color-mix(in srgb, var(--amber) 10%, transparent); }
.message.thinking { align-self: stretch; max-width: 100%; color: var(--muted); border-style: dashed; border-color: var(--line-strong); background: transparent; font-family: var(--mono); font-size: 12px; }
.message.thinking .message-content::after {
  content: "";
  display: inline-block;
  width: 0.52em;
  height: 1.05em;
  margin-left: 3px;
  border-radius: 1.5px;
  background: var(--accent);
  vertical-align: -0.18em;
  animation: caret-blink 1.05s steps(1) infinite;
}
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.message.tool-output { align-self: stretch; width: 100%; min-width: 0; max-width: 100%; padding: 0; overflow: hidden; color: var(--muted); border-color: var(--line); border-radius: var(--radius-ctl); background: var(--panel); font-size: 12px; }
.message.tool-output summary { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 8px 11px; list-style: none; cursor: pointer; }
.message.tool-output summary::-webkit-details-marker { display: none; }
.message.tool-output .tool-indicator { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--amber); animation: dot-breathe 1.2s ease-in-out infinite; }
.message.tool-output[data-status="done"] .tool-indicator,
.message.tool-output[data-status="error"] .tool-indicator { animation: none; }
.message.tool-output .tool-name { min-width: 0; overflow: hidden; color: var(--text); font-family: var(--mono); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.message.tool-output .tool-status { margin-left: auto; flex: 0 0 auto; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.message.tool-output .tool-chevron { flex: 0 0 auto; color: var(--muted); font-size: 17px; line-height: 1; transform: rotate(0); transition: transform 0.16s ease; }
.message.tool-output[open] .tool-chevron { transform: rotate(90deg); }
.message.tool-output[data-status="done"] .tool-indicator { background: var(--live); }
.message.tool-output[data-status="error"] { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.message.tool-output[data-status="error"] :is(.tool-indicator, .tool-status) { color: var(--danger); }
.message.tool-output[data-status="error"] .tool-indicator { background: var(--danger); }
.message.tool-output .message-content { max-height: min(280px, 45dvh); overflow: auto; padding: 10px 12px; border-top: 1px solid var(--code-line); background: var(--code-bg); color: var(--code-text); font-family: var(--mono); font-size: 11px; line-height: 1.5; overscroll-behavior: contain; }
.message.tool-output .tool-download { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.message.tool-output .tool-download:hover { color: var(--text); }
.message.tool-output .tool-download-open { display: inline-block; margin-left: 2px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 5px; color: var(--accent); font-weight: 600; text-decoration: none; }

/* Messages newer than the previous review watermark stay visibly grouped after
   opening a conversation from the review queue. */
.message.pending-review { border-color: color-mix(in srgb, var(--amber) 52%, var(--line)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--amber) 72%, transparent); }
.message.assistant.pending-review, .message.tool-output.pending-review { background: color-mix(in srgb, var(--amber) 11%, var(--panel)); }
.message.user.pending-review { background: color-mix(in srgb, var(--amber) 13%, var(--field)); }

/* ---- Harness segments: one conversation, visibly split where the agent changed ---- */
.harness-switch-notice { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.harness-switch-notice::before, .harness-switch-notice::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.harness-segment { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 2px; border: 1px solid var(--line); border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent) 3%, transparent); }
.harness-segment[data-harness="claude"] { background: color-mix(in srgb, var(--claude) 5%, transparent); border-color: color-mix(in srgb, var(--claude) 18%, var(--line)); }

.command-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 14px 0; border-top: 1px solid var(--line); background: var(--header); }
.command-strip button { flex: 0 0 auto; min-height: 30px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--field); padding: 0 13px; font-family: var(--mono); font-size: 12px; font-weight: 600; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.command-strip button:hover { color: var(--accent); border-color: var(--accent); background: var(--field); }
.conversation-lock { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--amber) 8%, var(--header)); }
.conversation-lock[hidden] { display: none; }
.conversation-lock-copy { display: grid; gap: 2px; min-width: 0; }
.conversation-lock-copy strong { color: var(--amber); font-size: 12px; font-weight: 600; }
.done-conversation-notice { background: color-mix(in srgb, var(--accent) 8%, var(--header)); }
.done-conversation-notice .conversation-lock-copy strong { color: var(--accent); }
.routing-warning { margin: 0 18px 8px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--amber) 10%, var(--panel)); color: var(--text); font-size: 12px; }
.conversation-lock-copy span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.conversation-lock-status:empty { display: none; }
.conversation-lock button { flex: 0 0 auto; }
.composer { display: grid; gap: 6px; padding: 8px 12px 14px; background: var(--header); }
.composer.dragging { outline: 2px dashed var(--accent); outline-offset: -4px; }
.command-autocomplete { width: 100%; max-width: 1100px; max-height: min(320px, 42dvh); margin: 0 auto; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--panel); box-shadow: var(--shadow); }
.command-autocomplete[hidden] { display: none; }
.command-autocomplete button { display: grid; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 0; text-align: left; background: transparent; color: var(--text); }
.command-autocomplete button + button { border-top: 1px solid var(--line); }
.command-autocomplete button:is(:hover, [aria-selected="true"]) { background: color-mix(in srgb, var(--accent) 12%, var(--field)); }
.command-autocomplete-name { font-family: var(--mono); font-size: 12px; font-weight: 650; }
.command-autocomplete-description { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.composer-row { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
/* The composer owns the bottom edge of the window, so its badge hangs above the row -
   below would fall off the screen - and sits over the send button, clear of the text. */
.composer-row > .shortcut-hint { top: auto; bottom: calc(100% + 3px); left: auto; right: 0; transform: none; }
.attachment-list { display: flex; gap: 8px; flex-wrap: wrap; }
.attachment-list:empty { display: none; }
.attachment-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--text); font-size: 12px; }
.attachment-chip:has(.attachment-chip-thumbnail) { padding-left: 3px; }
.attachment-chip-thumbnail { width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--panel); object-fit: cover; }
.attachment-chip span { max-width: min(48vw, 280px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { border: 0; background: transparent; color: var(--muted); padding: 0; min-height: auto; }
.attach-button { font-size: 20px; min-width: 42px; width: 42px; min-height: 44px; border-radius: var(--radius-ctl); }
textarea { flex: 1; resize: none; max-height: 160px; min-height: 46px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 15px; font-size: 16px; background-color: var(--panel); }
.send { display: inline-grid; place-items: center; min-width: 46px; width: 46px; min-height: 46px; padding: 0; border-radius: 14px; color: var(--on-ink); background: var(--accent); border-color: transparent; }
.send:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.send svg { width: 20px; height: 20px; }

/* ---- Bottom navigation ---- */
.mobile-nav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(120%);
}
.mobile-nav button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-ctl);
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.02em;
}
.mobile-nav .nav-icon { font-size: 16px; line-height: 1; display: grid; place-items: center; }
.mobile-nav .nav-icon svg { width: 18px; height: 18px; }
.mobile-nav button.active { color: var(--text); background: var(--field); }
.mobile-nav button.active .nav-icon { color: var(--hue); }

/* ---- Global app menu ---- */
.app-menu { display: none; }
.app-menu > summary { list-style: none; cursor: pointer; }
.app-menu > summary::-webkit-details-marker { display: none; }
.app-menu > summary svg { width: 18px; height: 18px; }
.app-menu:not([open]) > .app-menu-panel { display: none; }
.app-menu-panel {
  position: fixed;
  top: calc(58px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 51;
  display: grid;
  gap: 8px;
  width: min(15rem, calc(100vw - 2rem));
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background: var(--header);
  box-shadow: var(--shadow-soft);
}
.app-menu-meta { display: grid; gap: 3px; min-width: 0; }
.app-menu-node { overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app-menu-version { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.app-menu-panel > button { width: 100%; text-align: left; }

/* ---- Pending review badge ---- */
/* Both triggers position the same badge, so the count anchors to the button itself. */
.reviews-button { position: relative; }
.reviews-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #ffffff;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}
.reviews-badge[hidden] { display: none; }
.mobile-nav .reviews-badge { top: 4px; right: calc(50% - 24px); }
/* The running count reuses the review badge shape in the live colour. */
[data-running-conversations-open] { position: relative; }
.running-badge { background: var(--live); }

/* ---- Dialogs, toasts, banner ---- */
dialog { border: 0; padding: 0; background: transparent; color: var(--text); max-width: 100vw; max-height: 100dvh; overflow: visible; }
.ntfy-share-dialog .dialog-card { width: min(520px, calc(100vw - 24px)); }
.ntfy-share-clusters { display: grid; gap: 8px; max-height: 36dvh; overflow-y: auto; }
.ntfy-share-clusters label, .ntfy-share-dialog form > label { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
/* The global input rule sizes fields to width:100%; a checkbox that keeps it claims the
   whole row and pushes the label text outside the dialog. Size it like .checkbox-row. */
.ntfy-share-dialog input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; min-width: auto; padding: 0; accent-color: var(--ink); }
dialog::backdrop { background: rgba(10, 11, 13, 0.5); backdrop-filter: blur(6px); }
.dialog-card {
  width: min(480px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  /* Only this element scrolls, and only when the content cannot fit. */
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dialog-card > * { min-width: 0; }

.by-the-way-card {
  width: min(1100px, calc(100vw - 48px));
  height: min(800px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.by-the-way-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.by-the-way-heading h2 { margin: 2px 0 0; font-size: 20px; }
.by-the-way-frame { flex: 1; min-width: 0; min-height: 0; display: flex; }
.by-the-way-frame > iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--bg); }
.by-the-way-status { margin: auto; padding: 24px; color: var(--muted); text-align: center; }
.by-the-way-status[hidden] { display: none; }

@media (max-width: 700px) {
  .by-the-way-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; }
  .by-the-way-card { width: 100vw; height: 100dvh; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
}

.cron-card { width: min(680px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; }
.cron-card > .dialog-heading, .cron-card > .dialog-actions { flex: 0 0 auto; }
.cron-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 14px; }
#cronError:empty { display: none; }
#cronError { margin: 0; color: var(--danger); white-space: pre-wrap; overflow-wrap: anywhere; }
#cronListView, #cronForm { display: grid; gap: 14px; min-width: 0; }
.cron-list { display: grid; gap: 10px; }
.cron-empty { padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-ctl); text-align: center; }
.cron-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; color: var(--muted); }
.cron-task { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.cron-task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.cron-task-heading strong { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.cron-task-kind { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: var(--field); color: var(--muted); font: 600 9.5px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.cron-task-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.cron-task-details dt { color: var(--muted); font: 600 10px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.cron-task-details dd { min-width: 0; margin: 0; color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.cron-task-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.cron-task-history { max-height: 180px; margin: 0; padding: 10px; overflow: auto; border-radius: 8px; background: var(--code-bg); color: var(--code-text); font: 11px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cron-form-heading { display: grid; gap: 3px; padding-bottom: 2px; }
.cron-form-heading h3 { margin: 0; color: var(--text); font-size: 15px; }
.cron-schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cron-days { min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.cron-days legend { padding: 0 5px; }
.cron-days small { color: var(--muted); font-weight: normal; }
.cron-day-options { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cron-day-options label { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; cursor: pointer; }
.cron-day-options input { width: 16px; height: 16px; min-width: 16px; padding: 0; accent-color: var(--ink); }
#cronDays[hidden], #cronQuietTimes[hidden] { display: none; }
.cron-help { margin: 0 !important; padding: 10px 12px; border-radius: 8px; background: var(--field); }
#cronNew { margin-right: auto; min-width: 40px; width: 40px; min-height: 40px; }
#cronNew svg { width: 18px; height: 18px; }

.automation-card { width: min(900px, calc(100vw - 24px)); }
#automationError { margin: 0; color: var(--danger); white-space: pre-wrap; overflow-wrap: anywhere; }
#automationError:empty { display: none; }
.automation-list, .automation-form { display: grid; gap: 14px; min-width: 0; }
.automation-monitor { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.automation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.automation-heading strong { min-width: 0; overflow-wrap: anywhere; }
.automation-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: var(--field); color: var(--muted); font: 600 10px/1.4 var(--mono); }
.automation-monitor-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.automation-monitor-details dt { color: var(--muted); font: 600 10px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.automation-monitor-details dd { min-width: 0; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.automation-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.automation-live { display: inline-flex; align-items: center; text-decoration: none; }
.automation-live:not([href]) { color: var(--muted); cursor: not-allowed; }
.automation-details { max-height: 240px; padding: 12px; overflow: auto; border-radius: var(--radius-ctl); background: var(--field); font: 11px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.automation-form h3 { margin: 0; }
.automation-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.automation-help, .automation-owner-help { margin: 0 !important; padding: 10px 12px; border-radius: 8px; background: var(--field); overflow-wrap: anywhere; }
.automation-empty { padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-ctl); text-align: center; }
.automation-footer { flex-wrap: wrap; }

@media (max-width: 600px) {
  .automation-card { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 16px; }
  .automation-form-grid { grid-template-columns: minmax(0, 1fr); }
  .automation-heading { display: grid; justify-items: start; }
  .automation-card :is(button, .automation-live) { min-height: 40px; }
  .automation-actions, .automation-footer, .automation-form .dialog-actions { flex-wrap: wrap; }
  .automation-actions > *, .automation-footer > * { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  .cron-card { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 16px; }
  .cron-task-heading { display: grid; justify-items: start; gap: 7px; }
  .cron-task-kind { white-space: normal; }
  .cron-schedule-grid { grid-template-columns: minmax(0, 1fr); }
  .cron-task-actions { margin-left: 0; }
  .cron-task-actions .ghost { min-height: 40px; padding-inline: 10px; }
  #cronFooter > button:not(#cronNew) { flex: 1 1 0; }
}

/* Wide enough to read a transcript in; the chat host owns its own scroll so the
   card itself never grows past the viewport. */
.task-dialog-card { width: min(760px, calc(100vw - 24px)); }
/* #taskForm is a tab panel inside the card now, so it owns the field layout the
   card used to provide. */
#taskForm { display: grid; gap: 14px; min-width: 0; }
#taskForm[hidden] { display: none; }
.task-description-field { display: grid; gap: 8px; padding: 2px; border-radius: var(--radius-ctl); }
.task-description-field.dragging { outline: 2px dashed var(--accent); outline-offset: 2px; }
.task-description-field textarea { width: 100%; }
.task-attach-button { justify-self: start; }
.task-chat-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: min(520px, 60dvh);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
}
.task-chat-host .messages { padding: 14px; }
.task-chat-host .composer { padding: 8px 10px 10px; }

/* The settings dialog parks its opening focus here, so it must not look like a pressed control. */
.dialog-heading:focus { outline: none; }
.dialog-card label { color: var(--text); font-size: 12px; font-weight: 550; }
.dialog-card :is(input, textarea, select) { background-color: var(--panel); }
.dialog-card p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.quick-note-card { width: min(680px, calc(100vw - 24px)); }
.quick-note-card textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.quick-note-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick-note-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-note-images { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.quick-note-images .attachment-list { justify-content: flex-start; }
#quickNoteSecretList { max-height: 180px; overflow-y: auto; }
.quick-note-error { color: var(--danger) !important; }
.quick-note-card #deleteQuickNoteButton { margin-right: auto; }
/* Wider than a normal dialog: 80-odd columns is the width most shell output is
   written for, and wrapping it costs more than the extra dialog width does. */
.terminal-card { width: min(1360px, calc(100vw - 24px)); }
.terminal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.terminal-title { min-width: 0; }
/* Traffic light plus a line of text, on one row that never grows taller than the
   title beside it. */
.terminal-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: 10.5px/1.4 var(--mono);
}
.terminal-status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: var(--danger); }
.terminal-status[data-state="connecting"] .terminal-status-dot { background: var(--amber); animation: dot-breathe 1.1s ease-in-out infinite; }
.terminal-status[data-state="live"] .terminal-status-dot { background: var(--live); }
/* One line, clipped rather than wrapped; the full node and path stay on `title`. */
.terminal-status-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The frame owns the padding and border. The emulator host inside it must keep
   both at zero: xterm's fit addon reads its parent's computed height, which under
   border-box includes padding and border, and any it finds there buys a row and a
   column more than actually fit. */
.terminal-frame {
  height: min(70dvh, 680px);
  min-height: 320px;
  /* xterm sizes its screen in whole character cells, so the part-row of slack
     under the last line is clipped rather than bleeding past the frame. */
  overflow: hidden;
  border: 1px solid var(--code-line);
  border-radius: var(--radius-ctl);
  background: var(--code-bg);
  color: var(--code-text);
  padding: 12px 8px 12px 14px;
}
.terminal-output { height: 100%; }
.terminal-output .xterm { height: 100%; }
.terminal-output .xterm-viewport { background: transparent !important; }
@media (prefers-reduced-motion: reduce) {
  .terminal-status[data-state="connecting"] .terminal-status-dot { animation: none; }
}
.checkbox-row { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-weight: 500; }
.checkbox-row input { width: 16px; height: 16px; min-width: auto; accent-color: var(--ink); }
.phase-settings { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.phase-settings legend { padding: 0 6px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
#ntfyServiceList { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ntfyServiceList li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ntfy-service-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ntfy-share-progress { margin: 0; color: var(--muted); font-size: 12.5px; }
.ntfy-share-progress::before, .ntfy-share-dialog button[aria-busy="true"]::before, .ntfy-share-pending::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); border-radius: 50%; vertical-align: -1px; animation: queued-force-spin 0.7s linear infinite; }
.ntfy-share-dialog button[aria-busy="true"]::before { border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }
.ntfy-share-progress[hidden] { display: none; }
.ntfy-share-pending { margin-left: 6px; color: var(--accent); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ntfy-share-progress::before, .ntfy-share-dialog button[aria-busy="true"]::before, .ntfy-share-pending::before { animation-duration: 2.4s; } }
/* Inline ntfy server management. Every list is paginated, so the section never needs its own scrollbar. */
fieldset:has(> .ntfy-manage) { min-inline-size: 0; }
.ntfy-manage { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); }
.ntfy-service-add:not([hidden]) { display: contents; }
.ntfy-manage[hidden] { display: none; }
.ntfy-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ntfy-manage-heading, .ntfy-manage-subheading { margin: 0; color: var(--text); font-size: 13px; }
.ntfy-manage-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ntfy-manage-tabs button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.ntfy-manage-body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ntfy-manage-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); align-items: end; gap: 8px; }
.ntfy-manage-form > button { justify-self: start; }
.ntfy-manage-form[data-testid="ntfy-manage-read-form"] { grid-template-columns: minmax(0, 320px) auto auto; justify-content: start; }
.ntfy-manage .settings-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ntfy-manage-topic { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface); list-style: none; }
.ntfy-manage-topic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ntfy-manage-topic-name { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.ntfy-manage-grants li { display: grid; grid-template-columns: minmax(64px, 1fr) minmax(96px, 180px) auto; align-items: center; gap: 8px; }
.ntfy-manage-grants select { min-width: 0; padding-top: 6px; padding-bottom: 6px; }
.ntfy-manage-form label, .ntfy-manage-form input, .ntfy-manage-form select { min-width: 0; }
.ntfy-manage-grant-user { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.ntfy-manage-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ntfy-manage-message { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface); }
.ntfy-manage-message-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.ntfy-manage-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.settings-session-list { display: grid; gap: 6px; }
/* The theme button sits in a grid fieldset; keep it at its own width instead of stretching. */
#themeToggleButton { justify-self: start; }
/* One size for every tab: switching tabs must never move or resize the dialog. */
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(1680px, calc(100vw - 48px));
  height: min(1000px, calc(100dvh - 48px));
  overflow: hidden;
}
/* Tab sidebar beside the panel, so ten sections read as a list instead of a strip
   that runs off the edge. The sidebar is the fixed column; the panel takes the rest. */
.settings-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
/* Tab strip: scrolls sideways on narrow screens rather than wrapping into a tall block. */
.settings-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
}
.settings-tabs::-webkit-scrollbar { display: none; }
/* The settings sidebar: same height as the panel beside it, and it scrolls on its own
   when the section list is taller than that. */
.settings-tabs--sidebar {
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.settings-tabs--sidebar::-webkit-scrollbar { display: revert; width: 8px; }
.settings-tabs--sidebar .settings-tab { text-align: left; }
.settings-tabs-select { display: none; }
.settings-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: calc(var(--radius-ctl) - 3px);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
.settings-tab:hover { color: var(--text); }
.settings-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.18)); }
/* Harness sub-tabs use the same segmented control as the outer tab strip, one size down. */
.settings-subtabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.settings-subtab { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border: 0; border-radius: calc(var(--radius-ctl) - 3px); background: transparent; color: var(--muted); font-size: 12px; font-weight: 550; cursor: pointer; transition: color 140ms ease, background-color 140ms ease; }
.settings-subtab:hover { color: var(--text); }
.settings-subtab:is([aria-pressed="true"], [aria-selected="true"]) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.18)); }
@media (prefers-reduced-motion: reduce) {
  .settings-subtab { transition: none; }
}
/* A fixed panel box, so a short tab and a long tab leave the dialog the same height.
   `align-content: start` stops the grid stretching rows to fill it. */
.settings-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  /* A scroll box clips whatever overflows it. A focused control paints a 3px ring and a
     2px outline 2px outside its border, so the panel reserves that much on every side. */
  padding: 5px;
}
.settings-panel[hidden] { display: none; }
#mfaDialog { max-width: min(520px, calc(100vw - 24px)); }
#mfaDialog .dialog-actions { flex-wrap: wrap; }
#mfaDialog .mfa-key { font-family: var(--mono); font-size: 14px; line-height: 1.7; }
#mfaDialog #mfaSetupKey { font-size: 12px; }
#mfaError { color: var(--danger); }
.github-group-list { display: grid; gap: 8px; }
.github-group-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.github-sync-node-list { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; }
.github-group-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.github-group-row strong { flex: 1; min-width: 0; color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.github-group-default { padding: 2px 7px; border-radius: 999px; background: var(--field); color: var(--muted); font-family: var(--mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.github-group-empty { margin: 0; color: var(--muted); font-size: 13px; }
.project-type-list { display: grid; gap: 8px; }
.project-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.project-type-row strong { flex: 1 1 100%; min-width: 0; color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 480px) { .project-type-row strong { flex: 1 1 auto; } }
.project-type-row code { flex: 0 0 auto; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.project-type-row select { flex: 0 0 auto; width: auto; min-width: 150px; }
.project-type-empty { margin: 0; color: var(--muted); font-size: 13px; }
.project-type-add { display: flex; gap: 8px; }
.project-type-add input { flex: 1; min-width: 0; }
.project-type-add button { flex: 0 0 auto; }

.client-log-output { min-height: 280px; margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); color: var(--text); font-family: var(--mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.changelog-list { display: grid; gap: 12px; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.changelog-entry { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.changelog-entry h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.changelog-date { color: var(--muted); font-size: 10.5px; font-weight: 500; }
.changelog-entry ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.changelog-entry li { color: var(--text); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.changelog-entry ul:empty { display: none; }

.secret-type-toolbar { display: flex; align-items: stretch; gap: 8px; }
.secret-type-picker { width: min(240px, calc(100% - 48px)); }
.secret-type-add { width: 40px; min-width: 40px; padding: 0; font-size: 21px; line-height: 1; }
.secret-provider-field { display: grid; gap: 6px; color: var(--text); font-size: 12px; font-weight: 550; }
#secretAccountProviderPicker { width: 100%; }
.secret-type-select :is(.searchable-select-trigger, .searchable-select-option) { display: flex; align-items: center; gap: 10px; }
.secret-type-select .secret-provider-icon, .secret-type-select .row-menu-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.secret-account-list, .secret-scope-list { display: grid; gap: 8px; }
.secret-sharing-card { width: min(480px, calc(100vw - 24px)); max-height: min(75vh, 680px); overflow-y: auto; }
.secret-sharing-card fieldset { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 10px 12px; }
.secret-sharing-card legend { padding-inline: 4px; font-weight: 600; }
.secret-account-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.secret-account-meta { display: grid; gap: 2px; flex: 1; min-width: 0; }
.secret-account-meta strong { color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.secret-account-vars { color: var(--muted); font-family: var(--mono); font-size: 10.5px; overflow-wrap: anywhere; }

/* Brand marks are filled glyphs, so they carry their own colour rather than the row's. */
.secret-provider-badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); }
.secret-provider-icon { width: 18px; height: 18px; }
.secret-provider-icon.aws { color: #ff9900; }
.secret-provider-icon.google { color: #4285f4; }
.secret-provider-icon.github { color: var(--text); }
.secret-provider-icon.stripe { color: #635bff; }
.secret-provider-icon.cloudflare { color: #f38020; }
.secret-provider-icon.openai { color: #10a37f; }
.secret-provider-icon.zai { color: #5c68d7; }
.secret-provider-icon.grafana { color: #f46800; }
.secret-provider-icon.datadog { color: #8a55ad; }
.secret-provider-icon.postgres { color: #336791; }
.secret-provider-icon.mssql { color: #cc2927; }
.secret-provider-icon.mongodb { color: #47a248; }
.secret-provider-icon.website { color: #2f9e6c; }
.secret-provider-icon.custom { color: var(--accent); }

/* Fixed height so adding rows or switching provider never resizes the dialog; only the body scrolls. */
.secret-account-card { height: min(760px, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.secret-dialog-body { display: grid; align-content: start; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 2px 6px; }
.secret-dialog-body > * { min-width: 0; }
.secret-dialog-heading { display: flex; align-items: flex-start; gap: 12px; }
.secret-dialog-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); }
.secret-dialog-icon .secret-provider-icon { width: 24px; height: 24px; }
.secret-provider-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.dialog-card .secret-provider-hint { margin-top: -6px; }

/* Each variable is its own card: the name needs the full width to stay readable, and the
   value is a paste target, so squeezing all four controls onto one line truncated both. */
#secretVariableRows { display: grid; gap: 10px; }
.secret-github-fields { display: grid; gap: 10px; }
.secret-github-fields > button { justify-self: start; }
.secret-github-key { display: grid; gap: 6px; }
.secret-github-key textarea { min-height: 78px; resize: vertical; font-family: var(--mono); font-size: 11.5px; }
.secret-github-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.secret-github-public-key { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); font-size: 12px; }
.secret-github-public-key code { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; user-select: all; }
.secret-github-protocol { display: grid; gap: 4px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.secret-github-protocol legend { padding: 0 4px; font-size: 12px; color: var(--muted); }
.secret-variable-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.secret-variable-row input { font-family: var(--mono); font-size: 11.5px; }
.secret-variable-row textarea { grid-column: 1 / -1; min-height: 78px; resize: vertical; }
.secret-variable-row input[data-secret-value] { grid-column: 1 / -1; }
.secret-scope-list { max-height: 280px; overflow-y: auto; padding: 2px; }
.secret-scope-row { display: flex; align-items: center; gap: 8px; }
.secret-scope-row .secret-provider-badge { width: 28px; height: 28px; }

/* Too narrow for a side-by-side split: the sidebar folds back into the strip above. */
@media (max-width: 720px) {
  .settings-card { width: calc(100vw - 24px); height: calc(100dvh - 24px); }
  .settings-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  /* On phones the section list becomes a dropdown instead of a horizontal strip. */
  .settings-tabs--sidebar { display: none; }
  .settings-tabs-select {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctl);
    background-color: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 550;
  }
}
@media (max-width: 640px) {
  .secret-account-row { align-items: stretch; flex-wrap: wrap; }
  .secret-account-meta { flex-basis: calc(100% - 44px); }
  /* Name on its own row, then kind and Remove share the next one. */
  .secret-variable-row { grid-template-columns: minmax(0, 1fr) auto; }
  .secret-variable-row input { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-tab { transition: none; }
}

.settings-session-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.settings-session-row span { flex: 1; color: var(--muted); font-family: var(--mono); font-size: 10.5px; overflow-wrap: anywhere; }
.settings-restart-message { margin: 0; color: var(--amber) !important; font-size: 12px !important; }
.settings-restart-message[hidden] { display: none; }
.settings-load-status { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.settings-load-status[hidden] { display: none; }
.settings-load-status.is-loading::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: queued-force-spin 0.7s linear infinite;
}
.settings-restart-message.is-loading { color: var(--muted) !important; }
.cluster-content { display: grid; gap: 12px; min-width: 0; }
.cluster-content[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .settings-load-status.is-loading::before { animation: none; } }
label { display: grid; gap: 6px; min-width: 0; color: var(--muted); }
.compact-copy { font-size: 12px; line-height: 1.4; }
.confirm-card { width: min(420px, calc(100vw - 24px)); }
.confirm-card #confirmMessage[hidden], .dialog-card #choiceMessage[hidden] { display: none; }
.choice-list { display: grid; gap: 6px; max-height: min(340px, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
.choice-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
/* An option carrying a brand logo reads as one line: radio, logo, name. Without
   this the three children overflow the two-column track and the name drops onto
   a second row, which is what made the mobile agent picker look so tall. */
.choice-option:has(.choice-option-icon) { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; }
.choice-option:has(.choice-option-icon) input { margin-top: 0; }
.choice-option:hover { border-color: var(--accent); }
.choice-option:has(input:checked) { border-color: var(--accent); background: var(--field); }
.choice-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.choice-option input { margin-top: 3px; accent-color: var(--accent); }
.choice-option-copy { display: grid; gap: 2px; min-width: 0; }
.choice-option-label { color: var(--text); font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.choice-option-hint { color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 2px; }

/* The new-conversation dialog walks three steps; only one panel is mounted at a time,
   so the card keeps one height and the keyboard has one field order to follow. */
.wizard-card { min-height: 340px; }
.wizard-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.wizard-steps li { min-width: 0; }
.wizard-step {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.wizard-step:hover { color: var(--text); }
.wizard-step.done { color: var(--text); }
.wizard-step.active { border-color: var(--accent); color: var(--accent); }
.wizard-panel { display: grid; gap: 12px; align-content: start; }
.project-combobox-field { display: grid; gap: 6px; min-width: 0; color: var(--text); font-size: 12px; font-weight: 550; }

/* A select with a search box: the closed control matches <select>, chevron included. */
.searchable-select { position: relative; min-width: 0; }
.searchable-select-trigger {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  padding: 11px 34px 11px 13px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%238b9198' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.searchable-select-trigger.empty { color: var(--muted); }
.searchable-select-trigger[aria-expanded="true"] { border-color: var(--line-strong); }
.searchable-select-popover {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  background: var(--surface);
  box-shadow: var(--shadow, 0 10px 30px rgb(0 0 0 / 0.25));
}
.searchable-select-popover[hidden] { display: none; }
.searchable-select-options { display: grid; max-height: 220px; overflow-y: auto; color: var(--muted); }
.searchable-select-option {
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: calc(var(--radius-ctl) - 3px);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.searchable-select-option:is(:hover, :focus-visible, .active) { background: var(--field); }
.searchable-select-option[aria-selected="true"] { font-weight: 650; }
.searchable-select-option-detail { display: block; color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
/* Several choices at once: each option carries a check box drawn in CSS. */
.multi-select-option { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.multi-select-option::before {
  content: "";
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
}
.multi-select-option[aria-selected="true"] { font-weight: 600; }
.multi-select-option[aria-selected="true"]::before {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.multi-select-option-label, .multi-select-option .searchable-select-option-detail { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.multi-select-clear { justify-self: end; min-height: 28px; padding: 4px 10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.multi-select-clear:hover { color: var(--text); }
.multi-select-clear[hidden] { display: none; }

.handoff-progress-card progress { width: 100%; accent-color: var(--accent); }
#handoffProgressStatus { min-height: 2.8em; white-space: pre-line; }

.toast {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-wrap: anywhere;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-ctl);
  padding: 11px 15px;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  z-index: 100;
}
.toast-message { min-width: 0; }
.toast-close {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1.4;
  opacity: 0.72;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; }
.install-banner { position: fixed; left: 50%; bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 45; }
.install-banner[hidden] { display: none; }
.install-banner-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-ctl); }
.install-banner-copy { display: grid; gap: 3px; min-width: 0; }
.install-banner-copy strong { font-size: 13.5px; }
.install-banner-copy span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.install-banner-actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.cluster-inventory { display: grid; gap: 6px; }
.cluster-node { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
/* The dot carries no information of its own: every row states its status in words beside it. */
.cluster-node-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); }
.cluster-node[data-state="local"] .cluster-node-dot { background: var(--accent); }
.cluster-node[data-state="online"] .cluster-node-dot { background: var(--live); }
.cluster-node[data-state="offline"] .cluster-node-dot { background: var(--danger); }
.cluster-node-identity { display: grid; gap: 2px; min-width: 0; }
.cluster-node-url { overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.cluster-node-status { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: right; }
.cluster-node[data-state="offline"] .cluster-node-status { color: var(--danger); }

.updates-version-line { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.updates-state-line:empty { display: none; }
.updates-state-line { color: var(--live); font-family: var(--mono); font-size: 11.5px; }
.updates-node-list { display: grid; gap: 8px; }
.updates-node { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.updates-node-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.updates-node-url { overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.updates-node-version { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.updates-node-state { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: right; }
.updates-node-state[data-state="failed"], .updates-node-state[data-state="offline"] { color: var(--danger); }
.updates-node-state[data-state="updating"], .updates-node-state[data-state="succeeded"] { color: var(--live); }
.cluster-token-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cluster-token-row input { font-family: var(--mono); }
.folder-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.folder-browser { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.folder-browser[hidden] { display: none; }
.folder-browser-toolbar { display: flex; align-items: center; gap: 9px; min-width: 0; }
.folder-browser-toolbar code { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.folder-browser-list { display: grid; gap: 3px; max-height: 210px; overflow-y: auto; }
.folder-browser-entry { min-height: 34px; border: 0; border-radius: 7px; padding: 0 10px; color: var(--text); background: transparent; font-family: var(--mono); font-size: 11.5px; text-align: left; }
.folder-browser-entry::before { content: "▸"; margin-right: 8px; color: var(--accent); }
.folder-browser-entry:hover { background: var(--field); }

/* ---- Desktop: persistent columns, no bottom nav ---- */
@media (min-width: 1024px) {
  .shell {
    display: grid;
    --col-projects: clamp(274px, 18vw, 320px);
    --col-chats: clamp(300px, 20vw, 356px);
    grid-template-columns: var(--col-projects) var(--col-chats) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .project-actions { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .project-actions button.icon-button { min-width: 0; width: 100%; padding-inline: 0; }
  /* The toolbar reads as one straight line: the badges hang below their controls
     rather than claiming a second line in the layout. */
  .chat-toolbar { --control-line: 32px; align-items: end; gap: 4px; }
  /* Forces the wrap right after the reasoning control. */
  .chat-toolbar-break { display: block; flex: 0 0 100%; width: 100%; height: 0; }
  .chat-model-control, .chat-mode-control { align-self: end; }
  .chat-toolbar button[data-shortcut-hint], .chat-toolbar .background-tasks-trigger, .chat-toolbar #chatFilesButton {
    min-height: 0;
    padding: 0 6px;
    line-height: var(--control-line);
  }
  /* Icon actions keep one square size whether or not they carry a shortcut badge. */
  .chat-toolbar button:is(.chat-action, .background-tasks-trigger, #chatFilesButton) { min-height: 34px; min-width: 34px; padding: 0; line-height: normal; }
  .chat-toolbar button.background-tasks-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  .chat-toolbar button.background-tasks-trigger:has(.background-tasks-badge:not([hidden])) { padding-inline: 8px; }
  .mobile-nav { display: none; }
  .back-button { display: none; }
  /* `.shell` declares these custom properties, so the override has to land on
     `.shell` too - a body-level one is shadowed by the element's own value. */
  body.projects-collapsed .shell { --col-projects: 46px; }
  body.chats-collapsed .shell { --col-chats: 46px; }
  .collapse-button { display: inline-grid; }
  .view-panel.collapsed > :not(.panel-rail) { display: none; }
  .view-panel.collapsed .panel-rail { display: flex; }
  #projectsPanel, #chatsPanel { display: flex; }
  #chatPanel { display: flex; }
  #boardPanel { display: none; }
  body.view-board #boardPanel { display: flex; }
  body.view-board #chatPanel { display: none; }
  body.view-canvas #canvasPanel { display: flex; }
  body.view-canvas #chatPanel, body.view-canvas #boardPanel { display: none; }
  .board-column { flex: 1 1 0; min-width: 220px; }
  .message.assistant, .message.thinking, .message.tool-output { width: 100%; max-width: 100%; }
  .message.user { max-width: min(720px, 78%); }
  .messages { padding-inline: clamp(16px, 4vw, 56px); }
  textarea { max-height: min(40dvh, 360px); font-size: 14px; }
  input, select { padding: 10px 13px; }
  /* Keep the room the chevron needs; the shorthand above would take it back. */
  select { padding-right: 34px; }
  .searchable-select-trigger { padding: 10px 34px 10px 13px; }
  .install-banner { bottom: 16px; }
  #chatsRecentSessionsButton, #chatRecentSessionsButton { display: none !important; }
  #chatsRunningConversationsButton { display: none !important; }
  /* The desktop header already carries a running-conversations button, so the chat toolbar drops its copy. */
  #chatRunningConversationsButton { display: none !important; }
}

@media (max-width: 1023px) {
  .classification-filter { max-width: none; }
  .list-filter-row > * { max-width: none; }
  .collapse-button { display: none; }
  .new-chat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .new-chat-harnesses { display: none; }
  .new-chat-mobile, .quick-note-mobile { display: block; width: 100%; }
  .quick-note-mobile { min-height: 40px; border-color: var(--line); }
  .projects-quick-note-mobile { display: inline-grid; }
  .classification-filter { max-width: none; }
  .chat-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) auto auto auto;
    align-items: end;
    overflow: visible;
  }
  .chat-session-controls { display: contents; }
  select.chat-toolbar-control { width: 100%; max-width: none; }
  #chatNodeSelect, #chatHarnessSelect { max-width: none; }
  .chat-session-controls > .chat-control { min-width: 0; }
  .chat-session-controls > .chat-control[for="chatHarnessSelect"] { grid-column: 2 / 5; }
  #chatModeControl { display: grid; }
  #chatsRecentSessionsButton { display: inline-grid; }
  #chatsRunningConversationsButton { display: inline-grid; }
  #chatRecentSessionsButton { display: inline-flex; }
  .chat-model-control { grid-column: 1; grid-row: 2; min-width: 0; }
  .chat-mode-control { grid-column: 2; grid-row: 2; min-width: 0; }
  .chat-recents-button { grid-column: 3; grid-row: 2; }
  #chatRunningConversationsButton { display: inline-flex; grid-column: 4; grid-row: 2; }
  /* Tasks joins the model/reasoning row as an icon instead of claiming a third row. */
  .chat-toolbar .background-tasks-trigger {
    grid-column: 5;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 32px;
    padding-inline: 6px;
  }
  /* Scoped to the toolbar so it outranks the desktop hide rule further down the file. */
  .model-button { width: 100%; max-width: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-more { grid-column: 5; grid-row: 1; position: relative; display: block; align-self: end; }
  .chat-more > summary { display: inline-flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; }
  .chat-more > summary::-webkit-details-marker { display: none; }
  .chat-more:not([open]) > .chat-more-actions { display: none; }
  .chat-more[open] > .chat-more-actions {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 4px;
    width: min(16rem, calc(100vw - 2rem));
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-ctl);
    background: var(--header);
    box-shadow: var(--shadow-soft);
  }
  .chat-more-actions > button { width: 100%; text-align: left; }
  .chat-more-actions > .chat-action { justify-content: flex-start; padding: 0 12px; }
  .chat-more-actions .chat-action-label { display: inline; }
  :root { --read: 15px; --read-leading: 1.68; --measure: none; }
  .mobile-nav { bottom: max(8px, env(safe-area-inset-bottom)); }
  /* 52px of reserved lane on the right so no header control lands under the fixed app menu. */
  .panel-bar, .chat-topbar { height: auto; min-height: 58px; padding: 10px 52px 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .app-menu { display: block; position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 50; }
  /* The bottom bar already reaches Notes, so the duplicate desktop action stays hidden. */
  #settingsButton, #projectNotesButton, #projectBoardButton, #openCanvasButton, #canvasPanel { display: none; }
  /* A phone has no modifier keys to hold, so the badges never reveal there. */
  body.shortcuts-revealed .shortcut-hint { display: none; }
  .messages { padding: 12px; }
  .composer { padding: 6px 8px 10px; }
  .dialog-card { padding: 20px; }
  .quick-note-settings { grid-template-columns: 1fr; }
  .quick-note-launch { grid-template-columns: 1fr; }
  .search-shell input, input, select, .searchable-select-trigger { font-size: 16px; }
  /* The menu is the only way to reach a row's actions, so it needs a real touch target,
     and a wider lane to sit in so the title still clears it. */
  .row-menu-button { min-height: 34px; min-width: 34px; }
  /* The pin button gets the same touch target, one lane to the left of the menu,
     with 8px of air between the two so they don't read as one blob on a phone. */
  .session-list .pin-button, .project-list .pin-button { min-height: 34px; min-width: 34px; width: 34px; right: 52px; }
  .session-list .session-children-toggle { min-height: 34px; right: 94px; }
  .session-list .session-card, .project-list .project-card { padding-right: 94px; }
  /* The ticket jump button gets the same touch target and the same 8px of air,
     one lane further out than the pin so the row reads ticket, pin, menu. */
  .session-list .ticket-link-button { min-height: 34px; min-width: 34px; width: 34px; right: 94px; }
  .session-list .list-row.has-ticket .session-card { padding-right: 136px; }
  .session-list .list-row.has-children .session-card { padding-right: 136px; }
  /* Stop stays a real touch target on phones without leaving the meta row. */
  .chat-actions .icon-button { min-width: 32px; width: 32px; min-height: 32px; }
  .project-card, .session-card { padding-right: 52px; }

}

@media (max-width: 430px) {
  .terminal-heading { flex-direction: column; align-items: stretch; gap: 8px; }
  .terminal-status { max-width: 100%; }
  .brand-copy span { display: none; }
  .brand-copy strong { font-size: 14px; white-space: nowrap; }
  .project-actions { gap: 2px; }
  #newProjectButton { padding-inline: 11px; }

  .install-banner { align-items: flex-start; }
  .install-banner-actions { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Collapsible side panels (desktop only) ---- */
/* The rail is the only thing left when a panel collapses, so the way back is never lost. */
.panel-rail { display: none; }
.view-panel.collapsed .panel-rail {
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  min-width: 0;
}
.panel-rail-label {
  writing-mode: vertical-rl;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.collapse-button {
  border-color: var(--line);
  color: var(--muted);
}
.collapse-button:hover:not(:disabled) { color: var(--text); }
.collapse-button svg, .panel-rail .icon-button svg { width: 15px; height: 15px; }

/* ---- Pinned projects and conversations ---- */
.pin-button { font-size: 12px; opacity: 0.55; }
.pin-button.pinned { opacity: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Both lists carry a real pin button on every row, so each needs a second button
   lane and pays for it with padding — the button is the pinned indicator. */
.session-list .pin-button, .project-list .pin-button { right: 46px; }
.session-list .session-card, .project-list .project-card { padding-right: 82px; }
/* Parents with sub-agent children carry a third lane for the expand toggle. */
.session-children-toggle { right: 78px; width: auto; min-width: 28px; padding: 0 7px; font-family: var(--mono); font-size: 10.5px; }
.session-list .list-row.has-children .session-card { padding-right: 122px; }

/* ---- Ticket conversations in the list ---- */
/* The jump button owns the outermost lane, and the row pays for the
   lane with padding so the title never runs under it. */
.session-list .ticket-link-button { right: 78px; color: var(--accent); }
.session-list .ticket-link-button svg { width: 15px; height: 15px; }
/* A ticket conversation needs three lanes: ticket, pin, menu. */
.session-list .list-row.has-ticket .session-card { padding-right: 110px; }

/* ---- Skills browser ---- */
.skills-dialog-list { display: grid; gap: 4px; min-width: 0; max-height: 52dvh; overflow-y: auto; }

.skill-option {
  position: relative;
  width: 100%;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
  padding: 9px 12px;
  padding-left: 36px;
  transition: background-color 120ms ease;
}
.skill-option:hover { background: var(--field); }
.skill-option strong { display: block; font-size: 12.5px; font-family: var(--mono); }
.skill-option-scope {
  font: 600 9px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.skill-option-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* ---- Tool picker ---- */
.tools-dialog-list { display: grid; gap: 4px; min-width: 0; max-height: 52dvh; overflow-y: auto; }
.tool-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 12px;
  padding-left: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
}
.tool-option input { margin-top: 2px; }
.tool-option strong { display: block; font: 600 12.5px/1.3 var(--mono); }
.tool-option-description { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }

/* ---- Row overflow menu ---- */
.row-menu-button { font-size: 15px; line-height: 1; }
/* A popover so the scrolling lists cannot clip it; inset:auto lets JS place it. */
.row-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(250px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
}
.row-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 13px;
}
.row-menu button:hover:not(:disabled) { background: var(--field); }
.row-menu button.danger { color: var(--danger); }
.row-menu button:disabled { opacity: 0.45; }
/* Slightly dimmer than the label so the words stay the thing you read first. */
.row-menu-icon { width: 16px; height: 16px; flex: none; opacity: 0.75; }

/* ---- Pending reviews ---- */
/* The 3px pad is the focus ring's lane: the scroll box would otherwise clip its offset. */
/* max-content keeps every row at its own height: a capped grid otherwise shrinks its auto rows
   once the list overflows, and rows that opt out of the 56px floor collapse to a clipped sliver. */
/* Mark-all runs in the background; the spinner shows it is still going after the list clears. */
#markAllPendingReviewedButton[aria-busy="true"]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); border-radius: 50%; vertical-align: -1px; animation: queued-force-spin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { #markAllPendingReviewedButton[aria-busy="true"]::before { animation-duration: 2.4s; } }
.pending-reviews-list { display: grid; grid-auto-rows: max-content; gap: 6px; min-width: 0; max-height: 52dvh; overflow-y: auto; padding: 3px; }
/* The left pad is the shortcut number's lane. */
.pending-reviews-list .session-card { position: relative; min-height: 0; border: 1px solid var(--line); padding-left: 38px; }
/* One line each keeps every row the same height and the list scannable; the tooltip has the rest. */
.pending-reviews-list .session-card strong {
  margin-bottom: 2px;
  overflow: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pending-reviews-list .session-card span { -webkit-line-clamp: 1; }
/* Project names label the rows beneath them rather than acting as controls. */
.pending-reviews-group {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pending-reviews-list > .pending-reviews-group:first-child { margin-top: 0; }

/* ---- Numeric row shortcuts ---- */
/* Every pick-list dialog numbers its first ten rows and opens a row on its digit,
   so the chip and the lane it sits in are shared, not per-list. */
.list-shortcut-index,
.session-card .list-shortcut-index,
.project-card .list-shortcut-index {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* ---- Recent conversations ---- */
/* The shared search shell is inset for a panel header; inside this dialog it lines up with the list. */
#recentSessionsDialog .search-shell { margin: 0; }
/* The 3px pad is the focus ring's lane: the scroll box would otherwise clip its offset. */
.recent-sessions-list { display: grid; grid-auto-rows: max-content; gap: 6px; min-width: 0; max-height: 52dvh; overflow-y: auto; padding: 3px; }
/* The list takes focus so digit shortcuts work, but it is not itself a control. */
.recent-sessions-list:focus { outline: none; }
/* Outlined rows, like the skills dialog: a plain text list of 20 titles is unreadable. */
/* The left pad is the shortcut number's lane. */
/* The right pad is the pin and remove lane. */
.recent-sessions-list .session-card { position: relative; min-height: 0; border: 1px solid var(--line); padding-left: 38px; padding-right: 84px; }
/* One line each keeps every row the same height and the list scannable. */
.recent-sessions-list .session-card strong {
  margin-bottom: 2px;
  overflow: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.recent-sessions-list .session-card span { -webkit-line-clamp: 1; }
.recent-sessions-list .session-card.pinned { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.recent-sessions-list .pin-button:not(.pinned) { opacity: 0.55; }
/* Two controls share the row: remove keeps the edge lane, the pin moves over. */
.recent-sessions-list .pin-button { right: 46px; }
.recent-sessions-list .forget-button { font-size: 15px; line-height: 1; opacity: 0.55; }
.recent-sessions-list .forget-button:hover, .recent-sessions-list .forget-button:focus-visible { opacity: 1; color: var(--danger); }

/* ---- Row colours ---- */
.field-group { display: grid; gap: 6px; }
.field-label { color: var(--muted); font-size: 11px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--project-hue, var(--field));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink, #000) 18%, transparent);
}
.color-swatch.selected { border-color: var(--heading); }
.color-swatch-none { background: var(--field); }
.color-swatch-none::after { content: "✕"; color: var(--muted); font-size: 11px; }

[data-color="slate"] { --project-hue: #7b8794; }
[data-color="teal"] { --project-hue: #2bb8a3; }
[data-color="blue"] { --project-hue: #4a86e8; }
[data-color="violet"] { --project-hue: #8a6ef0; }
[data-color="magenta"] { --project-hue: #d264b6; }
[data-color="amber"] { --project-hue: #e0a33a; }
[data-color="green"] { --project-hue: #46b35e; }
[data-color="red"] { --project-hue: #e05c4b; }

/* The accent bar makes a row findable by colour before the name is read. */
.project-card[data-color] { box-shadow: inset 3px 0 0 var(--project-hue); border-radius: 3px var(--radius-ctl) var(--radius-ctl) 3px; background: color-mix(in srgb, var(--project-hue) 12%, transparent); }
.project-card[data-color]:hover { background: color-mix(in srgb, var(--project-hue) 22%, var(--field)); }
.project-card[data-color].active { border-color: color-mix(in srgb, var(--project-hue) 60%, var(--line-strong)); box-shadow: inset 4px 0 0 var(--project-hue), var(--raise); background: color-mix(in srgb, var(--project-hue) 28%, var(--surface)); }
.session-card[data-color] { box-shadow: inset 3px 0 0 var(--project-hue); border-radius: 3px var(--radius-ctl) var(--radius-ctl) 3px; background: color-mix(in srgb, var(--project-hue) 12%, transparent); }
.session-card[data-color]:hover { background: color-mix(in srgb, var(--project-hue) 22%, var(--field)); }
.session-card[data-color].active { border-color: color-mix(in srgb, var(--project-hue) 60%, var(--line-strong)); box-shadow: inset 4px 0 0 var(--project-hue), var(--raise); background: color-mix(in srgb, var(--project-hue) 28%, var(--surface)); }

/* ---- Project node lock ---- */
.project-review-badge {
  align-self: start;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 15%, transparent);
}
/* A collapsed group hides its project rows, so the summary carries the count instead. */
.project-group-review-badge {
  margin-left: auto;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 650;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 15%, transparent);
}
/* An open group already shows each project's own badge, so the summary must not double up. */
.project-group[open] > .project-group-summary .project-group-review-badge { display: none; }
.project-card .project-lock-badge { display: block; margin: 3px 0 0; font-size: 10px; font-style: normal; color: var(--accent); }
.project-card .project-lock-badge.foreign { color: var(--danger); }
.project-card .project-cluster-badge { display: block; margin: 3px 0 0; font-size: 10px; font-style: normal; color: var(--muted); overflow-wrap: anywhere; }

.file-editor-card { width: min(500px, calc(100vw - 24px)); gap: 18px; --file-editor-height: min(72dvh, 720px); }
.file-editor-card:has(#fileEditorView:not([hidden])) { width: min(1180px, calc(100vw - 24px)); }
.file-editor-heading { display: grid; gap: 4px; }
.file-editor-heading h2 { font-size: 20px; }
.file-editor-card .file-editor-path {
  margin-top: 6px;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--text);
  background: var(--panel);
  font: 12px/1.4 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-editor-actions { display: grid; gap: 14px; }
.file-editor-open-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.file-editor-open-actions:has(#fileActionBrowserLink[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.file-editor-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.file-editor-actions :is(button, a) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px; text-align: center; text-decoration: none; line-height: 1.3; }
.file-editor-actions svg { flex: 0 0 auto; width: 17px; height: 17px; }
.file-editor-actions .ghost { border-color: var(--line-strong); background: var(--field); }
.file-editor-actions .ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--field) 72%, var(--text)); }
#fileActionDownloadLink[aria-disabled="true"] { pointer-events: none; opacity: 0.45; }
#fileActionStatus { margin: -8px 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
#fileActionStatus:empty { display: none; }
#fileActionEditButton { color: var(--on-ink); border-color: transparent; background: var(--accent); }
#fileActionEditButton:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 84%, var(--ink)); }
#fileEditorView { display: grid; gap: 12px; }
#fileEditorView[hidden] { display: none; }
.file-editor-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.file-editor-label-tools { display: flex; align-items: center; gap: 8px; }
#fileEditorPreviewButton { min-height: 0; padding: 4px 8px; border-radius: 4px; font: 700 10px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
#fileEditorPreviewButton[hidden] { display: none; }
#fileEditorMode { padding: 3px 6px; border-radius: 4px; color: var(--muted); background: var(--field); font: 700 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.file-editor-textarea { width: 100%; font-family: var(--mono); }
/* Preview sits beside the source rather than replacing it, so the document can be read
   and edited in the same glance. One column until it is asked for. */
.file-editor-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.file-editor-split:has(#fileEditorPreview:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.file-editor-preview { height: var(--file-editor-height); min-height: 420px; max-height: min(80dvh, 880px); padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); overflow: auto; }
.file-editor-preview[hidden] { display: none; }
.file-editor-card .CodeMirror { height: var(--file-editor-height); min-height: 420px; max-height: min(80dvh, 880px); border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--code-bg); color: var(--code-text); font-family: var(--mono); }
.file-editor-card .CodeMirror-scroll { height: inherit; min-height: inherit; max-height: inherit; }
.file-editor-card .CodeMirror-gutters { border-right-color: var(--line); background: var(--panel); }
.file-editor-card .CodeMirror-linenumber { color: var(--muted); }
.file-editor-card .CodeMirror-cursor { border-left-color: var(--accent); }
/* CodeMirror ships a pale lavender selection, and this editor's surface is always dark,
   so selected text was near-white on near-white. Its own rules are `.CodeMirror-focused
   .CodeMirror-selected` and `.CodeMirror-line::selection`, and its stylesheet loads after
   this one, so these have to out-specify them rather than merely follow them. The colour
   is opaque so it never depends on what happens to be painted behind it. */
.file-editor-card .CodeMirror .CodeMirror-selected,
.file-editor-card .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 42%, var(--code-bg)); }
.file-editor-card .CodeMirror-line::selection,
.file-editor-card .CodeMirror-line > span::selection,
.file-editor-card .CodeMirror-line > span > span::selection { background: color-mix(in srgb, var(--accent) 42%, var(--code-bg)); }
/* Vim's `/` search marks matches the same way, and its default yellow has the same fault. */
.file-editor-card .cm-searching { background-color: color-mix(in srgb, var(--amber) 46%, var(--code-bg)); }
.file-editor-card .CodeMirror-fat-cursor { background: var(--accent); color: var(--code-bg); }
.file-editor-card .cm-comment, .file-editor-card .cm-meta { color: var(--muted); }
.file-editor-card .cm-keyword, .file-editor-card .cm-atom, .file-editor-card .cm-tag { color: var(--accent); }
.file-editor-card .cm-string, .file-editor-card .cm-number, .file-editor-card .cm-attribute { color: var(--amber); }
.file-editor-card .cm-def, .file-editor-card .cm-variable-2, .file-editor-card .cm-property { color: var(--code-text); }
.file-editor-markdown { line-height: 1.6; }
.file-editor-markdown .cm-header { color: var(--code-text); font-weight: 700; line-height: 1.35; }
.file-editor-markdown .cm-header-1 { font-size: 1.5em; }
.file-editor-markdown .cm-header-2 { font-size: 1.3em; }
.file-editor-markdown .cm-header-3 { font-size: 1.15em; }
.file-editor-markdown .cm-header-4, .file-editor-markdown .cm-header-5, .file-editor-markdown .cm-header-6 { font-size: 1.05em; }
.file-editor-markdown .cm-strong { color: var(--code-text); font-weight: 700; }
.file-editor-markdown .cm-em { font-style: italic; }
.file-editor-markdown .cm-strikethrough { text-decoration: line-through; }
.file-editor-markdown .cm-link { color: var(--accent); }
.file-editor-markdown .cm-url { color: var(--muted); }
.file-editor-markdown .cm-quote { color: var(--muted); font-style: italic; }
.file-editor-markdown .cm-comment { color: var(--amber); font-family: var(--mono); }
.file-editor-markdown .cm-variable-2, .file-editor-markdown .cm-variable-3, .file-editor-markdown .cm-keyword { color: var(--accent); }
.file-editor-markdown .cm-hr { color: var(--muted); font-weight: 700; }
/* The literal #, *, ` and [] always stay in the buffer so the cursor lands where it looks;
   they just recede so the prose still reads first. */
.file-editor-markdown .cm-formatting { color: var(--muted); font-weight: 400; font-size: 1em; opacity: 0.62; }
/* Two panes need room. Below that the preview stacks under the source instead. */
@media (max-width: 900px) { .file-editor-split:has(#fileEditorPreview:not([hidden])) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .file-editor-card, .file-editor-card:has(#fileEditorView:not([hidden])) { width: calc(100vw - 16px); } .file-editor-card { --file-editor-height: 60dvh; } .file-editor-card .CodeMirror, .file-editor-preview { min-height: 180px; max-height: 70dvh; } }
@media (max-width: 430px) { .file-editor-open-actions, .file-editor-open-actions:has(#fileActionBrowserLink[hidden]) { grid-template-columns: minmax(0, 1fr); } }

/* ---- Standalone markdown page behind the file dialog's View link ---- */
/* The app shell body never scrolls, because its panels scroll instead. This page is one
   long document, so it takes its scrolling back and keeps a readable column. */
body.file-view { overflow: auto; }
.file-view-page { max-width: 900px; margin: 0 auto; padding: 32px 24px 72px; }
.file-view-path { margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 600 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); word-break: break-all; }
@media (max-width: 600px) { .file-view-page { padding: 20px 16px 56px; } }

/* ---- Canvas: several existing conversations at once ---- */
/* Panels are display:none until their body view class shows them; the canvas is a
   desktop surface, so its show rule lives inside the desktop media block only. */
.canvas-view-controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 0;
}
.canvas-view-controls label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.canvas-view-controls select { width: auto; min-width: 150px; padding: 6px 28px 6px 9px; font-size: 12px; }
/* One chip per bound conversation, above the grid, so the keys are discoverable. */
.canvas-shortcut-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 0;
}
.canvas-shortcut-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.canvas-shortcut-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-shortcut-chip kbd {
  flex: none;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--heading-soft);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}
.canvas-shortcut-chip:hover, .canvas-shortcut-chip:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}
.canvas-shortcut-badge {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 3px 6px !important;
  border-radius: 4px;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.canvas-shortcut-subject { margin: 0; color: var(--text); font-size: 13px; font-weight: 600; }
.canvas-page-strip { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); }
#canvasPageTabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
.canvas-page-tab { white-space: nowrap; border: 1px solid var(--line-strong); background: var(--field); color: var(--muted); padding: 4px 9px; font: inherit; }
.canvas-page-tab[aria-selected="true"] { background: var(--panel); color: var(--text); border-color: var(--ink); }
.canvas-page-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.canvas-root {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  /* A fine track grid carries the recursive split geometry; inline grid-area
     styles place every pane and separator on exact shared boundary lines. */
  grid-template-columns: repeat(1000, minmax(0, 1fr));
  grid-template-rows: repeat(1000, minmax(0, 1fr));
  gap: 0;
  padding: 10px;
  overflow: hidden;
  overscroll-behavior: contain;
}
.canvas-root > .canvas-empty { min-width: 0; min-height: 0; grid-row: 1 / -1; grid-column: 1 / -1; }
.canvas-pane {
  position: relative;
  margin-inline: 4px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
  overflow: hidden;
}
.canvas-pane-header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--header);
  overflow-x: auto;
  scrollbar-width: thin;
}
.canvas-pane-title {
  flex: 0 1 auto;
  max-width: 45%;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-pane-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-pane-header button { flex: 0 0 auto; padding: 4px 8px; font-size: 11px; }
.canvas-pane-header .canvas-move { min-width: 24px; padding: 4px 6px; font-size: 10px; line-height: 1; }
.canvas-pane-header .canvas-move:disabled { opacity: 0.35; cursor: default; }
.canvas-pane-body { flex: 1; min-width: 0; min-height: 0; display: flex; }
.canvas-pane-body > iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--bg); }
/* A shortcut jump flashes the pane it landed on, so the eye follows the keystroke. */
.canvas-pane.canvas-revealed { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .canvas-pane { transition: border-color 200ms ease, box-shadow 200ms ease; }
}
/* Focus changes only grid placement and visibility. Every frame stays attached. */
.canvas-root.canvas-focused .canvas-resize,
.canvas-root.canvas-focused .canvas-pane:not(.focused) { display: none; }
.canvas-root.canvas-focused .canvas-pane.focused { min-height: 0; }
.canvas-root.canvas-filtered .canvas-resize,
.canvas-root.canvas-filtered .canvas-move { display: none; }
.canvas-unavailable {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}
.canvas-empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: var(--muted);
}
.canvas-empty h2 { color: var(--text); }
/* Split separators sit on the shared boundary line: the handle starts on the
   line and spills half over each neighbour, so it never occupies layout space. */
.canvas-resize {
  z-index: 4;
  background: transparent;
  touch-action: none;
}
.canvas-resize::after {
  content: "";
  display: block;
  margin: auto;
  border-radius: 2px;
  background: var(--line-strong);
}
.canvas-resize-row {
  width: 12px;
  margin-left: -6px;
  justify-self: start;
  cursor: col-resize;
}
.canvas-resize-row::after { width: 2px; height: calc(100% - 16px); }
.canvas-resize-column {
  height: 12px;
  margin-top: -6px;
  align-self: start;
  cursor: row-resize;
}
.canvas-resize-column::after { height: 2px; width: calc(100% - 16px); }
.canvas-resize:hover::after, .canvas-resize:focus-visible::after { background: var(--accent); }
.canvas-resize:focus-visible { outline: none; }
/* A drag that crosses a pane must not be swallowed by that pane's iframe. */
.canvas-root.canvas-resizing .canvas-pane-body > iframe { pointer-events: none; }
.canvas-picker-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 12px; }
#canvasFinderDialog .dialog-card, #spotlightDialog .dialog-card { width: min(620px, calc(100vw - 24px)); }
.canvas-finder-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(52vh, 420px);
  overflow: auto;
}
.canvas-finder-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.canvas-finder-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.canvas-finder-option kbd { flex: none; color: var(--muted); font-size: 11px; }
.canvas-finder-option:hover, .canvas-finder-option:focus-visible, .canvas-finder-option.active {
  border-color: var(--accent);
  background: var(--field);
}
.canvas-keymap-grid { display: grid; gap: 10px; }
.canvas-keymap-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
/* Recorder fields show a captured chord, never typed text, so they read as keys. */
.canvas-keymap-command input { text-align: center; font-family: inherit; cursor: pointer; }
.canvas-keymap-command input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.canvas-keymap-base { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
#canvasConversationDialog .dialog-card { width: min(720px, calc(100vw - 24px)); }
/* Flex column, not grid: grid tracks shrink to min-content once the list hits
   its max-height, which squashed every row down to its 44px floor and clipped
   the preview text. Flex items with flex:none keep their full height and the
   list scrolls instead. */
.canvas-session-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(420px, 52dvh);
  overflow-y: auto;
  padding: 3px;
}
/* Block layout, not grid: a grid item is blockified, which would turn the
   subtitle's -webkit-box into a plain block and kill its line clamp. */
.canvas-session-option {
  display: block;
  flex: none;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
  color: var(--text);
  text-align: left;
}
/* Titles wrap instead of truncating, and the first message keeps two full lines. */
.canvas-session-option strong {
  display: block;
  margin-bottom: 3px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.canvas-session-option span:not(.list-shortcut-index) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.canvas-session-numbered { position: relative; padding-left: 38px; }
.canvas-session-option:hover, .canvas-session-option:focus-visible { background: var(--field); }
.canvas-picker-empty { margin: 0; color: var(--muted); font-size: 12.5px; }

/* Settings > Cluster: the cluster list on the left, the open cluster on the right. */
#settingsPanel-cluster input, #settingsPanel-cluster select { max-width: 100%; }
#settingsPanel-cluster summary { cursor: pointer; padding: 10px 0; overflow-wrap: anywhere; }
#settingsPanel-cluster summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#settingsPanel-cluster details { min-width: 0; }
#settingsPanel-cluster details > label, .cluster-twin-link label { display: grid; gap: 6px; margin: 8px 0; }
.cluster-muted { margin: 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.cluster-search input { width: 100%; }
.cluster-search-status { min-height: 14px; margin: -2px 0 0; color: var(--muted); font: 11px/1.3 var(--mono); }
.cluster-search-status:empty { display: none; }
.cluster-list-empty { margin: 4px 0; color: var(--muted); font-size: 12.5px; }
.cluster-item-top { display: flex; justify-content: space-between; gap: 8px; min-width: 0; font-size: 14px; }
.cluster-item-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cluster-item-top span { flex: none; color: var(--muted); font-size: 12px; }
.cluster-item-counts { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.cluster-faces { display: flex; flex-wrap: wrap; row-gap: 4px; padding-left: 6px; }
.cluster-faces .cluster-avatar { margin-left: -6px; }
.cluster-list-actions, .cluster-form-actions, .cluster-detail-actions, .cluster-node-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Settings > Cluster: a map of this node, its twins and its clusters, and an inspector for the
   selection. Below 640px of map width the map's buttons flow into a grid and the wires hide. */
.cluster-content { container: cluster / inline-size; }
.cluster-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cluster-search { display: block; flex: 1 1 220px; max-width: 380px; margin: 0; }
.cluster-search input { border-color: var(--line); }
.cluster-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
@container cluster (min-width: 1000px) {
  .cluster-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); align-items: stretch; }
  .cluster-map-pane { grid-template-rows: minmax(0, 1fr) auto; }
}
.cluster-map-pane { container: cluster-map / inline-size; display: grid; gap: 8px; min-width: 0; }
.cluster-map { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; min-width: 0; }
.cluster-map-wires { display: none; }
.cluster-map-wires line { stroke: var(--line-strong); stroke-width: 1.5; }
.cluster-map-wires line[data-kind="twin"] { stroke: var(--claude); stroke-dasharray: 5 4; }
.cluster-map-wires line[data-selected="true"] { stroke: var(--accent); stroke-width: 2; }
.cluster-map-node { display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease; }
.cluster-map-node:hover { border-color: var(--line-strong); }
.cluster-map-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cluster-map-node[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent); }
.cluster-map-local, .cluster-map-twin { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.cluster-map-local { grid-column: 1 / -1; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cluster-map-twin { border-style: dashed; border-color: color-mix(in srgb, var(--claude) 55%, transparent); }
.cluster-map-twin[data-state="offline"] { opacity: 0.7; }
.cluster-map-label { display: grid; min-width: 0; }
.cluster-map-label strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cluster-map-label small { color: var(--muted); font-size: 11.5px; }
.cluster-map .cluster-list-empty { grid-column: 1 / -1; }
.cluster-map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.cluster-map-legend { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 11.5px; }
.cluster-legend-twin { width: 22px; border-top: 2px dashed var(--claude); }
.cluster-legend-star { margin-left: 6px; color: var(--amber); }
.cluster-map-pager { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 12px; }
.cluster-map-pager[hidden] { display: none; }
@container cluster-map (min-width: 640px) {
  .cluster-map { display: block; height: 100%; min-height: clamp(520px, 72cqi, 680px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--panel) 72%); }
  .cluster-map-wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .cluster-map-node { position: absolute; top: var(--y); left: var(--x); width: 184px; transform: translate(-50%, -50%); }
  .cluster-map .cluster-item-top strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
  .cluster-map .cluster-item-counts { font-size: 11px; }
  .cluster-map-local, .cluster-map-twin { width: auto; max-width: 168px; border-radius: 999px; }
  .cluster-map-local { padding: 10px 16px 10px 10px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
  .cluster-map-twin { padding: 6px 12px 6px 6px; background: var(--panel); }
  .cluster-map .cluster-list-empty { position: absolute; bottom: 18px; left: 50%; width: min(80%, 420px); transform: translateX(-50%); text-align: center; }
}
.cluster-inspector { container: cluster-inspector / inline-size; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cluster-detail, .cluster-machine, .cluster-node-view, .cluster-tab-panel { display: grid; align-content: start; gap: 10px; min-width: 0; }
.cluster-detail[hidden], .cluster-machine[hidden], .cluster-node-view[hidden], .cluster-tab-panel[hidden] { display: none; }
.cluster-tabs { justify-self: start; max-width: 100%; }
.cluster-tab-count { margin-left: 3px; color: var(--muted); font: 600 10.5px var(--mono); }
.cluster-tab-count:empty { display: none; }
.cluster-machine-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cluster-machine-head h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.cluster-machine-head .cluster-member-who { justify-items: start; }
.cluster-avatar[data-large="true"] { width: 48px; height: 48px; font-size: 14px; }
.cluster-member-open { min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.cluster-member-open:hover { color: var(--accent); }
.cluster-node-back { justify-self: start; }
.cluster-node-clusters { display: grid; gap: 6px; }
.cluster-node-cluster { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cluster-node-cluster:hover { border-color: var(--line-strong); }
.cluster-node-cluster span { color: var(--muted); font-size: 12px; }
.cluster-machine-form label, #settingsBrowserClusterDefaults label { display: grid; gap: 6px; min-width: 0; }
.cluster-machine-form > button { justify-self: start; }
#settingsBrowserClusterDefaults { display: grid; gap: 10px; }
@container cluster-inspector (max-width: 520px) {
  .cluster-member { grid-template-columns: 34px minmax(0, 1fr); }
  .cluster-member .cluster-node-actions { grid-column: 2 / -1; }
}
.cluster-create-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.cluster-create-row[hidden] { display: none; }
.cluster-create-row p { margin: 0; color: var(--muted); font-size: 12px; }
.cluster-create-row label { display: grid; gap: 6px; min-width: 0; }
/* Avatars: this node filled in, twins ringed in purple, the manager starred. */
.cluster-avatar { position: relative; display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--field); color: var(--text); font: 700 11px var(--mono); }
.cluster-avatar[data-small="true"] { width: 24px; height: 24px; font-size: 9px; }
.cluster-avatar[data-local="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.cluster-avatar[data-twin="true"] { border-color: var(--claude); }
.cluster-avatar[data-match="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 55%, transparent); }
.cluster-avatar-manager { position: absolute; top: -8px; right: -7px; color: var(--amber); font-size: 12px; }
.cluster-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 10px; }
.cluster-detail-head h3 { margin: 0 0 2px; font-size: 18px; overflow-wrap: anywhere; }
.cluster-strip { display: flex; align-items: center; min-width: 0; overflow-x: auto; padding: 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cluster-stop { display: grid; flex: none; justify-items: center; gap: 5px; max-width: 120px; font-size: 12px; text-align: center; }
.cluster-stop-label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cluster-wire { flex: 1 1 28px; min-width: 24px; height: 2px; margin: 0 6px 22px; background: var(--line-strong); }
.cluster-wire[data-twin="true"] { height: 0; border-top: 2px dashed var(--claude); background: none; }
.cluster-section-title { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; color: var(--muted); font: 600 11px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.cluster-members { display: grid; gap: 6px; }
.cluster-member { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.cluster-member[data-match="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.cluster-member-who { display: grid; gap: 2px; min-width: 0; }
.cluster-member-who strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; overflow-wrap: anywhere; }
.cluster-member-who small { overflow: hidden; color: var(--muted); font: 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.cluster-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cluster-badge { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cluster-badge.you { border-color: var(--accent); color: var(--accent); }
.cluster-badge.manager { border-color: var(--amber); color: var(--amber); }
.cluster-badge.twin { border-color: var(--claude); color: var(--claude); }
.cluster-badge.ok { border-color: var(--live); color: var(--live); }
.cluster-badge.error { border-color: var(--danger); color: var(--danger); }
/* Cluster actions read as buttons, as the rest of the page's controls do. */
#settingsPanel-cluster .ghost { border-color: var(--line-strong); }
#settingsPanel-cluster .ghost.danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
#settingsPanel-cluster .ghost.accent { border-color: var(--accent); color: var(--accent); }
.cluster-received, .cluster-sharing { display: grid; align-content: start; gap: 8px; min-width: 0; }
.cluster-owner-groups { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
.cluster-owner-group p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.cluster-owner-group strong { color: var(--text); }
.cluster-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cluster-chip { padding: 5px 10px; border-radius: 8px; background: var(--field); font-size: 12.5px; overflow-wrap: anywhere; }
.cluster-callout { margin: 0; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 12px; }
.cluster-callout strong { color: var(--text); }
.cluster-scope { display: grid; gap: 4px; min-width: 0; }
.cluster-scope-title { margin: 4px 0 0; color: var(--text); font-size: 12.5px; font-weight: 600; }
.cluster-scope-search { display: block; }
.cluster-scope-search input { width: 100%; min-height: 32px; }
.cluster-scroll-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.cluster-scroll-list [hidden], .cluster-scope [hidden] { display: none; }
.cluster-auto-share { color: var(--muted); }
.cluster-sharing > button { justify-self: start; }
.cluster-invite { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.cluster-invite p { margin: 0; color: var(--muted); font-size: 12px; }
.cluster-invite > button { justify-self: start; }
.cluster-requests { display: grid; gap: 8px; margin-bottom: 12px; }
.cluster-requests:empty { display: none; }
.cluster-request { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--claude) 45%, transparent); border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--claude) 7%, transparent); font-size: 13px; }
.cluster-request p { flex: 1 1 240px; margin: 0; }
.cluster-node { flex-wrap: wrap; }
.cluster-node-identity { flex: 1 1 160px; }
.cluster-twin-sync { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 12px; }
.cluster-twin-sharing { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.cluster-twin-sharing:empty { display: none; }
.cluster-twin-link { margin-top: 8px; }
.cluster-twin-link p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }

/* A pane frame is the whole page: the shell collapses to the chat panel alone. */
body.canvas-pane-mode .shell { display: block; height: 100dvh; padding: 0; }
body.canvas-pane-mode #projectsPanel,
body.canvas-pane-mode #chatsPanel,
body.canvas-pane-mode #boardPanel,
body.canvas-pane-mode #canvasPanel,
body.canvas-pane-mode .app-menu,
body.canvas-pane-mode .mobile-nav { display: none !important; }
body.canvas-pane-mode #chatPanel { display: flex !important; height: 100dvh; border: 0; border-radius: 0; }

/* Ticket merge conflict picker: one row per conflict, actions on the right. */
.merge-conflict-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.merge-conflict-row button {
  flex: none;
}
.merge-warning {
  color: var(--danger, #b3261e);
  margin: 0;
}

.engine-defaults, .engine-readiness { display: block; color: var(--muted); font-family: var(--mono); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
/* Three long absolute paths in one run: a bordered block keeps them off the prose above. */
.engine-defaults:not(:empty) { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.engine-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* One harness panel reads top to bottom: node defaults, then that harness's overrides. */
[data-harness-panel] { display: grid; gap: 12px; }
/* The reset button sits in a grid fieldset; keep it at its own width instead of stretching. */
[data-harness-panel] .phase-settings > button { justify-self: start; }
[data-harness-panel][hidden] { display: none; }
[data-harness-panel] .model-options-status:empty { display: none; }
.engine-overrides { display: grid; gap: 10px; }
.engine-overrides summary { cursor: pointer; color: var(--text); font-weight: 600; }
.engine-overrides[open] summary { margin-bottom: 2px; }

/* The workspace search bar: one list of projects and conversations, keyboard first. */
.spotlight-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(56vh, 460px);
  overflow: auto;
}
.spotlight-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  width: 100%;
  padding: 10px 12px;
  padding-left: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.spotlight-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.spotlight-kind {
  grid-row: span 2;
  align-self: center;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.spotlight-subtitle {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}
.spotlight-option:hover, .spotlight-option:focus-visible, .spotlight-option.active {
  border-color: var(--accent);
  background: var(--field);
}

/* The Shortcuts tab in Settings. */
.settings-hint { margin: 0; color: var(--muted); font-size: 12px; }
.canvas-keymap-leader { border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 12px; }
.canvas-keymap-leader h3, .shortcut-conversation-keys h3 { margin: 0 0 6px; color: var(--text); font-size: 13px; }
.canvas-keymap-leader p { margin: 8px 0 6px; }
.canvas-keymap-leader ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.canvas-keymap-leader kbd, .shortcut-conversation-row kbd {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--field);
  color: var(--text);
  font-size: 11px;
}
.shortcut-conversation-keys { border-top: 1px solid var(--line); padding-top: 12px; }
.shortcut-conversation-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.shortcut-conversation-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shortcut-actions { display: flex; justify-content: flex-end; gap: 8px; }

.running-conversations-list { display: grid; grid-auto-rows: max-content; gap: 7px; max-height: 52dvh; overflow-y: auto; padding: 3px; outline: none; }
.running-conversations-group { margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.running-conversations-group:first-child { margin-top: 0; }
.running-conversations-list .session-card { position: relative; width: 100%; text-align: left; padding-left: 38px; }
.running-conversations-list .session-card strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.running-conversations-list .session-card span { -webkit-line-clamp: 1; }

/* Background task history */
.background-tasks-trigger { position: relative; }
/* Tasks is an icon like the other chat actions; focus mode brings the word back. */
.background-tasks-label { display: none; }
.background-tasks-badge { min-width: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--danger); color: white; font-size: .72rem; text-align: center; }
.background-tasks-dialog { padding: 0; }
/* Flex, not the shared grid: a grid stretched the header, overview and footer
   to equal rows and left the task panes squeezed into a sliver. */
.background-tasks-dialog > .background-tasks-card { display: flex; flex-direction: column; width: min(920px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 24px)); max-width: none; max-height: none; overflow: hidden; gap: 0; padding: 0; }
.background-tasks-header, .background-tasks-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.background-tasks-header { border-bottom: 1px solid var(--line); }
.background-tasks-header .icon-button { min-width: 40px; min-height: 40px; }
.background-tasks-header h2 { margin: 1px 0 0; }
.background-tasks-overview { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 48px; padding: 8px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.background-tasks-filter { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.background-tasks-filter select { min-height: 34px; padding: 4px 28px 4px 8px; font-size: 12px; }
.background-tasks-nodes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.background-tasks-node { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; }
.background-tasks-node::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.background-tasks-node.unavailable { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.background-tasks-node.unavailable::before { background: var(--danger); }
.background-tasks-node button { min-height: 30px; padding: 3px 7px; border-radius: 999px; }
.background-tasks-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.4fr); flex: 1 1 auto; min-height: 0; }
.background-tasks-empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 32px; text-align: center; }
.background-tasks-empty-glyph { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--field) 55%, transparent); color: var(--muted); }
.background-tasks-empty h3 { margin: 0; color: var(--text); font-size: 15px; }
.background-tasks-empty p { max-width: 42ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.background-tasks-list { min-height: 0; overflow-y: auto; padding: 8px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--field) 42%, transparent); }
.background-task-row { width: 100%; min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; box-shadow: none; text-align: left; }
.background-task-row:hover { border-color: var(--line); background: var(--surface); }
.background-task-row.selected { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 3px 0 var(--accent); }
.background-task-body { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.background-task-body strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.background-task-meta { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.background-task-status { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.background-task-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.background-task-status.running, .background-task-status.starting { color: var(--live); border-color: color-mix(in srgb, var(--live) 35%, var(--line)); }
.background-task-status.stopping { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); }
.background-task-status.failed, .background-task-status.unknown { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.background-tasks-details { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 18px; }
.background-task-detail-header, .background-task-detail-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.background-task-detail-header h3 { margin: 0; overflow-wrap: anywhere; font-size: 16px; }
.background-task-detail-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.background-task-detail-actions { align-items: center; min-height: 48px; margin: 8px 0 10px; border-bottom: 1px solid var(--line); }
.background-tasks-details button, .background-tasks-footer button { min-height: 40px; }
.background-task-output-label { margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.background-tasks-details pre { flex: 1; min-height: 0; margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--code-line); border-radius: 9px; background: var(--code-bg); color: var(--code-text); font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.background-tasks-footer { min-height: 52px; padding-block: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.background-tasks-dialog [hidden] { display: none !important; }
@media (max-width: 600px) {
  .background-tasks-dialog > .background-tasks-card { width: calc(100vw - 16px); height: calc(100dvh - 16px); margin: 8px auto; }
  .background-tasks-overview { align-items: flex-start; flex-direction: column; }
  .background-tasks-nodes { justify-content: flex-start; }
  .background-tasks-grid { grid-template-columns: 1fr; grid-template-rows: minmax(150px, .7fr) minmax(220px, 1.3fr); }
  .background-tasks-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .background-tasks-details { padding: 14px; }
  .background-tasks-footer > span { display: none; }
}

/* Project file explorer */
.file-explorer-card { width: min(760px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 0; padding: 0; overflow: hidden; }
.file-explorer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 15px; border-bottom: 1px solid var(--line); }
.file-explorer-header h2 { margin: 3px 0 0; font-size: 20px; }
.file-explorer-header .icon-button svg { width: 17px; height: 17px; }
.file-explorer-toolbar { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.file-explorer-up { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.file-explorer-up svg { width: 16px; height: 16px; }
.file-explorer-crumbs { display: flex; align-items: center; min-width: 0; flex: 1; overflow-x: auto; padding: 2px 5px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface); scrollbar-width: none; }
.file-explorer-crumbs::-webkit-scrollbar { display: none; }
.file-explorer-crumb { min-height: 28px; padding: 3px 6px; border: 0; background: transparent; color: var(--muted); font: 600 12px/1.2 var(--mono); white-space: nowrap; }
.file-explorer-crumb:hover, .file-explorer-crumb:last-child { color: var(--text); background: var(--field); }
.file-explorer-crumb-separator { color: var(--muted); opacity: .55; }
.file-explorer-columns, .file-explorer-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 80px; align-items: center; }
.file-explorer-columns { min-height: 31px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.file-explorer-columns span:nth-child(2) { text-align: right; }
.file-explorer-columns span:last-child { text-align: right; }
.file-explorer-list { min-height: 0; margin: 0; overflow-y: auto; padding: 0; list-style: none; background: var(--surface); }
.file-explorer-row { min-height: 42px; padding: 0 8px 0 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.file-explorer-row:hover { background: var(--field); }
.file-explorer-row:focus-within { background: color-mix(in srgb, var(--accent) 8%, var(--field)); box-shadow: inset 2px 0 var(--accent); }
.file-explorer-open { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 40px; padding: 4px 6px; border: 0; background: transparent; color: var(--text); text-align: left; }
.file-explorer-open:hover { background: transparent; }
.file-explorer-open .row-menu-icon { width: 18px; height: 18px; color: var(--muted); opacity: 1; }
.file-explorer-row.is-directory .file-explorer-open .row-menu-icon { color: var(--accent); }
.file-explorer-name { overflow: hidden; font-size: 13px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.file-explorer-size { padding-right: 12px; color: var(--muted); font: 500 11px/1.2 var(--mono); text-align: right; white-space: nowrap; }
.file-explorer-actions { display: flex; justify-content: flex-end; gap: 3px; }
.file-explorer-action { min-width: 31px; width: 31px; min-height: 31px; padding: 0; }
.file-explorer-action .row-menu-icon { width: 15px; height: 15px; }
.file-explorer-status { min-height: 39px; margin: 0 !important; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel); font: 500 11px/1.5 var(--mono) !important; }
@media (max-width: 600px) {
  .file-explorer-card { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .file-explorer-header { padding: 14px; }
  .file-explorer-toolbar { padding-inline: 8px; }
  .file-explorer-up span { display: none; }
  .file-explorer-columns, .file-explorer-row { grid-template-columns: minmax(0, 1fr) 72px; }
  .file-explorer-columns span:nth-child(2), .file-explorer-size { display: none; }
}

/* Git review panel */
.git-review-card { width: calc(100vw - 48px); max-width: none; height: calc(100dvh - 48px); max-height: calc(100dvh - 24px); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto; gap: 0; padding: 0; overflow: hidden; }
.git-review-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.git-review-header h2 { margin: 2px 0 0; font-size: 20px; }
.git-review-header .icon-button svg { width: 17px; height: 17px; }
.git-review-branch { margin: 4px 0 0; color: var(--muted); font: 600 12px/1.3 var(--mono); }
.git-review-tabs { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); background: var(--panel); }
.git-review-tab { min-height: 34px; padding: 6px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 650; }
.git-review-tab:hover { color: var(--text); }
.git-review-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.git-review-ambiguity { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); color: var(--muted); font-size: 12px; line-height: 1.5; }
.git-review-toolbar { display: flex; flex-direction: column; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 12px; }
.git-review-toolbar-row { display: flex; align-items: end; flex-wrap: wrap; gap: 8px 14px; }
.git-review-toolbar-row > label { display: flex; align-items: center; gap: 6px; min-height: 34px; color: var(--text); white-space: nowrap; }
.git-review-toolbar-row > label input { flex: none; width: 16px; height: 16px; padding: 0; accent-color: var(--ink); }
.git-review-reviewer { gap: 8px 14px; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--panel); font-size: 12px; }
.git-review-reviewer .git-review-ask-controls { flex: 1 1 360px; }
.git-review-reviewer .git-review-ask-controls label { flex: 1 1 0; min-width: 0; }
.git-review-reviewer select { min-height: 34px; padding: 6px 30px 6px 10px; background-position: right 10px center; }
.git-review-body { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); min-height: 0; }
.git-review-list { min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); background: var(--surface); padding: 6px 0; }
.git-review-group-title { margin: 6px 12px 3px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.git-review-file, .git-review-commit, .git-review-thread-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--text); text-align: left; }
.git-review-file { flex-direction: row; align-items: center; gap: 8px; }
.git-review-file:hover, .git-review-commit:hover, .git-review-thread-row:hover { background: var(--field); }
.git-review-file.is-active, .git-review-commit.is-active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--field)); }
.git-review-kind { flex: none; min-width: 62px; padding: 2px 6px; border-radius: var(--radius-ctl); font: 600 10px/1.4 var(--mono); text-transform: uppercase; text-align: center; background: var(--field); color: var(--muted); }
.git-review-kind.is-added, .git-review-kind.is-untracked { background: color-mix(in srgb, #3fb950 22%, transparent); color: color-mix(in srgb, #3fb950 90%, var(--text)); }
.git-review-kind.is-deleted { background: color-mix(in srgb, #f85149 22%, transparent); color: color-mix(in srgb, #f85149 90%, var(--text)); }
.git-review-kind.is-modified, .git-review-kind.is-type_changed { background: color-mix(in srgb, #d29922 24%, transparent); color: color-mix(in srgb, #d29922 92%, var(--text)); }
.git-review-kind.is-unmerged { background: color-mix(in srgb, #f85149 30%, transparent); color: #fff; }
.git-review-file-name { overflow: hidden; font: 500 12px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.git-review-commit-subject, .git-review-thread-question { font-size: 13px; font-weight: 600; }
.git-review-commit-meta, .git-review-thread-meta { color: var(--muted); font: 500 11px/1.3 var(--mono); }
.git-review-loading { display: grid; gap: 10px; padding: 16px; color: var(--muted); font-size: 13px; }
.git-review-loading-head { display: flex; align-items: center; gap: 10px; color: var(--text); }
.git-review-spinner { flex: none; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: git-review-spin 0.8s linear infinite; }
.git-review-skeleton { display: block; height: 12px; border-radius: var(--radius-ctl); background: linear-gradient(90deg, var(--field) 0%, color-mix(in srgb, var(--accent) 14%, var(--field)) 50%, var(--field) 100%); background-size: 200% 100%; animation: git-review-shimmer 1.4s ease-in-out infinite; }
.git-review-skeleton:nth-child(odd) { width: 72%; }
@keyframes git-review-spin { to { transform: rotate(360deg); } }
@keyframes git-review-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .git-review-spinner, .git-review-skeleton { animation: none; } }
.git-review-empty { padding: 16px; color: var(--muted); font-size: 13px; }
.git-review-detail { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.git-review-diff-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.git-review-diff-path { margin: 0; overflow: hidden; font: 600 12px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.git-review-detail-content { min-height: 0; overflow-y: auto; }
.git-review-diff { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-content: start; min-height: 0; margin: 0; overflow: auto; padding: 8px 0; background: var(--surface); font: 500 12px/1.5 var(--mono); tab-size: 2; }
.git-review-guide { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px; line-height: 1.45; }
.git-review-guide h3, .git-review-guide h4 { margin: 0 0 6px; }
.git-review-guide p { margin: 6px 0; }
.git-review-guide ol { list-style: none; max-height: 140px; overflow-y: auto; margin: 10px 0; padding: 0; }
.git-review-guide-step { display: block; width: 100%; padding: 6px 8px; border: 0; background: transparent; color: var(--text); text-align: left; }
.git-review-guide-step[aria-current="step"] { background: var(--field); border-left: 2px solid var(--accent); }
.git-review-guide-detail { padding-top: 10px; border-top: 1px solid var(--line); }
.git-review-guide-navigation { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.git-diff-row { display: contents; }
.git-diff-cell { padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.git-diff-cell.is-number { min-width: 3ch; color: var(--muted); text-align: right; user-select: none; }
.git-diff-cell.is-code + .git-diff-cell.is-number { border-left: 1px solid var(--line); }
.git-diff-cell.is-add { background: color-mix(in srgb, #3fb950 16%, transparent); }
.git-diff-cell.is-del { background: color-mix(in srgb, #f85149 16%, transparent); }
.git-diff-cell.is-empty { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.git-diff-note { grid-column: 1 / -1; padding: 2px 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.git-diff-note.is-hunk { margin-top: 6px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.git-review-status { min-height: 36px; margin: 0 !important; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--panel); font: 500 11px/1.5 var(--mono) !important; }
.git-review-ask { display: flex; flex-direction: column; gap: 8px; max-height: 46dvh; min-height: 0; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
.git-review-ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.git-review-ask-head .icon-button svg { width: 15px; height: 15px; }
.git-review-ask-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.git-review-ask-controls label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 120px; font-size: 11px; color: var(--muted); }
.git-review-thread { display: flex; flex-direction: column; gap: 8px; }
.git-review-message { padding: 8px 10px; border-radius: var(--radius-ctl); font-size: 13px; line-height: 1.5; }
.git-review-message.is-user { background: var(--field); }
.git-review-message.is-assistant { background: var(--surface); border: 1px solid var(--line); }
.git-review-ask textarea { width: 100%; resize: vertical; }
.git-review-ask-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.git-review-ask-note { color: var(--muted); font-size: 11px; }
@media (max-width: 700px) {
  .git-review-card { width: calc(100vw - 16px); height: calc(100dvh - 16px); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto; }
  .git-review-toolbar { max-height: 150px; overflow-y: auto; }
  .git-review-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 40%) minmax(0, 1fr); }
  .git-review-list { border-right: 0; border-bottom: 1px solid var(--line); }
}

.git-review-card.is-hosting { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.git-review-card.is-story-bare { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; }
.git-review-card.is-hosting .git-review-reviewer, .git-review-toolbar[hidden], .git-review-body[hidden], .git-hosting[hidden] { display: none; }
.git-hosting { min-height: 0; overflow-y: auto; padding: 18px 20px; background: var(--surface); }
.git-hosting-title { margin: 0 0 8px; font-size: 20px; }
.git-hosting-note { display: block; margin: 4px 0 12px; color: var(--muted); font: 11px/1.5 var(--mono); overflow-wrap: anywhere; }
.git-hosting-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0; }
.git-hosting-search { flex: 1; min-width: 180px; }
.git-hosting-select, .git-hosting-search { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); color: var(--text); background: var(--panel); }
.git-hosting-filter { padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); color: var(--muted); }
.git-hosting-filter.is-active { color: var(--text); border-color: var(--accent); }
.git-hosting-rows { border: 1px solid var(--line); border-radius: var(--radius-ctl); overflow: hidden; }
.git-hosting-row { display: flex; align-items: start; gap: 12px; width: 100%; min-height: 68px; padding: 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--text); text-align: left; }
.git-hosting-row:last-child { border-bottom: 0; }
.git-hosting-row:hover, .git-hosting-step:hover { background: var(--field); }
.git-hosting-row[hidden] { display: none; }
.git-hosting-indicator { color: #3fb950; font-size: 18px; }
.git-hosting-indicator.is-failed { color: #f85149; }
.git-hosting-row-copy { min-width: 0; }
.git-hosting-row-copy strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.git-hosting-empty, .git-hosting-message { padding: 14px; color: var(--muted); font-size: 13px; }
.git-hosting-empty[hidden] { display: none; }
.git-hosting-back { border: 0; padding: 0 0 14px; background: transparent; color: var(--accent); font-size: 13px; }
.git-hosting-description { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.git-hosting-section { margin: 16px 0; border-top: 1px solid var(--line); }
.git-hosting-section h4, .git-hosting-graph h4, .git-hosting-job h4 { margin: 14px 0; font-size: 14px; }
.git-hosting-comment { padding: 11px; border-bottom: 1px solid var(--line); font-size: 12px; }
.git-hosting-comment p { white-space: pre-wrap; line-height: 1.5; }
.git-hosting-file { padding: 10px; border-bottom: 1px solid var(--line); font: 12px var(--mono); }
.git-hosting-file summary { cursor: pointer; overflow-wrap: anywhere; }
.git-hosting-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.git-hosting-draft { flex-basis: 100%; min-height: 75px; padding: 10px; resize: vertical; }
.git-hosting-workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; }
.git-hosting-job-nav { border-right: 1px solid var(--line); }
.git-hosting-nav-job, .git-hosting-graph-job, .git-hosting-step { display: block; width: 100%; border: 0; background: transparent; color: var(--text); text-align: left; font-size: 12px; padding: 8px; }
.git-hosting-nav-job.is-active, .git-hosting-graph-job.is-active { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
.git-hosting-graph { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.git-hosting-graph-body { position: relative; display: flex; align-items: center; gap: 28px; min-height: 180px; }
.git-hosting-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.git-hosting-edges path { fill: none; stroke: var(--accent); stroke-width: 2; }
.git-hosting-graph-column { position: relative; z-index: 1; display: grid; flex: 1; min-width: 0; gap: 12px; }
.git-hosting-graph-group { border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); padding: 10px; min-width: 0; }
.git-hosting-graph-group strong, .git-hosting-graph-group small { display: block; font-size: 11px; overflow-wrap: anywhere; }
.git-hosting-graph-group small { color: var(--muted); margin-top: 4px; }
.git-hosting-job { margin-top: 16px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.git-hosting-step { border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.git-hosting-log { max-height: 300px; overflow: auto; padding: 12px; font: 11px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel); }
@media (max-width: 700px) {
  .git-review-card { width: calc(100vw - 16px); height: calc(100dvh - 16px); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto; }
  .git-review-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; padding: 0 6px; }
  .git-review-tab { grid-column: span 2; padding: 6px 2px; font-size: 11px; }
  .git-review-tab:nth-child(n+4) { grid-column: span 3; }
  .git-review-toolbar { max-height: 150px; overflow-y: auto; }
  .git-review-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 40%) minmax(0, 1fr); }
  .git-hosting { padding: 12px; }
  .git-hosting-workspace { display: block; }
  .git-hosting-job-nav { display: none; }
  .git-hosting-graph-body { display: grid; gap: 22px; }
  .git-hosting-graph-column { width: 100%; }
  .git-hosting-row { padding: 13px 10px; }
  .git-review-list { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---- Skills & tools inventory (Settings → Resources) ---- */
/* The lists page instead of scrolling: the panel is a fixed column, each list takes the
   height left over, and resources.js sizes pages to it. */
.settings-panel.resources-panel { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.resources-panel > * { flex: none; }
.resources-panel > .resources-page, .resources-panel > .resources-add, .resources-panel > .resources-paths { flex: 1 1 0; min-height: 0; }
.resources-panel > [hidden] { display: none; }
.resources-panel > .settings-hint { margin: 0; }
.resources-page { overflow: hidden; align-content: start; }
.resources-add { display: flex; flex-direction: column; gap: 10px; }
.resources-add > * { flex: none; }
.resources-add > .resources-page { flex: 1 1 0; min-height: 0; }
.resources-paths { display: grid; gap: 12px; align-content: start; overflow-y: auto; scrollbar-width: thin; }
.resources-toolbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.resources-toolbar > [hidden] { display: none; }
.resources-toolbar .search-shell { margin: 0; }
.resources-toolbar .search-shell input { border-color: var(--line); }
/* The share dialog scrolls between its title and its buttons, never past either. */
.skill-share-card .dialog-actions { position: sticky; bottom: -22px; margin-bottom: -22px; padding: 10px 0 22px; background: var(--surface); }
.resources-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.resources-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); padding: 6px 10px; }
.resources-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.resources-list { display: grid; gap: 4px; min-width: 0; }
.resources-subheading { margin: 6px 0 0; font-size: 13px; }
.resources-row { display: grid; gap: 3px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 6px 12px; }
.resources-row strong { font-size: 12.5px; font-family: var(--mono); overflow-wrap: anywhere; }
.resources-row .skill-option-description { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resources-check-body { display: grid; gap: 3px; min-width: 0; }
.resources-row .compact { min-height: 26px; padding: 0 8px; }
.resources-check-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; }
.resources-check-row:has(input:disabled) { cursor: default; opacity: 0.7; }
.resources-harnesses { display: flex; flex-wrap: wrap; gap: 4px; }
.resources-badge { font: 600 9px/1 var(--mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; white-space: nowrap; }
.resources-badge.active, .resources-badge.status-new { color: var(--accent); border-color: var(--accent); }
.resources-badge.status-changed { color: var(--warning, #d9a441); border-color: currentColor; }
.resources-badge.off { color: var(--danger, #d9534f); border-color: currentColor; }
.resources-node { display: flex; justify-content: space-between; gap: 8px; padding: 8px 2px 2px; font-size: 12px; color: var(--muted); }
.resources-node strong { color: var(--text); }
.resources-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.resources-sources:empty { display: none; }
.resources-status:empty { display: none; }
.resources-list > * { min-width: 0; }
.resources-list .model-shortcuts-empty { white-space: normal; overflow-wrap: anywhere; }
.resources-row-actions { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.resources-row-actions > small { min-width: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.resources-row-actions > button { flex: none; }
.resources-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.resources-row-head input { width: 16px; height: 16px; min-width: auto; margin: 0; flex: none; accent-color: var(--ink); }
.resources-share-bar { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 8px 12px; background: var(--surface); }
.resources-share-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.resources-share-line > span { flex: 1 1 180px; font-size: 12px; color: var(--muted); }
.resources-share-line > details { flex-basis: 100%; }
.resources-target-members { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.resources-conversation-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
@media (max-width: 640px) { .resources-conversation-picker { grid-template-columns: 1fr; } }
.resources-pager { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.resources-peer-status summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.resources-status { margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  /* Phones keep every row's controls and drop what repeats elsewhere, so a page holds more rows. */
  .resources-panel > #resourcesSummary { display: none; }
  .resources-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .resources-toolbar .search-shell { grid-column: 1 / 3; }
  .resources-tabs { overflow-x: auto; scrollbar-width: none; }
  .resources-tabs button { white-space: nowrap; padding: 6px 8px; }
  .resources-row .resources-badge.harness, .resources-row-actions > small { display: none; }
  .resources-share-line > span { flex-basis: 100%; }
}

/* ---- Git view: Story tab ----
   The dialog itself never scrolls; lists page to the height they get and any remaining
   overflow scrolls inside its own panel. Rules sit under .git-story because the dialog
   card's paragraph rule would otherwise win over single-class selectors. */
.git-story, .git-diff-dialog { --gs-info: #2f7fc1; --gs-add: #3fb950; --gs-del: #f85149; }
:root[data-theme="dark"] :is(.git-story, .git-diff-dialog) { --gs-info: #478ecb; }
.git-story[hidden] { display: none; }
.git-story { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; overflow: hidden; background: var(--surface); }
.git-story p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.git-story .gs-state { display: grid; place-items: center; grid-row: 1 / -1; min-height: 0; padding: 24px; overflow-y: auto; }
.git-story .git-review-loading { width: min(560px, 100%); }
.git-story .gs-state-card { width: min(640px, 100%); padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13.5px; line-height: 1.55; }
.git-story .gs-state-card h3 { margin: 0 0 6px; font-size: 18px; }
.git-story .gs-state-card > p { margin: 0 0 12px; color: var(--muted); }
.git-story .gs-state-card.is-error { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.git-story .gs-state-card.is-error h3 { color: var(--danger); }
.git-story .gs-state-card .git-review-loading-head h3 { margin: 0; }
.git-story .gs-state-note { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.git-story .gs-state-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.git-story .gs-progress { display: inline-block; flex: none; width: 140px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.git-story .gs-progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }
.git-story .gs-progress-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.git-story .gs-progress-row .gs-progress { flex: 1; width: auto; }
.git-story .gs-progress-list { display: grid; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; }
.git-story .gs-progress-list li { display: flex; gap: 8px; }
.git-story .gs-progress-list li > span { width: 14px; text-align: center; }
.git-story .gs-progress-list li.is-done { color: var(--text); }
.git-story .gs-progress-list li.is-done > span { color: var(--accent); }
.git-story .gs-banner.is-writing { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.git-story .gs-banner.is-writing .git-review-spinner { flex: none; }
.git-story .gs-rail-num .git-review-spinner { width: 10px; height: 10px; }
.git-story .gs-parts { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.git-story .gs-parts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.git-story .gs-muted { color: var(--muted); }
.git-story .gs-small { font-size: 11.5px; }
.git-story .gs-min { min-width: 0; }
.git-story .gs-row { display: flex; gap: 6px; }
.git-story .gs-ellipsis { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-label { margin: 0 0 4px; color: var(--muted); font: 700 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.git-story .gs-gap { margin-top: 10px; }
.git-story .gs-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.git-story .gs-link:hover { text-decoration-color: var(--accent); }
.git-story .gs-boxed { background: var(--field); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.git-story .gs-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; background: var(--field); color: var(--muted); font: 700 10px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.git-story .gs-pill.is-accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.git-story .gs-pill.is-amber { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.git-story .gs-pill.is-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.git-story .gs-pill.is-info { background: color-mix(in srgb, var(--gs-info) 18%, transparent); color: var(--gs-info); }
.git-story .gs-where { flex: none; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); font: 600 10.5px/1.5 var(--mono); white-space: nowrap; }
.git-story .gs-where.is-pending { border-style: dashed; color: var(--amber); }
.git-story .gs-add { color: var(--gs-add); }
.git-story .gs-del { color: var(--gs-del); }
.git-story .gs-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--amber) 12%, var(--panel)); font-size: 12.5px; }
.git-story .gs-banner b { color: var(--amber); }
.git-story .gs-spacer { flex: 1; }
.git-story .gs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 18px 9px; border-bottom: 1px solid var(--line); background: var(--panel); }
.git-story .gs-head > .gs-state-actions { grid-column: 1 / -1; margin: 6px 0 0; }
.git-story .gs-state-actions input { min-width: 180px; max-width: 100%; }
.git-story .gs-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.git-story .gs-title h3 { margin: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-actions { display: flex; grid-row: span 2; align-items: center; gap: 8px; }
.git-story .gs-facts { overflow: hidden; color: var(--muted); font: 500 11.5px/1.5 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-facts b { color: var(--text); font-weight: 600; }
.git-story .gs-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; }
.git-story .gs-rail { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 10px 8px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); }
.git-story .gs-rail-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; padding: 8px; border: 0; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; background: transparent; color: var(--text); text-align: left; }
.git-story .gs-rail-item:hover { background: var(--field); }
.git-story .gs-rail-item[aria-selected="true"] { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--field)); }
.git-story .gs-rail-num { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font: 700 11px var(--mono); }
.git-story .gs-rail-item[aria-selected="true"] .gs-rail-num { border-color: var(--accent); color: var(--accent); }
.git-story .gs-rail-item b { display: block; font-size: 13px; }
.git-story .gs-rail-item small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.git-story .gs-rail-foot { margin-top: auto; padding: 10px 8px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.git-story .gs-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 14px 18px 12px; overflow-y: auto; }
.git-story .gs-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.git-story .gs-section-head h4 { margin: 0; font-size: 15px; }
.git-story .gs-hint { color: var(--muted); font-size: 12px; }
.git-story .gs-explain { display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: 12px; }
.git-story .gs-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); font-size: 13px; line-height: 1.5; }
.git-story .gs-card ul { margin: 0; padding-left: 16px; }
.git-story .gs-unchanged { margin-top: -4px; color: var(--muted); font-size: 12px; }
.git-story .gs-diagram { position: relative; flex: 1 1 auto; min-height: 230px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); overflow: hidden; }
.git-story .gs-diagram.is-compact { flex: 1 1 0; min-height: 124px; max-height: 300px; }
.git-story .gs-canvas { position: absolute; inset: 0 0 26px 0; }
.git-story .gs-canvas svg { display: block; width: 100%; height: 100%; }
.git-story .gs-legend { position: absolute; right: 10px; bottom: 5px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 10.5px/1.6 var(--mono); }
.git-story .gs-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.git-story .gs-legend > span > span { color: var(--muted); }
.git-story .gs-legend i { display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 3px; }
.git-story .gs-legend .is-dashed i { border-style: dashed; }
.git-story .gs-lane { fill: transparent; }
.git-story .gs-lane.is-odd { fill: color-mix(in srgb, var(--field) 55%, transparent); }
.git-story .gs-lane-line { stroke: var(--line); }
.git-story .gs-lane-label { fill: var(--muted); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.git-story .gs-node { cursor: pointer; transition: opacity 160ms ease; }
.git-story .gs-node:focus { outline: none; }
.git-story .gs-node rect.box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.git-story .gs-node rect.bar { fill: var(--muted); }
.git-story .gs-node text.t { fill: var(--text); font: 650 12px var(--sans); }
.git-story .gs-node text.s { fill: var(--muted); font: 500 10px var(--mono); }
.git-story .gs-node:hover rect.box, .git-story .gs-node:focus-visible rect.box, .git-story .gs-node.is-open rect.box { stroke: var(--accent); stroke-width: 2; }
.git-story .gs-node.k-action rect.bar { fill: var(--accent); }
.git-story .gs-node.k-decision rect.bar { fill: var(--amber); }
.git-story .gs-node.k-model rect.bar { fill: var(--claude); }
.git-story .gs-node.k-store rect.bar { fill: var(--gs-info); }
.git-story .gs-node.k-source rect.box { stroke-dasharray: 4 3; }
.git-story .gs-node.k-source rect.bar { fill: transparent; }
.git-story .gs-node.k-error rect.bar { fill: var(--danger); }
.git-story .gs-edge { fill: none; stroke: color-mix(in srgb, var(--muted) 70%, transparent); stroke-width: 1.4; transition: opacity 160ms ease; }
.git-story .gs-edge.is-dashed { stroke-dasharray: 5 4; }
.git-story .gs-edge.is-bad { stroke: color-mix(in srgb, var(--danger) 75%, transparent); }
.git-story .gs-edge-label rect { fill: var(--panel); stroke: var(--line); }
.git-story .gs-edge-label text { fill: var(--muted); font: 600 10px var(--mono); }
.git-story .gs-edge-label.is-bad text { fill: var(--danger); }
.git-story .gs-arrow { fill: color-mix(in srgb, var(--muted) 85%, transparent); }
.git-story .gs-arrow.is-bad { fill: var(--danger); }
.git-story .gs-arrow.is-lit { fill: var(--accent); }
.git-story svg.is-tracing :is(.gs-node, .gs-edge, .gs-edge-label) { opacity: .22; }
.git-story svg.is-tracing :is(.is-visited, .is-current) { opacity: 1; }
.git-story .gs-node.is-visited rect.box { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.6; }
.git-story .gs-node.is-current rect.box { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); stroke: var(--accent); stroke-width: 2.4; }
.git-story .gs-edge.is-visited { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.8; }
.git-story .gs-edge.is-current { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 7 5; animation: gs-march 900ms linear infinite; }
@keyframes gs-march { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .git-story .gs-edge.is-current { animation: none; } }
.git-story .gs-pop { position: absolute; z-index: 3; width: 340px; max-height: calc(100% - 16px); padding: 12px 14px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow); font-size: 12.5px; line-height: 1.5; }
.git-story .gs-pop header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.git-story .gs-pop h5 { margin: 0; font-size: 14px; }
.git-story .gs-pop > p { margin: 6px 0 8px; }
.git-story .gs-pop .icon-button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; }
.git-story .gs-file-line { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.git-story .gs-file-line code { flex: 1; min-width: 0; overflow: hidden; font: 500 11.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-paged { display: flex; flex-direction: column; min-height: 0; }
.git-story .gs-paged-rows { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.git-story .gs-pager { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding-top: 6px; color: var(--muted); font: 500 11px var(--mono); }
.git-story .gs-pager .ghost { min-height: 28px; padding: 0 10px; font-size: 12px; }
.git-story .gs-strip { flex: none; height: 74px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); }
.git-story .gs-strip svg { display: block; width: 100%; height: 100%; }
.git-story .gs-strip .axis { stroke: var(--line-strong); stroke-width: 2; }
.git-story .gs-strip .span { fill: color-mix(in srgb, var(--accent) 10%, transparent); cursor: pointer; }
.git-story .gs-strip .span.is-active { fill: color-mix(in srgb, var(--accent) 24%, transparent); }
.git-story .gs-strip .turn-hit { cursor: pointer; }
.git-story .gs-strip .turn { fill: var(--surface); stroke: var(--muted); stroke-width: 1.6; }
.git-story .gs-strip .turn.is-active { fill: var(--accent); stroke: var(--accent); }
.git-story .gs-strip .turn-n { fill: var(--muted); font: 600 10px var(--mono); }
.git-story .gs-strip .bar { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.git-story .gs-strip .commit { fill: var(--gs-info); }
.git-story .gs-strip .pivot { fill: var(--amber); }
.git-story .gs-strip .cap { fill: var(--muted); font: 500 10px var(--mono); }
.git-story .gs-convo { display: grid; flex: 1 1 auto; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; min-height: 260px; }
.git-story .gs-phase-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; height: 58px; margin-bottom: 4px; padding: 6px 10px; border: 0; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; background: transparent; color: var(--text); text-align: left; }
.git-story .gs-phase-row:hover { background: var(--field); }
.git-story .gs-phase-row.is-active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--field)); }
.git-story .gs-phase-row.is-quiet { opacity: .72; }
.git-story .gs-phase-when { color: var(--muted); font: 600 10.5px/1.35 var(--mono); }
.git-story .gs-phase-title { display: block; overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-phase-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; overflow: hidden; white-space: nowrap; }
.git-story .gs-phase-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-content: start; min-height: 0; padding: 12px 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); font-size: 13px; }
.git-story .gs-phase-detail h5 { display: flex; flex-wrap: wrap; grid-column: 1 / -1; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 14px; }
.git-story .gs-phase-detail ul { margin: 0; padding-left: 16px; }
.git-story .gs-phase-detail li + li { margin-top: 3px; }
.git-story .gs-asked { padding: 7px 10px; border-left: 2px solid var(--line-strong); border-radius: 0 8px 8px 0; background: var(--field); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.git-story .gs-pivot { grid-column: 1 / -1; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--amber) 9%, transparent); font-size: 12.5px; }
.git-story .gs-pivot b { color: var(--amber); }
.git-story .gs-detail-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 8px; padding-top: 4px; }
.git-story .gs-examples { display: grid; flex: none; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; }
.git-story .gs-scenario-row { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 100%; height: 50px; margin-bottom: 4px; padding: 5px 10px; border: 0; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; background: transparent; color: var(--text); text-align: left; }
.git-story .gs-scenario-row:hover { background: var(--field); }
.git-story .gs-scenario-row.is-active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--field)); }
.git-story .gs-scenario-row b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-scenario { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.git-story .gs-scenario-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.git-story .gs-scenario-head h5 { margin: 0; font-size: 14px; }
.git-story .gs-scenario-start { color: var(--muted); font-size: 12.5px; }
.git-story .gs-steps { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; }
.git-story .gs-step { display: flex; flex-direction: column; gap: 4px; min-height: 80px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); color: var(--text); font-size: 12.5px; line-height: 1.45; text-align: left; }
.git-story .gs-step:hover { border-color: var(--line-strong); }
.git-story .gs-step.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.git-story .gs-step.is-done { opacity: .8; }
.git-story .gs-step-n { color: var(--muted); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.git-story .gs-who { display: inline-block; min-width: 30px; margin-right: 4px; color: var(--muted); font: 700 10px var(--mono); text-transform: uppercase; }
.git-story .gs-who.is-app { color: var(--accent); }
.git-story .gs-says { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 12.5px; }
.git-story .gs-says > span:first-child { flex: none; color: var(--muted); font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.git-story .gs-says q { font: 12px var(--mono); quotes: '"' '"'; }
.git-story .gs-scenario-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.git-story .gs-result { font-size: 12.5px; }
.git-story .gs-result b { color: var(--accent); }
.git-story .gs-subtabs { display: flex; flex-wrap: wrap; gap: 4px; }
.git-story .gs-subtab { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.git-story .gs-subtab[aria-selected="true"] { border-color: var(--line-strong); background: var(--field); color: var(--text); }
.git-story .gs-count { margin-left: 4px; color: var(--muted); font: 600 11px var(--mono); }
.git-story .gs-impl { flex: 1 1 auto; min-height: 200px; }
.git-story .gs-group-row { display: flex; align-items: end; gap: 8px; height: 28px; padding: 0 10px 4px; color: var(--muted); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.git-story .gs-group-row small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.git-story .gs-file-row { display: grid; grid-template-columns: 70px minmax(180px, 320px) minmax(0, 1fr) 92px auto 70px; gap: 10px; align-items: center; height: 40px; padding: 0 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.git-story .gs-file-row:hover, .git-story .gs-check-row:hover { background: var(--field); }
.git-story .gs-file-row code { overflow: hidden; font: 500 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-what { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-stat { font: 600 11.5px var(--mono); text-align: right; white-space: nowrap; }
.git-story .gs-wheres { display: flex; gap: 4px; }
.git-story .gs-decisions { display: grid; gap: 10px; }
.git-story .gs-decision { display: flex; flex-direction: column; gap: 4px; height: 128px; padding: 10px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); font-size: 12.5px; line-height: 1.45; }
.git-story .gs-decision h5 { margin: 0; font-size: 13.5px; }
.git-story .gs-instead { color: var(--muted); }
.git-story .gs-decision footer { margin-top: auto; }
.git-story .gs-check-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(160px, 320px); gap: 12px; align-items: center; height: 44px; padding: 0 10px; border-top: 1px solid var(--line); font-size: 13px; }
.git-story .gs-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-picker { display: flex; grid-row: 1 / -1; flex-direction: column; gap: 12px; min-height: 0; padding: 14px 18px 12px; overflow: hidden; }
.git-story .gs-picker .gs-section-head { flex-wrap: nowrap; align-items: start; }
.git-story .gs-picker .gs-section-head p { margin-top: 2px; font-size: 12.5px; }
.git-story .gs-pick-list { flex: 1 1 auto; min-height: 120px; }
.git-story .gs-pick-type { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; }
.git-story .gs-pick-type input { flex: 1 1 260px; min-width: 0; font-family: var(--mono); font-size: 12.5px; }
.git-story .gs-pick-type p { flex-basis: 100%; margin: 0; }
.git-story .gs-pick-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center; height: 42px; padding: 0 10px; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.git-story .gs-pick-row:not(.is-push) { grid-template-columns: 18px auto minmax(0, 1fr) minmax(120px, 220px); }
.git-story .gs-pick-row.is-push { height: 58px; }
.git-story .gs-pick-row:hover { background: var(--field); }
.git-story .gs-pick-row:has(input:checked) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.git-story .gs-pick-row:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.git-story .gs-pick-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.git-story .gs-pick-title, .git-story .gs-pick-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-story .gs-pick-sub { margin-top: 3px; color: var(--muted); font-size: 12px; }
.git-story .gs-pick-foot { display: flex; flex: none; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.git-story .gs-pick-foot > .gs-min { flex: 1; font-family: var(--mono); font-size: 11.5px; }
.git-story .gs-commit-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.git-review-tab .gs-tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.git-review-tab .gs-tab-dot.is-outdated { background: var(--amber); }
.git-review-tab .gs-tab-dot[hidden] { display: none; }
#messages .message.gs-flash { outline: 2px solid var(--accent); outline-offset: 4px; transition: outline-color 600ms ease; }

/* Side-by-side diff over the Git view; only its body scrolls. */
.git-diff-card { width: calc(100vw - 72px); max-width: none; height: calc(100dvh - 72px); grid-template-rows: auto auto minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.git-diff-heading { min-width: 0; }
.git-diff-heading h2 { margin: 2px 0 0; overflow-wrap: anywhere; font: 600 15px/1.35 var(--mono); }
.git-diff-columns { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.git-diff-body { min-height: 0; overflow: auto; background: var(--surface); }
.git-diff-body .git-diff-section-title { position: sticky; top: 0; z-index: 1; margin: 0; padding: 7px 16px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 12px var(--mono); }
.git-diff-body .git-diff-section { overflow: visible; }

@media (max-width: 980px) {
  .git-story .gs-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .git-story .gs-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .git-story .gs-rail-item { width: auto; min-width: 150px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; }
  .git-story .gs-rail-item[aria-selected="true"] { border-bottom-color: var(--accent); }
  .git-story .gs-rail-foot { display: none; }
  .git-story :is(.gs-explain, .gs-convo, .gs-examples, .gs-phase-detail) { grid-template-columns: minmax(0, 1fr); }
  .git-story .gs-file-row { grid-template-columns: 70px minmax(0, 1fr) 92px 70px; }
  .git-story .gs-file-row :is(.gs-what, .gs-wheres) { display: none; }
  .git-story .gs-steps { grid-auto-flow: row; }
  .git-diff-card { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
}

/* ---- Worktrees ---- */
[data-worktree-color="slate"] { --worktree-hue: #7b8794; }
[data-worktree-color="teal"] { --worktree-hue: #2bb8a3; }
[data-worktree-color="blue"] { --worktree-hue: #4a86e8; }
[data-worktree-color="violet"] { --worktree-hue: #8a6ef0; }
[data-worktree-color="magenta"] { --worktree-hue: #d264b6; }
[data-worktree-color="amber"] { --worktree-hue: #e0a33a; }
[data-worktree-color="green"] { --worktree-hue: #46b35e; }
[data-worktree-color="red"] { --worktree-hue: #e05c4b; }
.worktree-subsection-title { display: flex; align-items: center; gap: 8px; margin: 10px 2px 4px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.worktree-subsection-title:first-child { margin-top: 2px; }
.worktree-subsection-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.worktree-add-button { order: 1; padding: 2px 8px; min-height: 0; font-size: 12px; letter-spacing: normal; text-transform: none; }
.worktree-section-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 2px; border-left: 3px solid var(--worktree-hue); border-radius: 6px; background: color-mix(in srgb, var(--worktree-hue) 12%, transparent); }
.worktree-cleanup-note { flex-basis: 100%; padding: 0 8px 6px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.other-worktrees > summary { padding: 6px 2px; color: var(--muted); font-size: 12px; cursor: pointer; }
.other-worktrees > p { margin: 4px 2px; color: var(--muted); font-size: 11px; }
.worktree-section-toggle { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; min-height: 30px; padding: 4px 8px; border: 0; background: none; color: var(--heading); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.worktree-section-caret { width: 10px; flex: none; color: var(--muted); }
.worktree-section-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worktree-section-count { flex: none; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--worktree-hue) 25%, transparent); color: var(--muted); font-size: 10.5px; font-weight: 500; }
.worktree-section-menu { min-width: 28px; width: 28px; min-height: 26px; margin-right: 4px; font-size: 12.5px; }
.worktree-glyph { width: 11px; height: 11px; flex: none; color: var(--worktree-hue); }
/* A worktree conversation carries its worktree's hue on the right edge, so it stays
   distinguishable from the conversation's own colour bar on the left. */
.session-card[data-worktree-color] { box-shadow: inset -3px 0 0 var(--worktree-hue); background: color-mix(in srgb, var(--worktree-hue) 8%, transparent); }
.session-card[data-worktree-color]:hover { background: color-mix(in srgb, var(--worktree-hue) 18%, var(--field)); }
.session-card[data-worktree-color].active { box-shadow: inset -4px 0 0 var(--worktree-hue), var(--raise); background: color-mix(in srgb, var(--worktree-hue) 22%, var(--surface)); }
.session-card[data-color][data-worktree-color] { box-shadow: inset 3px 0 0 var(--project-hue), inset -3px 0 0 var(--worktree-hue); }
.session-card[data-color][data-worktree-color].active { box-shadow: inset 4px 0 0 var(--project-hue), inset -4px 0 0 var(--worktree-hue), var(--raise); }
.session-worktree-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; border-radius: 4px; padding: 2px 6px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; color: var(--heading); background: color-mix(in srgb, var(--worktree-hue) 22%, transparent); }

/* Shown at once on hover in place of the slow native title tooltip (quick-tooltips.js). */
.quick-tooltip { position: fixed; z-index: 1000; max-width: 280px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--header); color: var(--text); font-size: 12px; line-height: 1.35; box-shadow: var(--shadow-soft); pointer-events: none; }
.quick-tooltip[hidden] { display: none; }

/* ---- Relays: Settings → Relay (serving) and Settings → Cluster → Relays (memberships) ---- */
/* The Relay panel is a fixed column like Resources: each list takes the height left over and
   relay-ui.js sizes its pages to it, so the lists page instead of scrolling. Only the serving
   form, which is not a list, may scroll on a short screen. */
.settings-panel.relay-panel { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.relay-panel > * { flex: none; }
.relay-panel > .relay-section { flex: 1 1 0; min-height: 0; }
.relay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.relay-head .settings-hint { flex: 1; }
.relay-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); font-size: 12.5px; }
.relay-summary code, .relay-address { font: 11.5px var(--mono); overflow-wrap: anywhere; }
.relay-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.relay-section > * { flex: none; }
.relay-section > .relay-list { flex: 1 1 0; min-height: 0; }
.relay-form-section { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 3px; }
.relay-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.relay-form input { width: 100%; }
.relay-token-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: end; }
.relay-token-form input { width: 100%; }
.relay-list { display: grid; gap: 6px; align-content: start; overflow: hidden; min-width: 0; }
.relay-pager { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.relay-inline-status { margin: 0; }
.relay-inline-status:empty { display: none; }
.relay-inline-status[data-state="error"] { color: var(--danger); }
.relay-inline-status[data-state="ok"] { color: var(--live); }
.relay-empty { margin: 4px 0; color: var(--muted); font-size: 12.5px; }
.relay-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); }
.relay-row-compact { padding: 5px 12px; }
.relay-row-main { display: grid; flex: 1; gap: 3px; min-width: 0; }
.relay-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.relay-row-name { font-size: 13.5px; overflow-wrap: anywhere; }
.relay-row-meta { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.relay-row-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.relay-row-actions .primary.compact { min-height: 34px; }
.relay-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.relay-dot[data-online="true"] { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.relay-code { padding: 2px 0; color: var(--text); font: 600 26px/1.1 var(--mono); letter-spacing: 0.16em; }
.relay-rename { display: flex; align-items: center; gap: 6px; }
.relay-rename input { min-height: 32px; }
.relay-check-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.relay-check-list:empty { display: none; }
.relay-check-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; }
.relay-check-row[data-ok="true"] .relay-check-mark { color: var(--live); }
.relay-check-row[data-ok="false"] .relay-check-mark, .relay-check-error { color: var(--danger); }
.relay-check-error { font-size: 12px; overflow-wrap: anywhere; }
.relay-reveal { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.relay-reveal button { justify-self: start; }
.relay-reveal input { width: 100%; font-family: var(--mono); }
.relay-panel .ghost { border-color: var(--line-strong); }
.relay-panel .ghost.danger, .relays-section .ghost.danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.relay-panel .ghost.danger[data-armed="true"], .relays-section .ghost.danger[data-armed="true"] { background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* Cluster → Relays: one card per relay, three to a page. */
.relays-section { display: grid; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.relays-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.relays-head h3 { margin: 0 0 2px; font-size: 15px; }
.relays-add-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.relays-add-choice { display: grid; align-content: start; gap: 8px; min-width: 0; }
.relays-list { display: grid; gap: 8px; }
.relay-card { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); }
.relay-card-title { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.relay-card .relay-row-actions { justify-content: flex-start; }
.relay-error { margin: 0; color: var(--danger); font-size: 12.5px; overflow-wrap: anywhere; }
.relay-switch { display: grid; gap: 4px; }
.relay-phone-access { display: grid; gap: 4px; min-width: 0; }
.relay-phone-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.relay-phone-entry-label { min-width: 9ch; font-size: 12.5px; font-weight: 600; }
.relay-phone-entry-link { color: var(--accent); font: 11.5px var(--mono); overflow-wrap: anywhere; }
.relay-phone-qr { display: grid; justify-items: center; gap: 4px; margin: 0; }
.relay-phone-qr svg { width: 192px; height: 192px; }
.relay-phone-pager { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  .relays-add-choices, .relay-token-form { grid-template-columns: minmax(0, 1fr); }
  .relay-row { flex-wrap: wrap; }
  .relay-row-actions { justify-content: flex-start; }
}