/* Ported to the React build from css/worksheets.css — tokens reconciled to the
   Pursuit DS 2026 canonical sheet (legacy --border/--radius/--secondary names
   replaced; see react/css/bridge.css for remaining aliases). */

/* ========================================================================
   WORKSHEETS  (sidebar → Worksheets)

   A library of Workbooks (binders) → Worksheets (sheets) and the
   single-sheet spreadsheet detail view. Reuses the global-header search
   bar (reparented into #global-search-slot, like the Inbox) and runs in
   its own full-width work area. CSS toggles via
   .app-frame[data-mode="worksheets"].
   ======================================================================== */

/* Tokens this sheet needs that base.css doesn't define. base.css ships a
   partial --ps-* palette (colors_and_type.css isn't linked app-wide), so
   we backfill ONLY the missing steps here with their canonical design-
   system values. All are additive — base.css defines none of these — so
   no other page is affected. */
:root {
  --ps-primary-50:  #f6f7ff;
  --ps-primary-300: #919cff;
  --ps-primary-600: #3e4ccc;
  --ps-secondary-50:  #ebf4ee;
  --ps-secondary-600: #36684a;
  --ps-secondary-700: #284e37;
  --ps-quaternary-100: #dfd6ed;
  --ps-quaternary-700: #4d376e;
  --ps-neutral-75:  #f9f9fa;
  --ps-neutral-115: #f2f2f3;
  --ps-neutral-125: #eeeeef;
  --ps-neutral-600: #3f3f46;
  --divider: #e5e5e6;
  --font-display: 'IBM Plex Sans', sans-serif;
}

/* ---- Chrome: full-width work area + global-header search --------------- */
.app-frame[data-mode="worksheets"] .global-search-slot { display: flex; }
.app-frame[data-mode="worksheets"] .floating-widget-spacer { display: none; }
.app-frame[data-mode="worksheets"] .body { padding: 0; gap: 0; }
.app-frame[data-mode="worksheets"] .content-panel { padding: 0; }
.app-frame[data-mode="worksheets"] .page-header { display: none; }
/* Search-side header CTAs aren't relevant here; we render our own. */
.app-frame[data-mode="worksheets"] .header-actions > .btn-secondary-cta,
.app-frame[data-mode="worksheets"] #save-search-split,
.app-frame[data-mode="worksheets"] #create-agent-btn { display: none; }

.ws-page {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 40px 64px;
}

/* ---- Library: header -------------------------------------------------- */
.ws-lib-head { margin-bottom: 28px; }
.ws-lib-title {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--foreground); margin: 0;
}
.ws-lib-sub {
  font-size: 15px; color: var(--ps-neutral-500);
  margin: 6px 0 0;
}

/* ---- Section overline ------------------------------------------------- */
.ws-overline {
  font-family: "IBM Plex Sans";
  font-size: 14px; font-weight: 800; letter-spacing: 0; line-height: 1.4;
  color: var(--ps-neutral-500);
  margin: 0 0 14px;
}

/* ---- Recents rail ----------------------------------------------------- */
.ws-recents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ws-recent {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(20,20,23,0.04), 0 4px 14px rgba(20,20,23,0.04);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer; text-align: left;
  transition: box-shadow 140ms, transform 140ms;
}
.ws-recent:hover {
  box-shadow: 0 2px 4px rgba(20,20,23,0.06), 0 10px 24px rgba(15,19,51,0.08);
  transform: translateY(-1px);
}
.ws-recent-ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-recent-ico i { width: 20px; height: 20px; }
.ws-ent-accounts { background: var(--ps-primary-60); color: var(--ps-primary-600); }
.ws-ent-contacts { background: var(--ps-secondary-50); color: var(--ps-secondary-600); }
.ws-ent-signals  { background: var(--ps-tertiary-50);  color: var(--ps-tertiary-700); }
.ws-recent-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-recent-name, .ws-recent-meta { display: block; }
.ws-recent-name {
  font-size: 15px; font-weight: 600; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-recent-meta {
  font-size: 13px; color: var(--ps-neutral-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.ws-recent-count {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; color: var(--ps-neutral-500);
  background: var(--ps-neutral-115);
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.ws-recent-arrow { color: var(--ps-neutral-300); flex-shrink: 0; display: inline-flex; }
.ws-recent:hover .ws-recent-arrow { color: var(--primary); }

/* ---- Divider ---------------------------------------------------------- */
.ws-divider { height: 1px; background: var(--divider); margin: 28px 0; }

/* ---- All Workbooks header row ----------------------------------------- */
.ws-wb-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ws-wb-head h2 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--foreground); margin: 0;
}
.ws-count-pill {
  font-size: 12px; font-weight: 500; color: var(--ps-neutral-500);
  background: var(--ps-neutral-115);
  padding: 3px 10px; border-radius: 999px;
}
.ws-wb-head-spacer { flex: 1; }

/* New split button */
.ws-split {
  display: inline-flex; align-items: stretch;
  border-radius: 9px; overflow: hidden;
  background: var(--primary);
  box-shadow: var(--shadow-xs);
}
.ws-split-main {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 0; cursor: pointer;
  background: transparent; color: #fff;
  white-space: nowrap;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
}
.ws-split-main i, .ws-split-main svg { width: 16px; height: 16px; }
.ws-split-main:hover, .ws-split-trig:hover { background: rgba(255,255,255,0.12); }
.ws-split-div { width: 1px; background: rgba(255,255,255,0.28); }
.ws-split-trig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; border: 0; cursor: pointer;
  background: transparent; color: #fff;
}
.ws-split-trig i, .ws-split-trig svg { width: 16px; height: 16px; }
.ws-split-wrap { position: relative; }
.ws-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px; z-index: 40;
  background: var(--popover);
  border: 1px solid var(--divider);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,19,51,0.14), 0 2px 6px rgba(15,19,51,0.06);
  padding: 6px;
}
.ws-menu[hidden] { display: none; }
.ws-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; color: var(--foreground);
}
.ws-menu-item:hover { background: var(--accent); }
.ws-menu-item i, .ws-menu-item svg { width: 16px; height: 16px; color: var(--ps-neutral-400); }

/* ---- Workbook table --------------------------------------------------- */
.ws-table-card {
  background: var(--card);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(20,20,23,0.04), 0 6px 18px rgba(20,20,23,0.04);
  border-radius: 16px;
  overflow-x: auto;
}
.ws-table { width: 100%; border-collapse: collapse; }
.ws-table thead th {
  text-align: left;
  font-size: 13px; font-weight: 600; color: var(--foreground);
  letter-spacing: 0; text-transform: none;
  font-family: 'IBM Plex Sans', sans-serif;
  padding: 16px;
  background: linear-gradient(180deg, #EEEEEF 49%, #f2f2f3 100%);
  border-bottom: 1px solid #fff;
  white-space: nowrap;
}
.ws-table thead th.ws-num { text-align: right; }
.ws-th-name { padding-left: 22px !important; }

.ws-row { cursor: pointer; transition: background 110ms; }
.ws-row > td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ps-neutral-125);
  font-size: 14px; color: var(--foreground);
  vertical-align: middle;
}
.ws-table tbody tr:last-child > td { border-bottom: 0; }
.ws-row:hover { background: var(--ps-neutral-100); }

