/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.27_@babel+core@7.29.7_@types+node@22.20.5_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.27_@babel+core@7.29.7_@types+node@22.20.5_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/globals.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Batons theming: the design tokens are CSS custom properties on :root.
 * The values below are the Aurora Light defaults (mirrored from the
 * aurora-light theme in lib/themes.ts, the single source of truth); the
 * ThemeProvider (client) overwrites them from the selected theme's token
 * set.
 */
:root {
  --background: rgb(244, 246, 251);
  --surface: rgb(255, 255, 255);
  --surface-hover: rgb(233, 237, 246);
  --border: rgb(216, 222, 235);
  --text: rgb(26, 34, 51);
  --text-muted: rgb(91, 101, 119);
  --primary: rgb(79, 70, 229);
  --primary-text: rgb(255, 255, 255);
  --accent: rgb(8, 145, 178);
  --success: rgb(21, 128, 61);
  --danger: rgb(185, 28, 28);
  --warning: rgb(180, 83, 9);
  /* Chat-history panel transparency: visible share of the panel background
     (the rest is transparent, so the cortex layer shows faintly behind the
     bubbles). Theme-level: both themes follow automatically. No UI control
     yet — Colton decides where it lives. Tunable: one line below. */
  --chat-bubble-opacity: 65%;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--background);
  color: var(--text);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 0.25rem;
}

h2 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

/* ---- Shell layout ---------------------------------------------------- */

/* The shell owns the full viewport height: the top bar is a fixed-height
   row, and the sidebar + main row fills the rest. `main` scrolls its own
   content (the chat page fills it exactly, so it shows no scrollbar there —
   the chat's history scrolls instead). */
.shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.shell-body {
  flex: 1 1;
  display: flex;
  min-height: 0;
}

.sidebar {
  position: relative;
  z-index: 1;
  flex: none;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 220px;
  overflow-y: auto;
  transition: width 0.15s ease;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed .nav-label {
  display: none;
}

.main {
  flex: 1 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* F7c: the page scroller gets the app's themed scrollbar (same pattern as
   .agent-chat-log): theme tokens only, both themes follow automatically. */
.main::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.main::-webkit-scrollbar-track {
  background: transparent;
}

.main::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}

.main::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* The chat page is edge-to-edge (no `main` padding); the other pages keep
   theirs. */
.main.main--chat {
  padding: 0;
}

/* The full-bleed chat page: exactly `main`'s height, so `main` shows no
   scrollbar on it (the chat's own history scrolls). `overflow: hidden`
   clips the parked (closed) info panel, which would otherwise extend
   `main`'s scrollable area and create a horizontal scrollbar. */
.chat-page {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ---- Cortex (slice 4f) ------------------------------------------------ */

/* The 3D brain's background layer, absolute inside `.chat-page` (F22h):
   it centers in the CONTENT area, not the viewport (no bleed under the
   top bar/sidebar). Behind the chat (`.chat-page` sits at z-index 1),
   never interactive, and the low-opacity readability guardrail. */
.cortex-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
}

/* R3F's Canvas renders a wrapper div with an INLINE `pointer-events: auto`
   (it can't know the layer is decorative), which would re-enable the
   full-viewport hit area and swallow every click. Force it back off. */
.cortex-layer div {
  pointer-events: none !important;
}

/* F22c-1 org mode: the hierarchy IS the interface — the canvas becomes the
   interactive layer (click a brain -> chat) and reads bright; the chat page
   underneath stops swallowing the clicks (its chrome is hidden anyway). */
.cortex-layer--org {
  pointer-events: auto;
  opacity: 0.9;
}
.cortex-layer--org div {
  pointer-events: auto !important;
}
.chat-page--org {
  pointer-events: none;
}

/* F22c-fix: the title/name label under each tree brain (drei Html overlay).
   The org-mode rule above force-enables pointer-events on every div in the
   layer — the label is decoration, so it opts back out (higher specificity
   keeps the !important). */
.cortex-layer--org div.cortex-tree-label,
.cortex-layer--org div.cortex-tree-label-wrap {
  pointer-events: none !important;
}
.cortex-tree-label {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
  opacity: 0.85;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* F35d: examine mode — the brain is the star. Bright + interactive (the
   canvas wrapper's inline pointer-events:auto is re-enabled), the chat
   body is hidden, and the chat container stops swallowing the brain's
   clicks (only the header/badge + the stat panels stay interactive). */
.chat-page--examine .cortex-layer { opacity: 0.9; }
.chat-page--examine .cortex-layer div { pointer-events: auto !important; }
.chat-page--examine .agent-chat-log,
.chat-page--examine .agent-chat-input-area { display: none; }
.chat-page--examine .agent-chat { pointer-events: none; }
.chat-page--examine .agent-chat-header { pointer-events: auto; }

/* ---- F35c-2: the admin-only cortex debug panel -------------------------- */

/* Bottom-left overlay on the examine brain (a sibling of .cortex-layer
   inside .chat-page). Themed with the surface/border/text/primary tokens;
   above the cortex layer (z-index 0) and the chat content (z-index 1). */
.cortex-debug-panel {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 5;
  width: min(340px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--text);
  font-size: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}
.cortex-debug-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
}
.cortex-debug-panel--collapsed .cortex-debug-panel-header {
  padding: 0.15rem 0.5rem;
}
.cortex-debug-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.15rem 0.2rem;
}
.cortex-debug-panel-toggle:hover {
  color: var(--primary);
}
.cortex-debug-panel-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0 0.6rem 0.6rem;
  border-top: 1px solid var(--border);
}
.cortex-debug-panel-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0;
}
.cortex-debug-panel-actions button {
  font-size: 11px;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.cortex-debug-panel-actions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.cortex-debug-maturity {
  padding: 0.3rem 0 0.5rem;
  border-bottom: 1px solid var(--border);
}
.cortex-debug-maturity h3 {
  margin: 0.2rem 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
}
.cortex-debug-agent-ref {
  margin: 0.1rem 0;
  font-style: italic;
  opacity: 0.8;
}
.cortex-debug-effects {
  margin-top: 0.35rem;
  display: grid;
  grid-gap: 0.1rem;
  gap: 0.1rem;
}
.cortex-debug-note {
  opacity: 0.7;
  font-style: italic;
}
.cortex-debug-group {
  border-bottom: 1px solid var(--border);
  padding: 0.2rem 0;
}
.cortex-debug-group summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.15rem 0;
}
.cortex-debug-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.15rem 0;
}
.cortex-debug-control > span:first-child {
  flex: 1 1;
}
.cortex-debug-control input[type="range"] {
  width: 45%;
  accent-color: var(--primary);
}
.cortex-debug-control input[type="color"] {
  width: 2rem;
  height: 1.2rem;
  padding: 0;
  border: 1px solid var(--border);
  background: none;
}
.cortex-debug-control select {
  max-width: 55%;
  font-size: 11px;
}
.cortex-debug-value {
  min-width: 3rem;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.cortex-debug-reference {
  width: 100%;
  border-collapse: collapse;
  margin: 0.25rem 0;
}
.cortex-debug-reference th,
.cortex-debug-reference td {
  text-align: left;
  padding: 0.12rem 0.3rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cortex-debug-reference th {
  font-weight: 600;
}

/* ---- F22e: the Hierarchy page 3D view + view-mode radio ------------------ */

/* The 3D hierarchy as the page's PRIMARY content: the Cortex layer is a
   fixed full-viewport background on the chat page; here it is scoped to
   this section so the flat table below stays reachable by scrolling. */
.hierarchy-3d {
  position: relative;
  height: min(68vh, 760px);
  min-height: 420px;
  overflow: hidden;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}
.hierarchy-3d .cortex-layer {
  position: absolute;
}
.hierarchy-3d .chat-page {
  height: 100%;
}

/* The Examine/Chat radio selector inside the 3D view (top-right, clear of
   the brains). The org-mode chat page is pointer-events:none — the control
   opts back in. */
.view-mode-radio {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 7;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--text);
  font-size: 0.85rem;
}
.view-mode-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.view-mode-radio-option--selected {
  font-weight: 600;
}

/* The badge menu's Examine/Chat radio pair: a dot marks the currently
   selected view mode. */
.agent-badge-menu-item--selected {
  font-weight: 600;
}
.agent-badge-menu-radio {
  width: 0.65rem;
  height: 0.65rem;
  margin-left: auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
}
.agent-badge-menu-radio--on {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
}

/* Keeps the wizard's chat view above the cortex layer (same guardrail as
   `.chat-page`'s z-index). */
.wizard-chat {
  position: relative;
  z-index: 1;
}

/* ---- Top bar --------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar .brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text);
  background: none;
  border: none;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

.topbar .brand:hover {
  background: var(--surface-hover);
}

.topbar .brand span {
  color: var(--primary);
}

.topbar .spacer {
  flex: 1 1;
}

.topbar .user {
  position: relative;
  display: flex;
  align-items: center;
}

/* The active org's name, shown to the right of the brand. */
.topbar .topbar-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--border);
}

.topbar .topbar-org {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
}

.topbar .topbar-org:hover {
  background: var(--surface-hover);
  color: var(--primary);
  text-decoration: none;
}

.topbar .topbar-org:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Circular avatar: the first letter of the display name; opens the menu. */
.avatar {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar:hover {
  background: var(--surface-hover);
}

.avatar:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Dropdown menu under the avatar. */
.menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 50;
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.2rem;
}

.menu-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.menu-item:hover,
.menu-item:focus {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
  outline: none;
}

.menu-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.menu-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.menu-item .icon {
  flex: none;
  color: var(--text-muted);
}

/* ---- Sidebar --------------------------------------------------------- */

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
}

.nav-item:hover {
  background: var(--surface-hover);
  text-decoration: none;
  color: var(--text);
}

.nav-item.active {
  background: var(--surface-hover);
  color: var(--text);
  font-weight: 600;
}

.nav-item.active .icon {
  color: var(--primary);
}

.nav-item .icon {
  flex: none;
  color: var(--text-muted);
}

/* A disabled nav item (e.g. no top agent) — muted and not clickable. */
.nav-item.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nav-item.disabled:hover {
  background: none;
  color: var(--text-muted);
}

/* Nested settings section: the expandable parent (a button styled as a nav
   item) + its indented sub-items + the chevron that rotates when open. */
button.nav-item {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-parent .chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.nav-parent .chevron.open {
  transform: rotate(90deg);
}

.nav-child {
  padding-left: 2.1rem;
  font-size: 0.9rem;
}

/* Settings lives in a separated bottom group; the auto margin pushes it
   to the bottom of the sidebar. */
.nav-bottom {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* ---- Cards, tables, forms ------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th,
td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tr:last-child td {
  border-bottom: none;
}

.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  align-items: end;
}

.form .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

input,
select,
textarea {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text);
}

textarea {
  resize: vertical;
  min-height: 3.5rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* A form field label directly above a control: block-level so the label and
   its input STACK vertically and the fields align. <label> is inline by
   default, which left the label and input sharing one line — so "Name",
   "Email", "Password" (different widths) pushed their inputs to different
   x-positions. Opt-in per label (the .form .field grid already flex-columns
   its labels; labels with their own layout class are untouched). */
.form-label {
  display: block;
}

/* ---- Buttons --------------------------------------------------------- */

button,
.btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

button:hover:not(:disabled),
.btn:hover {
  background: var(--surface-hover);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button.primary,
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

button.primary:hover:not(:disabled),
.btn.primary:hover {
  filter: brightness(1.08);
  background: var(--primary);
}

button.danger,
.btn.danger {
  color: var(--danger);
  border-color: var(--danger);
}

button.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

/* ---- Badges ---------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
}

.badge.owner {
  color: var(--primary-text);
  background: var(--primary);
  border-color: var(--primary);
}

.badge.admin {
  color: var(--accent);
  border-color: var(--accent);
}

.badge.viewer {
  color: var(--text-muted);
}

.badge.active {
  color: var(--success);
  border-color: var(--success);
}

.badge.invited {
  color: var(--warning);
  border-color: var(--warning);
}

.badge.archived {
  color: var(--text-muted);
}

/* ---- Home ------------------------------------------------------------ */

.welcome {
  margin-bottom: 1.5rem;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.quick-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: var(--text);
  font-weight: 600;
}

.quick-link:hover {
  background: var(--surface-hover);
  text-decoration: none;
  border-color: var(--primary);
}

/* ---- Settings / themes ----------------------------------------------- */

.theme-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.theme-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  background: var(--surface);
  text-align: left;
  font: inherit;
}

.theme-card:hover {
  background: var(--surface-hover);
}

.theme-card.selected {
  border-color: var(--primary);
}

.theme-card .swatches {
  display: flex;
  gap: 0.35rem;
  margin: 0.75rem 0;
}

.theme-card .swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.theme-card .meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.theme-card .name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

/* ---- Tabs ------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.tab {
  padding: 0.5rem 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: none;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}

.tab:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.tab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ---- Login ----------------------------------------------------------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
}

.login-card .stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.login-card .stack label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.login-error {
  color: var(--danger);
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

.login-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---- Chat ------------------------------------------------------------ */

.chat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.9rem;
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 420px;
  overflow-y: auto;
  padding: 0.25rem;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 82%;
}

.chat-msg.user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-msg.assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-role {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.chat-bubble {
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-msg.user .chat-bubble {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.chat-input {
  display: flex;
  gap: 0.5rem;
}

.chat-input input {
  flex: 1 1;
}

/* ---- Agent chat (slice 4a) -------------------------------------------- */

.agent-chat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 0.9rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}

/* The full variant (the platform's main chat client): no border/box, fills
   its parent — the info bar is locked to the top (bottom border), the
   history fills the middle (flex:1, overflow-y auto, min-height 0), and the
   input is locked to the very bottom (top border). */
.agent-chat--full {
  flex: 1 1;
  min-width: 0;
  height: 100%;
  gap: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  /* Positioning context for the F22a bottom-center restore overlay. */
  position: relative;
  /* F22h: explicit layer above the Cortex (z-index 0) now that the Cortex
     is a sibling INSIDE .chat-page. */
  z-index: 1;
  /* Transparent: the cortex brain sits BEHIND the chat (readability
     guardrail — the message bubbles keep their opaque backgrounds). */
  background: transparent;
}

.agent-chat--full .agent-chat-header {
  background: var(--surface);
  padding: 0.7rem 1rem;
}

.agent-chat--full .agent-chat-log {
  min-height: 0;
  max-height: none;
  padding: 1rem;
}

.agent-chat--full .agent-chat-input-area {
  background: var(--surface);
  padding: 0.7rem 1rem;
}

/* ---- F22a: badge menu + Toggle UI (chrome hide/restore) ----------------- */

/* The badge (menu trigger): styled like the plain avatar. It is the ONLY
   top-bar control that stays visible when the chrome is hidden — the menu
   is the escape hatch. */
.agent-badge {
  position: relative;
  flex: none;
}

.agent-badge-trigger {
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  background: var(--primary);
  color: var(--primary-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.agent-badge-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}

.agent-badge-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 40;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 22%, transparent);
}

.agent-badge-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.agent-badge-menu-item:hover:not(:disabled) {
  background: var(--surface-hover);
}

.agent-badge-menu-item:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.agent-badge-menu-note {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Chrome hide/restore (~250ms ease). Transform + visibility ONLY — the log
   keeps its size, so the page never reflows/scrollbars. The `visibility`
   transition delay lets the slide play before the element disappears; on
   restore (class removed) the base rule flips visibility back instantly and
   the slide plays in reverse. */
.agent-chat--full .agent-chat-msg,
.agent-chat--full .agent-chat-sysnote,
.agent-chat--full .agent-chat-gate,
.agent-chat--full .agent-chat-input-area {
  transition:
    transform 0.25s ease,
    visibility 0s linear 0s;
}

.agent-chat--full .chrome-slide-left {
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}

.agent-chat--full .chrome-slide-right {
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}

.agent-chat--full .chrome-slide-down {
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}

/* Top bar: everything fades out EXCEPT the badge. */
.agent-chat-header > * {
  transition: opacity 0.25s ease;
}

.agent-chat--chrome-hidden .agent-chat-header > :not(.agent-badge) {
  opacity: 0;
  pointer-events: none;
}

/* The bar itself visually disappears too (no background, no border) — only
   the badge remains, floating over the chat. */
.agent-chat--chrome-hidden .agent-chat-header {
  background: transparent;
  border-bottom-color: transparent;
}

/* Bottom-center (a little up from the bottom): `<title> <name>` in larger
   text + the Zoom Out stub (F22c enables the button in place). */
.agent-chat-restore {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  animation: agent-chat-restore-in 0.25s ease;
}

.agent-chat-restore-name {
  font-size: 1.7rem;
  font-weight: 650;
  color: var(--text);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--text) 25%, transparent);
}

.agent-chat-zoom-out {
  padding: 0.45rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: not-allowed;
}

@keyframes agent-chat-restore-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The info-panel toggle at the right end of the full variant's header. */
.agent-chat-panel-toggle {
  flex: none;
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.agent-chat-panel-toggle:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.agent-chat-panel-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
}

/* ---- F22b: examine mode — the stat panels slide out of the page edges ---- */

/* The overlay covers the chat but only the panels take pointer input, so
   the brain + badge stay usable. */
.examine-panels {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.examine-col {
  position: absolute;
  top: 3.4rem;
  bottom: 0.8rem;
  width: min(375px, 39vw);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden auto;
  scrollbar-width: thin;
}

.examine-col--left {
  left: 0.6rem;
}

.examine-col--right {
  right: 0.6rem;
}

/* One compact panel: icon + label header, dense key/value rows. Same
   250ms transform + visibility transition pattern as the F22a chrome. */
.examine-panel {
  pointer-events: auto;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  font-size: 0.72rem;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0s;
}

/* Chat mode: the panels rest off-screen, slid back out of the edge they
   came from (visibility flips late so the slide plays on hide). */
.examine-panel--left {
  transform: translateX(-130%);
  visibility: hidden;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}

.examine-panel--right {
  transform: translateX(130%);
  visibility: hidden;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}

.agent-chat--examine .examine-panel--left,
.agent-chat--examine .examine-panel--right {
  transform: none;
  visibility: visible;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0s;
}

.examine-panel-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.examine-panel-icon {
  font-size: 0.85rem;
}

.examine-panel-rows {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
}

.examine-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  /* F22h: positioning context for the per-stat tooltip bubble. */
  position: relative;
  /* F35b: hover highlight + single selection; the negative margin cancels
     the padding so content stays aligned while the highlight bleeds out. */
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  margin: 0 -0.3rem;
  border-radius: 4px;
  transition: background 0.12s ease;
}

.examine-row:hover {
  background: var(--surface-hover);
}

.examine-row--selected {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.examine-row dt {
  color: var(--text-muted);
}

.examine-row dd {
  margin: 0;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}

/* F22h — per-stat tooltips: the same CSS-only ::after pattern as the chat
   tool buttons, sourced from data-tooltip (no native title: delayed +
   OS-styled). The bubble sits above the row, capped ~220px wide. */
.examine-row[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  white-space: normal;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.68rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.examine-row[data-tooltip]:hover::after {
  opacity: 1;
}

/* F22f — a Trends row: the sparkline beside its headline value. */
.examine-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* F22g — the Memory fact-types row: a stacked bar beside the counts. */
.examine-facttypes {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.examine-facttypes-bar {
  display: flex;
  width: 5rem;
  height: 0.45rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.examine-facttypes-seg {
  height: 100%;
  background: var(--accent);
}

.examine-facttypes-seg--0 {
  opacity: 1;
}

.examine-facttypes-seg--1 {
  opacity: 0.6;
}

.examine-facttypes-seg--2 {
  opacity: 0.3;
}

.agent-chat-panel-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* The disabled state (full variant): a centered muted note, input hidden. */
.agent-chat-disabled-note {
  margin: auto;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.agent-chat-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.agent-chat-avatar {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-text);
  font-weight: 700;
  font-size: 0.95rem;
}

.agent-chat-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.agent-chat-name {
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.agent-chat-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--success);
}

.agent-chat-status-dot.busy {
  background: var(--warning);
  animation: agent-chat-pulse 1.1s ease-in-out infinite;
}

@keyframes agent-chat-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.agent-chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1 1;
  min-height: 220px;
  max-height: 480px;
  overflow-y: auto;
  /* F22a: messages slide out horizontally when the chrome hides — the log
     must never grow a horizontal scrollbar (no reflow). */
  overflow-x: hidden;
  padding: 0.35rem 0.25rem;
}

.agent-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  min-width: 0;
}

.agent-chat-msg.user {
  align-self: flex-end;
  align-items: flex-end;
}

.agent-chat-msg.assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.agent-chat-bubble {
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) var(--chat-bubble-opacity), transparent);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* User bubble uses the SAME scheme as the assistant bubble in both themes —
   the only remaining human-vs-agent distinction is right/left alignment. */
.agent-chat-msg.user .agent-chat-bubble {
  background: color-mix(in srgb, var(--background) var(--chat-bubble-opacity), transparent);
  border-color: var(--border);
  color: var(--text);
}

/* Markdown content (assistant AND user messages) */

.agent-chat-md {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.agent-chat-md > :first-child {
  margin-top: 0;
}

.agent-chat-md > :last-child {
  margin-bottom: 0;
}

.agent-chat-md p {
  margin: 0;
  color: inherit;
}

.agent-chat-md h1,
.agent-chat-md h2,
.agent-chat-md h3,
.agent-chat-md h4 {
  margin: 0.25rem 0 0;
  color: inherit;
  line-height: 1.3;
}

.agent-chat-md h1 {
  font-size: 1.25rem;
}

.agent-chat-md h2 {
  font-size: 1.1rem;
}

.agent-chat-md h3 {
  font-size: 1rem;
}

.agent-chat-md h4 {
  font-size: 0.95rem;
}

.agent-chat-md ul,
.agent-chat-md ol {
  margin: 0;
  padding-left: 1.2rem;
}

.agent-chat-md li {
  margin: 0.2rem 0;
}

.agent-chat-md a {
  color: var(--accent);
}

.agent-chat-md a:hover {
  text-decoration: underline;
}

/* Links inside the (primary-colored) user bubble stay visible */

.agent-chat-msg.user .agent-chat-md a {
  color: inherit;
}

.agent-chat-md code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 0.85em;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.1rem 0.35rem;
}