/* Name cell */
.ws-name-cell { padding-left: 22px !important; }
.ws-name-inner { display: flex; align-items: center; gap: 10px; }
.ws-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--ps-neutral-400);
  transition: transform 140ms;
}
.ws-chev.open { transform: rotate(90deg); }
.ws-chev-spacer { width: 18px; flex-shrink: 0; }
.ws-row-ico {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-row-ico i, .ws-row-ico svg { width: 16px; height: 16px; }
.ws-ico-wb { background: var(--ps-primary-60); color: var(--ps-primary-600); }
.ws-name-text { font-weight: 600; white-space: nowrap; }
.ws-row.is-sheet .ws-name-text { font-weight: 400; }

/* Numeric / meta cells */
.ws-num { text-align: right; font-variant-numeric: tabular-nums; }
.ws-muted { color: var(--ps-neutral-400); }
.ws-records { color: var(--ps-neutral-600); }
.ws-updated { color: var(--ps-neutral-400); white-space: nowrap; font-size: 13px; }

/* Permission badges */
.ws-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: 999px;
}
.ws-badge-private { background: var(--ps-secondary-50); color: var(--ps-secondary-700); }
.ws-badge-company { background: var(--ps-quaternary-100); color: var(--ps-quaternary-700); }
.ws-badge-shared  { background: var(--ps-primary-60);  color: var(--ps-primary-700); }

.ws-sched-link {
  color: var(--primary); font-weight: 500; cursor: pointer;
}
.ws-sched-link:hover { text-decoration: underline; }

/* Overflow button */
.ws-of {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ps-neutral-400);
}
.ws-of:hover { background: var(--ps-neutral-150); color: var(--foreground); }
.ws-of-cell { width: 44px; text-align: center; }

/* Expanded workbook + nested sheet rows */
.ws-row.is-workbook.expanded { background: var(--ps-primary-50); }
.ws-row.is-workbook.expanded:hover { background: var(--ps-primary-60); }
.ws-row.is-sheet { background: var(--ps-primary-50); }
.ws-row.is-sheet:hover { background: var(--ps-primary-60); }
.ws-row.is-sheet > td { border-bottom-color: var(--ps-primary-75); }
.ws-row.is-sheet .ws-name-cell {
  box-shadow: inset 3px 0 0 var(--ps-primary-300);
}
.ws-sheet-indent { width: 22px; flex-shrink: 0; }

/* ---- Drop zone -------------------------------------------------------- */
.ws-dropzone {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 26px;
  border: 1.5px dashed var(--ps-neutral-200);
  border-radius: 14px;
  background: var(--ps-neutral-75);
  color: var(--ps-neutral-500); font-size: 14px;
  cursor: pointer; transition: border-color 140ms, background 140ms;
}
.ws-dropzone:hover { border-color: var(--ps-primary-300); background: var(--ps-primary-50); }
.ws-dropzone i { width: 20px; height: 20px; color: var(--ps-neutral-400); }
.ws-dropzone .ws-dz-link { color: var(--primary); font-weight: 500; }

/* ========================================================================
   DETAIL — single sheet spreadsheet
   ======================================================================== */
.ws-det-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 22px;
}
.ws-det-title {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--foreground); margin: 0;
}
.ws-det-source {
  display: flex; width: fit-content;
  align-items: center; gap: 7px;
  margin-top: 10px;
  font-size: 14px; font-weight: 500; color: var(--primary);
  cursor: pointer;
}
.ws-det-source:hover { text-decoration: underline; }
.ws-det-source i { width: 15px; height: 15px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px;
  white-space: nowrap;
  background: var(--UI-elements-hollow);
  color: var(--secondary-foreground);
  border: 1px solid #fff; border-top-width: 1.5px;
  cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  transition: opacity 0.15s;
}
.btn-ghost:hover { opacity: 0.9; }
.btn-ghost i, .btn-ghost svg { width: 16px; height: 16px; }

/* Save Results header CTA (rendered into #header-tpl-actions) */
.ws-save-results {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px;
  white-space: nowrap;
  background: var(--primary); color: #fff;
  border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
}
.ws-save-results:hover { opacity: 0.92; }
.ws-save-results i { width: 16px; height: 16px; }

/* Toolbar */
.ws-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.ws-tool-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px;
  white-space: nowrap;
  background: var(--UI-elements-hollow);
  color: var(--secondary-foreground);
  border: 1px solid #fff; border-top-width: 1.5px;
  cursor: pointer; flex-shrink: 0;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  transition: opacity 0.15s;
}
.ws-tool-btn:hover { opacity: 0.9; }
.ws-tool-btn i, .ws-tool-btn svg { width: 16px; height: 16px; }

.ws-tool-search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-radius: 8px;
  background: var(--card);
  border: 1px solid #fff; border-bottom-width: 1.5px;
  box-shadow: 0 0 16px rgba(146, 146, 151, 0.1);
  transition: box-shadow 120ms, border-color 120ms;
}
.ws-tool-search:focus-within { border-color: var(--primary); border-bottom-color: var(--primary); }
.ws-tool-search i, .ws-tool-search svg { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; }
.ws-tool-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 14px; line-height: 1.4286; color: var(--foreground);
}
.ws-tool-search input::placeholder { color: var(--muted-foreground); }

/* Spreadsheet */
.ws-sheet-card {
  background: var(--card);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(20,20,23,0.04), 0 6px 18px rgba(20,20,23,0.04);
  border-radius: 16px;
  overflow-x: auto;
}
/* Auto layout keeps columns content-sized and readable; width:100% makes
   the table fill (and distribute slack across) the full available width
   of the uncapped detail view. The wide free-text columns (Website,
   Signal, AI summaries) are capped + truncated so the table fits common
   widths; on a genuinely narrow viewport it scrolls rather than crushing
   columns to unreadability. */
.ws-grid { width: 100%; border-collapse: collapse; table-layout: auto; }
.ws-grid td.ws-signal-cell,
.ws-grid td.ws-ai-cell { max-width: 200px; }
.ws-grid td.ws-signal-cell { overflow: hidden; text-overflow: ellipsis; }
.ws-grid-name { min-width: 0; }
.ws-grid-name .ws-row-ico { flex: 0 0 auto; }
.ws-grid-name .nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 200px;
}
.ws-grid thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  font-size: 13px; font-weight: 600; color: var(--foreground);
  letter-spacing: 0; text-transform: none;
  font-family: 'IBM Plex Sans', sans-serif;
  background: linear-gradient(180deg, #EEEEEF 49%, #f2f2f3 100%);
  padding: 16px;
  border-bottom: 1px solid #fff;
  white-space: nowrap;
}
.ws-grid thead th.ws-num { text-align: right; }
.ws-grid-ai-head { line-height: 1.25; }
.ws-grid-ai-head .ws-ai-src {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--primary);
  margin-top: 3px;
}
.ws-grid-ai-head .ws-ai-src i { width: 11px; height: 11px; }
.ws-grid tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ps-neutral-125);
  font-size: 14px; color: var(--foreground);
  vertical-align: middle;
}
.ws-grid tbody tr:last-child td { border-bottom: 0; }
.ws-grid tbody tr:hover { background: var(--ps-neutral-75); }
.ws-grid tbody tr.selected { background: var(--ps-primary-50); }

.ws-cb-cell { width: 32px; padding: 14px 0 14px 16px !important; }
/* Round selection checkbox — matches Search's .cb-box pattern. */
.ws-grid .cb-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ws-grid .row-check {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.ws-grid .cb-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ps-neutral-200);
  background: var(--primary-foreground, #fcfcfd);
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.ws-grid .cb-box:hover { border-color: var(--primary); }
.ws-grid .cb-box.checked,
.ws-grid .cb-box.indeterminate {
  background: var(--primary);
  border-color: var(--primary);
}
.ws-grid .cb-box i,
.ws-grid .cb-box svg {
  color: var(--primary-foreground);
  stroke: var(--primary-foreground);
}
.ws-grid-name { display: flex; align-items: center; gap: 10px; }
.ws-grid-name .ws-row-ico { width: 26px; height: 26px; border-radius: 7px; }
.ws-grid-name .ws-row-ico i, .ws-grid-name .ws-row-ico svg { width: 15px; height: 15px; }
.ws-grid-name .nm { font-weight: 600; }
/* Fit-to-content columns (First Name, Last Name, Phone): take exactly the
   width of their widest cell and never wrap or truncate. The width:1% +
   white-space:nowrap pairing makes an auto-layout table shrink the column
   to its max-content width. */
.ws-grid th.ws-col-fit,
.ws-grid td.ws-col-fit { width: 1%; white-space: nowrap; }
.ws-grid td.ws-col-fit .nm {
  max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap;
}
.ws-link { color: var(--primary); cursor: pointer; }
.ws-link:hover { text-decoration: underline; }
.ws-num { text-align: right; font-variant-numeric: tabular-nums; }

/* CJIS / compliance flag chip + compelling-event cell */
.ws-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 6px;
}
.ws-chip-cjis { background: var(--ps-tertiary-50); color: var(--ps-tertiary-700); }
.ws-signal-cell { color: var(--ps-neutral-600); white-space: nowrap; }