.agent-chat-msg.user .agent-chat-md code {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.25);
}

.agent-chat-pre {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.85rem;
}

.agent-chat-pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

.agent-chat-msg.user .agent-chat-pre {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.25);
}

.agent-chat-img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.agent-chat-msg.user .agent-chat-img {
  border-color: rgb(255 255 255 / 0.3);
}

.agent-chat-md table {
  border-collapse: collapse;
  font-size: 0.88rem;
}

.agent-chat-md th,
.agent-chat-md td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.55rem;
}

.agent-chat-md th {
  background: var(--surface-hover);
  font-weight: 600;
}

.agent-chat-msg.user .agent-chat-md th {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.3);
}

.agent-chat-msg.user .agent-chat-md td {
  border-color: rgb(255 255 255 / 0.3);
}

.agent-chat-md blockquote {
  margin: 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}

.agent-chat-msg.user .agent-chat-md blockquote {
  border-left-color: rgb(255 255 255 / 0.4);
  color: inherit;
}

.agent-chat-md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.25rem 0;
}

/* Mermaid diagrams (lazy-loaded) */

.agent-chat-mermaid {
  display: grid;
  place-items: center;
  margin: 0.25rem 0;
  padding: 0.5rem;
  overflow-x: auto;
}

.agent-chat-mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Thinking indicator (busy) */

.agent-chat-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.agent-chat-thinking-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.agent-chat-dots {
  display: inline-flex;
  gap: 0.25rem;
}

.agent-chat-dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--text-muted);
  animation: agent-chat-blink 1.2s infinite ease-in-out;
}

.agent-chat-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.agent-chat-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes agent-chat-blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* Collapsible reasoning ("thinking") block (slice 4f) — the in-progress
   assistant message's reasoning, visually subordinate to the reply bubble:
   smaller, muted, monospace-ish, with a left accent border. */

.agent-chat-reasoning {
  align-self: stretch;
  max-width: 100%;
  margin-bottom: 0.35rem;
  padding: 0.4rem 0.65rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--surface-hover) var(--chat-bubble-opacity), transparent);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.agent-chat-reasoning-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  color: var(--accent);
}

/* The live 20-line tail (auto-scrolled to the bottom). */
.agent-chat-reasoning-window {
  max-height: 22rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* The collapsed single-line toggle ("Thought for Ns — …"). */
.agent-chat-reasoning-toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.agent-chat-reasoning-toggle:hover {
  background: none;
  color: var(--text);
}

.agent-chat-reasoning-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* The expanded full reasoning (no auto-scroll). */
.agent-chat-reasoning-full {
  margin-top: 0.35rem;
  max-height: 16rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Input row (structured so 4c can add buttons to the left of the textarea) */

.agent-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.agent-chat-input {
  flex: 1 1;
  resize: none;
  min-height: 2.4rem;
  max-height: 120px;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.agent-chat-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.agent-chat-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Themed scrollbars (log + input), via theme tokens only */

.agent-chat-log,
.agent-chat-input {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.agent-chat-log::-webkit-scrollbar,
.agent-chat-input::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.agent-chat-log::-webkit-scrollbar-track,
.agent-chat-input::-webkit-scrollbar-track {
  background: transparent;
}

.agent-chat-log::-webkit-scrollbar-thumb,
.agent-chat-input::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}

.agent-chat-log::-webkit-scrollbar-thumb:hover,
.agent-chat-input::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.agent-chat-send {
  flex: none;
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.agent-chat-send:hover:not(:disabled) {
  transform: translateY(-1px);
}

.agent-chat-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.agent-chat-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Rich chat input (slice 4c-2) ------------------------------------- */

/* Wrapper that anchors the popovers (emoji, /commands) above the input row. */
.agent-chat-input-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

/* Tool buttons (emoji, attach) left of the textarea. */
.agent-chat-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
}

.agent-chat-tool {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.agent-chat-tool:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text);
}

.agent-chat-tool.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
}

.agent-chat-tool:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.agent-chat-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* CSS-only tooltips sourced from the buttons' existing aria-labels. */
.agent-chat-tool::after,
.agent-chat-panel-toggle::after,
.agent-chat-send::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.72rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.agent-chat-tool:hover::after,
.agent-chat-tool:focus-visible::after,
.agent-chat-panel-toggle:hover::after,
.agent-chat-panel-toggle:focus-visible::after,
.agent-chat-send:hover::after,
.agent-chat-send:focus-visible::after {
  opacity: 1;
}

.agent-chat-file-input {
  display: none;
}

/* Emoji popover (above the tools, inside the component). */
.agent-chat-emoji-pop {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 30;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 22%, transparent);
}

.agent-chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 2.1rem);
  grid-gap: 0.15rem;
  gap: 0.15rem;
  max-height: 11rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.agent-chat-emoji-grid::-webkit-scrollbar {
  width: 8px;
}

.agent-chat-emoji-grid::-webkit-scrollbar-track {
  background: transparent;
}

.agent-chat-emoji-grid::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}

.agent-chat-emoji-grid::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.agent-chat-emoji {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-emoji:hover {
  background: var(--surface-hover);
}

.agent-chat-emoji:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary);
}

/* /commands menu (above the input, filtered as the user types). */
.agent-chat-commands {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 22%, transparent);
  max-height: 12rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.agent-chat-commands::-webkit-scrollbar {
  width: 8px;
}

.agent-chat-commands::-webkit-scrollbar-track {
  background: transparent;
}

.agent-chat-commands::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}

.agent-chat-commands::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.agent-chat-command {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
}

.agent-chat-command.selected {
  background: var(--surface-hover);
}

.agent-chat-command-name {
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--primary);
  white-space: nowrap;
}

.agent-chat-command-desc {
  font-size: 0.83rem;
  color: var(--text-muted);
  min-width: 0;
}

/* Pending-image preview strip above the textarea. */
.agent-chat-pending {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.1rem;
  overflow-x: auto;
}

.agent-chat-pending-item {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
}

.agent-chat-pending-thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: block;
}

.agent-chat-pending-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-pending-remove:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--primary-text);
}

/* Inline notice for attachment problems (too large / too many). */
.agent-chat-notice {
  margin: 0;
  font-size: 0.82rem;
  color: var(--warning);
}

/* Attached images inside a sent message bubble. */
.agent-chat-msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.agent-chat-msg-image-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 10px;
  line-height: 0;
}

.agent-chat-msg-image-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.agent-chat-msg-image {
  max-width: 160px;
  max-height: 160px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

/* Chat gate: the agent is not running — a notice + Start button between
   the history and the input (the turn was refused, no single-shot reply). */
.agent-chat-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 1rem 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 0.9rem;
}

.agent-chat-gate-start {
  padding: 0.3rem 1.1rem;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: var(--primary-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.agent-chat-gate-start:disabled {
  opacity: 0.6;
  cursor: default;
}

.agent-chat-gate-error {
  color: var(--danger);
  font-size: 0.82rem;
}

/* Small system-style note in the log (e.g. the /model status line). */
.agent-chat-sysnote {
  align-self: center;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

/* Fixed lightbox overlay for an enlarged attachment view. */
.agent-chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: color-mix(in srgb, var(--text) 72%, transparent);
  cursor: zoom-out;
}

.agent-chat-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: default;
}

.agent-chat-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-lightbox-close:hover {
  background: var(--surface-hover);
}

/* ---- Chat info panel (slice 4e) -------------------------------------- */

/* A flex child of `.chat-page` (after the `flex: 1` chat): it PUSHES the
   chat aside instead of floating over it (standard collapsible-sidebar
   pattern). Closed = width 0 (clipped, aria-hidden + inert); open = 300px,
   and the width transition IS the slide. The border only exists in the
   open state so a closed panel leaves no stray 1px line. */
.chat-info-panel {
  flex: none;
  width: 0;
  overflow: hidden;
  border-left: 0 solid var(--border);
  background: var(--surface);
  transition: width 0.2s ease;
}

.chat-info-panel.open {
  width: 300px;
  border-left: 1px solid var(--border);
}

/* Fixed inner width so the content never reflows mid-transition. */
.chat-info-panel-inner {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-info-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
}

.chat-info-panel-title {
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--text);
}

.chat-info-panel-close {
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.chat-info-panel-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.chat-info-panel-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.chat-info-panel-section {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.chat-info-panel-section:last-child {
  border-bottom: none;
}

.chat-info-panel-heading {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.chat-info-panel-name {
  margin: 0;
  font-weight: 650;
  color: var(--text);
}

.chat-info-panel-title-text {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.chat-info-panel-model {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* The connection state, with the existing status dot styling (live = the
   online dot; fallback / reconnecting = the busy dot, pulsing). */
.chat-info-panel-conn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text);
}

.chat-info-panel-dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.chat-info-panel-dot.live {
  background: var(--success);
}

.chat-info-panel-dot.fallback {
  background: var(--warning);
}

.chat-info-panel-dot.reconnecting {
  background: var(--warning);
  animation: agent-chat-pulse 1.1s ease-in-out infinite;
}

.chat-info-panel-error {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--danger);
}

.chat-info-panel-clear {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.chat-info-panel-clear:hover {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-color: var(--danger);
  color: var(--danger);
}

.chat-info-panel-clear:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- Chat sessions (D3): details-panel session list + lazy scroll ------ */

.chat-info-panel-new {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--primary);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.chat-info-panel-new:hover {
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
}

.chat-info-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chat-info-session {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
}

.chat-info-session.current {
  border-color: var(--primary);
}

.chat-info-session-title {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-info-session-current {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
  font-size: 0.72rem;
}

.chat-info-session-date {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.chat-info-session-archive {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.chat-info-session-archive:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.chat-info-session-resume {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.chat-info-session-resume:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.chat-info-session.archived {
  opacity: 0.8;
}

.chat-info-panel-subheading {
  margin: 0.75rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agent-chat-older {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.25rem 0;
}

/* ---- Org settings (D3): the org-scoped settings page ------------------- */

.org-setting-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.org-setting-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.org-setting-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.org-setting-controls input {
  width: 8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.org-setting-hint {
  font-size: 0.82rem;
}

/* ---- Browsable log (D3): turn-level list + drill-down + archived ------ */

.org-log {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.org-log-list {
  width: 260px;
  flex-shrink: 0;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
}

.org-log-list ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.org-log-item {
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-log-item:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.org-log-item.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.org-log-detail {
  flex: 1 1;
  min-width: 0;
}

.org-log-messages {
  margin-bottom: 1rem;
}

.org-log-msg {
  margin: 0.25rem 0;
  font-size: 0.88rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.org-log-msg.user strong {
  color: var(--primary);
}

.org-log-turns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.org-log-turn {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.org-log-turn-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.org-log-turn-head:disabled {
  cursor: default;
  opacity: 0.75;
}

.org-log-turn-head:not(:disabled):hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.org-log-turn-title {
  font-size: 0.88rem;
}

.org-log-turn-meta {
  color: var(--muted);
  font-size: 0.75rem;
}

.org-log-turn-events {
  border-top: 1px solid var(--border);
  padding: 0.4rem 0.7rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.org-log-event {
  display: flex;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.org-log-event-type {
  flex-shrink: 0;
  width: 11rem;
  color: var(--primary);
  font-weight: 600;
}

.org-log-event-excerpt {
  color: var(--muted);
  word-break: break-word;
}

/* ---- Agent ledger timeline ------------------------------------------- */

/* The agent's read-only ledger timeline (newest first): a vertical list of
   event rows, each with an accent left border (theme tokens only). */
.ledger-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ledger-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
}

.ledger-type {
  font-weight: 650;
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
}

/* ---- Misc ------------------------------------------------------------ */

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.85rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.row .spacer {
  flex: 1 1;
}

/* A centered "Coming soon" placeholder card. */
.coming-soon {
  text-align: center;
  padding: 3rem;
}

.coming-soon h2 {
  justify-content: center;
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.82rem;
  margin: 0.2rem 0.25rem 0.2rem 0;
}

.member-chip button {
  border: none;
  background: none;
  padding: 0 0.1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.member-chip button:hover {
  color: var(--danger);
  background: none;
}

/* ---- LLM settings ---------------------------------------------------- */

/* Sub-headings inside the Models card (h3 sections, h4 sub-sections). */
.llm-subheading {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* Inline status text (theme-aware). */
.status-ok {
  color: var(--success);
  font-weight: 600;
}

.status-error {
  color: var(--danger);
  font-weight: 600;
  font-size: 0.88rem;
}

/* ---- Compute settings ------------------------------------------------- */

/* A host's connectivity verdict as a small colored dot (theme-aware:
   online = success, offline = danger, unknown = warning). */
.compute-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warning);
}

.compute-status-dot.online {
  background: var(--success);
}

.compute-status-dot.offline {
  background: var(--danger);
}

/* The inline edit panel for a provider. */
.llm-edit {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}

/* A provider's "detect models" block. */
.llm-detect {
  margin-bottom: 0.75rem;
}

/* The detected-models list: each row is a model + a register/registered action. */
.llm-detect-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.llm-detect-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---- Memory settings ------------------------------------------------- */

/* The per-server Banks sub-panel (a card-in-card under an expanded server
   row). Theme tokens only. */
.memory-banks {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}

/* The inline create-bank row (input + button). */
.memory-banks .row input {
  flex: 1 1;
}

/* ---- Org reveal (the "birth" cinematic) -------------------------------- */

/* The full-viewport overlay: a subtle radial stage, built from color-mix of
   the theme tokens only (a dark stage in midnight, a soft stage in
   aurora-light). */
.org-reveal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse 130% 100% at 50% 42%,
    color-mix(in srgb, var(--surface) 70%, transparent) 0%,
    color-mix(in srgb, var(--background) 90%, transparent) 55%,
    var(--background) 100%
  );
  opacity: 1;
  animation: org-reveal-fade-in 0.5s ease-out both;
}

/* The done phase: the overlay fades out (the navigation usually unmounts it
   first; this covers the unmount-without-navigation case). */
.org-reveal--done {
  animation: org-reveal-fade-out 0.3s ease-in both;
}

/* The logo stage: a gentle scale pulse on the whole logo. */
.org-reveal-stage {
  position: relative;
  display: grid;
  place-items: center;
  animation: org-reveal-pulse 2.5s ease-in-out infinite;
}

.org-reveal-logo {
  margin: 0;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: clamp(7px, 1.3vw, 16px);
  line-height: 1.2;
  white-space: pre;
  color: var(--accent);
}

/* The second, slower layer: a faint blurred duplicate behind the logo for
   depth (the "3D-ish" omarchy feel). */
.org-reveal-logo--glow {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0.5;
  animation: org-reveal-glow-wave 4s linear infinite;
}

/* Per-character: a color wave (hue-rotate + glow) sweeping across the text
   (the negative --wave-delay puts each character mid-cycle at t=0) plus a
   staggered fade-in. */
.org-reveal-char {
  display: inline-block;
  opacity: 1;
  animation:
    org-reveal-fade-in 0.5s ease-out both,
    org-reveal-wave 2.5s linear infinite;
  animation-delay: var(--in-delay, 0ms), var(--wave-delay, 0ms);
}

/* The clear phase: the characters dissolve (fade + blur + upward drift)
   with a random per-character stagger; the wave keeps cycling underneath. */
.org-reveal--clear .org-reveal-char {
  animation:
    org-reveal-wave 2.5s linear infinite,
    org-reveal-dissolve 0.4s ease-in both;
  animation-delay: var(--wave-delay, 0ms), var(--out-delay, 0ms);
}

.org-reveal--clear .org-reveal-logo--glow {
  animation: org-reveal-dissolve 0.5s ease-in both;
}

@keyframes org-reveal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes org-reveal-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes org-reveal-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@keyframes org-reveal-wave {
  0% {
    filter: hue-rotate(0deg);
    text-shadow:
      0 0 6px color-mix(in srgb, currentColor 60%, transparent),
      0 0 22px color-mix(in srgb, currentColor 30%, transparent);
  }
  50% {
    filter: hue-rotate(180deg);
    text-shadow:
      0 0 14px color-mix(in srgb, currentColor 85%, transparent),
      0 0 44px color-mix(in srgb, currentColor 45%, transparent);
  }
  100% {
    filter: hue-rotate(360deg);
    text-shadow:
      0 0 6px color-mix(in srgb, currentColor 60%, transparent),
      0 0 22px color-mix(in srgb, currentColor 30%, transparent);
  }
}

@keyframes org-reveal-glow-wave {
  0%,
  100% {
    filter: blur(8px) hue-rotate(0deg);
    opacity: 0.4;
  }
  50% {
    filter: blur(10px) hue-rotate(180deg);
    opacity: 0.65;
  }
}

@keyframes org-reveal-dissolve {
  to {
    opacity: 0;
    filter: blur(6px) hue-rotate(120deg);
    transform: translateY(-16px);
  }
}

/* The wizard "breaks away" in parallel with the overlay fade-in. */
.org-wizard-leaving {
  animation: org-wizard-leave 0.5s ease-in both;
}

@keyframes org-wizard-leave {
  to {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(4px);
  }
}

/* The skip affordance: small, muted, bottom-right. */
.org-reveal-skip {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.org-reveal-skip:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-hover) 90%, transparent);
}

.org-reveal-skip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- Files (slice 2a) -------------------------------------------------- */

/* The SVAR file manager is themed via `--wx-*` / `--wx-fm-*` custom
   properties. We apply the light `wx-material-theme` base (from the
   library's CSS) and remap the tokens to Batons' design tokens (no
   hardcoded hex) so the manager follows the active theme. The combined
   selector outranks the theme base so these values win. */
.files-fm {
  height: calc(100dvh - 240px);
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.files-fm.wx-material-theme {
  --wx-background: var(--surface);
  --wx-background-alt: var(--surface-hover);
  --wx-background-hover: color-mix(in srgb, var(--text) 8%, var(--surface));
  --wx-border-color: var(--border);
  --wx-border: 1px solid var(--border);
  --wx-border-radius: 8px;
  --wx-color-primary: var(--primary);
  --wx-color-primary-selected: color-mix(in srgb, var(--primary) 14%, var(--surface));
  --wx-color-primary-font: var(--primary-text);
  --wx-color-secondary: var(--surface-hover);
  --wx-color-secondary-hover: var(--surface-hover);
  --wx-color-secondary-font: var(--text);
  --wx-color-font: var(--text);
  --wx-color-font-alt: var(--text-muted);
  --wx-color-disabled: var(--border);
  --wx-color-success: var(--success);
  --wx-color-warning: var(--warning);
  --wx-color-danger: var(--danger);
  --wx-color-link: var(--primary);
  --wx-icon-color: var(--text-muted);
  --wx-button-background: var(--surface-hover);
  --wx-button-font-color: var(--text);
  --wx-segmented-background: var(--surface-hover);
  --wx-segmented-background-hover: var(--surface-hover);
  --wx-segmented-border: 1px solid var(--border);
  --wx-table-cell-border: 1px solid var(--border);
  --wx-table-header-border: 1px solid var(--border);
  --wx-table-header-cell-border: 1px solid var(--border);
  --wx-fm-background: var(--background);
  --wx-fm-box-shadow: none;
  --wx-fm-select-background: var(--surface-hover);
  --wx-fm-grid-border: 1px solid var(--border);
  --wx-fm-grid-header-color: var(--surface-hover);
  --wx-fm-button-font-color: var(--text-muted);
  --wx-fm-progress-bar-color: var(--surface-hover);
  --wx-fm-toolbar-height: 48px;
  font-family: inherit;
}

/* Reduced motion: the component skips the sequence via JS; this is the
   belt-and-suspenders guard (no motion at all). */
@media (prefers-reduced-motion: reduce) {
  .org-reveal,
  .org-reveal-stage,
  .org-reveal-logo--glow,
  .org-reveal-char,
  .org-wizard-leaving {
    animation: none;
  }
  .chat-info-panel {
    transition: none;
  }
  .agent-chat--full .agent-chat-msg,
  .agent-chat--full .agent-chat-sysnote,
  .agent-chat--full .agent-chat-gate,
  .agent-chat--full .agent-chat-input-area,
  .agent-chat-header > * {
    transition: none;
  }
  .agent-chat-restore {
    animation: none;
  }
  .examine-panel {
    transition: none;
  }
}

/* Slice 3: the agent loop rendered in the chat (tool lines + approval).
   Own classes (`agent-chat-msg-tools` / `agent-chat-msg-tool`): the input
   toolbar keeps `.agent-chat-tools` / `.agent-chat-tool` (horizontal). */
.agent-chat-msg-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.agent-chat-msg-tool {
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface, rgba(127, 127, 127, 0.06)) var(--chat-bubble-opacity), transparent);
}
.agent-chat-msg-tool summary {
  cursor: pointer;
  color: var(--text-muted);
}
.agent-chat-tool-io {
  margin: 6px 0 2px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
  font-size: 0.85em;
}
.agent-chat-approval {
  border: 1px solid var(--warning, #b8860b);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-chat-approval.decided {
  border-color: var(--border);
  opacity: 0.8;
}
.agent-chat-approval-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.agent-chat-approval .ok {
  color: var(--success);
}
.agent-chat-approval .danger {
  color: var(--danger);
}

/* ---- The in-chat decision card (org-expansion D1.7) --------------------
   A `present_decision` tool call rendered as a distinct, prominent card
   (not the collapsible tool block). Theme-aware: custom properties only. */
.decision-card {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.decision-card.resolved {
  border-color: var(--border);
  border-left-color: var(--border);
  opacity: 0.9;
}
.decision-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.decision-card-title {
  font-weight: 700;
  margin-right: 4px;
}
.decision-card-badge {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.decision-card-badge.human {
  color: var(--warning, #b8860b);
  border-color: var(--warning, #b8860b);
}
.decision-card-badge.status.approved {
  color: var(--success);
  border-color: var(--success);
}
.decision-card-badge.status.rejected {
  color: var(--danger);
  border-color: var(--danger);
}
.decision-card-subject {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.decision-card-subject-row {
  display: flex;
  gap: 8px;
  font-size: 0.9em;
}
.decision-card-subject-label {
  color: var(--text-muted);
  min-width: 90px;
  flex-shrink: 0;
}
.decision-card-subject-value {
  word-break: break-word;
}
.decision-card-chain {
  font-size: 0.82em;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.decision-card-recommendation {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.92em;
}
.decision-card-recommendation-label {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.decision-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.decision-card-note {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.88em;
}
.decision-card-buttons {
  display: flex;
  gap: 8px;
}
.decision-card-buttons button.danger {
  color: var(--danger);
  border-color: var(--danger);
}
.decision-card-buttons button.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}
.decision-card-resolved {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9em;
}
.decision-card-outcome.approved {
  color: var(--success);
  font-weight: 700;
}
.decision-card-outcome.rejected {
  color: var(--danger);
  font-weight: 700;
}
.decision-card-error {
  color: var(--danger);
  font-size: 0.85em;
  margin: 0;
}

/* ---- The Decisions inbox + detail (org-expansion D2) ------------------
   The top-level approval queue and the decision detail. Theme-aware:
   custom properties only (aurora-light + midnight). */
.decisions-inbox .card {
  padding: 0;
  overflow: hidden;
}
.decisions-table {
  width: 100%;
}
.decisions-table th,
.decisions-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.decisions-table th {
  color: var(--text-muted);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.decisions-row {
  cursor: pointer;
}
.decisions-row:hover {
  background: var(--surface-hover);
}
.decisions-subject {
  max-width: 320px;
  overflow-wrap: anywhere;
}
.decisions-badge {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.decisions-badge.human {
  color: var(--warning);
  border-color: var(--warning);
}
.decisions-badge.status.pending {
  color: var(--text-muted);
}
.decisions-badge.status.in_review {
  color: var(--accent);
  border-color: var(--accent);
}
.decisions-badge.status.approved {
  color: var(--success);
  border-color: var(--success);
}
.decisions-badge.status.rejected,
.decisions-badge.status.withdrawn {
  color: var(--danger);
  border-color: var(--danger);
}
.decisions-badge.decider.agent {
  color: var(--accent);
  border-color: var(--accent);
}
/* F16: the Decisions page groups — open queue + lazy-loaded history. */
.decisions-group-title {
  margin: 0;
  padding: 14px 16px 6px;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.decisions-group-note {
  margin: 0;
  padding: 12px 16px 16px;
}
.decisions-badge.outcome.approved {
  color: var(--success);
  border-color: var(--success);
}
.decisions-badge.outcome.rejected {
  color: var(--danger);
  border-color: var(--danger);
}
.decisions-badge.outcome.withdrawn {
  color: var(--text-muted);
  border-color: var(--border);
}
.decisions-history-table .decisions-context {
  max-width: 260px;
}
.decisions-history-table .decisions-context summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85em;
}
.decisions-history-table .decisions-context p {
  margin: 6px 0 0;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
.decisions-load-more {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
}
.decision-detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.decision-detail-head h1 {
  margin: 0;
}
.decisions-back {
  display: inline-block;
  margin-bottom: 8px;
}
.decision-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .decision-detail-grid {
    grid-template-columns: 1fr;
  }
}
.decision-detail-subject {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.decision-detail-subject-row {
  display: flex;
  gap: 8px;
  font-size: 0.92em;
}
.decision-detail-subject-label {
  color: var(--text-muted);
  min-width: 100px;
  flex-shrink: 0;
}
.decision-detail-subject-value {
  word-break: break-word;
}
.decision-detail-context {
  white-space: pre-wrap;
}
.decision-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--border);
}
.decision-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 12px 12px;
}
.decision-timeline-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.decision-timeline-who {
  font-weight: 600;
}
.decision-timeline-when {
  font-size: 0.8em;
}
.decision-timeline-note {
  font-size: 0.88em;
  color: var(--text-muted);
}
.decision-detail-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.decision-detail-state .decisions-badge {
  margin-left: 0;
}
.decision-detail-decider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.decision-comments {
  margin-top: 12px;
}
.decision-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.decision-comment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--border);
  padding-left: 10px;
}
.decision-comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
}
.decision-comment-head .decisions-badge {
  margin-left: 0;
}
.decision-comment-body {
  white-space: pre-wrap;
}
.decision-comment-box {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}
.decision-comment-box textarea {
  flex: 1 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9em;
  resize: vertical;
}
.decision-detail-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.decision-detail-note {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9em;
}
.decision-detail-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.decision-detail-buttons button.danger {
  color: var(--danger);
  border-color: var(--danger);
}
.decision-detail-buttons button.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

/* ---- The Questions UI (F18b) ------------------------------------------
   The in-chat question card, the Questions inbox + detail. Mirrors the
   decision styles (F16/D1.7). Theme-aware: custom properties only. */
.question-card {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.question-card.resolved {
  border-color: var(--border);
  border-left-color: var(--border);
  opacity: 0.9;
}
.question-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.question-card-title {
  font-weight: 700;
  margin-right: 4px;
}
.question-card-badge {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.question-card-badge.human {
  color: var(--warning, #b8860b);
  border-color: var(--warning, #b8860b);
}
.question-card-badge.status.answered {
  color: var(--success);
  border-color: var(--success);
}
.question-card-text {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.question-card-context {
  font-size: 0.9em;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.question-card-asker {
  font-size: 0.82em;
}
.question-card-chain {
  font-size: 0.82em;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.question-card-recommendation {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.92em;
}
.question-card-recommendation-label {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.question-card-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.question-card-answer-input {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.88em;
  resize: vertical;
}
.question-card-resolved {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.9em;
}
.question-card-resolved > span {
  margin-right: 8px;
}
.question-card-outcome.answered {
  color: var(--success);
  font-weight: 700;
}
.question-card-answer {
  border-left: 3px solid var(--success);
  padding-left: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.question-card-error {
  color: var(--danger);
  font-size: 0.85em;
  margin: 0;
}

/* The Questions inbox + detail (F18b) — the F16 decisions layout, reused. */
.questions-inbox .card {
  padding: 0;
  overflow: hidden;
}
.questions-table {
  width: 100%;
}
.questions-table th,
.questions-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.questions-table th {
  color: var(--text-muted);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.questions-row {
  cursor: pointer;
}
.questions-row:hover {
  background: var(--surface-hover);
}
.questions-question {
  max-width: 320px;
  overflow-wrap: anywhere;
}
.questions-badge {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.questions-badge.human {
  color: var(--warning);
  border-color: var(--warning);
}
.questions-badge.status.open {
  color: var(--accent);
  border-color: var(--accent);
}
.questions-badge.status.answered,
.questions-badge.outcome.answered {
  color: var(--success);
  border-color: var(--success);
}
.questions-badge.decider.agent {
  color: var(--accent);
  border-color: var(--accent);
}
.questions-badge.decider.human {
  color: var(--success);
  border-color: var(--success);
}
.questions-group-title {
  margin: 0;
  padding: 14px 16px 6px;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.questions-group-note {
  margin: 0;
  padding: 12px 16px 16px;
}
.questions-history-table .questions-answer {
  max-width: 260px;
}
.questions-history-table .questions-answer summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85em;
}
.questions-history-table .questions-answer p {
  margin: 6px 0 0;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
.questions-load-more {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
}
.question-detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.question-detail-head h1 {
  margin: 0;
}
.questions-back {
  display: inline-block;
  margin-bottom: 8px;
}
.question-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .question-detail-grid {
    grid-template-columns: 1fr;
  }
}
.question-detail-question {
  font-weight: 600;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.question-detail-context {
  white-space: pre-wrap;
}
.question-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--border);
}
.question-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 12px 12px;
}
.question-timeline-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.question-timeline-who {
  font-weight: 600;
}
.question-timeline-direction {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.question-timeline-when {
  font-size: 0.8em;
}
.question-timeline-note {
  font-size: 0.88em;
  color: var(--text-muted);
}
.question-detail-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.question-detail-state .questions-badge {
  margin-left: 0;
}
.question-detail-answeree {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.question-detail-answer {
  margin-top: 8px;
  border-left: 3px solid var(--success);
  padding-left: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.question-detail-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.question-detail-answer-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9em;
  resize: vertical;
}
.question-comments {
  margin-top: 12px;
}
.question-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.question-comment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--border);
  padding-left: 10px;
}
.question-comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
}
.question-comment-head .questions-badge {
  margin-left: 0;
}
.question-comment-body {
  white-space: pre-wrap;
}
.question-comment-box {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}
.question-comment-box textarea {
  flex: 1 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9em;
  resize: vertical;
}

/* ---- Prompt editor (settings → agents → prompts) -------------------- */
.prompt-editor-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.prompt-editor-editor {
  flex: 1 1 auto;
  min-width: 0;
}
.prompt-preview {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 14px;
  max-height: 420px;
  overflow: auto;
}
.prompt-preview-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}
.prompt-preview-body {
  font-size: 0.9rem;
}
.prompt-preview-body > :first-child {
  margin-top: 0;
}
.prompt-preview-body > :last-child {
  margin-bottom: 0;
}
.prompt-vars {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 320px;
  max-width: 100%;
}
.prompt-vars-toggle {
  align-self: flex-start;
  font-weight: 600;
}
.prompt-vars-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
  max-height: 540px;
  overflow: auto;
}
.prompt-var-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prompt-var {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
}
.prompt-var-token-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  padding: 2px 6px;
  cursor: pointer;
}
.prompt-var-token-btn:hover:not(:disabled) {
  border-color: var(--accent);
}
.prompt-var-token-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.prompt-var-edit {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}
.prompt-var-edit:hover {
  color: var(--text);
}
.prompt-var-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prompt-var-head .spacer {
  flex: 1 1;
}
.prompt-var-token {
  font-size: 0.8rem;
  color: var(--text);
}
.prompt-var-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
}
.prompt-var-fields label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prompt-var-fields label:last-child {
  grid-column: 1 / -1;
}
.prompt-var-field-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.prompt-var-warning {
  color: var(--warning);
  font-size: 0.8rem;
}
@media (max-width: 1100px) {
  .prompt-editor-main {
    flex-direction: column;
    align-items: stretch;
  }
  .prompt-vars {
    width: 100%;
  }
}

/* ---- Skill import wizard (settings → agents → skills) ----------------- */
.import-wizard-wrap {
  position: relative;
  display: inline-block;
}
.import-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 28rem;
  max-width: calc(100vw - 2rem);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 22%, transparent);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.import-popover-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.import-popover-head .spacer {
  flex: 1 1;
}
.import-popover-close {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 2px 6px;
}
.import-popover-close:hover {
  color: var(--text);
}
.wizard-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.wizard-steps li.active {
  color: var(--text);
  font-weight: 700;
}
.wizard-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wizard-fields label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}
.wizard-source {
  font-size: 0.9rem;
}
.wizard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.wizard-actions .spacer {
  flex: 1 1;
}

/* ---- Profile builder (settings → agents → profiles) ------------------- */
.profile-tab-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}
.profile-builder-actions {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* ---- The meetings list + detail (org-expansion D4) --------------------
   The read-mostly meeting view: transcript, participants, caps, votes,
   conclusion. Theme-aware: custom properties only (aurora-light +
   midnight). The full "live room" visualization is a FUTURE enhancement —
   not styled here (not built in v1). */
.meetings-list .card {
  padding: 0;
  overflow: hidden;
}
.meetings-table {
  width: 100%;
}
.meetings-table th,
.meetings-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.meetings-table th {
  color: var(--text-muted);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meetings-row {
  cursor: pointer;
}
.meetings-row:hover {
  background: var(--surface-hover);
}
.meetings-participants {
  max-width: 320px;
  overflow-wrap: anywhere;
}
.meetings-badge {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.meetings-badge.status.active {
  color: var(--accent);
  border-color: var(--accent);
}
.meetings-badge.status.concluded {
  color: var(--success);
  border-color: var(--success);
}
.meetings-badge.status.scheduled {
  color: var(--text-muted);
}
.meetings-badge.role.chair {
  color: var(--accent);
  border-color: var(--accent);
}
.meetings-badge.flag {
  color: var(--warning);
  border-color: var(--warning);
}
.meetings-badge.vote.approve {
  color: var(--success);
  border-color: var(--success);
}
.meetings-badge.vote.reject {
  color: var(--danger);
  border-color: var(--danger);
}
.meeting-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .meeting-detail-grid {
    grid-template-columns: 1fr;
  }
}
.meeting-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meeting-transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meeting-turn {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-hover);
}
.meeting-turn.summary {
  border-color: var(--accent);
}
.meeting-turn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.meeting-turn-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.meeting-post-box {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meeting-post-actions {
  display: flex;
  gap: 8px;
}
.meeting-cap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 4px 8px;
  gap: 4px 8px;
  margin-bottom: 10px;
}
.meeting-cap-bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  overflow: hidden;
}
.meeting-cap-bar > div {
  height: 100%;
  background: var(--accent);
}
.meeting-participants,
.meeting-votes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meeting-vote-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.meeting-conclusion {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.meeting-conclusion .outcome.approve {
  color: var(--success);
}
.meeting-conclusion .outcome.reject {
  color: var(--danger);
}
.meeting-conclusion .outcome.abstain {
  color: var(--text-muted);
}
.meetings-decision-link {
  margin-left: auto;
}

/* ---- The calendars list + FullCalendar detail (org-expansion D5) ---------
   Read-mostly calendar view: the readable-calendars list + a FullCalendar
   board (one event source per readable calendar) + the add-event form.
   Theme-aware: custom properties only (aurora-light + midnight) — FullCalendar
   v6 is themed by mapping its --fc-* variables onto the app's properties.
   The full "timeline/gantt" resource view is a FUTURE enhancement — not
   styled here (not built in v1). */
.calendars-list .card {
  padding: 0;
  overflow: hidden;
}
.calendars-table {
  width: 100%;
}
.calendars-table th,
.calendars-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.calendars-table th {
  color: var(--text-muted);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calendars-row {
  cursor: pointer;
}
.calendars-row:hover {
  background: var(--surface-hover);
}
.calendars-badge {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.calendars-badge.vis.shared {
  color: var(--accent);
  border-color: var(--accent);
}
.calendar-meta {
  margin-top: -6px;
}
.calendar-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }
}
.calendar-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calendar-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendar-sources li.active > a {
  color: var(--accent);
  font-weight: 600;
}
.calendar-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendar-add-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.88em;
}
.calendar-add-form input,
.calendar-add-form textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}
/* ---- FullCalendar v6 theming layer (F6) --------------------------------------
   v6 injects its base CSS at runtime (insertRule) — there is no stylesheet to
   import, so the calendar is themed from the OUTSIDE: v6's own --fc-* custom
   properties are remapped onto the app's theme tokens, and the few things v6
   hard-codes (toolbar, buttons, pills, scroller) are overridden with .fc-*
   selectors. Custom properties only — zero raw hex; both themes (aurora-light
   + midnight) follow automatically because every value is a token. */
.calendar-board,
.calendars-mini {
  /* surfaces + borders + text follow the app's card */
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-hover);
  --fc-neutral-text-color: var(--text-muted);
  --fc-border-color: var(--border);
  /* today = a subtle accent-tinted background (the "today" pill) */
  --fc-today-bg-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --fc-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent);
  /* event pills: the per-calendar `color` prop paints the pill inline; the
     text stays the surface color (white on the mid-tone palette in
     aurora-light — v6's default — dark navy on it in midnight) */
  --fc-event-bg-color: var(--accent);
  --fc-event-border-color: var(--accent);
  --fc-event-text-color: var(--surface);
  --fc-list-event-hover-bg-color: var(--surface-hover);
  --fc-small-font-size: 0.85em;
  /* toolbar buttons = the app's own button pattern (see ---- Buttons ----) */
  --fc-button-text-color: var(--text);
  --fc-button-bg-color: var(--surface);
  --fc-button-border-color: var(--border);
  --fc-button-hover-bg-color: var(--surface-hover);
  --fc-button-hover-border-color: var(--border);
  --fc-button-active-bg-color: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --fc-button-active-border-color: var(--accent);
  /* the "+N more" link in a day cell */
  --fc-more-link-bg-color: var(--surface-hover);
  --fc-more-link-text-color: var(--text-muted);
  color: var(--text);
}
/* v6 ships its own font stack — the calendar reads in the app's font */
.calendar-board .fc,
.calendars-mini .fc {
  font-family: inherit;
}

/* Header toolbar (main calendar): title in the app's heading style, buttons
   exactly like the app's buttons (same radius/padding/weight/tokens). */
.calendar-board .fc .fc-toolbar.fc-header-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.9rem;
}
.calendar-board .fc .fc-toolbar-title {
  color: var(--text);
  font-size: 1.15rem; /* the app's h2 */
  font-weight: 600;
}
.calendar-board .fc .fc-button {
  border-radius: 8px;
  box-shadow: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
}
.calendar-board .fc .fc-button:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.calendar-board .fc .fc-button:disabled {
  opacity: 0.55;
}
/* v6 joins the view-button group with shared corners; the app uses separate
   rounded buttons instead (prev/next stay a joined pair). */
.calendar-board .fc .fc-button-group {
  gap: 4px;
}
.calendar-board .fc.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child),
.calendar-board .fc.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child),
.calendar-board .fc.fc-direction-rtl .fc-button-group > .fc-button:not(:first-child),
.calendar-board .fc.fc-direction-rtl .fc-button-group > .fc-button:not(:last-child) {
  border-radius: 8px;
  margin: 0;
}

/* Day header row: the app's secondary text (same pattern as the table th) */
.calendar-board .fc .fc-col-header-cell,
.calendars-mini .fc .fc-col-header-cell {
  color: var(--text-muted);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.calendar-board .fc .fc-col-header-cell-cushion,
.calendars-mini .fc .fc-col-header-cell-cushion {
  color: inherit;
  padding: 6px 4px;
  text-decoration: none;
}

/* Day cells: subtle app-consistent hover; today keeps the accent tint from
   --fc-today-bg-color with an accent day number. */
.calendar-board .fc .fc-daygrid-day,
.calendars-mini .fc .fc-daygrid-day {
  transition: background-color 0.12s ease;
}
.calendar-board .fc .fc-daygrid-day:hover,
.calendars-mini .fc .fc-daygrid-day:hover {
  background: var(--surface-hover);
}
.calendar-board .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number,
.calendars-mini .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: var(--accent);
  font-weight: 700;
}
.calendar-board .fc .fc-day-other .fc-daygrid-day-top {
  opacity: 0.45;
}

/* F7 sizing: aspect-ratio: 1 makes each cell square: the frame is a plain
   flex div inside the td, so aspect-ratio applies and its height = its
   width; the frame is the cell's content, so the row shrinks to fit it.
   min-height was inert here — with height="auto" the .fc harness flex-grows,
   the daygrid table stretches to fill it, and the frame is stretched to FILL
   the td, so the row height came from the table and ignored min-height. The
   FullCalendar aspectRatio prop is also wrong: in v6 it sizes the whole
   calendar element, not the cells. No magic pixel values — the square follows
   column width. The frame is a flex column with the contents TOP-aligned
   (F7c: day number + event pills hug the top, horizontally centered); the
   mini (below) stays vertically centered. */
.calendar-board .fc .fc-daygrid-day-frame {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
/* v6's balanced sizing reserves an IN-FLOW events area (min-height + margins,
   ~30px main / ~24px mini) in EVERY cell — that reservation pushed the
   "centered" day number ~20px above the middle. The square row is sized by
   the frame's aspect-ratio, so the reservation is pointless: zero it and the
   flex column centers the number for real (verified 0.3px off center); pills
   still stack in flow under the number on event days. */
.calendar-board .fc .fc-daygrid-day-events,
.calendars-mini .fc .fc-daygrid-day-events {
  min-height: 0;
  margin: 0;
}
.calendar-board .fc .fc-daygrid-day-top {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.calendar-board .fc .fc-daygrid-day-number {
  display: block;
}

/* Event pills: rounded, compact, with a hover state. The pill BACKGROUND is
   the per-calendar color (inline from `calendarColor` — DATA, not CSS). */
.calendar-board .fc .fc-daygrid-event,
.calendars-mini .fc .fc-daygrid-event {
  border-radius: 999px;
  font-weight: 600;
  padding: 1px 6px;
}
.calendar-board .fc .fc-daygrid-event:hover,
.calendars-mini .fc .fc-daygrid-event:hover {
  filter: brightness(1.07);
}

/* D: any scroller that DOES scroll (main timeGrid/list views) gets the app's
   themed scrollbar — the existing global rule is scoped to the chat panes. */
.calendar-board .fc .fc-scroller,
.calendars-mini .fc .fc-scroller {
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}
.calendar-board .fc .fc-scroller::-webkit-scrollbar,
.calendars-mini .fc .fc-scroller::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.calendar-board .fc .fc-scroller::-webkit-scrollbar-track,
.calendars-mini .fc .fc-scroller::-webkit-scrollbar-track {
  background: transparent;
}
.calendar-board .fc .fc-scroller::-webkit-scrollbar-thumb,
.calendars-mini .fc .fc-scroller::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}
.calendar-board .fc .fc-scroller::-webkit-scrollbar-thumb:hover,
.calendars-mini .fc .fc-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ---- The projects list + project detail (org-expansion D6) ----------------
   Read-mostly project view: the readable-projects list + a detail (repo
   path, members + permissions, the seeded README.md, the grant form).
   Theme-aware: custom properties only (aurora-light + midnight) — no hex.
   The full "browse the repo / issues / CI / MR" is a FUTURE enhancement —
   not styled here (not built in v1). */
.projects-list .card {
  padding: 0;
  overflow: hidden;
}
.projects-table {
  width: 100%;
}
.projects-table th,
.projects-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.projects-table th {
  color: var(--text-muted);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.projects-row {
  cursor: pointer;
}
.projects-row:hover {
  background: var(--surface-hover);
}
.project-meta {
  margin-top: -6px;
}
.project-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .project-layout {
    grid-template-columns: 1fr;
  }
}
.project-main,
.project-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.project-repo-path {
  display: block;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-hover);
  color: var(--text);
  padding: 6px 8px;
  font-size: 0.88em;
}
.project-readme {
  min-width: 0;
  overflow-wrap: anywhere;
}
.project-readme pre {
  overflow-x: auto;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.project-readme code {
  background: var(--surface-hover);
  border-radius: 4px;
  padding: 1px 4px;
}
.project-readme table {
  width: auto;
}
.project-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-member-name {
  font-weight: 600;
}
.calendars-badge.perm.readwrite {
  color: var(--accent);
  border-color: var(--accent);
}
.project-grant-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-grant-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.88em;
}
.project-grant-form input,
.project-grant-form select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}

/* ---- F21a: the projects list + detail (repo status, members, new project) -- */
.project-new-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-new-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.88em;
}
.project-new-form input {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}
.project-branches {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.project-branch {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.82em;
  background: var(--surface);
}
.project-branch-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-commits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-members .calendars-delete {
  margin-left: 6px;
}

/* ---- The calendars board (F5: the Thunderbird layout) ----------------------
   ONE board, three columns: LEFT the mini month over the multi-select
   calendar list (color swatch + checkbox per calendar), CENTER the full
   calendar (one event source per visible calendar, each calendar in its own
   color), RIGHT the upcoming events + the add-event form. Theme-aware:
   custom properties only (aurora-light + midnight) — the swatch/event colors
   are DATA (CALENDAR_COLORS in lib/calendar.ts), never CSS hex. Responsive:
   the columns stack on narrow screens. */
.calendars-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 12px;
}
.calendars-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}
.calendars-toolbar select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}
.calendars-board {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 280px;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) {
  .calendars-board {
    grid-template-columns: 1fr;
  }
}
.calendars-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* The mini month: compact; the day numbers are nav links (clicking one jumps
   the main calendar — the free daygrid `navLinks`, no interaction plugin).
   F6: `height="auto"` + fixedWeekCount (see calendars-board.tsx) means the
   6-week grid sizes the card — the .fc-scroller never overflows, so there is
   no scrollbar; the weekday headers are single letters (weekday: "narrow"). */
.calendars-mini {
  font-size: 0.8em;
  padding: 0.75rem;
}
.calendars-mini .fc-daygrid-day-number {
  display: block;
  color: var(--accent);
  padding: 2px 3px;
}
.calendars-mini .fc .fc-col-header-cell-cushion {
  padding: 2px 1px;
}
/* F7 sizing: the compact 6-week mini — square day cells via aspect-ratio: 1
   on the frame (same mechanism as the main grid above): the frame is a plain
   flex div inside the td, aspect-ratio makes its height = its width, and the
   row shrinks to fit (mini ≈ 200px wide over 7 columns → ≈ 28px squares,
   responsive). min-height was inert: the frame is stretched to FILL the td,
   so the table-fixed row height ignored it and rows stayed ~double height.
   The number is centered vertically AND horizontally: the frame is a centered
   flex column and the day-top is full-width + centered (the v6 day cell is
   .fc-daygrid-day >
   .fc-daygrid-day-frame > .fc-daygrid-day-top > a.fc-daygrid-day-number). */
.calendars-mini .fc .fc-daygrid-day-frame {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.calendars-mini .fc .fc-daygrid-day-top {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.calendars-picks-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.calendars-picks-head h2 {
  margin: 0;
}
.calendars-quick {
  display: flex;
  gap: 4px;
}
.calendars-quick button {
  font-size: 0.78em;
  padding: 2px 8px;
}
.calendars-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendars-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}
.calendars-pick-name {
  overflow-wrap: anywhere;
}
.calendars-pick-count {
  margin-left: auto;
  flex: none;
}
.calendars-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex: none;
}
.calendars-upcoming {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendars-upcoming li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.calendars-upcoming-title {
  overflow-wrap: anywhere;
}
.calendars-upcoming-when {
  margin-left: auto;
  flex: none;
  font-size: 0.85em;
}
.calendars-see-more {
  font-size: 0.85em;
}
.calendar-add-form select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}

/* ---- F7: the event popup (reusable modal) + drag selection --------------
   The add/edit form now lives in a themed modal (backdrop + centered card)
   opened by a click/drag on the main calendar. Custom properties only —
   both themes (aurora-light + midnight) follow automatically. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--background) 72%, transparent);
}
.modal-card {
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 16px 48px color-mix(in srgb, var(--text) 24%, transparent);
}
.modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.modal-close {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.modal-close:hover {
  color: var(--text);
}
.calendars-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.calendars-delete {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.calendars-delete:hover {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
/* ---- F8b: the full event editor (all-day, recurrence, status, attendees) ---
   Same themed controls as the F7 popup (.calendar-add-form label/input/
   select) — these only lay out the new sections. Custom properties only,
   both themes (aurora-light + midnight) follow automatically, zero hex. */
.calendars-check-row {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.calendars-editor-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.calendars-editor-section h3 {
  margin: 0;
  font-size: 0.9em;
  color: var(--text-muted);
}
.calendars-rrule-input {
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
}
.calendars-recurrence-summary,
.calendars-series-hint,
.calendars-attendees-hint {
  margin: 0;
  font-size: 0.85em;
}
.calendars-series-hint {
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}
.calendars-attendee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendars-attendee-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-hover);
  padding: 4px 8px;
  font-size: 0.88em;
}
.calendars-attendee-name {
  flex: 1 1;
  overflow-wrap: anywhere;
  color: var(--text);
}
.calendars-badge {
  flex: none;
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--text-muted);
  background: var(--surface);
}
.calendars-attendee-status--accepted {
  color: var(--success, var(--text));
  border-color: color-mix(in srgb, var(--success, var(--accent)) 45%, var(--border));
}
.calendars-attendee-status--declined {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.calendars-attendee-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.calendars-attendee-add select {
  flex: 1 1 120px;
  min-width: 0;
}
.calendars-attendee-add button {
  flex: none;
}
/* The board's own click/drag selection (no interaction plugin): the in-flight
   range is painted on the day cells; text selection is off while dragging. */
.calendar-board .fc td.calendars-cell-sel {
  background: var(--fc-highlight-color);
}
.calendars-dragging .fc {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ---- Tasks (F19b): the custom kanban board + detail + my-tasks ---------- */

.tasks-head {
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.tasks-head h1 {
  margin: 0 0 2px;
}
.tasks-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 14px;
}
.tasks-filterbar label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.tasks-filterbar input,
.tasks-filterbar select {
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  min-width: 120px;
}
.tasks-filter-search {
  flex: 1 1 180px;
}
.tasks-board {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}
.tasks-column {
  flex: 1 1;
  min-width: 230px;
  max-width: 320px;
  background: color-mix(in srgb, var(--background) var(--chat-bubble-opacity), transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.12s, background 0.12s;
}
.tasks-column.drop-valid {
  border-color: var(--accent);
}
.tasks-column.drop-invalid {
  opacity: 0.55;
}
.tasks-column.drop-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.tasks-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.tasks-column-status {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.tasks-column-status.in_progress { color: var(--accent); }
.tasks-column-status.in_review { color: var(--warning); }
.tasks-column-status.blocked { color: var(--danger); }
.tasks-column-status.done { color: var(--success); }
.tasks-column-count {
  font-size: 0.78em;
  color: var(--text-muted);
}
.tasks-column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  min-height: 60px;
}
.tasks-column-empty {
  margin: 4px;
  font-size: 0.85em;
}
.tasks-load-more {
  align-self: center;
  margin: 4px 0;
}
.tasks-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}
.tasks-card:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.tasks-card.dragging {
  opacity: 0.4;
}
.tasks-card.milestone {
  border-width: 2px;
  border-left: 4px solid var(--accent);
}
.tasks-card.sprint {
  border-style: dashed;
}
.tasks-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.tasks-card-top .spacer {
  flex: 1 1;
}
.tasks-card-title {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.tasks-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.82em;
  color: var(--text-muted);
}
.tasks-due.overdue {
  color: var(--danger);
  font-weight: 600;
}
.tasks-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  font-size: 0.68em;
  font-weight: 700;
  color: var(--text-muted);
}
.tasks-badge {
  display: inline-block;
  font-size: 0.68em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--text-muted);
  background: var(--surface-hover);
}
.tasks-badge.kind.milestone { color: var(--accent); border-color: var(--accent); }
.tasks-badge.kind.sprint { color: var(--primary); border-color: var(--primary); }
.tasks-badge.priority.low { color: var(--text-muted); }
.tasks-badge.priority.medium { color: var(--accent); border-color: var(--accent); }
.tasks-badge.priority.high { color: var(--warning); border-color: var(--warning); }
.tasks-badge.priority.urgent { color: var(--danger); border-color: var(--danger); }
.tasks-badge.status.done { color: var(--success); border-color: var(--success); }
.tasks-badge.status.blocked { color: var(--danger); border-color: var(--danger); }
.tasks-badge.status.in_progress { color: var(--accent); border-color: var(--accent); }
.tasks-badge.status.in_review { color: var(--warning); border-color: var(--warning); }
.tasks-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.tasks-label-chip {
  font-size: 0.7em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.tasks-progress {
  position: relative;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  overflow: hidden;
}
.tasks-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.tasks-progress-label {
  position: absolute;
  right: 4px;
  top: -1px;
  font-size: 0.62em;
  font-weight: 700;
  color: var(--text-muted);
}
/* Task detail */
.task-detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.task-detail-head h1 {
  margin: 0;
}
.tasks-back {
  display: inline-block;
  margin-bottom: 8px;
}
.task-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .task-detail-grid {
    grid-template-columns: 1fr;
  }
}
.task-detail-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 4px 12px;
  gap: 4px 12px;
  margin: 0 0 12px;
}
.task-detail-meta dt {
  color: var(--text-muted);
  font-size: 0.85em;
}
.task-detail-transitions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.task-acceptance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-acceptance-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.task-acceptance-item.checked span {
  text-decoration: line-through;
  color: var(--text-muted);
}
.task-subtask-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-subtask {
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  font-size: 0.85em;
  color: var(--text-muted);
}
.tasks-create-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tasks-create-row label {
  flex: 1 1 140px;
}
.tasks-create-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  font-size: 0.85em;
  color: var(--text-muted);
}
.tasks-create-criterion {
  display: flex;
  gap: 6px;
  margin: 4px 0;
}
.tasks-create-criterion input {
  flex: 1 1;
}
/* My tasks */
.my-tasks-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.my-tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.my-tasks-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.my-tasks-row:last-child {
  border-bottom: none;
}
.my-tasks-row .spacer {
  flex: 1 1;
}
/* Sprints (F19c) */
.sprints-head {
  margin-bottom: 12px;
}
.sprints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.sprints-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.sprint-card-title {
  font-weight: 600;
  color: var(--text);
}
.sprint-card-period {
  font-size: 0.8em;
  margin: 2px 0 6px;
}
.sprint-card-metrics {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 2px 10px;
  gap: 2px 10px;
  margin: 0;
  font-size: 0.82em;
}
.sprint-card-metrics dt {
  color: var(--text-muted);
}
.sprint-card-metrics dd {
  margin: 0;
  text-align: right;
}
.sprint-metrics-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin: 12px 0;
}
@media (max-width: 900px) {
  .sprint-metrics-grid {
    grid-template-columns: 1fr;
  }
}
.sprint-burndown-chart {
  width: 100%;
  min-height: 260px;
}
.sprint-metrics-list {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 4px 12px;
  gap: 4px 12px;
  margin: 0;
}
.sprint-metrics-list dt {
  color: var(--text-muted);
}
.sprint-metrics-list dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.sprint-task-points {
  color: var(--text-muted);
  font-size: 0.8em;
}
.calibration-hint {
  font-size: 0.82em;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  margin: 6px 0;
}