/* The sheet detail (spreadsheet) flexes to fill the full available
   horizontal space — no centered max-width cap like the library. It also
   fills the available HEIGHT: the page is a flex column and the table card
   grows to take the remaining space and scrolls internally. */
.ws-page--sheet { max-width: none; margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-bottom: 32px; }

/* AI column cell — summary columns mirror the Worksheet-tab AI fields,
   one line with ellipsis truncation. Header carries a sparkle to signal
   an AI-generated column. Cells flex with the table rather than forcing
   a fixed min-width. */
.ws-grid th.ws-ai-head {
  white-space: nowrap;
  color: var(--ps-primary-700);
}
.ws-grid th.ws-ai-head-edit { cursor: pointer; border-radius: 6px; transition: background 120ms, color 120ms; }
.ws-grid th.ws-ai-head-edit:hover { color: var(--ps-primary-800, #2b32b8); background: var(--ps-primary-60); }
.ws-grid th.ws-ai-head-edit:hover .ws-ai-head-ico { opacity: 1; }
.ws-ai-head-ico {
  width: 13px; height: 13px;
  vertical-align: -2px; margin-right: 5px;
  color: var(--ps-primary-500); opacity: 0.85;
}
.ws-grid td.ws-ai-cell { max-width: 0; }
.ws-ai-val {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ps-neutral-600);
}
.ws-ai-more { font-size: 13px; color: var(--primary); cursor: pointer; }
.ws-ai-more:hover { text-decoration: underline; }
.ws-of-head { width: 44px; }

/* ========================================================================
   SAVE TO WORKSHEET — combobox modal (js/16-ws-save-modal.js)
   Self-contained, `wsm-*`-namespaced so it never collides with the app's
   own .modal / .btn chrome. Mirrors the reference dialog.
   ======================================================================== */
.wsm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.wsm-overlay.open { opacity: 1; pointer-events: auto; }
.wsm-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.2s;
  max-height: 90vh; display: flex; flex-direction: column; overflow: visible;
}
.wsm-overlay.open .wsm-modal { transform: scale(1) translateY(0); }
.wsm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.wsm-title { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--foreground); }
.wsm-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer; font-size: 20px;
  color: var(--muted-foreground); border: none; background: none;
  transition: background 0.1s;
}
.wsm-close:hover { background: var(--ps-neutral-100); }
.wsm-body { padding: 20px 24px; overflow: visible; }
.wsm-footer {
  padding: 16px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--ps-neutral-150);
}

.wsm-field { margin-bottom: 16px; }
.wsm-field:last-child { margin-bottom: 0; }
.wsm-field-note { border-top: 1px solid var(--ps-neutral-150); padding-top: 12px; }
.wsm-label {
  display: block; font-family: var(--font-body);
  font-size: 13px; font-weight: 500; color: var(--foreground); margin-bottom: 6px;
}

/* Combobox */
.wsm-combo { position: relative; }
.wsm-input-wrap {
  display: flex; align-items: center;
  border: 1px solid var(--ps-neutral-150); border-radius: 8px;
  background: #fff; padding: 0 10px; height: 38px;
  transition: border-color 0.15s, box-shadow 0.15s; cursor: text;
}
.wsm-input-wrap:focus-within { border-color: var(--ps-primary-500); box-shadow: 0 0 0 3px rgba(77,95,255,0.12); }
.wsm-input-wrap.readonly { background: var(--ps-neutral-100); cursor: default; }
.wsm-input {
  flex: 1; min-width: 0; border: none; outline: none;
  font-family: var(--font-body); font-size: 14px; color: var(--foreground); background: transparent;
}
.wsm-input::placeholder { color: var(--ps-neutral-200); }
.wsm-input.readonly { pointer-events: none; }
.wsm-meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground);
  margin-left: 8px; white-space: nowrap;
}
.wsm-clear {
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: var(--ps-neutral-200); color: var(--ps-neutral-500);
  cursor: pointer; margin-left: 6px; transition: background 0.1s; flex-shrink: 0;
}
.wsm-clear:hover { background: var(--ps-neutral-500); color: #fff; }
.wsm-clear svg { width: 12px; height: 12px; }
.wsm-clear.visible { display: flex; }
.wsm-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  padding: 1px 7px; border-radius: 10px;
  background: var(--ps-primary-50); color: var(--ps-primary-500);
  margin-left: 8px; letter-spacing: 0.2px;
}