/* ---- F20a: collapsible columns + quick-add + type combobox + form sections ---- */
.tasks-column-head {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.tasks-column-collapse {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 0.85em;
}
.tasks-column.collapsed {
  flex: 0 0 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 220px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 0;
}
.tasks-collapsed-name {
  writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}
.tasks-collapsed-count {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  min-width: 20px;
  padding: 1px 6px;
  text-align: center;
}
.tasks-quick-add-open {
  align-self: flex-start;
  margin-top: 4px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85em;
  padding: 4px;
}
.tasks-quick-add-open:hover {
  color: var(--accent);
}
.tasks-quick-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.tasks-quick-add-actions {
  display: flex;
  gap: 10px;
}
.tasks-quick-add-actions .link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.82em;
  padding: 0;
}
.task-type-combobox {
  position: relative;
}
.task-type-combobox-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.task-type-combobox-list li button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9em;
}
.task-type-combobox-list li button:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.task-type-combobox-list li[aria-selected="true"] button {
  font-weight: 600;
}
.task-type-create button {
  color: var(--accent);
  font-style: italic;
}
.tasks-create-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 4px;
  margin-bottom: 12px;
}
.tasks-create-section-head {
  margin: 0 0 8px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ---- F19d1: task visibility (links / sessions / activity / comments / artifacts) ---- */
.task-vis-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-vis-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-left: 3px solid var(--border);
  padding-left: 10px;
  font-size: 0.9em;
}
.task-vis-item .tasks-badge {
  margin-left: 0;
}
.task-vis-label {
  font-weight: 600;
}
.task-vis-ref {
  word-break: break-all;
  font-size: 0.85em;
}
.task-vis-unlink {
  font-size: 0.8em;
  padding: 2px 8px;
}
.task-vis-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.task-vis-form select,
.task-vis-form input {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9em;
}
.task-vis-form input {
  flex: 1 1;
  min-width: 120px;
}
.task-activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.task-activity-event {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  position: relative;
}
.task-activity-event::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: -6px;
  border-left: 2px solid var(--border);
}
.task-activity-event:last-child::before {
  display: none;
}
.task-activity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  margin-top: 4px;
  flex: none;
}
.task-activity-dot.created { background: var(--accent); }
.task-activity-dot.status_changed { background: var(--accent); }
.task-activity-dot.completed { background: #2e7d32; }
.task-activity-dot.blocked { background: #c62828; }
.task-activity-dot.assigned { background: #f9a825; }
.task-activity-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.88em;
}
.task-activity-detail {
  margin: 2px 0 0;
  white-space: pre-wrap;
  font-size: 0.88em;
}
.task-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-comment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--border);
  padding-left: 10px;
}
.task-comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
}
.task-comment-body {
  margin: 0;
  white-space: pre-wrap;
}
.task-comment-box {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}
.task-comment-box textarea {
  flex: 1 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9em;
  resize: vertical;
}

/* ---- F20b: board customization (selector, config columns, manage view) ---- */
.tasks-board-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.tasks-column-zone {
  display: flex;
  min-width: 0;
}
.tasks-column {
  border-top: 3px solid transparent;
}
.tasks-column.role-terminal {
  opacity: 0.92;
}
.tasks-column.role-entry .tasks-column-status {
  font-weight: 800;
}
.tasks-column-role {
  font-size: 0.72em;
  color: var(--text-muted);
  margin-left: 4px;
}
.tasks-column-role.entry {
  color: var(--accent);
}
.tasks-column-drag {
  cursor: -webkit-grab;
  cursor: grab;
  color: var(--text-muted);
  margin-right: 6px;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.tasks-column-drag:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.tasks-column-drag-ghost {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.8em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.tasks-column-rename {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: text;
}
.tasks-column-rename:hover {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
.tasks-column-rename-input {
  font: inherit;
  font-size: 0.9em;
  font-weight: 700;
  width: 100%;
  max-width: 160px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
  padding: 1px 4px;
}
.tasks-column-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
  padding: 0 2px;
}
.tasks-column-delete:hover {
  color: var(--danger);
}
.tasks-add-column-zone {
  flex: 0 0 200px;
  min-width: 200px;
  padding-top: 4px;
}
.tasks-add-column-open {
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: none;
  color: var(--text-muted);
  padding: 12px;
  cursor: pointer;
}
.tasks-add-column-open:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tasks-add-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.tasks-add-column-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tasks-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 6px;
  cursor: pointer;
}
.tasks-add-column-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tasks-new-board {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.tasks-new-board input {
  flex: 1 1;
  max-width: 320px;
}
.tasks-manage-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 340px;
}
.tasks-manage-board label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85em;
}
.tasks-manage-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tasks-manage-columns li {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.85em;
}
.tasks-manage-columns .spacer {
  flex: 1 1;
}
.tasks-manage-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

/* ---- F25c: Denied Requests (denial audit browser) ----------------------- */

.denial-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.denial-stat {
  flex: 1 1 14rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 0.75rem 1rem;
}

.denial-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.denial-stat-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
}

.denial-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.denial-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.denial-row {
  cursor: pointer;
}

.denial-row:hover td {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.denial-gap {
  color: var(--danger);
  font-weight: 600;
}

.denial-chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  background: var(--surface);
}

.denial-chip--required {
  color: var(--primary-text);
  border-color: var(--primary);
}

.denial-resolved {
  color: var(--success);
  border-color: var(--success);
}

.denial-detail-row td {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.denial-detail {
  padding: 0.5rem 0.25rem;
}

.denial-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.denial-detail-label {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.denial-grant-form {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  max-width: 26rem;
}

.denial-empty {
  padding: 1.5rem 0;
}

.denial-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}

/* ---- F30 — modern user/group edit pages ---------------------------------
   Full-width pages (the 960px cap is gone), a sticky edit header with an
   auto-save toggle + animated save icon, underline tabs, and profile
   section CARDS in an adaptive grid (2 cols normal, 3+ wide, 1 narrow). */
.edit-page {
  margin: 0 auto;
}

.edit-page-header {
  margin-bottom: 1.25rem;
}

.edit-page-header h1 {
  margin: 0.1rem 0;
  font-size: 1.5rem;
}

.edit-page-header-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  margin: -0.75rem -0.25rem 1rem;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.edit-page-id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.edit-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-text);
  background: var(--primary);
}

.edit-avatar-group {
  background: var(--accent);
}

.edit-page-id-text {
  min-width: 0;
}

.edit-back-link {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.edit-page-sub {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* The editor toolbar: auto-save switch + animated save icon button. */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

.autosave-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.autosave-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.autosave-toggle .switch {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background 0.15s ease;
}

.autosave-toggle .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 0.15s ease;
}

.autosave-toggle input:checked + .switch {
  background: var(--primary);
}

.autosave-toggle input:checked + .switch::after {
  transform: translateX(13px);
}

.autosave-toggle input:focus-visible + .switch {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.autosave-label {
  font-weight: 600;
}

.save-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  /* F32: the icon is ALWAYS fully visible (was --text-muted — the "dot"
     bug: a 16px floppy at 0.55 opacity read as a faint dot). */
  color: var(--text);
  cursor: pointer;
}
/* F33: the icon is a flex item and was collapsing to ~3px wide (a flexbox
   min-size collapse on the replaced element) — the floppy read as a dot.
   Pin it to its intrinsic size so it never shrinks. */
.save-icon-btn svg {
  flex-shrink: 0;
}

.save-icon-btn:hover:not(:disabled) {
  color: var(--primary);
  border-color: var(--primary);
}

/* F32: disabled (idle / nothing to save) only changes the cursor + a subtle
   ring — never the opacity. The glyph stays crisp. */
.save-icon-btn:disabled {
  opacity: 1;
  cursor: default;
  box-shadow: 0 0 0 1px var(--border);
}

.save-icon-btn.saving,
.save-icon-btn.saved {
  opacity: 1;
}

.save-icon-btn.saving {
  color: var(--primary);
  border-color: var(--primary);
}

.save-icon-btn.saved {
  color: var(--success);
  border-color: var(--success);
  animation: save-flash 0.6s ease;
}

.save-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  animation: save-spin 0.7s linear infinite;
}

@keyframes save-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes save-flash {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

/* Adaptive section-card grid: 2 columns on normal screens, 3+ on wide,
   1 on narrow — the widescreen requirement (no fixed page cap). */
.profile-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-gap: 1rem 1.25rem;
  gap: 1rem 1.25rem;
  align-items: start;
}

.profile-section-card {
  margin-bottom: 0;
}

.profile-section-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.profile-section-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

.profile-section-icon {
  display: inline-flex;
  color: var(--primary);
}

.profile-editor .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}

.profile-editor .field:last-child {
  margin-bottom: 0;
}

.profile-editor .field > label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.profile-editor .field input::placeholder,
.profile-editor .field textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.profile-update-lock {
  display: inline-flex;
  align-items: center;
  color: var(--warning);
}

.profile-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Consistent (non-native) select look for the short fixed option lists. */
.select-styled {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 11px) 55%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.8rem;
}

/* CSS tooltip (hover + focus, no dependency). */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  color: var(--text-muted);
  cursor: help;
}

.tooltip-trigger:hover,
.tooltip-trigger:focus-visible {
  color: var(--primary);
}

.tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  z-index: 40;
  max-width: 260px;
  width: max-content;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: var(--surface-hover);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.tooltip-wrap:hover .tooltip-bubble,
.tooltip-wrap:focus-within .tooltip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Searchable dropdown (combobox). */
.searchable-select {
  position: relative;
}

.searchable-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}

.searchable-select-list li button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}

.searchable-select-list li.highlighted button {
  background: var(--surface-hover);
  color: var(--primary);
}

.searchable-select-list li[aria-selected="true"] button {
  font-weight: 700;
  color: var(--primary);
}

.searchable-select-empty {
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}

/* Effective-permissions panel (Overrides tab). */
.effective-panel {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

.effective-panel h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.effective-search {
  width: 100%;
  max-width: 340px;
  margin-bottom: 0.75rem;
}

.perm-group {
  margin-bottom: 0.6rem;
}

.perm-group-header {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  padding: 0.15rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  cursor: pointer;
}

.perm-group-caret {
  display: inline-block;
  transition: transform 0.12s ease;
}

.perm-group-caret.open {
  transform: rotate(90deg);
}

.perm-group-count {
  font-weight: 500;
}

.perm-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.perm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  background: var(--surface);
}

.perm-chip-level {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.perm-admin {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.perm-unlimited {
  color: var(--success);
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.perm-edit {
  color: var(--text);
  background: var(--surface-hover);
}

.perm-view {
  color: var(--text-muted);
}

.perm-off {
  color: color-mix(in srgb, var(--text-muted) 60%, transparent);
  text-decoration: line-through;
  opacity: 0.7;
}

.grants-add-heading {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.95rem;
}

/* Two-column field grid (group details form). */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.9rem 1.25rem;
  gap: 0.9rem 1.25rem;
}

@media (max-width: 720px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- F34b personal assistant ------------------------------------------ */

/* The first-chat onboarding: a centered card (not a raw form), fields
   stacked vertically with .form-label labels + tooltip helper text. */
.assistant-onboarding {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}

.assistant-onboarding-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.assistant-onboarding-card .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}