/* Notes */
.wsm-note {
  display: block; width: 100%; min-height: 80px;
  border: 1px solid var(--ps-neutral-150); border-radius: 8px; background: #fff;
  padding: 8px 12px; font-family: var(--font-body); font-size: 13px;
  color: var(--foreground); line-height: 1.4; resize: vertical; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wsm-note:focus { border-color: var(--ps-primary-500); box-shadow: 0 0 0 3px rgba(77,95,255,0.12); }
.wsm-note::placeholder { color: var(--ps-neutral-200); }

/* Popover */
.wsm-popover {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: #fff; border: 1px solid var(--ps-neutral-150); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.05);
  max-height: 260px; overflow-y: auto; padding: 4px;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s;
}
.wsm-popover.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.wsm-pop-label {
  padding: 6px 10px 4px; font-family: var(--font-body);
  font-size: 11px; font-weight: 600; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.wsm-pop-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: background 0.08s;
}
.wsm-pop-item:hover { background: var(--ps-neutral-100); }
.wsm-pop-item.highlighted { background: var(--ps-primary-50); }
.wsm-pop-left { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wsm-pop-name {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wsm-pop-sub {
  font-family: var(--font-body); font-size: 12px; color: var(--muted-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wsm-pop-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wsm-pop-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); }
.wsm-pop-create {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: background 0.08s;
  color: var(--ps-primary-500); font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.wsm-pop-create:hover, .wsm-pop-create.highlighted { background: var(--ps-primary-50); }
.wsm-pop-empty { padding: 24px 16px; text-align: center; color: var(--muted-foreground); font-size: 13px; }
.wsm-pop-empty-icon {
  width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%;
  background: var(--ps-neutral-100); display: flex; align-items: center; justify-content: center;
  color: var(--ps-neutral-200);
}
.wsm-pop-divider { height: 1px; background: var(--ps-neutral-150); margin: 4px 0; }
.wsm-pop-none {
  display: flex; align-items: center; padding: 8px 10px; border-radius: 4px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--muted-foreground); font-style: italic;
  transition: background 0.08s;
}
.wsm-pop-none:hover { background: var(--ps-neutral-100); }
.wsm-pop-none.highlighted { background: var(--ps-primary-50); }

/* Buttons */
.wsm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; transition: all 0.15s;
  white-space: nowrap; line-height: 1.3;
}
.wsm-btn-outline { background: #fff; border-color: var(--ps-neutral-150); color: var(--foreground); }
.wsm-btn-outline:hover { background: var(--ps-neutral-100); }
.wsm-btn-primary { background: var(--ps-primary-500); color: #fff; border-color: var(--ps-primary-500); }
.wsm-btn-primary:hover { background: var(--ps-primary-600); border-color: var(--ps-primary-600); }
.wsm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.wsm-btn-primary:disabled:hover { background: var(--ps-primary-500); }

/* ========================================================================
   RECORD DRILL-IN  (data-mode="ws-detail")
   Reuses the 3-column detail shell: sidebar | floating records panel |
   work-area (detail body rendered by the JSON drawer). We hide the
   search-side chrome inside the floating widget and surface #records-nav,
   exactly like Search's detail mode.
   ======================================================================== */
.app-frame[data-mode="ws-detail"] .fw-toolbar,
.app-frame[data-mode="ws-detail"] .ss-section,
.app-frame[data-mode="ws-detail"] #field-list,
.app-frame[data-mode="ws-detail"] .page-header,
.app-frame[data-mode="ws-detail"] .global-search-slot,
.app-frame[data-mode="ws-detail"] .header-actions > .btn-secondary-cta,
.app-frame[data-mode="ws-detail"] #save-search-split,
.app-frame[data-mode="ws-detail"] #create-agent-btn { display: none; }
.app-frame[data-mode="ws-detail"] #records-nav { display: flex; }
.app-frame[data-mode="ws-detail"] .floating-widget { padding: 0; overflow: hidden; }

/* Header actions in this mode (Ask AI + Save Results) — our own buttons. */
.ws-save-results {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font: 500 14px/1.43 var(--font-body);
  color: var(--primary-foreground);
  background: var(--ps-primary-500);
  border: 0; border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.ws-save-results:hover { background: var(--ps-primary-600); }
.ws-save-results i { width: 16px; height: 16px; }

/* Worksheet-tab body = the JSON drawer, rendered inside the canonical
   detail body (the injected first tab of the detail component). */
.wsd-drawer { width: 100%; }

/* AI-column card names carry a sparkle (the cards in the Worksheet tab
   are the record's AI-generated columns). */
.wsd-drawer .jd-card-header-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.wsd-ai-spark {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  color: var(--ps-primary-500);
}
.wsd-ai-spark svg { width: 15px; height: 15px; }

/* Spreadsheet rows are now clickable into the drill-in. */
.app-frame[data-mode="worksheets"] .ws-grid tbody tr { cursor: pointer; }

/* ---- Full-height sheet layout ----------------------------------------
   Make the whole worksheet content area flex to fill the viewport height
   so the spreadsheet table fills the available space (and scrolls inside
   itself) instead of the whole page scrolling. Scoped to the sheet view
   via :has() so the library (centered, scrollable) is unaffected. */
.app-frame[data-mode="worksheets"] .content-panel:has(.ws-page--sheet) { overflow: hidden; }
.app-frame[data-mode="worksheets"] #work-area:has(.ws-page--sheet) > [data-role="agent"] {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.ws-page--sheet .ws-sheet-card {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
}

/* ========================================================================
   ADD AI COLUMN — modal (js/18-ai-column.js)
   Focused centered modal opened from the worksheet toolbar's "Add Column".
   Namespaced `aic-*` so it never collides with the app's own modal chrome.
   ======================================================================== */
.aic-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(11,11,13,0.46);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.aic-overlay.open { opacity: 1; pointer-events: auto; }
.aic-shell {
  background: var(--card);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(11,11,13,0.22), 0 4px 12px rgba(11,11,13,0.10);
  border-radius: 16px;
  width: 580px; max-width: calc(100vw - 48px);
  max-height: min(86vh, 760px);
  transform: scale(0.96) translateY(8px);
  transition: width 0.34s cubic-bezier(0.16,1,0.3,1), transform 0.2s;
}
.aic-overlay.open .aic-shell { transform: scale(1) translateY(0); }
.aic-shell.with-preview { width: 980px; }

/* header */
.aic-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 10px; flex-shrink: 0; }
.aic-head-spark { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ps-primary-60); color: var(--primary); }
.aic-head-spark i { width: 17px; height: 17px; }
.aic-back { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: background 120ms; }
.aic-back:hover { background: var(--ps-neutral-100); color: var(--foreground); }
.aic-back i { width: 18px; height: 18px; }
.aic-title { font-size: 18px; font-weight: 600; color: var(--foreground); flex: 1; min-width: 0; }
.aic-close { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: background 120ms; }
.aic-close:hover { background: var(--ps-neutral-100); color: var(--foreground); }
.aic-close i { width: 18px; height: 18px; }

/* split body: editor left, preview right */
.aic-a-body { display: flex; flex: 1; min-height: 0; }
.aic-a-left { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; min-height: 0; transition: width 0.34s cubic-bezier(0.16,1,0.3,1); }
.with-preview .aic-a-left { width: 520px; border-right: 1px solid var(--hairline); }
.aic-a-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ps-neutral-75, #f9f9fa); opacity: 0; pointer-events: none; }
.with-preview .aic-a-preview { opacity: 1; pointer-events: auto; transition: opacity 0.24s 0.12s; }

/* picker — type grid (3-up cards) */
.aic-picker { padding: 16px 20px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; background: var(--card); }
.aic-pick-label { font: 500 14px/1.2 var(--font-body); color: var(--muted-foreground); margin: 0 0 11px; }
.aic-pick-label--lib { margin-top: 22px; }
.aic-typegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aic-type { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; min-height: 118px; cursor: pointer; text-align: left; background: #fff; border: 1px solid #fff; border-top: 1.5px solid #fff; border-radius: 8px; box-shadow: var(--shadow-xs); transition: box-shadow 120ms, transform 120ms; }
.aic-type:hover { box-shadow: 0 2px 4px rgba(20,20,23,0.05), 0 8px 20px rgba(15,19,51,0.07); transform: translateY(-1px); }
.aic-type-ico { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.aic-type-ico i { width: 19px; height: 19px; }
.aic-type-text { width: 100%; }
.aic-type-name { display: block; font: 600 14px/1.25 var(--font-body); color: var(--foreground); }
.aic-type-desc { display: block; margin-top: 4px; max-width: 100%; font: 400 12px/1.35 var(--font-body); color: var(--ps-neutral-500); white-space: normal; overflow-wrap: anywhere; }
.tint-pen   { background: #efe2fb; color: #7b3fb8; }
.tint-score { background: #ffe6cf; color: #c0691a; }
.tint-find  { background: #d7e3ff; color: #2f4fd0; }
.tint-shield{ background: #d7efe0; color: #2f8a5a; }
.tint-talk  { background: #d4efe9; color: #208a72; }
.tint-custom{ background: #d6ecff; color: #1f7fc0; }

/* picker — skinny “Add Notes Column” row (manual, non-AI) */
.aic-noterow { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 9px 14px; cursor: pointer; text-align: left; background: #fff; border: 1px solid #fff; border-top: 1.5px solid #fff; border-radius: 8px; box-shadow: var(--shadow-xs); transition: box-shadow 120ms, transform 120ms; }
.aic-noterow:hover { box-shadow: 0 2px 4px rgba(20,20,23,0.05), 0 8px 20px rgba(15,19,51,0.07); transform: translateY(-1px); }
.aic-noterow-ico { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ps-tertiary-100, #f6f3d1); color: var(--ps-tertiary-700, #847b2b); }
.aic-noterow-ico i { width: 15px; height: 15px; }
.aic-noterow-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.aic-noterow-name { font: 600 13px/1.3 var(--font-body); color: var(--foreground); }
.aic-noterow-desc { font: 400 12px/1.3 var(--font-body); color: var(--ps-neutral-500); }
.aic-noterow-plus { width: 16px; height: 16px; color: var(--ps-neutral-400); flex-shrink: 0; }

/* manual Notes column — header pencil + editable grid cell */
.ws-note-head-ico { color: var(--ps-neutral-500); }
.ws-note-cell { vertical-align: middle; }
.ws-note-edit { display: block; min-height: 20px; padding: 3px 7px; margin: -3px -7px; border-radius: 6px; font: 400 13px/1.4 var(--font-body); color: var(--foreground); outline: none; cursor: text; transition: background-color 120ms, box-shadow 120ms; white-space: pre-wrap; word-break: break-word; }
.ws-note-edit:hover { background: var(--ps-neutral-100); }
.ws-note-edit:focus { background: #fff; box-shadow: 0 0 0 2px var(--ps-primary-75, rgba(77,95,255,0.28)); }
.ws-note-edit:empty::before { content: attr(data-placeholder); color: var(--ps-neutral-300); pointer-events: none; }
.wsd-note-edit { min-height: 56px; padding: 9px 11px; border-radius: 8px; background: var(--card, #f9f9fa); border: 1px solid #fff; border-top: 1.5px solid #fff; font: 400 14px/1.55 var(--font-body); color: var(--foreground); outline: none; cursor: text; white-space: pre-wrap; word-break: break-word; transition: box-shadow 120ms; }
.wsd-note-edit:focus { box-shadow: 0 0 0 3px var(--ps-primary-75, rgba(77,95,255,0.28)); }
.wsd-note-edit:empty::before { content: attr(data-placeholder); color: var(--ps-neutral-300); pointer-events: none; }
/* picker — library combobox */
.aic-libcombo { position: relative; }
.aic-libcombo-field { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid #fff; border-bottom: 1.5px solid #fff; border-radius: 8px; background: var(--background); cursor: text; transition: border-color .15s, box-shadow .15s; }
.aic-libcombo-field.open, .aic-libcombo-field:focus-within { border-color: var(--ps-primary-500); border-bottom-color: var(--ps-primary-500); box-shadow: 0 0 0 3px var(--ps-primary-75, #e5e7ff); }
.aic-libcombo-field > i:first-child, .aic-libcombo-field > svg:first-child { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; }
.aic-libcombo-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--font-body); color: var(--foreground); }
.aic-libcombo-input::placeholder { color: var(--muted-foreground); }
.aic-libcombo-chev { width: 16px; height: 16px; color: var(--ps-neutral-300); flex-shrink: 0; }
.aic-libpop { position: fixed; z-index: 260; margin-top: 0; border: 1px solid #fff; border-radius: 8px; background: #fff; box-shadow: var(--shadow-lg, 0 4px 16px rgba(146,146,151,0.18)); padding: 6px; max-height: 240px; overflow-y: auto; }
.aic-libpop[hidden] { display: none; }
.aic-lib-head { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ps-neutral-400); padding: 5px 9px 6px; }
.aic-lib-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.aic-lib-item:hover { background: var(--ps-primary-60); }
.aic-lib-ico { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ps-neutral-115, #f2f2f3); color: var(--ps-neutral-500); margin-top: 1px; }
.aic-lib-ico i, .aic-lib-ico svg { width: 16px; height: 16px; }
.aic-lib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aic-lib-row { display: flex; align-items: center; gap: 8px; }
.aic-lib-name { flex: 1; min-width: 0; font: 500 13px var(--font-body); color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aic-lib-desc { font: 400 12px/1.45 var(--font-body); color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aic-lib-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ps-neutral-500); background: var(--ps-neutral-115, #f2f2f3); padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
.aic-lib-empty { padding: 16px 12px; text-align: center; color: var(--ps-neutral-400); font-size: 13px; }

/* editor */
.aic-editor { padding: 18px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.aic-field { margin-bottom: 18px; }
.aic-field:last-child { margin-bottom: 0; }
.aic-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--foreground); margin-bottom: 6px; }
.aic-label .req { color: var(--destructive); margin-left: 2px; }
.aic-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid #fff; border-bottom: 1.5px solid #fff; border-radius: 8px; background: var(--background); font: 400 14px/1 var(--font-body); color: var(--foreground); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.aic-input::placeholder { color: var(--muted-foreground); }
.aic-input:focus { border-color: var(--ps-primary-500); border-bottom-color: var(--ps-primary-500); box-shadow: 0 0 0 3px var(--ps-primary-75, #e5e7ff); }
.aic-opt { font-weight: 400; color: var(--ps-neutral-400); }
.aic-select-wrap { position: relative; }
.aic-select { width: 100%; height: 38px; padding: 0 36px 0 12px; border: 1px solid #fff; border-bottom: 1.5px solid #fff; border-radius: 8px; background: var(--background); font: 400 14px/1 var(--font-body); color: var(--foreground); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 0.15s, box-shadow 0.15s; }
.aic-select:focus { border-color: var(--ps-primary-500); border-bottom-color: var(--ps-primary-500); box-shadow: 0 0 0 3px var(--ps-primary-75, #e5e7ff); }
.aic-select-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ps-neutral-400); pointer-events: none; }
.aic-seg-row { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--UI-elements-hollow); border-radius: 8px; border: 0.5px solid #fff; border-bottom-width: 1px; }
.aic-seg { padding: 5px 11px; border-radius: 4px; border: 0; background: transparent; box-shadow: none; font: 600 13px/1.4 var(--font-body); color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: background 120ms, color 120ms; }
.aic-seg:hover { background: rgba(0,0,0,0.03); }
.aic-seg.active { background: var(--card); border: 0.5px solid #fff; border-top-width: 1px; box-shadow: 0 1px 1.75px rgba(0,0,0,0.05); color: var(--foreground); padding: 4.5px 10.5px; }
.aic-ta-wrap { position: relative; }

/* Manual ⇄ AI Assist toggle (sits at the right of the prompt-field label) */
.aic-label-txt { display: inline-flex; align-items: baseline; gap: 1px; }
.aic-mode-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  background: var(--ps-neutral-115, #f2f2f3); color: var(--ps-neutral-600);
  border: 1px solid #fff; border-top: 1.5px solid #fff;
  font: 500 12px/1 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.aic-mode-toggle:hover { background: var(--ps-neutral-150, #e5e5e6); color: var(--foreground); }
.aic-mode-toggle.is-ai { background: var(--ps-primary-60); color: var(--ps-primary-700); }
.aic-mode-toggle.is-ai:hover { background: var(--ps-primary-75, #e5e7ff); }
.aic-mode-toggle i, .aic-mode-toggle svg { width: 13px; height: 13px; }

/* AI Assist mode — name/product + label pinned, chat fills the rest */
.aic-editor-fixed { flex-shrink: 0; padding: 18px 20px 8px; }
.aic-editor-fixed .aic-field--promptmode { margin-bottom: 0; }
.aic-chat.aic-chat--embedded { flex: 1 1 auto; min-height: 264px; }
.aic-chat--embedded .aic-chat-log { padding-top: 4px; }
.aic-textarea { width: 100%; min-height: 264px; padding: 8px 12px; border: 1px solid #fff; border-bottom: 1.5px solid #fff; border-radius: 8px; background: var(--background); font: 400 14px/1.5 var(--font-body); color: var(--foreground); outline: none; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; }
.aic-textarea::placeholder { color: var(--muted-foreground); }
.aic-textarea:focus { border-color: var(--ps-primary-500); border-bottom-color: var(--ps-primary-500); box-shadow: 0 0 0 3px var(--ps-primary-75, #e5e7ff); }

/* custom-output: edit link inside the active Custom segment */
.aic-seg-edit { color: var(--ps-primary-600); text-decoration: none; margin-left: 5px; }
.aic-seg.active:hover .aic-seg-edit { color: var(--ps-primary-700); }

/* custom-output: schema editor screen */
.aic-sch-body { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; background: var(--card); }
.aic-sch-intro { font: 400 13px/1.5 var(--font-body); color: var(--muted-foreground); margin: 0 0 14px; }
.aic-sch-list { display: flex; flex-direction: column; gap: 10px; }
.aic-sch-card { background: #fff; border: 1px solid #fff; border-top: 1.5px solid #fff; border-radius: 10px; box-shadow: var(--shadow-xs); padding: 13px 14px; }
.aic-sch-toprow { display: flex; align-items: flex-end; gap: 10px; }
.aic-sch-field { flex: 1; min-width: 0; margin-top: 11px; }
.aic-sch-toprow .aic-sch-field { margin-top: 0; }
.aic-sch-typef { flex: 0 0 148px; }
.aic-sch-lbl { display: block; font: 500 11px/1 var(--font-body); color: var(--muted-foreground); margin-bottom: 5px; }
.aic-sch-del { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: transparent; color: var(--ps-neutral-400); cursor: pointer; border: 0; transition: background 120ms, color 120ms; }
.aic-sch-del:hover { background: var(--ps-destructive-soft, #fef2f3); color: var(--destructive); }
.aic-sch-del svg { width: 16px; height: 16px; }
.aic-sch-desc { width: 100%; min-height: 52px; padding: 8px 11px; border: 1px solid #fff; border-bottom: 1.5px solid #fff; border-radius: 8px; background: var(--background); font: 400 13px/1.45 var(--font-body); color: var(--foreground); outline: none; resize: vertical; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.aic-sch-desc::placeholder { color: var(--muted-foreground); }
.aic-sch-desc:focus { border-color: var(--ps-primary-500); border-bottom-color: var(--ps-primary-500); box-shadow: 0 0 0 3px var(--ps-primary-75, #e5e7ff); }
.aic-sch-reqrow { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; font: 500 12.5px/1 var(--font-body); color: var(--ps-neutral-600); padding: 0; }
.aic-sch-botrow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.aic-tgl { width: 30px; height: 17px; border-radius: 999px; background: var(--ps-neutral-200); position: relative; transition: background 120ms; flex-shrink: 0; }
.aic-tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left 120ms; }
.aic-tgl.on { background: var(--ps-primary-500); }
.aic-tgl.on::after { left: 15px; }
.aic-sch-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; padding: 10px; border-radius: 8px; border: 1px dashed var(--ps-neutral-200); background: transparent; color: var(--ps-neutral-500); font: 500 13px/1 var(--font-body); cursor: pointer; transition: all 120ms; }
.aic-sch-add:hover { border-color: var(--ps-primary-300); color: var(--ps-primary-600); background: var(--ps-primary-50); }
.aic-sch-add svg { width: 15px; height: 15px; }
.aic-sch-add[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* schema editor — inline nested child properties (Option A) */
.aic-sch-children { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--ps-primary-200, #c7ccff); }
.aic-sch-children-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.aic-sch-children-lbl { font: 600 11.5px/1 var(--font-body); color: var(--ps-neutral-600); display: inline-flex; align-items: center; gap: 6px; }
.aic-sch-children-count { font: 600 10.5px/1 var(--font-mono); color: var(--ps-neutral-500); background: var(--ps-neutral-150); padding: 2px 6px; border-radius: 999px; }
.aic-sch-collapse { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer; font: 500 11.5px/1 var(--font-body); color: var(--muted-foreground); padding: 4px 5px; border-radius: 6px; transition: background 120ms, color 120ms; }
.aic-sch-collapse:hover { color: var(--foreground); background: var(--ps-neutral-100); }
.aic-sch-collapse svg { width: 14px; height: 14px; }
.aic-sch-children.collapsed .aic-sch-children-inner { display: none; }

/* custom structured output in the demo preview + grid cells */
.aic-jsondrawer { margin-top: 12px; }
.aic-cell-struct { display: inline-flex; align-items: center; font: 500 12px/1 var(--font-mono); color: var(--ps-primary-700); background: var(--ps-primary-60); padding: 3px 8px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* split run button (Add Column modal foot) — reuses the Search page's
   .card-split-btn styling; only the menu direction differs (opens upward,
   since the button sits at the bottom of the modal). */
.aic-foot .btn-split-menu { top: auto; bottom: calc(100% + 6px); }

/* Describe-with-AI — chat (left) + example preview (right) */
.aic-chat { display: flex; flex-direction: column; min-height: 0; }
.aic-chat-log { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.aic-msg { display: flex; gap: 9px; max-width: 100%; }
.aic-msg-ai { align-items: flex-start; }
.aic-msg-ava { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ps-primary-60); color: var(--ps-primary-600); }
.aic-msg-ava svg { width: 14px; height: 14px; }
.aic-bubble { padding: 9px 12px; font: 400 13.5px/1.5 var(--font-body); max-width: 82%; word-break: break-word; }
.aic-msg-ai .aic-bubble { background: var(--card); border: 1px solid #fff; border-top: 1.5px solid #fff; box-shadow: var(--shadow-xs); color: var(--foreground); border-radius: 4px 12px 12px 12px; }
.aic-msg-user { justify-content: flex-end; }
.aic-msg-user .aic-bubble { background: var(--ps-primary-500); color: #fff; border-radius: 12px 4px 12px 12px; }
.aic-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 33px; }
.aic-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--accent); color: var(--accent-foreground); border-radius: 8px; border: 0.5px solid #fff; border-top: 1px solid #fff; font: 500 13px/1.3 var(--font-body); cursor: pointer; transition: box-shadow 120ms, background 120ms; white-space: nowrap; }
.aic-chip:hover { background: var(--ps-primary-75); box-shadow: 0 0 0 2px var(--ps-primary-75); }
.aic-typing { display: inline-flex; gap: 4px; align-items: center; }
.aic-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ps-neutral-300); animation: aic-typing 1s infinite; }
.aic-typing span:nth-child(2) { animation-delay: 0.15s; }
.aic-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aic-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.aic-chat-composer { flex-shrink: 0; display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--card); }
.aic-chat-input { flex: 1 1 auto; resize: none; max-height: 120px; overflow-y: hidden; padding: 9px 12px; border: 1px solid #fff; border-bottom: 1.5px solid #fff; border-radius: 10px; background: var(--background); font: 400 13.5px/1.45 var(--font-body); color: var(--foreground); }
.aic-chat-input:focus { border-color: var(--ps-primary-500); box-shadow: 0 0 0 3px var(--ps-primary-75); outline: none; }
.aic-chat-send { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--primary); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.aic-chat-send svg { width: 16px; height: 16px; }
.aic-chat-send:disabled { opacity: 0.5; cursor: default; }
.aic-describe-pv .aic-pv-head { padding: 14px 18px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.aic-sch-childlist { display: flex; flex-direction: column; gap: 8px; }
.aic-sch-card-child { background: var(--card); padding: 11px 12px; }
.aic-sch-card-child .aic-sch-children { border-left-color: var(--ps-primary-150, #d9ddff); }
.aic-sch-child-empty { font: 400 12px/1.4 var(--font-body); color: var(--muted-foreground); padding: 2px 0 4px; }
.aic-sch-add-child { margin-top: 8px; padding: 8px; font-size: 12.5px; }
.aic-sch-depthcap { margin-top: 8px; font: 400 11.5px/1.4 var(--font-mono); color: var(--muted-foreground); text-align: center; padding: 6px; }

/* schema editor — JSON Schema preview pane */
.aic-sch-pv { background: var(--ps-neutral-75, #f9f9fa); }
.aic-sch-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
/* tabbed header: Preview / JSON viewer */
.aic-sch-pv-tabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--UI-elements-hollow); border-radius: 8px; border: 0.5px solid #fff; border-bottom-width: 1px; }
.aic-sch-pv-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; padding: 5px 11px; border-radius: 5px; font: 600 12px/1 var(--font-body); color: var(--muted-foreground); transition: background 100ms, color 100ms; }
.aic-sch-pv-tab svg { width: 13px; height: 13px; }
.aic-sch-pv-tab:hover { color: var(--foreground); }
.aic-sch-pv-tab.active { background: #fff; color: var(--ps-primary-700); box-shadow: 0 1px 2px rgba(20,20,23,0.08); }
/* schema-editor seeding state (left column) */
.aic-sch-seeding { display: flex; flex-direction: column; gap: 12px; }
.aic-sch-seeding-row { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--font-body); color: var(--ps-primary-700); }
.aic-sch-seeding-row svg { width: 15px; height: 15px; }
.aic-sch-seeding-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 10px; background: var(--card, #f9f9fa); border: 1px solid #fff; border-top: 1.5px solid #fff; }
.aic-sch-pv-eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.aic-sch-pv-eyebrow svg { width: 14px; height: 14px; }
.aic-sch-pv-meta { font: 500 11px/1 var(--font-mono); color: var(--muted-foreground); flex-shrink: 0; }
.aic-sch-pv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.aic-sch-json { margin: 0; font: 400 12.5px/1.65 var(--font-mono); color: var(--ps-neutral-600); white-space: pre; tab-size: 2; }
.aic-sch-json .jk { color: var(--ps-primary-700); }
.aic-sch-json .js { color: #1f7a4d; }
.aic-sch-json .jn { color: #b4690e; }
.aic-sch-json .jb { color: #9333a8; }
.aic-sch-pv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; text-align: center; padding: 24px; color: var(--muted-foreground); font: 400 13px/1.5 var(--font-body); }
.aic-sch-pv-empty svg { width: 22px; height: 22px; color: var(--ps-neutral-300); }
.aic-btn-text { background: transparent; border: 0; color: var(--ps-neutral-500); font: 500 13.5px/1 var(--font-body); cursor: pointer; padding: 8px 6px; border-radius: 8px; }
.aic-btn-text:hover { color: var(--foreground); }
.aic-btn-hollow { background: var(--UI-elements-hollow, #e6e6f3); border: 1px solid #fff; border-top: 1.5px solid #fff; color: var(--ps-neutral-950); font: 500 13.5px/1 var(--font-body); cursor: pointer; padding: 9px 14px; border-radius: 8px; transition: background 120ms; }
.aic-btn-hollow:hover { background: var(--ps-primary-75, #e5e7ff); }
.aic-foot .spacer { flex: 1; }
.aic-ta-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ps-neutral-400); }
.aic-ta-hint kbd { font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--ps-neutral-115, #f2f2f3); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 5px; color: var(--ps-neutral-600); }
.aic-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ps-primary-700); background: var(--ps-primary-60); border: 1px solid var(--ps-primary-75); border-radius: 5px; padding: 1px 7px; cursor: pointer; }
.aic-chip:hover { background: var(--ps-primary-75); }

/* field-ref `/` menu */
.aic-fieldmenu { position: absolute; z-index: 320; min-width: 220px; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,19,51,0.16), 0 2px 6px rgba(15,19,51,0.06); padding: 6px; max-height: 240px; overflow-y: auto; }
.aic-fieldmenu[hidden] { display: none; }
.aic-fm-head { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ps-neutral-400); padding: 5px 9px 4px; }
.aic-fm-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font: 400 13px/1 var(--font-body); color: var(--foreground); }
.aic-fm-item i { width: 11px; height: 11px; }
.aic-fm-ico { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ps-neutral-115, #f2f2f3); color: var(--ps-neutral-500); }
.aic-fm-item:hover, .aic-fm-item.active { background: var(--ps-primary-60); color: var(--ps-primary-700); }
.aic-fm-item:hover .aic-fm-ico, .aic-fm-item.active .aic-fm-ico { background: #fff; color: var(--primary); }

/* options strip — full-width row between the two-column body and the footer.
   Round DS checkboxes mirroring the app's .cb-box selection control. */
.aic-opts {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
  background: var(--card, #f9f9fa);
}
.aic-opt {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 500 13.5px/1.3 var(--font-body); color: var(--foreground);
  text-align: left;
}
.aic-opt-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--ps-neutral-200);
  background: var(--primary-foreground, #fcfcfd);
  transition: background 100ms, border-color 100ms;
}
.aic-opt:hover .aic-opt-box { border-color: var(--primary); }
.aic-opt-box.checked { background: var(--primary); border-color: var(--primary); }
.aic-opt-box i, .aic-opt-box svg {
  width: 12px; height: 12px;
  color: var(--primary-foreground); stroke: var(--primary-foreground);
}

/* footer */
.aic-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; flex-shrink: 0; border-top: 1px solid var(--hairline); background: var(--ps-neutral-75, #f9f9fa); }
/* "Column Upgraded!" one-time feature modal (shown after a legacy column upgrades on run) */
.aic-upgraded-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: rgba(20,20,30,0.45); animation: aic-up-fade 160ms ease; }
.aic-upgraded { width: 400px; max-width: calc(100vw - 48px); background: #fff; border: 1px solid #fff; border-top: 1.5px solid #fff; border-radius: 16px; box-shadow: var(--shadow-xl); padding: 28px 26px 22px; text-align: center; animation: aic-up-rise 180ms cubic-bezier(0.16,1,0.3,1); }
.aic-upgraded-ico { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ps-primary-60); color: var(--ps-primary-600); }
.aic-upgraded-ico svg { width: 24px; height: 24px; }
.aic-upgraded-title { font: 600 18px/1.2 var(--font-body); color: var(--foreground); margin-bottom: 8px; }
.aic-upgraded-body { font: 400 14px/1.55 var(--font-body); color: var(--muted-foreground); margin-bottom: 20px; }
.aic-upgraded-ok { min-width: 110px; justify-content: center; margin: 0 auto; }
@keyframes aic-up-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aic-up-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }.aic-foot .spacer { flex: 1; }
.aic-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 9px; font: 600 14px/1 var(--font-body); cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: all 0.15s; }
.aic-btn i, .aic-btn svg { width: 16px; height: 16px; }
.aic-btn-ghost { background: #fff; border-color: var(--ps-neutral-150); color: var(--foreground); }
.aic-btn-ghost:hover { background: var(--ps-neutral-100); }
.aic-btn-outline { background: #fff; border-color: var(--ps-primary-100); color: var(--ps-primary-700); }
.aic-btn-outline:hover { background: var(--ps-primary-60); }
.aic-btn-primary { background: var(--primary); color: #fff; }
.aic-btn-primary:hover { background: var(--ps-primary-600); }
.aic-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.aic-btn:disabled:hover { background: #fff; }
.aic-btn-primary:disabled:hover { background: var(--primary); }

/* preview pane */
.aic-pv-head { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 14px 18px; flex-shrink: 0; border-bottom: 1px solid var(--hairline); }
.aic-pv-head .aic-pv-section-label { margin: 0; }
.aic-pv-head .aic-label { margin-bottom: 0; }
.aic-pv-title { font-size: 13px; font-weight: 600; color: var(--foreground); flex: 1; }
.aic-pv-model { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ps-primary-700); background: var(--ps-primary-60); padding: 3px 8px; border-radius: 999px; }
.aic-pv-model i { width: 12px; height: 12px; }
.aic-pv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
/* Initial legacy state: the whole preview body is the migration call-out. */
.aic-pv-body--callout { padding: 14px; }
.aic-pv-callout { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; min-height: 100%; padding: 32px 28px; background: var(--ps-primary-60); border: 1px solid #fff; border-top: 1.5px solid #fff; border-radius: 14px; }
.aic-pv-callout-ico { width: 46px; height: 46px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--ps-primary-600); border-radius: 13px; border: 1px solid #fff; border-top: 1.5px solid #fff; box-shadow: var(--shadow-xs); }
.aic-pv-callout-ico i, .aic-pv-callout-ico svg { width: 22px; height: 22px; }
.aic-pv-callout-title { font: 600 16px/1.3 var(--font-body); color: var(--ps-primary-800); letter-spacing: -0.01em; }
.aic-pv-callout-body { font: 400 13px/1.55 var(--font-body); color: var(--ps-primary-800); max-width: 300px; text-wrap: pretty; }
.aic-pv-callout-btn { margin-top: 4px; }
.aic-pv-section-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ps-neutral-400); margin: 0 0 7px; }
.aic-pv-section + .aic-pv-section { margin-top: 16px; }
.aic-rowpick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; cursor: pointer; border: 1px solid var(--ps-neutral-150); border-radius: 9px; background: #fff; font: 500 14px/1 var(--font-body); color: var(--foreground); }
.aic-rowpick:hover { border-color: var(--ps-primary-100); }
.aic-rowpick .ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); }
.aic-rowpick .ico i { width: 16px; height: 16px; }
.aic-rowpick .nm { flex: 1; text-align: left; }
.aic-rowpick .chev { color: var(--ps-neutral-300); }
.aic-rowpick .chev i { width: 16px; height: 16px; }
.aic-resolved { font: 400 13px/1.55 var(--font-body); color: var(--ps-neutral-600); background: #fff; border: 1px solid var(--hairline); border-radius: 9px; padding: 11px 13px; }
.aic-resolved .tok { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ps-primary-700); background: var(--ps-primary-60); border-radius: 4px; padding: 0 4px; }
.aic-result { background: #fff; border: 1px solid #fff; border-top: 1.5px solid #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-xs); }
.aic-result-colhead { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ps-primary-700); margin-bottom: 9px; }
.aic-result-colhead i, .aic-result-colhead svg { width: 16px; height: 16px; }
.aic-result-val { font: 400 15px/1.5 var(--font-body); color: var(--foreground); }
.aic-result-val.num { font-family: var(--font-mono); font-size: 22px; font-weight: 600; }
/* Legacy ("As written") raw text \u2014 preserves the in-prompt template layout. */
.aic-result-legacy { font: 400 13px/1.6 var(--font-body); color: var(--foreground); white-space: normal; }
.aic-result-legacy strong { font-weight: 600; color: var(--ps-neutral-700); }
/* The shared JSON drawer uses a two-column label|value grid that assumes a wide
   container. The AI preview pane is narrow (~360px), which collapses the value
   column and breaks short values mid-word. Stack label-above-value here.
   NB: the drawer element itself carries .jd-root, so target it directly. */
.aic-jsondrawer.jd-root .jd-fact { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.aic-jsondrawer.jd-root .jd-fact-label { white-space: normal; }
.aic-jsondrawer.jd-root .jd-pill { white-space: nowrap; }
.aic-result-list { display: flex; flex-direction: column; gap: 6px; }
.aic-result-list .li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; }
.aic-result-list .li::before { content: "\2014"; color: var(--ps-primary-300); }
.aic-yesno { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font-body); padding: 6px 12px; border-radius: 999px; }
.aic-yesno.yes { background: var(--ps-secondary-50, #ebf4ee); color: var(--ps-secondary-700, #284e37); }
.aic-yesno.no  { background: var(--ps-destructive-soft); color: var(--ps-destructive); }
.aic-yesno i { width: 15px; height: 15px; }
.aic-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #ececf0 25%, #f5f5f7 50%, #ececf0 75%); background-size: 200% 100%; animation: aic-shimmer 1.3s infinite; }
.aic-skel + .aic-skel { margin-top: 9px; }
.aic-skel.w70 { width: 70%; } .aic-skel.w40 { width: 40%; } .aic-skel.w90 { width: 90%; }
@keyframes aic-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.aic-err { display: flex; gap: 10px; align-items: flex-start; background: var(--ps-destructive-soft); border: 1px solid #f6c9cc; border-radius: 10px; padding: 12px 14px; color: var(--ps-destructive); font-size: 13px; line-height: 1.5; }
.aic-err i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.aic-pv-actions { display: flex; gap: 8px; margin-top: 16px; }

/* inline value formats reused in the injected grid cells */
.aic-cell-num { font-family: var(--font-mono); font-weight: 600; color: var(--foreground); }
.aic-cell-badge { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--font-body); padding: 3px 9px; border-radius: 999px; }
.aic-cell-badge.yes { background: var(--ps-secondary-50, #ebf4ee); color: var(--ps-secondary-700, #284e37); }
.aic-cell-badge.no  { background: var(--ps-destructive-soft); color: var(--ps-destructive); }
.aic-cell-badge i { width: 12px; height: 12px; }

/* newly-added column flash */
@keyframes aic-flashcol { 0% { background: var(--ps-primary-60); } 100% { background: transparent; } }

/* ---- Legacy column migration ---------------------------------------
   The seg row wraps so segments never overflow the preview pane. */
.aic-seg-row { flex-wrap: wrap; }

/* Migration banner \u2014 AI-tinted surface, sits above the preview body. */
.aic-legacy-banner {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 18px; padding: 11px 13px;
  background: var(--ps-primary-60); color: var(--ps-primary-800, #2b3490);
  border: 1px solid #fff; border-top: 1.5px solid #fff;
  border-radius: 10px;
  font: 400 12.5px/1.5 var(--font-body);
}
.aic-legacy-banner-ico { flex-shrink: 0; display: inline-flex; color: var(--ps-primary-600); margin-top: 1px; }
.aic-legacy-banner-ico i, .aic-legacy-banner-ico svg { width: 15px; height: 15px; }
.aic-legacy-banner-msg { flex: 1; text-wrap: pretty; }
/* Banner + body share the pane; keep the body's own top padding tidy. */
.aic-legacy-banner + .aic-pv-body { padding-top: 14px; }
.aic-cancel-update { white-space: nowrap; }
.ws-grid .aic-new-col { animation: aic-flashcol 1.4s ease-out; }

/* preview pane states (always-open layout) */
.aic-pv-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 180px; text-align: center; color: var(--ps-neutral-400); font: 400 13px/1.5 var(--font-body); padding: 30px 24px; }
.aic-pv-hint-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ps-primary-60); color: var(--ps-primary-300); }
.aic-pv-hint-ico i { width: 22px; height: 22px; }
.aic-pv-rerun { position: relative; min-height: 180px; }
.aic-pv-rerun-ghost { filter: blur(3px); opacity: 0.5; pointer-events: none; user-select: none; }
.aic-pv-rerun-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.aic-pv-rerun-overlay .btn-secondary-cta[disabled] { opacity: 0.5; cursor: default; }
.aic-pv-rerun-cap { max-width: 240px; text-align: center; font: 400 12.5px/1.5 var(--font-body); color: var(--ps-neutral-500); text-wrap: pretty; }

/* preview row dropdown */
.aic-rowselect { position: relative; flex: 1; min-width: 0; }
.aic-rowpop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 330; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,19,51,0.16), 0 2px 6px rgba(15,19,51,0.06); padding: 6px; max-height: 264px; overflow-y: auto; }
.aic-rowpop[hidden] { display: none; }
.aic-rowopt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: 500 13px var(--font-body); color: var(--foreground); }
.aic-rowopt:hover, .aic-rowopt.active { background: var(--ps-primary-60); }
.aic-rowopt .ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ps-neutral-500); }
.aic-rowopt.active .ico { color: var(--primary); }
.aic-rowopt .ico i { width: 16px; height: 16px; }
.aic-rowopt .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }